CSS - red font to Twitter Bootstrap - css

I have defined a class in my main.css file.
.red {
color: #d14;
}
And using it like this.
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active red">
<i class="icon-leaf icon-white"></i>Admin
</li>
</ul>
</div>
</div>
Besides my main.css I also import the twitter bootstrap css file.
This way it does not work. Is it because Bootstrap is overruling my color definition?

The only element in your markup that could visually apply this style is the <a>, and that element has a lot of really specific CSS rules applied to it by Twitter Bootstrap, stuff like this:
.navbar .nav .active > a,
.navbar .nav .active > a:hover {
color:#FFFFFF;
}
You'll have to write something even more specific to get the style to apply:
.navbar .navbar-inner .nav .red a {
color: #d14;
}
Demo: http://jsfiddle.net/pYGaG/
You could use !important on the rule if you really had to, but I really feel that you should avoid it as much as possible. If this is a single element that has this style, consider adding an id to it, which carries a lot of weight specificity-wise:
<li class="active" id="home_link">
<i class="icon-leaf icon-white"></i>Admin
</li>
#home_link a {
color: #d14;
}
http://jsfiddle.net/pYGaG/1/
Here are a couple good articles on CSS specificity:
http://css-tricks.com/specifics-on-css-specificity/
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
And as a side note, try to avoid presentational class names like red. Use more meaningful ones that aren't tied to the way it should look, but what it is (for example, .active-link).

Your're defining the red color on a <li>-Tag, but there is no text. The text is inside the <a>-Tag, so you need to overwrite this rule.
Code something like this:
.red a {
color: #d14;
}
Update: Go for the answer given by Wesley Murch.

Related

Different styles for inline links

<div class="col-lg-3">
<ul class="nav navbar-nav login-right">
<li>Login or create account</li>
</ul>
</div>
Simple question, how to write class in CSS and how to name it to make different colors for those two links, and also to move inline style in external CSS.
I tried to give normal class to each link and just to call that classes in external CSS file but solution fails.
Any idea?
Simple question, how to write class in CSS and how to name it to make different colors for those two links, and also to move inline style in external CSS.
You can use nth-child and color both a tags differently
ul.nav li a:nth-child(1){
color:green;
}
And
ul.nav li a:nth-child(2){
color:blue;
}
Since both have the same padding style you can place it in a common style definition
ul.nav li a{
padding:0;
}
Important: make sure the external file which you write this in is placed last in your HTML hierarchy. By CSS prioritisation rule the file placed last in the hierarchy gets the priority.
Edit: seems like you have many elements with same structure. In this case it's better to select specific element and using id will be our best choice. Add id to your ul as below
<ul id="colorMe" class="nav navbar-nav login-right">
And change your CSS selectors to
#colorMe li a:nth-child(1)
Do similar to other selectors too

How can I change link color and hover color in Bootstrap version 4?

