Bootstrap: Change background-color of panel - css

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.

Related

Wordpress changing element.style with CSS

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

How to get rid of this element or change its color?

I'm trying to get rid of the following element or change its color if it's possible - it's not a border, it's a background image. It's code looks like that:
.col-2cl .main-inner {
background: url(img/sidebar/s-right-s1.png) repeat-y right 0;
padding-right: 340px;
}
My question is, how can I get rid of this element? I'm trying to completely remove it on dark version of my website, but I just can't - I feel like I've tried everything (background: none;, etc). I can't completely delete the file because I need it on light version of my website. My site:
Any new value you will assign for .col-2cl .main-inner will hide that image.
In your case, you should show dark mod or at least define how dark mode is implemented. Is it changing attributes or just changing class names?
if it is changing class names, you should define your css code according to that change, for example, let assume in dark mode, you added the new class name to any div tag parent of .main-inner as .dark-mode.
Then, you can use the following code:
div:not(.dark-mode) .main-inner{ background: rgba(252, 252, 252, 0) !important; }
this code will make fully transparent of that section only when it is not on dark-mode.
But as I described you need to understand how dark mode changes your website structure. Maybe, it is not adding new classes but changing the all CSS file. Then you just need to edit that specific files.
You can use
.col-2cl .main-inner {
display: none; // In case it will not work, you can try to add !important before the semicolon.
}
or change the background property with
.col-2cl .main-inner {
background: url(new_background_image.jpg) repeat-y right 0 !important;
}

Header-Menu bar background-color

I cant find the option to change the header primary background color from white to black, and the menu links from white to black.
Can anyone help?
link to site
You could edit the background-color attribute in the .color-overlay class directly in the according .css file, if there is really no option by default.
I am sure that there will be a color setting into your theme options from the wp-admin section. And you need to check there the options there will be a header setting.
if you want from coding part please add CSS rule below into your theme style.css
#menu-main-menu li a {
color: #fff;
}
.content.top.style-none {
background: #000 none repeat scroll 0 0;
}
if this code does not work then use !important CSS another rule.
After that, it will look like this

Change background color, on portfolio option

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.

CSS: Style a text link in a class

This is a most basic question about formatting text links in css
I have tried to do it myself. I got the hover to work -- at least in firefox. But can't get the default color to work. Only hover.
Please look at this development page http://ogrowby.com/ in firefox.
There is a menu about the middle of the page, called "Test Menu". Please click on that. Then, in the dropdown, go to "TEST LINK".
When you hover over it, the text color changes to Gold. That is fine. But its default text color is black and I want it to be white. I may also want to change the font size, etc. But the main thing is to get the css working to set the default text color for this class to WHITE. #ffffff.
Here's my css so far. The hover is working, but the default remains needs to be changed to #ffffff Only for the .roundedblue class. And it needs to work not only in firefox but other modern browsers.
Any help will be appreciated. Thanks
Rowby
.roundedblue:link,
div#Maximenu_NEW_GRANDE ul.maximenuck2 li.roundedblue:hover span.separator {
color: white;
}
.roundedblue:hover,
div#Maximenu_NEW_GRANDE ul.maximenuck2 li.roundedblue:hover span.separator {
color: #FFB300;
}
If that is the only link you want to change, you should add an id to it and change the id's css properties. If you want multiple elements to have the same properties add a class to the element (if it doesn't already exist).
Then simply edit its properties as you would normally.
color:white;
font-size:14px;
...
I simply changed the styles in inspector and it worked for me. added "style='color:white;'" to your span.

Resources