I'm trying to remove the white-background of wordpress Article (page), NOT the body background, the element's background. I would that the article text has no white background, but only the body background.
I've tryed so many "external css" but no one worked for me.
article.post-1 { //just an example, I've tryed many other elements
background-color: transparent;
}
https://i.imgur.com/gJtqjpP.jpg You can see the white background behind the TEXT, i would remove that white and see the TEXT directly on the background image. It's in the homepage.
I achieved that by adding a !important after my css code:
element {
background-color: transparent !important;
}
First of all you should inspect the code of the page to find out the class where the background is applied, then you can set background: transparent (and not background-color, because it only works with color values).
Related
I used a free theme from someone : Olsen Light. And I want to add an archive to my sidebar. When the archive is displayed as just text, it is in black. When I change the widget option to dropdown, it's white...
I've been looking in the style CSS, nothing has color:white of #fff in it, only background-colors are white.
Is there a way I can use an overwriting style class that I put in the 'additional CSS' so that it appears black? I've tried widget-9 { color: black !important; but it doesn't work. Maybe anyone can click inspect element to see the css and html and tell me how I can fix this please?
Here is the example on my blog : www.oihanevalbuenaredondo.be
I've put both archive styles at the bottom of my sidebar
For some reason, the elements inside the aside for your archives are being wrapped in <b> elements set to color: white;.
Add this code, and you should be good:
.widget_archive * {
color: #111 !important;
}
I put #111 but you can use whatever color.
By inspecting, I've found out it has 3 <b style="color: white"> inside each other inlined, but none of them has !important, so you may override it in a custom style. I see you have a style.css. Try adding this:
aside.widget-9 h3 b {
color: black !important; /* your color */
}
I've created this hexagonal navigation to fit within a website.
http://www.flickr.com/photos/14577801#N00/11202239254/
I'm wanting to know what would be the best way to go about creating the structure of the navigation in html and css. Where the links are within the white hexagons, I would like hovering over these links to change the white background to a colour. I've tried to do this with using background images, but haven't quite got there. The surrounding coloured hexagons I've been using as a whole background image for the navigation.
I found this on the web: http://jtauber.github.io/articles/css-hexagon.html , which I think could be great to use, but I thought there must be a way to use background images.
Thanks, Tim.
The color of an element (in this case, a hexagon) can be changed on hover with css. If we add this to the style properties in your css-hexagon tutorial:
.hex:hover {
background-color: blue;
}
.hex:hover:before {
border-bottom: 30px solid blue;
}
.hex:hover:after {
border-top: 30px solid blue;
}
The hexagon will change color when the cursor hovers over it, which you can see in this jsfiddle.
You can find good documentation of the CSS :hover pseudo-class here: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
Like the title says I can't get the background of the a element to be one solid color. Instead my code make each line the color. I have even tried wrapping the php element in a new div and setting that background color but it does the same thing. Any advice is useful.
Site: http://www.whatsatyourcore.com, bottom widget titles
The html:
<a class="teaser-title-top" title="Social customer service and your marketing strategy" href="http://whatsatyourcore.com/?p=78"> Social customer service and your marketing strategy</a>
CSS:
.teaser-title-top { background: black;}
a.teaser-title-top {
color: #fff;}
The above "code boxes" are an example. The first one is what the background is doing on my titles. The second one is what I want it to be.
if you wrap it in a div and set that divs background-color that should work. The element you are setting the background-color for needs to be a block-level element (a div is) you can set an element to display as a block level element with display: block; else it will just color the background of the inline content.
you are styling the anchor which is only going to stlye what's in it. Try something like:
<div id="title-box">
<div class="teaser-title-top">
Social customer service and your marketing strategy
</div>
</div>
And then style the .teaser-title-top
As with the other answers, you can style a wrapper element. However if you want to style just the anchor text directly, try this...
The issue is the line-height of your text. AS you can see, it is spaced out. If you. The height of the line, compared to the size of the text, is bigger.
As an example, set #bottom a { line-height: 100%; } (which is what teh font-size is set to) and you'll see the gap go away. You'll also see the spacing go away. You can "bring back" the spacing with top/bottom padding, as well as changing the line-height.
Try this hope it works
#bottom .teaser-title-top {
color: white;
}
In your css file
I've managed to manipulate most of the twitter widget's css but I can't seem to remove the black border around the whole widget and there seems to be a much thicker border on the bottom of the widget which I also want to remove. I'm using Chrome to test this.
Here is the jsfiddle.
The "border" is actually a background color which is shining through because you have a 1px padding on .twtr-bd, so the background color of .twtr-bd is not erasing the black background from the parent element.
Either remove the background color, or remove the padding.
give backgeound-color:white like this:
#twtr-widget-1 .twtr-new-results, #twtr-widget-1 .twtr-results-inner, #twtr-widget-1 .twtr-timeline {
background:#FFFFFF !important;
}
For any visited (a:visited) web page, I would like to display those links on my website with a small checkmark to the left of the link.
So for example:
"this is an unvisited link"
√ "this is a visited link"
Question: how do I accomplish the checkmark using CSS?
You can use a combination of background and padding to get this effect.
a:visited {
background: transparent url("path/to/checkmark.png") left center no-repeat;
padding-left: 10px;
}
Adjust the padding, and background position to fit your needs. Hope this helps.
a:visited:before {
content: "\00A0\221A";
}
source
You could use :before pseudo selector, but it's not well supported.
For better support, make it an image, and set it to background-image. Then use padding to show the image.