In my design, I want to change my link and hover color in a specific part. I try my best but I can't do that. I am new in bootstrap. How can I change it for Bootstrap 4? A simple code is here-
<div class="card" style="max-width: 320px;">
<div class="card-header text-center"><h3>Navigation</h3></div>
<div class="card-block">
<ul class="nav navbar-nav" style="font-size: 1.50em;">
<li>Home</li>
<li>Documents</li>
<li>Videos</li>
<li>Gallery</li>
<li>Download</li>
</ul>
</div>
</div>
The CSS code of Bootstrap 4 is compiled with Sass (SCSS) instead of Less now.
Bootstrap 4 ships with a grunt build chain.
The "best" way to customize Bootstrap is using the default build chain.
download and unzip the source code
navigate to the bootstrap (bootstrap-4-dev) folder
run npm install in your console
run grunt dist to recompile your CSS code
To change the colors to can edit both scss/bootstrap.scss or scss/_variables.scss now.
The examples below edit scss/bootstrap.scss, make sure you redeclare the variables at the begin of the scss/bootstrap.scss file.
The color of the .nav-link and nav-link:hover is set by the default colors for the a selectors, you can changes these colors in scss/bootstrap.scss as follows:
$link-color: #f00; //red
$link-hover-color: #0f0; //green
// Core variables and mixins
#import "variables";
#import "mixins";
....
Notice that the above change the colors of all your links. To change the colors of only .nav .nav-link or even .card .nav .nav-link you will have to compile CSS code with a higher specificity. Do not use !important
Also notice that Bootstrap currently is in a alpha state, so you should not use it for production. Variables to declare the colors of the .nav-link do not exist yet, but possible do in future, see also: https://github.com/twbs/bootstrap/issues/18630
To change the color of the colors of all .nav .nav-links in your code use the follow SCSS code at the end of your scss/bootstrap.scss file:
....
// Utility classes
#import "utilities";
.nav-link {
color: #f00; //red
#include hover-focus {
color: #0f0; //green
}
}
To modify the colors of only the .nav-links inside the .cards you should create CSS code with a higher specificity as follows:
....
// Utility classes
#import "utilities";
.card .nav-link {
color: #f00; //red
#include hover-focus {
color: #0f0; //green
}
}
Of course you can also create your own CSS code at the end of the compiled bootstrap.css file. Depending of your needs use higher specificity;
Change all links:
a {color: #f00;}
a:hover {color: #0f0;}
HTML:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap-4-dev/dist/css/bootstrap.css">
<style>
a {color: #f00;}
a:hover {color: #0f0;}
</style>
Or with higher specificity:
.nav-link {color: #f00;}
.nav-link:hover {color: #0f0;}
Or even:
.card .nav-link {color: #f00;}
.card .nav-link:hover {color: #0f0;}
You can override the bootstrap classes by adding a custom css file like mystyle.css and place it just after bootstrap in the head section:
<!-- Bootstrap CSS -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="path/mystyle.css" type="text/css"/>
and inside mystyle.css:
.navbar-light .navbar-nav .nav-link {
color: whitesmoke;
}
.navbar-light .navbar-nav .nav-link:hover {
color: whitesmoke;
}
Two ways (which is actually one):
1. Adding your own styles
Actually bootstrap allows being overwritten in almost every case, therefore if you set something in your own .css it will overrule the style set in bootstrap.css
So adding this to your own .css:
.navbar ul li a {
color:#fff;}
.navbar ul li a:hover {
color:#000;}
You will see it works as a charm.
2. You can go and find everything set in bootstrap.css
I highly discourage you doing so unless it is really necessary, since every styling can be overwritten and it will create a cleaner structure for your styling.
2020 - Google brought me here for something similar.
Bootstrap 4.5
For those who would like to change only the link color or the < a > tag upon hover, just apply a custom class, say hover_black as follows;
Note - my links are white but black when hovered upon
//CSS
.text_white { color: white; }
a.hover_black:hover { color: black !important; }
// HTML
<a class="text_white hover_black"> Link </a>
In my design, I want to change my link and hover color in a specific part.
You are describing 3 things that can be tackled all at once within BS4 with sass. If you have access to the .scss file of your custom project and able to compile it, then I would recommend the following approach...
For this particular case, you can create a custom mixin like so:
#mixin my-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct, $txtcolorOff, $txtcolorOn, $txtsize, $txtalign){
#include button-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct);
color:#333; /*set a fallback color*/
font-weight:normal; /*customize other things about your like so like*/
text-transform:none; /*customize other things about your like so like*/
text-decoration:none; /*customize other things about your like so like*/
text-align:$txtalign; /*reference parameter values like so*/
}
I am assuming your have hex colors assigned to sass variables already like this:
$m-color-red: #da291c;
$m-color-blue: #004c97;
..etc..
If so, call your mixin from any specific location in your sass file. Sense this is your first time, notice how the following parameter $m-color-white represents the value for $bgcolorOff parameter above. So pay close attention to where you put your colors to help define your custom variant.
.m-variant {
#include my-variant($m-color-white, $m-color-grey-light, $m-color-off-white, $m-color-grey-light, $m-color-blue, $m-color-grey-light, $m-color-grey-light, $m-color-grey-light, 1.200em, 'left');
}
Finally, when you create your buttons, or anchor links, you can add the following to your element structures:
<a class="btn btn-sm m-3 m-variant ">my custom button</a>
4 easy steps. After you do this the first time, every other time is easy. By taking this approach, you take full control of your link and hover colors. Re-use and/or create as many variants as you like.
Hope this helps
Add this to your CSS:
a.nav-link {color:#FFFFFF;} !important
a.nav-link:hover {color:#F00F00; text-decoration:none;} !important
Don't include the important tags at first though, see if there are any conflicts before adding them in. I personally prefer to just do a search & find of the relevant classes and parent divs to clear any conflicts or change the class name I'm using.
I'm just a noob, but Bootstrap 4 has a class called "nav-link" that you use in the link element tag. I was using a dark, primary colored navbar and the links were the same color. This solved it for me.
<ul class="navbar-nav">
<li class="nav-item">
Create New Request
</li>
</ul>
these CSS work for me
.nav-pills .nav-link {
color: #fff;
cursor: default;
background-color: #868686;
}
.nav-pills .nav-link.active {
color: #000;
cursor: default;
background-color: #afafaf;
font-weight: bold;
}
If you just want to make the hover color the same as the non-hover state, use this variable:
$emphasized-link-hover-darken-percentage: 0;

Customize Bootstrap's Tab class li .active

I have the following piece of code based on Twitter's Bootstrap:
<ul class="nav nav-tabs" id="myTab" style="border-bottom-color: black">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
I was able to customize almost all of its css to my needs.
The part I'm stuck at is the <li class="active">, what would be the css rule to overwrite it?
ul.nav.nav-tabs > li.active {
color: red;
}
I think that should do it, or if you only want to target the li in that particular nav
#myTab > li.active {
}
If you want to override it only for this particular navigation, you can simply include the ID to the CSS rule:
#myTab > li.active{
/* Your CSS goes here */
}
li.active is the rule for that tag. Remember that css rules are run in the order that the files are linked, so if you want to overwrite it, just add li.active rules in a css file that is linked after bootstrap.css. You could also just edit bootstrap.css

Cannot override theme's default stylesheet with custom CSS

I am trying to override my default CSS in my WordPress theme's settings, but am having a heckuva time doing so.
Here's what my top menu looks like:
And the same goes for the submenu links when hovering over the top links:
I'd like the links to be white ... obviously the blue doesn't show up well at all.
Here's what I get when I Firebug the "About" link:
And when I right click the Firebug and copy the HTML, here's what part of it looks like:
<ul class="menu" id="menu-mega-menu"><li class="menu-item menu-item-type-custom menu-item-
object-custom level0 has-sub" id="menu-item-3462"><a href="#"><i class="icon-thumbs-
up"></i>About<i class="icon-caret-down"></i></a>
<div class="sub-content" style="display: none;"><ul class="columns">
<li><ul class="list"><li class="header">The Basics</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page level2" id="menu-
item-155">Our Mission</li>
I've tried using #MashMenu, .menu-mega-menu, .mashmenu, and always do a color:#FFFFFF!important; but nothing ever gets rid of that blue. I don't know if I provided enough information here, but any help in guiding me in the right direction would be truly appreciated!
My blog is located at http://www.occupyhln.org
I'm not sure if the color is coming from the wordpress theme or from the user agent stylesheets, but the latter do tend to have higher specificity selectors for a that will prevent the simple a selector from working the way you want.
Inherited values are not related to selectors. You need to actually select the a to override other selectors for its property. For example:
.wordpress-theme a {
/* Selects <a> and sets the color
color: blue;
}
#MashMenu {
/* Selector has higher specificity but does not select <a> */
color: red;
}
#MashMenu a {
/* Selects `<a>` with higher specificity */
color: red;
}
I believe you need to apply the color override directly to the the <a> tag your are trying to effect. You probably have something more high-level that is dictating the color.
Consider this simple example:
HTML
<ul>
<li>
<a href='http://google.com'>Here is a link</a>
</li>
</ul>
CSS
li {
color: red;
}
li a {
color: green;
}
The original css is more specific and has the !important value on it. So fight fire with fire and do something like
.catalyst-widget-area a, .catalyst-widget-area a:visited,
.catalyst-widget-area a:hover {
color: #fff !important;
}
You can narrow the selector even more so you make sure it overrides it.
#mashmenu .catalyst-widget-area a, #mashmenu .catalyst-widget-area a:visited,
#mashmenu .catalyst-widget-area a:hover {
color: #fff !important;
}
And you can go on and on, making it more specific until it yields.
But here's something I've been wondering, how are you adding all these custom css files to a Wordpress theme? I say this, because there's is a right way, and many wrong ways to do it.
The right way is making a child theme of your current theme and work it from there. Child themes however, are not for entry-level modifications (though is way easier to override default styles from a child theme), in that case, there are plugins that help you override the css with your own custom css, one of the most popular is Jetpack.
In order to solve this issue in case anybody runs into a similar issue, I used the following:
.mashmenu .menu>li>a{color:#FFF !important;}
.mashmenu .columns .list a{color:#FFF !important;}
.mashmenu .menu .sub-channel li a{color:#FFF !important;}
.mashmenu .content-item .title a {color:#FFF !important;}
.mashmenu .page-item .title a {color:#FFF !important;}
.mashmenu .page-item a {color:#191970 !important;}
But when putting it at the bottom of my custom CSS, it didn't work; when I put it at the beginning of my custom CSS, it worked for some reason. I have no idea why this is the case, but this is what finally did the trick for me. Thank you for all who opined and helped me figure this out.

CSS Link Problems

I'm having a bit of difficulty adding some CSS to a link. I'm using a CMS that automatically generates menus in an unordered list. However, where you're on a given page, it applies class="active" the the li and not to the link itself. This works fine for adding a background to the link, but I'm trying to change the link color.
<li class="active">
Link
</li>
I'm having difficulty coming up with the CSS to say "If a link is in an li with class="active" then make the link text color x."
How might I accomplish this?
Thanks!
the path is
li.active a { color: .... }
The MDC CSS Reference has good examples for the various types of selectors.
li.active a {color:whatever}
a
{
color: black;
}
a.active
{
color: green;
}
Try this:
.active a {color: red;}

Resources