Hello how can I target my custom css to use on only a particular page?

This topic contains 5 replies, has 2 voices, and was last updated by  Sebastian 4 months ago.

Author Posts

1101blueli

I have a custom style for select2 input field, because they don’t have a unique class or ID, so I only put the code: e.g:

.select2-search__field {
background-color: #5e5e5e;
color: white;
border-color: #2f2f2f;
}
.select2-results {
background-color: #1b1b1b;
border-radius: 0px;
}
.select2-container–default .select2-results__option[data-selected=true] {
background-color: #2f2f2f;
}

I want avoid them apply on all the site.
I am using Elementor building the site. I have tried to add a class for the container for the checkout section. It does not work. therefore I would like to know if there any way to assign them only on a particular page? my checkout page in this case.

ref
https://rydu.com/checkout/

thanks


Sebastian

Hey, to make your Microthemer selectors page-specific you can enable the page-id modifier when creating selectors. See this video: https://screencast-o-matic.com/watch/cFVIX4olWj

Please let me know if that solves your issue.

Thanks!
Sebastian


1101blueli

My selector very massing, I am still not very familiar working with MT

is that mean if I put .mt-516{} to the top, the blow code will run only in this post ID?

thanks

//here is just part of the copy of the selector

.mt-516 {

}
.rydu-checkout th.product-name {
width: 60%;
}
.rydu-checkout td.product-name {
font-weight: 700;
color: #1e1e1e;
}
.rydu-checkout .variation-Color,
.rydu-checkout .variation-Size,
.rydu-checkout .variation-product-type,
.rydu-checkout .variation-product-brand {
font-size: 11px;
font-weight: 500;
line-height: 1.3em;
}
.woocommerce-page.woocommerce-checkout #customer_details h3,
.woocommerce.woocommerce-checkout #customer_details h3 {
border-color: #777777;
}
.shipping td {
font-weight: 400;
}
#order_comments {
height: 150px;
width: 100%;


Sebastian

Hey,

I think I see what you mean – you’ve already created lots of selectors and would like to update them manually? You can edit selector code via the selectors menu at the top left. You will need to prefix each selector with .mt-515 and a space (515 is the page id I see when I visit https://rydu.com/cart/).

So the code would look like this:

.mt-515 .rydu-checkout th.product-name {
width: 60%;
}
.mt-515 .rydu-checkout td.product-name {
font-weight: 700;
color: #1e1e1e;
}
.mt-515 .rydu-checkout .variation-Color,
.mt-515 .rydu-checkout .variation-Size,
.mt-515 .rydu-checkout .variation-product-type,
.mt-515 .rydu-checkout .variation-product-brand {
font-size: 11px;
font-weight: 500;
line-height: 1.3em;
}
.mt-515 .woocommerce-page.woocommerce-checkout #customer_details h3,
.mt-515 .woocommerce.woocommerce-checkout #customer_details h3 {
border-color: #777777;
}
.mt-515 .shipping td {
font-weight: 400;
}
.mt-515 #order_comments {
}

Notice how you have to repeat .mt-515 with selectors that use commas too.

Microthemer adds a unique mt-xxx class to the body tag on every page. And so referencing that unique class will limit the scope of your selectors to the current page.

Does that make sense?


1101blueli

very clear! Now I know how it works. Now I can remove those non-necessary class .rydu-checkout
😛

thanks


Sebastian

OK great, please let me know if you need help with anything else 🙂

You must login or register to reply to this topic.