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?
Related
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:
I have multiple landing page that contain the same element that I want to apply an underline to. I'm using Wordpress custom JS/CSS plugin to add the CSS for each page but I want to make easier by only matching a part of the ID name instead of doing it for each page individually.
This is the code for each LP:
#hi-call-button1-2{
text-decoration: underline;
}
And this the code I'm trying to make to work to no avail:
div[id*="hi-call-button1"] {
text-decoration: underline;
}
Here is what the code of an element looks like:
<div id="hi-call-button1-3" class="brz-css-uiyth brz-wrapper">
<div class="brz-d-xs-flex brz-css-qllru">
<div class="brz-rich-text brz-css-tuigc" data-custom-id="vgqcolqiepoliqsomiyljswpbpwviqeqybcq">
<p class="brz-fs-sm-17 brz-lh-lg-1_9 brz-lh-sm-im-1_6 brz-lh-xs-im-1_6 brz-ls-lg-0 brz-ls-sm-im-0 brz-ls-xs-im-0 brz-ff-overpass brz-ft-google brz-fw-lg-400 brz-fw-sm-im-400 brz-fw-xs-im-400 brz-text-lg-justify brz-text-xs-center brz-text-sm-right brz-fs-lg-24 brz-fs-xs-im-23">+1 (800) 123-4567</p>
</div>
</div>
</div>
The problem is that it works in JsFiddle here but not in my pages. I tried adding !important with no success. I don't know how to troubleshoot the problem. Any help would be appreciated.
EDIT: Here is a test page that replicate the problem https://1on1finance.com/test/
The reason it's not working is that is this CSS http://prntscr.com/uiwac5
html body div[id^="hi-call-button1"] a.link--external {
text-decoration: underline !important;
}
Use the above CSS this will override the CSS in your website.
Please clear your autoptimize cache to reflect the CSS changes.
I see you already have
you may try to add this to: appearance/customize
a[href]{
text-decoration: underline !important;
}
if it doesn't work, try adding this :
.brz .brz-rich-text .link--anchor, .brz .brz-rich-text .link--external, .brz .brz-rich-text .link--popup {
text-decoration: underline !important;
}
PS: it is not a good practice to use the (!important flag)... as it will bother any other developer who may work on the same project in the future...
So if the above code worked fine, try removing the (!important flag) and test if it works... if it doesn't, then you have no other option...
try this css
div[id^="hi-call-button1"] .link--external {
text-decoration: underline ;
}
You will need to overwrite the rules already being applied. Remember if you are using Autoptimize to 'Aggregate CSS files' and/or 'Also aggregate inline CSS?' it might be effecting the load order of rules so you can turn these options off and reload your cache to check.
.brz div[id^="hi-call-button1"] .brz-rich-text .link--external {
text-decoration: underline;
}
By using the two-character operator “^=” we can target the div element that starts with val "hi-call-button1"
Im not sure if this is resolved or not. I managed to get it working on your test page like this
div[id^="hi-call-button1"] a {
text-decoration: underline !important;
}
I am new to CSS and have the following problem.
I have created a Joomla 3.3 site using a free template called Prismatic.
My problem arises when i write an article and use bullets at some point.
Bullets show fine on the backend but i get nothing on the frontend.
After reading various posts and forums i got the idea it has to do with the template.css but thats as far as i can get..
My site demo address is "white.dr-tsekouras.gr"
and the axact url where the bullets dont show is:
http://white.dr-tsekouras.gr/index.php/2014-10-13-12-15-44
Sorry the site is in greek
Can you please help ..
You just need to add your own custom styling to your lists.
ul {
list-style: disc;
}
Then, get these styles to be included when your website is loaded. The simplest way would be to create a separate CSS file, and reference it directly in your header.php file of your template.
This is a tricky one...
There is
body {
color: #fff;
}
on several places of your CSS. That means bullets are there, but white. Background is white as well. Remove that color: #fff;.
EDIT: Added DevTools print screen showing the problem:
Just remove this from basics.css
ul {
list-style: outside;
padding-left: 0;
}
BTW, this template is pretty poorly coded. I'm anticipating it will give you more headaches than this!
I've built a rails application and now want to change the look of it. Currently I was able to make the background color of the navbar white (how I want it), but currently the text is a light gray and when it is hovered over it becomes white, which mean invisible. How do I fix this?
Here is the massive file with my styling custom.css
https://raw.github.com/MarcusHSmith/BattleOfTheBands/master/app/assets/stylesheets/custom.css.scss
Any help would be appreciated.
I would like to change the text to default to black. thanks
In your custom.css try:
.navbar-inverse .navbar-nav>li>a:hover {
color: #707070;
}
.navbar-inverse .navbar-nav>li>a {
color: #000;
}
(P.S. It's a bit hard to determine what exactly will work because you haven't provided the HTML that this CSS is applied to. I had to look at your github repo views erbs to determine that you are using .navbar-inverse. if you had a working page to link to or a jsfiddle, that would be even better.)
I am developing a website from scratch and I am having some trouble with my anchor tags.
I use the following css class in order to change the nav links state:
.nav-color:hover a{
color: #e67d20;
}
But insted of changing the link which the mouse is over, it changes all three nav links together. I hope you can help me, this never happened to me before!
Here is the sample code: http://jsfiddle.net/yYnGK/
Thanks!
Try like this:
.nav-color a:hover{
color: #e67d20;
}
DEMO
Visit Pseudo Classes CSS Selctors