need some css help on bootstrap theme

By drupalfriend123 on 13 Feb 2016 at 20:56 UTC

Hi,

I created a views table page. I like to have different background colors for devices which are minimum 993px.

I wrote this css. It works for even rows but not for odd rows.

	@media (min-width: 993px){

.view-xpress .odd{ background-color: #DCDCDC;}
.view-xpress  .even{ background-color: #F5F5F5;}

Then, I inspected in chrome and I see this code overwriting the odd rows:

	media = 'all' 
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
background-color: black;}
}

How can i force to change to my code so i get my colors?

Thanks.

Comments

Can you please help?

drupalfriend123 commented 14 February 2016 at 19:53

Can you please help?

http://godrupal.info/xpressauto/?q=xpress-vehicles-inventory-in-atlantic...

I have done these things many times and I was able to fix but this one I am completely lost. Not sure why odd rows are not changing. Odd rows are always black...

You also have css for table

nevets commented 14 February 2016 at 20:16

You also have css for table cells (td) like this

.table-striped > tbody > tr:nth-child(2n+1) > td

This will take precedence over row styles.

I did not write this. It

drupalfriend123 commented 14 February 2016 at 20:49

I did not write this. It might be from bootstrap.

.table-striped > tbody > tr:nth-child(2n+1) > td

Recap:

I created the views. I simple wrote this css:

	 .views-table   .odd { background-color: green;}
	 .views-table  .even{ background-color: red;}

Even row works. Odd row does not work.

Because the below is overwriting the odd rows:

.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: black;
}

I took the above code and pasted in my custom css and then changed the color. That also did not work.

my custom.css:

@media (min-width:993px){
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: black;
}
}

Where is the orginal code coming from? May be i can go there and change the color to see it works.

Please advise.
}

Two things, you have

nevets commented 15 February 2016 at 14:59

Two things, you have "Aggregate and compress CSS files" enabled so your changes will not show up unless your clear cache and I can not tell what file it is. You can disable at admin/config/development/performance.

And if you are using the bootstrap theme and you do not want the default behavior you can disable bootstrap row stripping under the settings for the theme. On the settings page, under the general section click "Table" to expand that section and disable "Striped rows"