This the link to my website page I am working on
https://www.netsportworld.com/category/football-predictions/
I am using column text block
where do I apply the css code to change the background of this table https://imgur.com/pMUk3Jl
to some thing like this https://imgur.com/lY5MXnO
still waiting on a reply for this
Hi,
This can be done with a custom css like this one -> https://i.imgur.com/eJFeocz.png
table > *{
text-align: center;
}
table tr th {
background: orange;
color: white;
text-align: center;
}
table tr td:last-child {
background: green;
color: yellow;
}
table tr:nth-child(even) {
background-color: #dddddd;
}
table tr td:nth-child(1), table tr td:nth-child(2) {
background: green;
color: white;
}
The code need to be set in theme panel> custom code> custom css.
Also it will be batter if you add an extra class on the table to can tiger the code only on the tables you want.
Hope this will help you!
I am using the above html and css. the table is coming but the css is not working well, what am I doing wrong and how do I get it to work
link to website(last table at bottom): https://www.netsportworld.com/category/football-predictions/
HTML code:
<link href=”//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css” rel=”stylesheet” id=”bootstrap-css”>
<script src=”//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js”></script>
<script src=”//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<!—— Include the above in your HEAD tag ———->
<section id=”tabs” class=”project-tab”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-12″>
<nav>
<div class=”nav nav-tabs nav-fill” id=”nav-tab” role=”tablist”>
Project Tab 1
Project Tab 2
Project Tab 3
</div>
</nav>
<div class=”tab-content” id=”nav-tabContent”>
<div class=”tab-pane fade show active” id=”nav-home” role=”tabpanel” aria-labelledby=”nav-home-tab”>
<table class=”table” cellspacing=”0″>
<thead>
<tr>
<th>Project Name</th>
<th>Employer</th>
<th>Awards</th>
</tr>
</thead>
<tbody>
<tr>
<td>Work 1</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Work 2</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>Work 3</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class=”tab-pane fade” id=”nav-profile” role=”tabpanel” aria-labelledby=”nav-profile-tab”>
<table class=”table” cellspacing=”0″>
<thead>
<tr>
<th>Project Name</th>
<th>Employer</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Work 1</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Work 2</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>Work 3</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class=”tab-pane fade” id=”nav-contact” role=”tabpanel” aria-labelledby=”nav-contact-tab”>
<table class=”table” cellspacing=”0″>
<thead>
<tr>
<th>Contest Name</th>
<th>Date</th>
<th>Award Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>Work 1</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Work 2</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>Work 3</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
CSS code:
.project-tab {
padding: 10%;
margin-top: -8%;
}
.project-tab #tabs{
background: #007b5e;
color: #eee;
}
.project-tab #tabs h6.section-title{
color: #eee;
}
.project-tab #tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
color: #0062cc;
background-color: transparent;
border-color: transparent transparent #f3f3f3;
border-bottom: 3px solid !important;
font-size: 16px;
font-weight: bold;
}
.project-tab .nav-link {
border: 1px solid transparent;
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
color: #0062cc;
font-size: 16px;
font-weight: 600;
}
.project-tab .nav-link:hover {
border: none;
}
.project-tab thead{
background: #f3f3f3;
color: #333;
}
.project-tab a{
text-decoration: none;
color: #333;
font-weight: 600;
}
Hi,
Please try like this:
Set this code here -> https://i.imgur.com/kw1Iuge.png
The table code set it in a column text -> https://i.imgur.com/o4HJCxi.png
Then set the css in a css element -> https://i.imgur.com/IhXsqbI.png also the css can be set in theme panel.
Hope this will help you!
This is the link to my site https://www.netsportworld.com/category/football-predictions/
I have followed the above suggestions and set the bootstrap code(code below) here
https://i.imgur.com/kw1Iuge.png
and then the table html code(code below) here https://i.imgur.com/o4HJCxi.png
The tables are displaying as expected but now the issue I am running into is the the mobile menu tab https://imgur.com/76FnjgV to display my categories is no longer responding. nothing happens when clicked on the phone. how do I resolve this(I think it has to do with the code I place in the javascript section because once I delete it, the mobile menu works well again)
CODE
BOOTSTRAP CODE
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>
<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”></script>
TABLE CODE
<nav>
<div id=”nav-tab” class=”nav nav-tabs” role=”tablist”>Home
Profile
Contact</div>
</nav>
<div id=”nav-tabContent” class=”tab-content”>
<div id=”nav-home” class=”tab-pane table-responsive fade show active” role=”tabpanel” aria-labelledby=”nav-home-tab”>
<table class=”table table-striped”>
<thead>
<tr>
<th scope=”col”>#</th>
<th scope=”col”>First</th>
<th scope=”col”>Last</th>
<th scope=”col”>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope=”row”>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope=”row”>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope=”row”>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div id=”nav-profile” class=”tab-pane table-responsive fade” role=”tabpanel” aria-labelledby=”nav-profile-tab”>
<table class=”table table-hover”>
<thead>
<tr>
<th scope=”col”>#</th>
<th scope=”col”>First</th>
<th scope=”col”>Last</th>
<th scope=”col”>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope=”row”>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope=”row”>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope=”row”>3</th>
<td colspan=”2″>Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div id=”nav-contact” class=”tab-pane table-responsive fade” role=”tabpanel” aria-labelledby=”nav-contact-tab”>c</div>
</div>
Hi,
Indeed, is possible that this code to interfere with the theme function, please make one more test and set the code from head in body, maybe if the code is loading after the those problems will be avoid, also you can set the code from header in column text in text editor before the table, it can work in that way too.
Let me know the results!
can you take some time to look at this issue and be specific with your suggestions
with your response above, what do you mean specifically by setting the code from head in body, is this what you meant https://imgur.com/g2sa4xl. if so I tried that but didn’t work
in your second suggestion above you said I set the code from header in column text, can you send pictures giving guidance on what specifically you mean since I don’t follow. please take some time to help me find a solution to this since I have been stuck on this all week and need complete task this weekend
the link to website is https://www.netsportworld.com/category/football-predictions/
and the bootstrap code and table code are all provide in previous post. thanks
Hi,
The problem is with the jquery script, you can use the steps you made here -> https://i.imgur.com/R55WP9y.png but do not set in theme panel this link:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
This query is blocking the theme queries and I do not find a way to make it work, add only these and the table and theme will work correctly -> https://i.imgur.com/thbW8eg.png
Thank you for your understanding!
