• 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

rwm1962

Active member
#1
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:
#2
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:


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;
}


To change the text size of subscription, add the following to extra.css:
Code:
.Subscription { font-size: 11pt; }

If you wanted too, you could now style the subscribe text if you chose to.
 
Last edited:

rwm1962

Active member
#5
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
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:
View attachment 106370



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

View attachment 106371



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

View attachment 106372

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

Is this possible?

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

rwm1962

Active member
#8
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
 

rwm1962

Active member
#12
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.