Couple of questions.
1- Where and or what would be the style sheet name for me to access via an external editor. Adding things to ‘styles.css’ does little to nothing on my end. Just would rather have use my own editor which guides me with code.
2- I’m going mildly insane trying to decipher and pinpoint the right classes for the following:
Changing the link and hover colors for every instance of H1, H2, H3 as well as any links in the body.
Had made headway at some point only to find that everything else was changing color as well…such as those links in the footer, menu, breadcrumbs etc…
Please help.
thanks.
Hello,
1) For custom css please use the theme panel-> custom code section https://www.screencast.com/t/9FYBuFG1YNs
If you say that using style.css has little to no effect it means your code is not proper and will not apply. Please use the browser inspector and cahck to see if your code applies to the specific element or there is another more powerful selector than yours taking over.
2)Each of the examples you mention are affected by the theme accent color in the theme panel: https://www.screencast.com/t/NvGdVkg2s6
Thanks.
1- Yes, I’m quite familiar with the custom code section. But as I mentioned above, it doesn’t help one in coding.
‘and mind you, using the following simple code does nothing in the style.css file when I edit it and upload it. YET, it’ll work fine either in your custom code section OR if I edit the style.css through the Appearance Editor. Strange!
p a {
color: #900;
}
/* mouse over link */
p a:hover {
color: #09F;
}
h1 a,
h2 a,
h3 a {
color:#900;
}
2- ‘and one is able to adjust the hover as well? Having merely an accent color to play with just won’t do.
Hello,
You CSS code will not be able to affect the elements you want properly anywhere you place it. No matter if it’s the custom code or the style.css. You use simple css selectors. Our theme has classes and id’s set to the html elements that are significantly much more powerful selectors than the code you use. The problem is your code, not the theme implementation of css. Please provide instructions to exactly where you want your color changes to apply to and I will try to help providing the proper css code. Please note that you can change hover colors, text colors in the theme panel directly in the theme colors section. The general theme color will affect most of the theme elements. The hover color can be changed as well but only for the main menu: https://www.screencast.com/t/Q3hkiKfydb
Thanks.
Hi Bogdan,
What I need is to be able to assuredly change the Link and Hover colors for any instance anywhere for body (only) PLUS for any body text.
I’m somewhat familiar with your classes only in as far as realizing there are quite a number. Had tried the below code and id DID work up to a point; then had to resort to using simpler code. Not that I’m a pro at CSS…I’ve barely been just beyond a beginner for the past 10 years. lol.
h1 >a,
h2 >a,
h3 >a,
.td-page-content p a,
.td-post-content p a,
.wpb_text_column a,
.td_block_text_with_title a,
.woocommerce #tab-description a,
.mce-content-body a{
color:#900 !important;
}
h1>a:hover,
h2>a:hover,
h3>a:hover,
.td-page-content p a:hover,
.td-post-content p a:hover,
.wpb_text_column a:hover,
.td_block_text_with_title a:hover,
.woocommerce #tab-description a:hover,
.mce-content-body a:hover {
color:#06F !important;
}
While I’m at it…there’s the following code below. Tried to hunt down every instance of blockquote.
What I don’t get is why there’s a flash of the original style you folks have for blockquotes showing up before showing the version that I want.
What am I missing?
.post blockquote p, .page blockquote p, .td-post-text-content blockquote, .td-page-content blockquote p {
color:#096 !important;
font-size:20px !important;
line-height: 24px !important;
font-weight:bolder !important;
}
Hello cyberfyber,
I suppose that you are referring to the appearance of a flash/time loading when you enter on your website after you have added your above custom CSS, right? This behavior appears when you have additional customization through custom CSS code. Please notice that the CSS is working in cascade and the first time will take the code from style.css that is set it by default and then the theme will take the custom code that you have changed from Theme panel and practically this flash is generated by this cause. As a workaround, you have to check your style.css and try to add directly in this file your desired custom code. So, if your problem is still there, please try to revert the theme to the default settings, without any customizations and let us know how it goes. Also, you can try to make a new fresh install from scratch with the latest version of the theme and check the results. Also, please make sure every time you cleared caches. Noticed that the only files where you will have to edit are style.css.
If you are not aware of the steps which are needed to take in this regard, please consider hiring a freelancer/developer to help you because we cannot provide custom work at the moment, sorry!
Thanks for your understanding!
Hi,
I have tested some of the code you mention and it seems to work properly. For example the modification to the link color in the post content, and the blockquote
– https://www.screencast.com/t/CSlPW65DYB
Most of the font properties of blockquotes can be changed in the theme panel, except the color modification
– https://www.screencast.com/t/6BHQmcP4tX
Blockquote color can be changed in the theme panel as well
– https://www.screencast.com/t/VaBVOKk63S
Where there are no settings available, you could use the browser inspector and identify the elements and classes present, in order to create custom code
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
If there is a visible delay present before the code is applied, try entering the custom doe directly in the theme stylesheet.
Thanks
