Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Trying to style the login page

Trying to style the login page

Views: 903

Results 1 to 5 of 5
9 Oct 2012, 9:07 AM
#1
inxie avatar

inxie

Zen Follower

Join Date:
Jul 2011
Posts:
177
Plugin Contributions:
0

Trying to style the login page

Hi, my login page is really ugly and I am trying to style it with CSS, the problem I am having is that the I can't elements individually. The page is http://www.pazzle.co.uk/index.php?main_page=login.

For instance I want to have the billing section float left and the shipping section float right so they are side-by-side, but I can't target those individually and so I end up changing more than I intended. How can I have more control over the elements?

Ideally I need it to look similar to my no_account page here: (need to have something in cart to see this)
http://www.pazzle.co.uk/index.php?main_page=no_account

9 Oct 2012, 12:38 PM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Trying to style the login page

.loginFieldsetLeft>form>div>fieldset {float: left;}/*billing*/
.loginFieldsetLeft>form>div>fieldset+fieldset {float: right;}/*shipping*/
.loginFieldsetLeft>form>div>fieldset+fieldset+fieldset {float: left;}/*login info*/
.loginFieldsetLeft>form>div>fieldset+fieldset+fieldset+fieldset {float: right;}/*newsletter*/
``` Tested on your page.
9 Oct 2012, 11:55 PM
#3
inxie avatar

inxie

Zen Follower

Join Date:
Jul 2011
Posts:
177
Plugin Contributions:
0

Re: Trying to style the login page

gjh42:

.loginFieldsetLeft>form>div>fieldset {float: left;}/billing/
.loginFieldsetLeft>form>div>fieldset+fieldset {float: right;}/shipping/
.loginFieldsetLeft>form>div>fieldset+fieldset+fieldset {float: left;}/login info/
.loginFieldsetLeft>form>div>fieldset+fieldset+fieldset+fieldset {float: right;}/newsletter/


Thanks again, I wonder if your a machine sometimes:) lol.

What does 'fieldset+fieldset+fieldset+fieldset' do exactly? How does that work?
10 Oct 2012, 1:45 AM
#4
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Trying to style the login page

That is called "adjacent selectors", and means (in this case) it applies to a fieldset that is immediately preceded in the output by three other fieldset elements at the same hierarchical level. (It would also apply to a fieldset preceded by four or more other fieldsets.)

Since none of the elements under .loginFieldsetLeft have classes or ids, it is necessary to describe the child element path all the way down from there, so the rule applies only to that page. Otherwise it could apply to any page that happened to have that sequence of elements.

11 Oct 2012, 9:08 AM
#5
inxie avatar

inxie

Zen Follower

Join Date:
Jul 2011
Posts:
177
Plugin Contributions:
0

Re: Trying to style the login page

gjh42:

That is called "adjacent selectors", and means (in this case) it applies to a fieldset that is immediately preceded in the output by three other fieldset elements at the same hierarchical level. (It would also apply to a fieldset preceded by four or more other fieldsets.)

Since none of the elements under .loginFieldsetLeft have classes or ids, it is necessary to describe the child element path all the way down from there, so the rule applies only to that page. Otherwise it could apply to any page that happened to have that sequence of elements.

I cannot thank you enough for the support you have given me on many so many occasions, god bless you.