Reply
 
Thread Tools Display Modes
  #1  
Old 01-28-2012, 09:39 PM
Paul Ross's Avatar
Paul Ross Paul Ross is offline
Junior Member
 
Join Date: Jan 2012
Posts: 2
Question Please help find the CSS Selector path

Hi there. I would like to make some changes to the ecwid-AddressForm on the ecwid-productBrowser ecwid-productBrowser-CheckoutShippingAddressPage page, but can't figure out the correct CSS selector path.

According to the w3.org site, I should be using the descendant pattern "E F - Matches any F element that is a descendant of an E element." And in tests on some basic styling reveals this works as expected:

HTML Code:
<style type="text/css">

.item1 #text { color: red;}

</style>

<div id="container">
  Test1<br />
  <div class="item1">
    Test2<br />
    <div class="property">
       Test3<br />
       <div id="list">
         <span id="text">Test4</span>
       </div>
    </div>
  </div>
  <div class="item2">
    <span id="text">Test5</span><br />
  </div>
</div>
Only Test4 is red.


I have tried all of the following without success:

div.ecwid-productBrowser ecwid-productBrowser-CheckoutShippingAddressPage div.ecwid-AddressForm {

}



.ecwid-productBrowser ecwid-productBrowser-CheckoutShippingAddressPage .ecwid-AddressForm {

}



ecwid-productBrowser ecwid-productBrowser-CheckoutShippingAddressPage ecwid-AddressForm {

}


Attached is the CSS.

Bear in mind there is another ecwid-AddressForm on the ecwid-productBrowser ecwid-productBrowser-CheckoutPaymentDetailsPage page which I want give a different style to.
Attached Thumbnails
Click image for larger version

Name:	Snap2.jpg
Views:	21
Size:	170.0 KB
ID:	1045  

Last edited by Paul Ross; 01-28-2012 at 09:46 PM.
Reply With Quote
  #2  
Old 02-01-2012, 12:23 PM
Matt K's Avatar
Matt K Matt K is online now
Ecwid Team
 
Join Date: Oct 2011
Posts: 4,874
Default

Hello,

Using the mentioned descendant selectors in custom CSS themes in Ecwid is certainly correct. The code fragments you provided didn't work because of the way how you indicate CSS classes in them. CSS class selectors should always start with a period ('.'). For example:
Code:
.ecwid-productBrowser .ecwid-productBrowser-CheckoutShippingAddressPage .ecwid-AddressForm {
  … 
}
I also want to note that such a method is used when there are several HTML elements with same class. As you rightly concluded, the ecwid-AddressForm appears in more than one place in Ecwid, so in order to specify where the changes should be applied, you need to use the descendant selectors scheme. But in most cases there is no need to specify the whole sequence of the parent and descendant HTML elements. For example, in your case, you don't have to include the '.ecwid-productBrowser', because the ecwid-AddressForm never appears outside the product browser.

As a result, please use the following formats for setting styles for the shipping address form:
Code:
.ecwid-productBrowser-CheckoutShippingAddressPage .ecwid-AddressForm {
 … 
}
and this is for the payment details address form:
Code:
.ecwid-productBrowser-CheckoutPaymentDetailsPage .ecwid-AddressForm {
 … 
}
__________________
Matt K
Ecwid Team

Ecwid Guide for Beginners

Ecwid Help Center

Ecwid video tutorials
Reply With Quote
  #3  
Old 02-19-2012, 04:23 AM
Paul Ross's Avatar
Paul Ross Paul Ross is offline
Junior Member
 
Join Date: Jan 2012
Posts: 2
Default

Thank you Matvey, that is exactly what I needed!

You guys are awesome!

Cheers
Paul
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 05:53 PM.
Powered by vBulletin® Version 3.8.6. Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.