Docs

[Dil]

Hi there,

The title of my products in the shop page is currently using white, which is the color for my h3 tags, and there, when it is pointed it becomes yellow which is my colour for my links ( not hover color ). So I’m trying to override the white to yellow and its yellow to white, over riding the h3 class and link classes. But I can’t seem to get a css to work from customizer because I can’t add ID to it and if i change it for h3, it will change it for all h3 on my site.

I tried adding page id to the class too but didn’t seem to work when i did it.

I tried using the page editor to add a body class to insert it but it didnt work.

I would appreciate some help!

[Dil]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.woocommerce li.product .entry-header h3 a {
    color: hsl(51, 100%, 50%);
}
.woocommerce li.product .entry-header h3 a:hover {
    color: #fff;
}

Hope this helps.

Cheers!

[Dil]

May I ask how you found this? I couldn’t figure it out in inspect element.

[Jade]

Hi there,

You should be able to create a CSS selector for it based on the inspector.

See screenshot below:

[Dil]

This reply has been marked as private.

[Dil]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back. This is simply done with Developers Tool and if you are used to with that then it should be easy. However can’t access your site to help with other issue – http://prntscr.com/e8i52n

[Dil]

This reply has been marked as private.

[Lely]

Hi Dil,

For the heading color for this page:http://www.dilyar.ca/accomplishments, see this:http://screencast-o-matic.com/watch/cbnoQL667h. You can see how I click the plus sign and it adds the correct selector?

h1.h-landmark {
    color: red;
}

But then that will work for every page. We need to filter it work on portfolio page only. We have to add the portfolio page body class. So it will be like this:

.page-template-template-layout-portfolio h1.h-landmark {
    color: red;
}

You can see this page-template-template-layout-portfolio on the last part of the screencast.

Regarding the prompt box, it is because of the following CSS:

.x-prompt-section.x-prompt-section-message {
    width: 46%; 
    font-size: 1em;
    line-height: 3;
}

Update to this:

@media (min-width: 980px){
.x-prompt-section.x-prompt-section-message {
    width: 46%; 
    font-size: 1em;
    line-height: 3;
}
}

Hope this helps.

[Author]

Posts