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 */
}
Related
I am trying to create a button with text inside. I want it so that when you hover over the box, the color of the box changes to white, and the colour of the text changes to blue.
How can I add css to make my text and box change colors on hover?
Edited: I got the html snippet for that from another part of the website template I am editing. It is basically a box that does exactly what I have outline above. I then placed it inside the list tag of the menu html, hoping that it will just transfer the functionality but it didn't work. So I tried to add the [hover:] but it still isn't working.
I know I am doing something wrong but I don't know enough to know what it is.
Code snippet is for html:
Upload resources
Use the :hover pseudo selector
e.g.
button {
color: white;
background: blue;
}
button:hover {
color: blue;
background: white;
}
Of course, replace with the actual hex codes you need rather than the colour names above, and any valid property can be used, e.g. border, text-decoration etc.
Use :hover pseudo selector
element{
color: white;
background: blue;
}
element:hover{
color: blue;
background: white;
}
You can check these at Click Here
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).
I have made animated on hover divs but as soon as I attached hyperlinks to them purple outlines appeared. Codepen: https://codepen.io/forTheLoveOfCode/pen/yPEygM
The way I am attaching hyperlinks to divs at the moment is as follows:
<a href="https://www.freecodecamp.org/misskatiapunter">
<div class="communities-link" id="free-code-camp-butn">
<i class="fa fa-free-code-camp ffc-text"></i>
</div>
</a>
What would be the best way to overwrite all hyperlink styles so that the only effect hyperlink has on a div is - to link it to another page.
What you're looking for is to set the color property on the a tag, and you'll probably also want to set the text-decoration property to none:
a {
color: inherit;
text-decoration: none;
}
color: inherit states that the element should inherit the colour from the parent element, if defined. If a parental colour is not defined, it will inherit a black colour from <body>.
color: inherit is the most commonly-desired usage, allowing you to change the colour, but if you need to override this for specific links you can use color: initial, which will set it back to its default value of blue:
a {
color: inherit; /* Becomes black */
}
a.blue {
color: initial; /* Becomes blue, overriding the inheritance from a */
}
text-decoration: none removes the underline from 'regular' hyperlinks. It won't have any effect in your specific use-case, but is useful if you want to remove the underline entirely.
I've created an updated pen showcasing this here.
Hope this helps! :)
If you ever want to remove default styles, do it the same way that you would if you were to add the style. for instance: if the link has a purple outline, add a a {border: 0;} property, or if it appears whenever you hover it, do a:hover{border: 0;}, or if it shows when its clicked do a:active{border: 0;}
I am using Bootstrap.css, and there's a class named "form-control".
I am using this class to style my aspx controls. The problem is that its textbox font color is grey and I want it to be black. I have no clue about CSS. Is there a way I can change that from grey to black?
Thanks.
You can reset the text color of class - 'form-control' by adding
.form-control {
color:#000000;
}
Add this property in a separate css file and include it just below bootstrap.min.css in head tag.
If you want all the textboxes font color to be black, add this:
input[type="text"] { color: black }
in your CSS file.
Otherwise, create a class:
.black-input {
color: black
}
<input type="text" class="black-input">
Go to http://getbootstrap.com/customize/ and select the colors you want, then Compile and Download at the bottom.
use this:
.input-black {
// this is the one can change the color of a text even if its a placeholder
color: black;
}
<input type="text" class="input-black">
You would need to add some code like this to your CSS file.
.form-control {
color: #000;
}
Keep in mind that you may have some specificity declaration issues. For example, if the color is set in bootstrap.css as a child of another element, you may not be able to override the color change unless you declare it with the parent as well. For example:
.parent .form-control {
color: #000;
}
You shouldn't be scared to learn some CSS though. It's very easy to grasp (you'll literally get the basics in less than an hour).
I know that this question has been asked here before, but none of the answers provided there seem to be working for me.
I have a stylesheet setting the color of all links to, let's just say, red. All the rest of the text on the page is plain 'ol black. I have a particular H1 element that is a link, but I do not want this H1 element to be red, like all other links. Instead, I just want it to be regular black, like all other text. No matter what I seem to try, though, it stays red as all other links.
This is the code I have in my stylesheet:
a:link {text-decoration: none; color: #B83131;}
a:visited {color: #B83131;}
I have tried specific styling for the specific H1 tag, but it doesn't help. I tried giving the H1 tag a class name and styling that class, but it didn't help. I feel like I am missing something here...
Did you set it to the anchor?
h1 a:link { color: black; }
If your markup resembles the below:
<h1>
Bleh
</h1>
Then you should be able to add the CSS rule as:
h1 a { color: #000; }