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

Author Posts

1101blueli April 4, 2020 at 3:28 am

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 April 4, 2020 at 10:37 am

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 April 4, 2020 at 11:55 am

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 April 4, 2020 at 3:26 pm

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 April 4, 2020 at 5:53 pm

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

thanks

Sebastian April 6, 2020 at 9:15 am

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

You must login or register to reply to this topic.