Hi there! I’m just getting used to customizing this theme. Lots of fun! I have a question about “striping” or alternating background colors of table rows to make them easier to read. I tried using the “table-striped” CSS from Bootstrap in the custom CSS option as well as directly in the Theme Editor. I also put the bootstrap.min.css CDN in the header. Do you know why it does not work or if there is a way to style the tables with Newspaper? I pasted the CSS for table-striped below just for reference. Thank you.
table,
th,
td {
border: 1px solid rgba(0,0,0,.12);
}
.table-striped,
.table-striped th,
.table-striped td,
.table-classic,
.table-classic th,
.table-classic td {
border: none;
}
.table-classic th,
.table-classic td {
border-bottom: 1px solid rgba(0,0,0,.12);
}
table {
border-collapse: separate;
border-spacing: 0;
border-width: 1px 0 0 1px;
margin-bottom: 24px;
width: 100%;
}
.table-striped > tbody > tr:nth-of-type(odd) {
background-color:#f9f9f9;
}
Hi,
Make sure that you set the link for Bootstrap here -> https://www.screencast.com/t/JmTV3kHxr
For me this css is apply, but there is not a big difference.
Thank you!
Hi thank you. I pasted the following script in that location but does not do anything. Any thoughts?
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”></script>
Hi,
Please provide me a link to your website and some more details bout the code that you want to set with Bootstrap and how this should look.
Thank you!
Hi. An example page would be:
https://hd-report.com/amazon-fire-tv-channels/
I’m trying to make look like this:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_table_striped&stacked=h
Here is the full reference to Bootstrap tables on W3Schools:
https://www.w3schools.com/bootstrap/bootstrap_tables.asp
I tried putting the styles above in style.css and in CSS option in Theme. The bootstrap.css CDNs are linked in both header.php and header-empty1.php
Hi,
First make a table like the one that you want to achieve -> https://www.screencast.com/t/XAtNR5zv4I -> https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_table_bordered&stacked=h add the classes to your table -> https://www.screencast.com/t/51Q41gmDqlQa -> https://www.screencast.com/t/iQTsQLmE6MCv after that set the css link in head like this -> https://www.screencast.com/t/QxpoTcUYPr here are the results -> https://www.screencast.com/t/lpON4erQfKio
Thank you!
Sorry. But are you suggesting inline styles? That is not a good solution. I need a site-wide solution. I don’t understand why CSS won’t work over the top of your theme? Can you explain?
Hi,
That is not inline style, you need to add a specific class, in this way the Bootstrap css will add on the elements that contain that class.
Here you can check what is a class -> https://www.w3schools.com/html/html_classes.asp
And here you can check what is inline style -> https://www.w3schools.com/css/css_howto.asp
Thank you for your understanding!
Yes but the way you described it would be pasted into every table used in a post or page, no?
Nevermind I found an easier way using nth-child in CSS. I pasted in Theme Panel > Custom Code > Custom CSS and works.
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
</style>
