Alex E.
asked on
WordPress child theme to affect only one table top border and expand color in width.
I have wisteria theme in WordPress but that is not the problem could be in any. Well the point is I want to modify I added like a footer in a child for the wisteria. I use child of same theme of same theme to avoid loss changes in updates. Now in my table I added in the footer.php child is similar to this:
And like this with other tables now I have these problems:
1.-The theme wisteria use this CSS in sytles.css for tables:
Now in our tables we see the border-top and we want to remove that border top in our specified table only. Now if we enter like this making a file styles.css file in child them:
That works but affects the whole site and we don't want that. Then in styles.css in child deleted that code to leave untouched from main styles.css theme and we tried in styles.css file child taking our information of our table this:
And does nothing is ignored. Also we used this and nothing:
How can we affect our table only?
2.-Like you see at the beginning of the script ee have "<div id="_footer" class="container">" on _footer CSS we have:
That CSS in a normal HTML what it does is expand horizontally totally in the browser the color but after copy and paste the code in the footer.php code is not expanding the color is like the same theme is forcing some width then how can we do to expand horizontally the color?
Thank you
<div id="_footer" class="container">
<div class="container">
<div class="wrapper">
<div class="">
<div class="col-lg-6 col-md-6 col-sm-5">
<div class="">
<div class="">
<table id="tableleft" style="border-top: none;" class="footer-link tableleftafter">
<tr><th><a href="platsys.html">System</a></th></tr>
<tr><td><a href="platedi.html#edi">editing</a></td></tr>
<tr><td><a href="platcorp.html#corp">corporative</a></td></tr>
<tr><td><a href="platwork.html#work">Work</a></td></tr>
...And like this with other tables now I have these problems:
1.-The theme wisteria use this CSS in sytles.css for tables:
table th,
table td {
padding: 8px;
padding: 0.5rem;
line-height: 1.5;
vertical-align: top;
border-top: 1px solid #ebebeb;
}Now in our tables we see the border-top and we want to remove that border top in our specified table only. Now if we enter like this making a file styles.css file in child them:
table th,
table td {
padding: 8px;
padding: 0.5rem;
line-height: 1.5;
vertical-align: top;
border-top: none;
}That works but affects the whole site and we don't want that. Then in styles.css in child deleted that code to leave untouched from main styles.css theme and we tried in styles.css file child taking our information of our table this:
.tableleftafter th, .tableleftafter th,{
padding: 8px;
padding: 0.5rem;
line-height: 1.5;
vertical-align: top;
border-top: none;
}And does nothing is ignored. Also we used this and nothing:
.tableleftafter th, .tableleft th,{
padding: 8px;
padding: 0.5rem;
line-height: 1.5;
vertical-align: top;
border-top: none;
}How can we affect our table only?
2.-Like you see at the beginning of the script ee have "<div id="_footer" class="container">" on _footer CSS we have:
#_footer{
width: 100%;
background-color: #282397;
}That CSS in a normal HTML what it does is expand horizontally totally in the browser the color but after copy and paste the code in the footer.php code is not expanding the color is like the same theme is forcing some width then how can we do to expand horizontally the color?
Thank you
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I was wrong with:
What it does that is move to the left and make appears like if fill left but not just move to the left the footer columns. This is my whole code example of the footer:
What can we make to full width in left and right side without loss the centering?
#_footer {
display:inline-block;
}What it does that is move to the left and make appears like if fill left but not just move to the left the footer columns. This is my whole code example of the footer:
<div id="_footer" class="container">
<div class="container">
<div class="wrapper">
<div class="">
<div class="col-lg-6 col-md-6 col-sm-5">
<div class="">
<div class="">
<table id="tableleft" style="border-top: none;" class="footer-link tableleftafter">
<tr><th><a href="platsys.html">System</a></th></tr>
<tr><td><a href="platedi.html#edi">editing</a></td></tr>
<tr><td><a href="platcorp.html#corp">corporative</a></td></tr>
<tr><td><a href="platwork.html#work">Work</a></td></tr>
<tr><th><a href="infra.html">Infra</a></th></tr>
<tr><td><a href="infr.html#int">Sys</a></td></tr>
<tr><td><a href="infra.html#car">Car</a></td></tr>
<tr><td><a href="infra.html#ben">Ben</a></td></tr>
<tr><th><a>Services</a></th></tr>
<tr><td><a href="pdf/01.pdf">Des</a></td></tr>
<tr><td><a href="pdf/02.pdf">Sol</a></td></tr>
<tr><td><a>Ase</a></td></tr>
<tr><td><a href="pdf/04.pdf">Plat</a></td></tr>
<tr><td><a href="pdf/05.pdf">E-Commerce</a></td></tr>
<tr><td><a>Video</a></td></tr>
<tr><td><a href="pdf/07.pdf">Podcast</a></td></tr>
<tr><td><a href="pdf/08.pdf">DVD</a></td></tr>
<tr><td> </td></tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-6 col-sm-7" style="margin-top: 1%">
<div class="">
<div class="">
<table id="tableright" class="footer-link tableleftafter">
<tr><td><a onclick="window.open('http://www.facebook.com', '_blank');" class="footer-icon"><span style="font-size:45px;" class="icon-social-facebook"></span><span class="">Facebook</span></a></td></tr>
<tr><td><a onclick="window.open('http://www.twitter.com', '_blank2');" class="footer-icon"><span style="font-size:45px;" class="icon-social-twitter"></span><span class="">Twitter</span></a></td></tr>
<tr><td><a onclick="window.open('https://plus.google.com/', '_blank2');" class="footer-icon"><span style="font-size:45px;" class="icon-social-google"></span><span class="">Google+</span></a></td></tr>
<tr><td> </td></tr>
<tr><td><a onclick="window.open('https://www.instagram.com', '_blank');" class="footer-icon"><span style="font-size:45px;" class="icon-social-instagram"></span><span class="">Instagram</span></a></td></tr>
<tr><td><a onclick="window.open('https://www.youtube.com', '_blank');" class="footer-icon"><span style="font-size:45px;" class="icon-social-youtube"></span><span class="">Youtube</span></a></td></tr>
<tr><td><a onclick="window.open('https://www.tumblr.com', '_blank');" class="footer-icon"><span style="font-size:45px;" class="icon-social-tumblr"></span><span class="">Tumblr</span></a></td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>What can we make to full width in left and right side without loss the centering?
ASKER
That full code I have inside footer.php in child:
I "HERE I HAVE THE CODE" I have that tables.
<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the #content div and all content after
*
* @package Wisteria
*/
?>
</div><!-- #content -->
<footer id="colophon" class="site-footer">
<div id="footer-sidebar" class="secondary">
<div id="footer-sidebar1">
<?php
if(is_active_sidebar('footer-sidebar-1')){
dynamic_sidebar('footer-sidebar-1');
}
?>
</div>
<div id="footer-sidebar2">
<?php
if(is_active_sidebar('footer-sidebar-2')){
dynamic_sidebar('footer-sidebar-2');
}
?>
</div>
<div id="footer-sidebar3">
<?php
if(is_active_sidebar('footer-sidebar-3')){
dynamic_sidebar('footer-sidebar-3');
}
?>
</div>
</div>
<div class="site-info">
<div class="site-info-inside">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="credits">
<?php do_action( 'wisteria_credits' ); ?>
</div><!-- .credits -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
</div><!-- .site-info-inside -->
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page .site-wrapper -->
[b]HERE I HAVE THE CODE[/b]
<?php wp_footer(); ?>
</body>
</html>I "HERE I HAVE THE CODE" I have that tables.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Open in new window
And only fill to the width of browser the left side not the right one. Any idea in how to make fill the right side also? Or why just the inline-block just filled the left side?