XF 1.4 Account Upgrades CCS help please

[rwm1962]

I'm trying to get from this:



To this:


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

 

[Deceptive]

Just took a quick look. Go to account_upgrades template and find the following:

<xen:foreach loop="$available" value="$upgrade">
            <li class="primaryContent upgrade">
                    <form action="{$payPalUrl}" method="post" class="upgradeForm">
                        <div class="cost">{$upgrade.costPhrase}</div>

add

<span class="Subscription">{xen:phrase Subscription}</span>

---------

<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:

.upgradeForm {
  float: left!important;
  width: 150px;
  font-size: 11px;
}

To change the text size of subscription, add the following to extra.css:

.Subscription { font-size: 11pt; }

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

 

[rwm1962]

Many thanks - that's much appreciated.

 

[Deceptive]

Many thanks - that's much appreciated.

Glad I was able to help.

 

[rwm1962]

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:




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





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



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

Is this possible?

Thanks

 

[Deceptive]

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]

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

 

[rwm1962]

Forgot - I already had a default set up.

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





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





Without the extra code in account_upgrade template:




Add a top margin to extra.css:

 

[Deceptive]

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.

 

[rwm1962]

2 buttons? I only have the one upgrade option.

Cheers

 

[Deceptive]

2 buttons? I only have the one upgrade option.

Cheers

Sorry, I meant the text.

 

[rwm1962]

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.