Hi just wondering if anyone else is having a problem with the text-hide class not working on a mobile/tablet. Elements of it seems to be overridden by Boostrap's own CSS mainly 'color' and 'font-size' attributes. I have found if I put it in my custom CSS and give it a more specific selector name it works! In this case I am applying it to the 'navbar-brand' to use a logo as background image and hide the text.
.navbar-default .text-hide {
color: transparent;
border: 0px none;
background-color: transparent;
text-shadow: none;
font: 0px/0 a;
}
It's great that there's an inbuilt image replacement class but it's weird that it is overridden by it's own CSS.
Thanks
you may try putting an !important; in every line of your css so that it will override the bootstrap.
sample code:
color: transparent !important;
Related
I can't figure out why this won't work. I happen to be using bootstrap as well.
<h1 class="montserrat_text" id="header_title">title</h1>
In the css file .montserrat_text works and the font of the h1 is the correct font.
But when I add #header_title to the css:
#header_title
{
color: red;
font-size: 60px;
}
Nothing happens and the text won't change size or color.
Thanks
The reasons the font color doesn't change was mentioned by #MohammadUsman already - there is no CSS property called font-color, what you want is named color.
The reasons the font-size doesn't change either (even though the property name is correct) could be that your browser ignores rules that follow illegal rules.
For change the color of text you must use color instead of font-color.
According to CSS priority if a selector contain the parents name , this selector has priority for effect than selector that does not contain it.
You must use parent name in selector like :
{# or .}parent #header_title
{
color: red;
font-size: 60px !important;
}
or you can use !important :
#header_title
{
color: red;
font-size: 60px !important;
}
As #Mohammed Usman said, it's color, not font-color.
Also, since you're using Bootstrap, it's possible something is overriding your CSS so you can add the !important tag to ensure that your CSS is used, as so:
#header_title {
color: red !important;
font-size: 60px !important;
}
HTML
<div data-countdown="2016-12-10 01:17:26">
<div class="countdown-text">noch</div>
<div class="countdown-val">2</div>
<div class="countdown-text">Tage</div>
</div>
CSS
.countdown-val {
color: red;
}
.countdown-text {
font-size: 13px;
}
Values from .countdown-val class are not applied. When I change the order of classes within the css file the same thing happens vice versa. I am using a bootstrap built theme, but I cannot explain this behaviour. Can anybody else please?
you just try this.
.countdown-val {
color: #ff0000;
}
otherwise.you can add !important
.countdown-val {
color: #ff0000 !important;
}
CSS is fine.
Check your closing brackets {} in your code.
In your bootstrap file, make sure your classes aren't nested under another class.
seems like some other css is overriding yours
use
.countdown-val {
color: red !important;
}
.countdown-text {
font-size: 13px !important;
}
or change the class names to some other unique names to be sure that the divs style is not affected by other css
a {
color: #E0E0E0 !important;
}
.navbar-default .navbar-nav>li>a:hover {
color: #171F26B !important;
}
Currently trying to create my own website and I'm running with some troubles trying to get the navigation item hover to work. I keep coming up with 'Invalid Property Value'.
I've tried targeting several classes and tags in different ways, but it ultimately doesn't work. I've also tried being very specific as you can tell from the code above, however that isn't working either.
I understand that sometimes we may use !important to give a CSS property priority so it may override bootstrap.
a {
color: #E0E0E0 !important;
}
.navbar-default .navbar-nav>li>a:hover {
color: #171F26B !important;
}
Reduce the color code by 1 on: color: #171F26B !important;
You've got a typo in your color value. Hexadecimal colors have six letters; #171F26B has one letter too many.
This is the site:
http://avocat.dac-proiect.ro/wp/?page_id=19
I have a contact form and the text color is black
I want to change the color and used the CSS code but unfortunately this does not work ...
.contactform11 .wdform-label{color:white;}
How can I solve this problem?
Thanks in advance!
There is a style .contactform11 .wdform-label (same selector, just as specific), specified in the page itself (around line 900). This style selector will override the one you added to the style sheet.
There is an !important, first get rid of that.
.contactform11 .wdform-label {
color: #B7B6C3 !important;
}
Then in the code block here replace #000, with #fff:
.contactform11 .wdform-label {
border: none;
color: #000; /* should be #fff */
vertical-align: top;
line-height: 17px;
}
If you can't access the css file for some reason, it's a very simple change with js.
You can use something like
[].forEach.call(document.querySelector('.contactform11 .wdform-label'),
function(el) { el.style.color = '#fff' } )
There is a small npm module to abstract this further. (Don't have to constantly rewrite .call and document.querySelector over and over... )
var forEachEl = require('for-each-el')
forEachEl('.contactform11 .wdform-label',
function(el) { el.style.color = '#fff' })
Try this
.contactform11
.wdform-label {
#000;
}
Maybe is because the order in wich the css rules are aplied. Try using:
.contactform11 .wdform- label{color:white !important;}
Go on and use the element instead maybe? Then assign in an id of 'contactform11' and use the css selector to set the label colors to whatever you desire (White in this case) See below:
<form id="contactform11"><label>Name</label></form>
CSS:
#contactform11 label {
color: #FFF;
}
Should do the trick!
Remove the space between .contactform11 and .wdform-label.
So:
.contactform11.wdform-label{ color: #FFF; }
I am using the following pagination button styles provided by Twitter Bootstrap:
<ul class="pager">
<li class="previous">← Older</li>
<li class="next">Newer →</li>
</ul>
This is how they currently look like:
How do I need to change my CSS style to change the background color of these buttons from green to some other color?
I tried this CSS code, but it did not change the button styles:
.next {
background-color: #ecf0f1;
color: #2d525d;
}
Thank you!
You need to overwrite the css codes:
.next a {
background-color: #ecf0f1 !important;
color: #2d525d !important;
}
Edit: The color and background-color styles are for "a" element inside the li.
you can also add !important to your custom css
.next {
background-color: #ecf0f1 !important;
color: #2d525d;
}
Use
!important
after you css but before ;
It pretty much means ignore anything else and use THIS !important
you will need to use this to break out of default styling in some frameworks, its also useful for media queries.