I am working on a wordpress template. I need my menubar to be transparent, but it is giving me quite a hard time.
Until now I added the following css code in the "Custom CSS". But I keep getting a grey colored background. Does anybody knows how I can make a transparent background in the CSS?
.fixed-header #header {
background-color: rgba(1,1,1,0.0) !important;
}
.fixed-header #header {
background-color: transparent;
}
Try this:
.fixed-header #header {
background-color: rgba(1,1,1,0.0) !important;
opacity: 0.5 !important;
background-color: transparent !important;
}
you need to add style in your style.css file
#header {
background-color: rgba(1,1,1,0.0) !important;
}
Install this plugin for including custom css and js
Try this:
.fixed-header #header {
background-color: transparent;
}
You might be editing wrong css file. Or your website is cached. Try pressing CTRL + F5 to refresh page.
Related
This is a minor-but-annoying issue (typical web design) with color styling on my submit button. I'm using the page builder Elementor with OceanWP theme in WordPress. Site URL is http://catalystweb.design (under construction, of course)
The issue is that the colors seems to be "muted" on :active and :focus states. They are being applied, but not with full vibrancy.
I am linking to a brief screencast (12 seconds) of the issue, and including the custom CSS I've inserted into that page specifically. FYI the !important flags seem to be required to override some of the theme/builder styles, which makes it even more baffling as to why they are not fully applied in this case.
You'll see that the hover state of the button delivers the colors I've set; but on :focus (using tab) they are muted, and the same on :active (when clicking).
button[type=submit]:focus {
border: 2px solid #63C1FF !important;
background: #ffffff !important;
color: #63C1FF !important;
}
button[type=submit]:active {
border: 2px solid #ffffff !important;
background: #63C1FF !important;
color: #ffffff !important;
}
Thanks, any insights appreciated!
Your stylesheet here: http://catalystweb.design/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=1.8.8
has an opacity setting on hover:
.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
color: #fff;
opacity: .9;
}
How you want to approach fixing that is up to you, while I don't recommend using !important; if you can avoid it:
.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
opacity: 1 !important;
}
would work, or a slightly better approach such
button.elementor-button:focus,
button.elementor-button:hover,
button.elementor-button:visited {
opacity: 1;
}
would work. You can put this in your main stylesheet or in the Additional CSS are of the customizer, or wherever you've been adding custom CSS.
I'm using AdminLTE 2.3.8. It overrides buttons background on it's box header buttons when hovered, but I want to keep original colors when hovered over any buttons. Eg.:
AdminLTE CSS:
.btn-default {
background-color: #f4f4f4;
}
.box.box-solid>.box-header .btn.btn-default {
background: transparent;
}
.btn-default:hover,
.btn-default:active,
.btn-default.hover {
background-color: #e7e7e7;
}
.box.box-solid>.box-header .btn:hover,
.box.box-solid>.box-header a:hover {
background: rgba(0,0,0,0.1);
}
I just want to get rid of these .box.box-solid>... rules without editing vendor's CSS. Is there any way to achieve this without copying every button style (there are different colors)? If there is, solution would be very welcome.
Use !important within your styles, so that any other vendor styles doesn't conflict with these buttons.
Example:
.btn.btn-default:hover {
background-color: blue !important;
}
Hope this helps!
I would like to change the home icon of the Primefaces Breadcrumb with another icon but I can't find how.
I tried with CSS but it is not working for the icon:
.ui-breadcrumb {
background: none !important;
border: none !important;
icon: url('resources/images/look/bandeau.png')
}
It should be enough with:
.ui-breadcrumb .ui-icon-home {
background-image: url("#{resource['images/look/bandeau.png']}");
background-position: 0; /* asuming bandeau.png is a single image */
}
But you have to make sure two things:
First, that you are overriding primefaces css correctly, you shouldn't need !important. See this. If you are doing it right, at least you will see that the default image dissapear.
Second, you have to make sure that you are referring to the image correctly. In my code, I show how I do it myself, but it depends on your configuration so you should also check this.
Try to target that specific icon by doing so:
.ui-breadcrumb ul li .ui-menuitem-link.ui-home {
background: none !important;
border: none !important;
background-image: url('resources/images/look/bandeau.png') !important;
}
Also check if the background image hyperlink is correct.
I have two style sheets in page.html:
parent.css and child.css
In parent.css I have:
#MAINTable tr:hover
{
background:#C0C0C0;
}
I need to deactivate this from child.css
I'm doing:
#MAINTable tr:hover{text-decoration: none !important;}
But this is not working. What am I doing wrong?
Thanks a lot!
PD: Sorry if the question was too simple, learning CSS here
You can try this to overwrite the background:
#MAINTable tr:hover {
background: transparent;
}
Parent.css defines the background, but child.css only sets the text decoration. They both stay, due to the nature of CSS. You need to override it manually.
In child.css:
#MAINTable tr:hover{
text-decoration: none !important;
background: none transparent !important;
}
If child.css is after parent.css you don't need the second !important. I used none transparent so that it also overrides any background images.
I have attached image to button with css style.
.a-icon {
background: url('../a.png') no-repeat 100% 100%;
}
.b-icon {
background: url('../b.png') no-repeat 100% 100%;
}
In Firefox it looks fine, but in IE8 blue border appears around icon, when button becomes disabled. I have tried adding border: none and so on, but with no luck.
Any suggestions?
All links with img inside have a blue border on IE lte than 9, add to Your css global style for this tags.
a img {
border:none;
}
Add this to your CSS:
.a-icon,
.a-icon img,
.b-icon,
.b-icon img {
border: 0;
outline: 0;
background: transparent;
}
I think this will be the solution that you are looking for. If I understood you right, the problem is with the link border that is around the image. So you have to remove that.
So try this:
a img {
border:0;
}
Hope it helps