1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Account Upgrades CCS help please

Discussion in 'Styling and Customization Questions' started by rwm1962, May 18, 2015.

  1. rwm1962

    rwm1962 Active Member

    I'm trying to get from this:

    Untitled-2.gif

    To this:
    Untitled-1.gif

    By trial & error I've managed to get the button & cost over to the left but can't get the title 'subscription' above .

    Could someone help with the CSS please?

    TIA
     
    Last edited: May 18, 2015
  2. Demon

    Demon Active Member

    Just took a quick look. Go to account_upgrades template and find the following:
    Code:
    <xen:foreach loop="$available" value="$upgrade">
                <li class="primaryContent upgrade">
                        <form action="{$payPalUrl}" method="post" class="upgradeForm">
                            <div class="cost">{$upgrade.costPhrase}</div>
    
    add
    Code:
    <span class="Subscription">{xen:phrase Subscription}</span>
    
    ---------
    Code:
    <xen:foreach loop="$available" value="$upgrade">
                <li class="primaryContent upgrade">
                        <form action="{$payPalUrl}" method="post" class="upgradeForm">
                               <span class="Subscription">{xen:phrase Subscription}</span>
                            <div class="cost">{$upgrade.costPhrase}</div>
    
    The outcome will be:
    [​IMG]

    That's what I came up with in a short amount of time. @Brogan should be able to post a better way for you, though.

    Add the following to Extra.css to get the following:
    Code:
    .upgradeForm {
      float: left!important;
      width: 150px;
      font-size: 11px;
    }
    
    [​IMG]

    To change the text size of subscription, add the following to extra.css:
    Code:
    .Subscription { font-size: 11pt; }
    
    [​IMG]
    If you wanted too, you could now style the subscribe text if you chose to.
     
    Last edited: May 18, 2015
    rafass, rwm1962 and Brolious like this.
  3. rwm1962

    rwm1962 Active Member

    Many thanks - that's much appreciated.
     
    Demon likes this.
  4. Demon

    Demon Active Member

    Glad I was able to help.
     
  5. rwm1962

    rwm1962 Active Member

    I've just tried it & the Upgrade title is giving me problems unfortunately. By default it's on the left. If I move the button/rate to the left it pushed the upgrade title to the right.

    Before:
    Untitled-2.jpg



    With additional code added to upgrade_accounts template & code added to extra.css:

    Untitled-1.jpg



    Additional code removed form upgrade_accounts template (gave a duplicate upgrade title) & a 20px top margin added to the button/rate in extra.css:

    Untitled-3.jpg

    The upgrade title is pushed right. I'd like it back to the left.

    Is this possible?

    Thanks
     
  6. Demon

    Demon Active Member

    Is your style a custom one? What I posted was done on a default style and I had to problems.
     
  7. rwm1962

    rwm1962 Active Member

    Default but with a few tweaks on colours etc. I'll set up a vanilla test site & take a look.
     
  8. rwm1962

    rwm1962 Active Member

    Forgot - I already had a default set up.

    Same default - Upgrade title on the left - button/rate way over on the right

    upload_2015-5-18_12-25-5.png



    Add the extra code to account_upgrade template & to extra.css:

    upload_2015-5-18_12-33-26.png



    Without the extra code in account_upgrade template:
    upload_2015-5-18_12-30-38.png



    Add a top margin to extra.css:

    upload_2015-5-18_12-30-8.png
     
  9. Demon

    Demon Active Member

    There is 2 Subscription buttons, remove 1 and see if there's any change. If not @Dylan V or @Maru may be able to provide some in-sight.
     
  10. rwm1962

    rwm1962 Active Member

    2 buttons? I only have the one upgrade option.

    Cheers
     
  11. Demon

    Demon Active Member

    Sorry, I meant the text.

    [​IMG]
     
  12. rwm1962

    rwm1962 Active Member

    Ah - got you. The first instance of 'Subscription' is the actual title of the upgrade. The 2nd instance is from the code you gave me to put into account_upgrade template. I realised that was causing duplication of the text so removed that as per the last screenshot in both my last screenshot posts.
     

Share This Page