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.
Related
I want to have a background image on my site. It comes from the top of the page and is only behind the header. The problem is, my theme forces me to have a background color for the header so you can't see my background image at all. Here is a photo of what I want the site to look like:
And you can see what it actually looks like here. I'm using the Brunch Pro theme on Wordpress.
Is there a way to make the header background transparent or is there a better way to do this?
Add this to the end of the custom.css or style.css of your theme:
.brunch-pro .site-header{
background: transparent;
}
If you can edit the CSS (which I presume you can in WP), look for where .site-header has it's CSS properties set. Remove the background and background-color properties.
You could also just add a new CSS property and apply it to the header. Something like:
header.site-header {
background: none !important;
}
The !important will override already set properties...
If background-color property is required, you could use rgba color and make it transparent. background: rgba(0,0,0,0); makes background-color black, but fully transparent, without opacity and other tricks. Like so:
.black-but-transaprent {
color: red;
height: 100px;
width: 100px;
background: rgba(0,0,0,0);
border: 1px solid black;
}
<div class="black-but-transaprent">Test</div>
I want to use this image as the underline for menu items on hover and focus (or when active). I have tried a lot of things but the image will not show up no matter what. Normal text-decoration underlines work fine. I am using the blankstate theme. Any suggestions and ideas will be greatly appreciated. The image is in the same folder as the custom css I want to use. You can check out the sample site here. This question's answer doesn't apply here I guess. I also tried this. By the way, I am assuming that the
<link rel="stylesheet" type="text/css" href="path_to_css" />
is taken care of automatically by the theme, if not, how can I access the header file to ensure that it is done. I am using elementor to edit the page.
Thank you all in advance.
Try this css:
a:hover, a:hover, a:focus {
text-decoration: none;
background-image: url('http://i.imgur.com/bYYfllb.png');
background-size: 100% 18px; /* stretch to link width but keep its height */
background-repeat: no-repeat; /* do not repeat the image */
background-position: bottom;
padding-bottom: 8px; /* move image below the text */
}
a {
text-decoration: none;
}
Test link and with a longer link text
you need to setup background-size property. after that take care of its position
for example, background-size: 100%
I am trying to play with colors in the AccessPress Basic template for WordPress (http://accesspressthemes.com/theme-demos/?theme=accesspress-basic) and I am trying to change the color for the BX-Slider navigation "dots" from red to other color.
I've changed it for active "dot" with:
.bx-pager-link.active:before {
background-color: #fff !important;
}
However I cannot change it also for the hover, I tried with that:
.bx-pager-link.hover:before {
background-color: #fff !important;
}
But it does not work.
I'd appreciate any help
That's a specificity issue. Try this:
.ap-basic-slider-wrapper .bx-pager-item .bx-pager-link.active:before,
.ap-basic-slider-wrapper .bx-pager-item .bx-pager-link:hover:before {
background: #fff;
}
See that I have used two things:
Full path.
background instead of background-color.
Works perfectly for me, make sure you load it after the styles.css or at the end of styles.css:
I am working with this page.
The stylesheet-files and most of the design are written by another programmer.
In frogn.css the background-color is set that should be used for the outside area of the page (in which there is no information). E.g. like here.
In the page I am working with, the background-color is overwritten by the color from bootstrap.less
I prefer not to change the settings of the bootstrap-files, since it can affect other pages.
How do I enforce the background-color of frogn.css to be displayed ?
I tried using !important after the colour-attribute, but it didn't help.
*Update:
I am noticing that setting !important after background-color actually worked. I did only a ordinary refresh, so I got the cached version of the page.
in frogn.css i can see that the body background already has !important
body { background-color: #eaeaea !important; color: #333; }
and there's also a more specific rule applied:
#front { background-color: #EAEAEA !important; }
To overwrite these rules, you've to provide an even more specific selector, for example:
html #front { background-color: #FFF !important; }
this will be "heavier" and should overwrite the default values.
Doing this did solve the problem:
body { background-color: #eaeaea !important; color: #333; }
I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?
Thanks.
#text-23 { background: none}
the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)
#text-23 img { background: none; }
that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.
This can also be done by
#text-23 .textwidget img { background: none; }
but that level of specificity is not required. However if you try to just do:
.textwidget img { background: none; }
this will override all of the instances where the background is set on an image in the textwidget container.
You have added the white border yourself by setting the following in line 884 of style.css:
.textwidget img {
background: #fff;
padding: 5px;
max-width: 290px;
}
Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:
#text-23 .textwidget img {
background: none;
}
This seems to be the conflicting CSS class.
.textwidget img {
background: white;
padding: 5px;
max-width: 290px;
}
If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly
These allow you to rightclick on your HTML page and inspect it.
Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).
.textwidget img {
background-color: none;
}