I want to change the background colour of alternating rows in a Bootstrap 3 grid. I thought that I could create some CSS and add it to the class in the div but the colour doesn't change.
Here's my CSS:
.row-buffer {
margin-top:20px;
margin-bottom:20px;
}
.row-even {
background-color:#76A0D3;
}
.row-odd {
background-color:#BDE3FB;
}
And my row is being defined like so:
<div class="row row-buffer row-even">
or:
<div class="row row-buffer row-odd">
The row-buffer is working perfectly but the row-even and row-odd don't seem to be making any difference? (My rows are being defined within a container.)
Am I barking up the wrong tree?
Without being able to see your exact situation I'm going to guess that you are having a problem due to selector specificity. If bootstrap has a more specific selector than just .class, then your rule will never override it. You either need to match or be more specific in your selector than bootstrap.
An easy way to typically gain a lot of specificity is to add an id to your selectors like :
#myrows .row-even {
background-color:#76A0D3;
}
#myrows .row-odd {
background-color:#BDE3FB;
}
I created a small example of how specificity can cause problems:
http://jsfiddle.net/path411/JyUy2/
These are the specific selectors you can override to change the color of odd rows in Bootstrap:
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
background-color: #your-color;
}
I assume you are trying to create different background styles/colors for alternating rows in a table.
The simplest way is to just add a self enclosing tag
<AlternatingRowStyle CssClass="danger" />
inside your table before the data.In a gridview control in asp.net just place this after the asp
gridview tag and before the columns tag.
You will immediately see the effect since Bootstrap has this predefined.
I hope my answer will help somebody in the future.
Cheers !
Related
I have a weird one that I can't seem to be able to figure out. I am new to CSS and decided to use bootstrap to assist with styles etc.
the problem I have is when I try to assign two classes to a div element, 1 being the bootstrap column and another from my own stylesheet.
the code from my stylesheet seems to be ignored in some cases. now i have taken that one bit of code and css out and put it into the jsfiddle but it works fine. its only when combined with the rest of the html does it seem to have issues. also note that if i use inline styles it works...
I copied the entire code to js fiddle now so that you guys can replicate the issue. the section I am having issues with is the 4 images that are side by side
class="services-boxes"
anyway any assistance will be appreciated, as well as general feedback as I am new to this all! :)
https://jsfiddle.net/d9bv0grx/1/
Due to the way cascading style sheets work it (styles are be applied in order AND by specificity). It is most likely that styles you are expecting to see are being overridden by specificity.
Give this guide a read.
An example is that for <div id="selector">
#selector {background-color:red;}
div {background-color:green;}
You can expect to see a div with a red background, even though the green background is set afterwards, the id selector has greater specificity.
Then try and alter the specificity of your selectors in your css so that they will take precedence over in bootstrap.
Also just going to add, you have casing issues - you declare the class with lowercase in css, capitalised in your html.
You also have syntax issues in your css. Your css should look like:
.services-boxes {
padding:0;
max-height:500px;
width:100%;
}
Sort all this and you should be golden! jsfiddle
Looks like a combination of syntax errors. Your style should be declared like this:
.services-boxes {
padding:0px;
max-height: 500PX;
width:100%;
}
Note that the class is all lowercase (which should match style where declared which is currently Services-Boxes), a colon separating property and value (you has used = in some instances) and one set of curly braces per declaration (the above class .logo-image has 2 closing braces). Just a bit of formatting should see your code recognised
When you don't have total control over your HTML, you can use the !important property in css to give a priority to your styles.
.services-boxes {
color: red !important;
}
However keep in mind that you have to avoid the !important property as much as possible and do not use it unless you can't do it any other way.
Is it possible to apply a CSS style to an existing HTML table that is constructed as a tree?
For example, in Firefox, the Bookmarks Library table is constructed as a tree. Is it possible to apply a CSS style to one of the columns (but not the others)?
Using treechildren it is trivial to apply a style to an entire row. But how about applying a style to just one column?
CSS nth child should help you solve your problem.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
Here's a quick example fiddle: https://jsfiddle.net/0gztemg6/
And the CSS from the above example:
td:nth-child(2) {
background-color: red;
}
Use treechildren:-moz-tree-cell-text(*property*), replacing property with the appropriate property name.
For example:
#placeContent > treechildren:-moz-tree-cell-text(placesContentTags) {
color: blue !important;
}
Will color the tags column blue.
Works perfectly.
Is there anyway i can access the style property for the particular div? For example, I have a code like below
<div class="testing" style="background-color:#ff00ff;">
This is my test Paragraph
</div>
I want to apply some other background color for this division. But i don't want to modify the class "testing", because it is being used in some other places also. Is there anyway using CSS only to access the style property and apply my new color?
I think attribute selectors may be what you are looking for:
div.testing[style="background-color:#ff00ff;"] {
background-color: new_color !important;
}
You can create another class and overwrite necessary property:
.testing-active {
background-color: red;
}
and use it like this:
<div class="testing testing-active"></div>
You need to make a style that has higher priority than the style. You could use the !important attribute to do that:
<div class="testing" style="background-color:#ff00ff;background-color:red !important;">
Big important caveat: whatever it is you're trying to do doesn't sound like a good idea, because the code will be very difficult to maintain. What is the underlying problem that you are trying to solve?
You can access the elements with this certain style like this:
.testing[style="background-color:#ff00ff;"] {
/* put your attributes here*/
}
but you cannot change the background-color attribute since this one has a higher priority in the html.
see this:
.testing[style="background-color:#ff00ff;"] {
background-color: #00f; /* not possible */
margin: 30px; /* possible */
}
what you can do is add a new attribute to your html like this:
<div class="testing" changecss="true">
This is my test Paragraph
</div>
and add this css:
.testing[changecss="true"] {
background-color: #00f;
}
See the JsFiddle as well.
"Think it is a dynamic code. How can i add new class without using javascript? "
The Answers is You cannot add a new class using CSS dynamically/ runtime. The only way to do it is by using javascript/jquery:-
HTML:
<div id="mydiv" class="testing" style="background-color:#ff00ff;">
This is my test Paragraph
</div>
JQUERY:
$('#mydiv').css('background','#ColorCode');
This way your class also wont change( since its being used in other places) and you can change the background also.
Can i ask why you are trying to achieve this using CSS?
Is there any problem creating a CSS class like this:
[test] { font: 13px; }
and use it in an HTML attribute as this:
<div test></div>
Would the performance in some browsers be affected by using this method?, I've tested it with Mozilla Firefox and Google Chrome and they seem to work with no problems.
Your custom attributes are not valid HTML. You must use data-* attributes if you want to put custom data on your elements. This makes what you are doing bad practice.
In addition, there are CSS classes already that should meet your needs, unless there is more to your question than you have described.
While there is no problem in applying styles this way, and sure it does work in the browsers, you have to understand that this is not a standard way of applying styles.
Since you have also asked from a 'practice' perspective, then, yes, this surely is not the right practice. The idea is: HTML is used to define the elements to be shown within the browser window, CSS is used to apply any styling that needs to be applied on these elements and JavaScript is used to perform any 'action' on it. So, from a practice perspective, this surely is bad practice!
On another note, why the reluctance to create a class and apply it on the div? After all, this class can be reused as and when required. If you need it only once, then why not create an id selector?
HTML:
<div class="rightApproach">The right way of applying styles</div>
CSS:
.rightApproach { color:Red; }
See this fiddle where you can see your approach as well as the correct way of applying styles, be it class selector or id selector.
http://jsfiddle.net/JkRPt/
It's better to use classes. This way will not work in older browsers and it's not professional.
However it doesn't have any performance issues.
HTML:
<div class="test">
CSS:
.test { font:13px; }
its good to use classes. Example:
<div class="module accordion expand"></div>
/* All these match that */
.module { }
.accordion { }
.expand { }
I have a problem here that i can't seem to figure out, till now my css has been a little slapdash and it was always a case of hack away till it looks right but i've decided to learn it properly and i'm trying to categorize things as much as i can.
So i have a layout that has an unordered list, this list has three li tags, within each of these li tags are two div each.
Now i have a class for each of these containers, they can be called container_1 container_2 and so on.
Now they have some unique attributes to each of them but they al also follow a set style for example, the divs in each li are side by side so its sets of two divs also they are all going to have round corners.
So i thought i could make a class class rounded_corners plus float_left and float_right so instead of re typing the code to round the corns or float something i could just reference thing class like this:
.container_1 .rounded_corners .float_left
{
}
.container_2 .rounded_corners .float_right
{
}
But when i use this i loose my styling so i used a comma and this allowed the sty;ing for the div to come back but the corners and floats didn't work.
So where am i going wrong with this?
This is my code, i have taken the code out that breaks the layout, but if you remove the comments you can see what happens.
http://jsfiddle.net/ragebunnykickass/g3Zaz/
The naming is a little different but you'll know what is meant.
Thanks.
CSS classes cannot inherit so what you have to do is split them to be as much atomic as possible. For example if you have a rounded-corners class and it may be applicable to containers:
.rounded-corners
{
/* Your CSS to define rounded corners */
}
Note that you define ONLY the properties for rounded corners. Now let's say you have a class to style containers (for example with a proper padding):
.container
{
/* Your CSS to define a nice container */
}
How to combine them together? This won't be done in CSS but in HTML, in this example this <div> inherits from both container and rounded-corners:
<div class="container rounded-corners">
</div>
Now suppose you need rounded corners for a non container object:
<div class="rounded-corners">
</div>
This is how CSS works. Do not compare them (because of name) with classes of object oriented languages. Each class define a set of attributes that will be applied to all elements that belong to that class. Final element style is the composition of the attributes inherited from each class that element belongs to.
NOTE: to summarize: answer is yes, you may have to repeat some code. You'll have trouble to manage your code (both HTML and CSS) if you use classes as short names for a style: you'll see you missed the point to separate content from style (because in HTML you'll define, using a class like rounded-corners, an explicit appearance). Imagine: next month you have to change your web-site style and fashion requirements impose you have square corners. You have to change your HTML code (unless you accept to have a rounded-corners class to apply a squared border). Much better if you simply say container and you let your CSS to define (and know) how a container should be rendered.
It may be applicable to you or not (it depends on your preferences, taste and development environment) but you may take a look to LESS. It's implemented as a JavaScript that will parse your CSSs. Of course you won't write a pure valid CSS but you'll gain many new features. In your case you may find mixins are what you need:
.rounded-corners
{
/* Your CSS here */
}
.float-left
{
/* Your CSS here */
}
.container
{
.rounder-corners
.float-left
}
You could have a CSS code like:
.container_1 {
}
.rounded_corners {
}
.float_left {
}
and then set a class to HTML element in this way:
<div class="container_1 rounded_corners float_left">...</div>
So the DIV element will inherit every style of every class!
Obviously, DIV it's just an example, you could use every tag!
If i get it well, you want a set of classes to apply to each div?
I'd break it up like that :
css
.rounded_corners {}
.float_left {}
.float_right {}
.container {}
and in the html
<li id="container_1" class="container float_left rounded_corners">...</li>
<li id="container_2" class="container float_right rounded_corners">...</li>
etc...