I have an anomaly. So, I'm trying to edit\remove the background in the .site-header-main of my of a site. I edited via theme editor however, seems that such is not taking as the code is in the index file. Here is the website: https://retrocarsales.com/
Code in theme CSS after change via style.cc and\or theme editor:
.site-header-main, .site-description, .site-title-text a {
background: none;
}
.site-header-main {
border-bottom: none;
}
Code in (Index):258 when inspecting:
.site-header-main, .site-description, .site-title-text a {
background: #444444!important;
color: #ffffff!important;
}
.site-header-main {
border-bottom: 1px solid #444444!important;
}
NOTE: The code above is NOT found in Domain\WP-Content\Theme\index or in Domain\index I only find the related code in domain/wp-content/themes/theme-name/style.css in which there its good but its not executed on live site ... seems the site gets code from index not style.css
Thank You
You should never direct edit the theme's file if you are not a developer - this may be break your site or even make your site down if you make mistakes.
Instead of that, you can safely add your custom CSS by go to Appearance > Customize > Additional CSS (remember to add "!important" to overwrite current CSS rules).
See below image for more detail:
Related
I'm using a video plugin for my wordpress site.
I want to change the width of the videos.
However it seems like I'm not using the correct path for the id, as I'm not seeing any changes from my css styling.
This is the info I have gotten from using the editor in chrome:
I want to change the inline styling, so I read I had to use !important to overrule it. But for testing I just used bg-color.
I have tried to access the video with these attempts with no success:
.vjs-tech {
background-color: red;
}
#player_html5_api.vjs-tech {
background-color: red;
}
#player_html5_api {
background-color: red;
}
video#player_html5_api {
background-color: red;
}
After a good chat with Gosi, I found the issue to be the video I wanted to be changed had its css located in another folder than the regular wordpress css folder, since it's a plugin. So I had to go in the plugins css folder and make my changes there.
I haved tried to modify the css of a plugin background-color: blue . I have added in the correct file:
.woocommerce ul#shipping_method {
display: none;
background-color: blue;
}
Inspecting the shipping method I can see the code is just display:none. I also see the css file from which this css comes, and opening it on "Sources" would not display my change.
I have also tried to override the file in my child theme like:
Parent structure of the file :
/wp-content/plugins/shipping-zones-by-drawing-for-woocommerce/assets/szbd.css
Child structure :
/wp-content/themes/my-theme/shipping-zones-by-drawing-for-woocommerce/assets/szbd.css
Still I can only see the original css file in the Google Chromes's Sources tab.
Maybe it has something to do with the way it is loaded in the .js file: wp_enqueue_style('shipping-del-aro-style', SZBD_PLUGINDIRURL . 'assets/szbd.css', SZBD_VERSION);
I am currently creating a Sphinx document using the sphinx_rtd_theme. I would like to know how to change the color of visited links.
So far, I have only found possibilities using the classic theme (using html_theme_options in conf.py file). I however need to use
sphinx_rtd_theme.
I guess there are possibilities using a local css file (in _static). For instance, I already use a css file to specify the theme color:
.wy-side-nav-search, .wy-nav-top {
background: #0b750a;
}
Any hints?
Solved, quite easy (...). I just had to add this in my css file:
a:visited {
color: blue;
}
For changing colors in some part of a WordPress theme, I've changed the background or color property of those elements (found using inspect in chrome) in style.css. But it is not changing in the theme.
I also tried making child theme of the theme. But no result.
For example, the style.css contains -
#header .nav_bg {
background: #7bae39;
margin-bottom: -30px;
padding: 5px;
}
I've changed it to -
#header .nav_bg {
background: #109DE4;
margin-bottom: -30px;
padding: 5px;
}
N.B: I've tried with SiteOrigin Custom CSS plugins, and it works with that. But I want to do it by changing CSS.
Thanks in Advance.
Use higher selector, element that contains that div or use
!Important before ;
Just add code to custome css in WordPress
If the same selector works with other plugins you might wanna try a few test to try to see what's going on.
Go the page and look for the style you just added on the
inspector. You can see by selecting the element if it is getting
applied and overridden by other css rule. In that case you can
update the rule to be more specific.
If the css is not showing up at all, you can try:
clearing your browser cache
check the page on incognito / a different browser
Hope it helps,
I'm using the Directory+ theme from ait themes on wordpress. I'm very bad at css and have only just started learning the basics.
There is a custom css section built into the theme to overwrite little bits and pieces. I have plenty in there and it's all working perfectly fine. However I'm struggling with changing something.
Why isn't this the correct way to change the colour? Can you please tell me how to write it the correct way and explain why this isn't working.
#elm-search-form-5-main a, #elm-search-form-5-main a:hover {
color: #ffffff;
}
Much appreciated.
This is because you use same color for default and hovered link
Try to do it like this
This css for default link
#elm-search-form-5-main a{
color: #ffffff;
}
And this css for hovered link
#elm-search-form-5-main a:hover {
color: #000000;
}
Look at this docs
your code is ok. Have you tested it in your web-browser developer tools to see if your element elm-search-form-5-main achange the color?