Firstly, the site is called, anarrayofstars.com/temp/.
So I am trying to change the background colour on Bar Isabel and the other portfolio items. I want them all to be different colours on idle state and hover state.
I have tried everything to change the background colour for just the one module
- I targeted just module i.e #module-1280, no luck.
- I targeted the all the modules, and it didn't change.
- So nowI'm stuck
Some of the code samples I tried are:
#module-1280{
background-color: #FF0000;
}
#module-1280:hover{
background-color: #FF0000;
}
I cannot seem to tell you why this isn't working. Maybe it has something to do with the background-color, I also tried to apply !important, but it still didn't work. I know its not a lot of information to go on but any help would be appreciated.
It is the a-tag that got the background-attribute.. Try this:
#module-1280 a{
background-color: #FF0000;
}
It should work.
Related
Hi I am new on here first of all nice to meet you all
I am facing a problem on wordpress
I am using "Quick Download Button" Plugin which the link is https://wordpress.org/plugins/quick-download-button/#description
after I have install it on my site I tried to change the button colour by css but I never ever success to change it. I have checked the button in inspect and I copied it but it didn't work.
what I tried was
.g-btn.f-l
{
color: #3c1c1c;
}
but it never worked.
please anyone help will be awsome thanks and sorry for my bad english
Like #jared said - it shouldn't be too hard to find the right selector and change the color within your browsers dev-tools. If you see the color change, bingo! Then if that doesn't work within your css file itself, you might have an ordering issue with your sites css files (i.e. your css is loading before the plugins). Quick way to test this is add the !important selector to that rule on your file - e.g:
color: #3c1c1c !important;
the css color-parameter is not defining the color of the button, but from the text of the button. if you want to change the color of the button, you need to look after "background" or "background-color".
example:
.g-btn.f-l{
color: #FFFFFF;
Background-color: #3c1c1c;
}
Visible example:
Source of example: Kryptonews Lexikon
I want to change the color of the social icons (on the left side of the screenshot). Since I have no clue how to change it in WordPress, I tried it with CSS. But now I noticed that I have to change the element. style and I don't know how... I tried just changing the color in the element. style and copying into the additional CSS in WordPress, but it doesn't work. On the screenshot, you can see what I mean. Is there a solution to this problem?
This is what I tried:
element.style {
--wpz-social-icons-block-item-color: #FF0000;
--wpz-social-icons-block-item-color-hover: #FF0000;
}
Please try with this following code in wordpress customizer > Additional CSS
.social-icon-link{
--wpz-social-icons-block-item-color: black !important;
--wpz-social-icons-block-item-color-hover:
red !important;
}
I think that what makes color is the element inside a <span class="social-icon socicon socicon-icon-instagram">
But anyway you are trying to change something via style, and if you want to do like this you´ll hace to use something like
style="background-color:#000"
or wathever, color, font-size etc
But in this case I will use a new style, like
.socicon-icon-instagram {color:#000;}
And maybe depends of the template you´ll need to add !important to CSS class to get the color...like this
.socicon-icon-instagram {color:#000!important;}
It is not a good practice but sometimes is necesary
I found some previous posts about this, but the mistakes of the ones I saw were obvious to me, and unfortunately I couldn't find an answer to my problem yet.
I'm using a primary panel of bootstap:
<div class="panel panel-primary">...</div>
I want to change the background-color of the heading, so I add this class to my CSS to change the background-color:
.panel-primary > .panel-heading {
color: yellow !important;
background-color: yellow !important;
border-color: #F6E3CE !important;
}
The background-color of the heading, however, just keeps it's blue. What irritates me about this is that the color (font color) changes to yellow, which shows me that I'm editing the right CSS block.
And I can change the background-color of the panel-body just the same way which works fine also.
Any ideas about this?
Here's a screenshot to see that it's only the background-color that won't change:
You need to use background-image or background property to override the default background color.
like this
background-image: -webkit-linear-gradient(top,yellow 0, #dbff46 100%);
or
background:yellow;
you need to be more specific with your code, you didnt mention how your elements are structured, the A > B selector means that it will match the element B that has an element A parent. To help you more with your question maybe add some code snippet so you can get help.
Sorry, I'm very new to stackoverflow. It seems that I have to add a new comment to post another screenshot.
Now this is really strange, when I identify the source of the file "gradients.less" in chrome, I get this Screenshot.enter image description here
According to this picture, I have a directory ../bootstrap/css/less/mixins/gradients.less
But actually the directory that I have is: ../bootstrap/css and there are only files in this, like "bootstrap.css" - no subfolder "less" - no subfolders at all.
I'm designing a site using a simple worpress theme and customising a few elements with the Simple Custom CSS plugin.
I'm trying to change the colour of the footer and I've used
.site-footer {
background: #4E5754;
color: #f29e0f;
}
This is coming though as it is changing the text colour but not the background - the new background colour is showing up when I inspect the page source but not changing on the actual page.
What might be overriding the CSS?
You can use this style for this.
.site-footer {
background: #4E5754 !important;
color: #f29e0f;
}
Or put your style under the default stylesheet.
After a bit of trial and error I realised that the two colours were actually being controlled by different elements - site.footer and footer.inner
Thanks for the help everyone!
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.)