My question: Is there a more efficient way to customize elements when using Bootstrap? I find it tedious to have to target elements in such a specific way, ie:
.navbar-default .navbar-nav .active a:hover, .navbar-default .navbar-nav
.active a:focus, .navbar-default .navbar-nav li a:hover, .navbar-default
.navbar-nav li a:focus {
background-color: #1A77FF;
}
I feel as though something like the following should do the trick, if I want all of my links to be styled the same way, but it doesn't override Bootstrap's default styles.
a:hover, a:focus {
background-color: #1A77FF;
}
What you've written in your custom CSS won't override Bootstrap's CSS for anchors because bootstrap's CSS will be more specific as they will have written a class into their anchors to give them the consistent Bootstrapped look and feel.
If you look on their documentation regarding buttons and links (http://getbootstrap.com/css/#buttons-options), you can get a better understanding of how they style them and build from there - I can understand where you're coming from with these questions though, I've found that Codeacademy doesn't always explain these little quirks particularly well so I shall try and clarify it for you.
Cascading Style Sheets (CSS) operates on a basis of whichever rule is more specific in targeting an element will be processed.
If I was to have a page with two anchor tags on it and styling that targeted an element specifically, as follows:
a {
color: magenta;
font-family: 'Comic-Sans', sans-serif;
font-size: 14pt;
}
a.more_specific {
color: red;
font-family: 'Impact', sans-serif;
font-size: 18pt;
}
<!DOCTYPE HTML>
<body>
Basic link
<br>
More specific
</body>
You'll notice that the bottom link's styling, despite it still being an anchor, gets overridden by the more specific rule.
The way I tend to overcome the issue you're facing with Bootstrap's CSS is to add an id attribute to that element (or those elements if you're targeting more than one) which can then be used to override the styling from bootstrap. This will maintain Bootstrap's specificity in the way that they target the elements but will enable you to effectively jump right to the end of that long chain of refinements, so if you give your anchor in the navbar an id of, say, "navbar-anchor" and then target that in your CSS, it will have the same effect as targeting it with the long chain of refining targets.
This is a much more sustainable way of doing it than simply using !important as suggested in the answer from the first provider.
As far as i know if you include the stylesheet after bootstap.css in which you have written the css code it will override the matching css in the bootstrap.css file but if bootstrap has used selectors along with tag then its difficult to do so.
!important is one way and
2nd way is to extend the css code with the parent class,id or element so that it over rides the bootstap.css code which you already did.
Related
So I have an app that uses jQuery for certain parts. Such as the Autocomplete and Calendar Date Picker. I'm introducing a new style called .more-compact that will implement a smaller version of the app. This class is currently sitting in the div encompassing the entire app. This class works in reducing the heights, widths, and font sizes of almost everything. But when I try to do it for any jQuery elements, it won't work. This is how a typical style on the css doc looks:
.more-compact ul li {
font-size: 12px;
}
But for the jQuery autocomplete element, it will only work if I remove the ".more-complete" part. I don't want this though because this is part of a single stylesheet, and I only want the font to be that size when the .more-compact version is being used.
Any ideas what is causing this nesting not to work? Is the jQuery stylesheet over righting my own? The for this stylesheet is the lowest on the doc, so it should take priority.
Try use !important
.more-compact ul li {
font-size: 12px !important;
}
But try using more specific rules. By indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority
HTML
<div id="test">
<span>Text</span>
</div>
CSS
div#test span { color: green; }
div span { color: blue; }
span { color: red; }
I cant change the colour of navbar elements elements when working with bootstrap. Every other style like font size, font weight etc works but the colour doesn't change. I've tried to style the hyperlinks within the list elements too but it doesn't change anything. Every other style seems to be working fine. It worked when I changed it in the actual bootstrap.css file but that was a little inconvenient finding that particular line of code first and then changing it the style for it. It looks like my custom css fails to override the default bootstrap css when it comes to changing the colour property in navbar. Any idea why? Thanks
Here's the code:
.nav li {
color: red;
}
Just check in your Head tag; that you have mentioned your main css file after bootstrap link.
Might be this will be the one case.
Else post your code ; i will figure out the problem.
tyr this way
.navbar-default .navbar-nav > li > a{
color:red
}
Try this :
.navbar-nav>li>a{
color:red;
}
or this
.navbar-default .navbar-nav>li>a{
color:red;
}
Try changing the code to:
.nav li {
color: red !important;
}
Tumblr's "Stationery" theme highlights the Home hyperlink in a grey color that I've yet to find out how to remove. It looks terrible and anything I've tried in the CSS (Such as a:hover {color: black; text-decoration: none; font-weight: none } ) doesn't seem to work.
Any recommendations? My full style block is below:
<style type="text/css" media="screen">
body {
background: url(http://s15.postimg.org/5elcqo9q1/paper.png) repeat-y;
background-position: top center;
background-color: {color:Background};
}
.tag, .search_query {
font-weight: bold;
}
{CustomCSS}
</style>
Thanks in advance.
It's hard to give you an exact answer without seeing more of the code, but to give you a bit of direction I can make a few suggestions:
It sounds like an issue of specificity, or precedence of order. This means that the styles from the theme are probably overriding your styles because they either are located somewhere that gives them a higher precedence (embedded/inline, in a different stylesheet, lower down in the file, etc..) OR the style declaration is more specific which causes it to take priority.
I'd say the best bet would be to really track down the hierarchy of the elements, figure out the style declaration that is causing the grey color, and then make sure to write a very specific declaration to target that element.
If all else fails, you can use color: black !important; to force a higher precedence, though this is usually best avoided if possible.
Do this thing, it will work.
a:hover {color: black!important;}
OR find the wrapper class for your a tag & apply this way :-
.YourClass a:hover {color: #000000;}
Try text-decoration-style: none and then color: black
On the following page is body text, including some bullet text. I need the bullet text to be the same (larger) size as the body text.
http://www.a-quick-sale.co.uk/howitworks/
There is a global stylesheet in the site (/global.css) and I added an entry to it:
li { font-size: 14px;}
But that font-size style is not being applied. I don't want to start being lazy and applying styles directly to page context, but why is the global style I created not being applied?
I've not done any work with CSS or HTML for over a decade, so please be gentle - the answer is likely obvious to anyone with current skills.
Because div#content li is more specific than just a single type selector, you need to include elements that are higher up in the cascade to override the specifcity
Specificity can be thought of as four numbers (0,0,0,0)
Inline styles are the first - highest precedence
ID selectors are the second number
Pseudo-classes and attribute selectors are the third
Type selectors are the fourth
The universal selector * has a specificity of 0, anything will override it.
So just specifying li has a value of (0,0,0,1) vs div#content li which has a specificity of (0,1,0,1) the latter wins. Just use this concept to come up with a higher selector.
In the global.css file there is a more specific selector div#content li that has font-size selected inside of it. Be as specific with your selector, or more specific for it to apply throughout the content area.
In the same global.css, there is a div#content li { font-size: 12px;} which is applied, because it is more specific.
Try forcing the style, like this:
li { font-size: 14px !important ;}
So it gets priority over existent styles for that element.
If you use Chrome Developer Tools (F12) you can see which styles are being applied to each element, and even see styles being overridden as they are crossed out, very helpful for debugging CSS issues like this.
Because in the same file, at line 208 you define div#content li {font-size: 12px;} which is more accurate than just li.
I should say you need to apply styling to links itself, while it's not just a plain text inside li.
li a { font-size: 14px;}
On 108 line of your global.css you have a CSS rule div#content li { font-size: 12px;} that overrides your: li { font-size: 14px;} rule.
I want to do a dynamic word cloud and I was wondering if there is a way of changing the link colour in my html section, normally you just define the links colours in css something like:
.tag_cloud { padding: 3px; text-decoration: none; }
.tag_cloud:link { color: #0c3569; }
.tag_cloud:visited { color: #0c3569; }
.tag_cloud:hover { color: #ffffff; background: #0c3569; }
.tag_cloud:active { color: #ffffff; background: #0c3569; }
But I'm planning to do a word cloud were every word has a different colour, aka link/visited will colour will be defined dinamicaly, but is there a way of defining link/visited/hover/active inline in the html?
I Imagine it could be something like this
<a href="something" style="font:arial; ???"word</a>
Thanks.
It can't be done inline since :hover etc. are css pseudo selectors and won't work inline since that is not the intention of it.
But don't be afraid of using css classes - you will need some javascript anyway to make this work. Just define the classes you want to use like:
.cloud_item_1:link {color:red;}
.cloud_item_1:visited {color:yellow;}
.cloud_item_1:hover {text-decoration:underline;}
.cloud_item_1:active {color:black;}
.cloud_item_2:link {color:blue;}
.cloud_item_2:visited {color:orange;}
...
And than apply them to your html as you wish. No big deal here.
You would need to have some JavaScript to change the color on hover and check if the item is active.
Or you could define a class/id (dynamically) for each of the items and target them with CSS.