[Paul Ross]

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:

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

[Makfruit]

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:

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

.ecwid-productBrowser-CheckoutShippingAddressPage .ecwid-AddressForm {
 … 
}

and this is for the payment details address form:

.ecwid-productBrowser-CheckoutPaymentDetailsPage .ecwid-AddressForm {
 … 
}

[Paul Ross]

Thank you Matvey, that is exactly what I needed!

You guys are awesome!

Cheers
Paul