Archived topic
W3 CSS issues
6 replies · Started by tenchystryder on November 28, 2015
Hi Tom
I have added some code into my footer (in the copyright option) and have used w3.css
However, the only way I can get w3.css to work is linking to w3schools website directly.
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
I have downloaded w3 stylesheet from above link and saved as w3.css file, but no matter where I load it or how I attempt to link it, I loose the format completely when view the site footer.
It's working at the moment linking to w3 school as above but I would rather pull from a local file.
Footer in action HERE
The full code in footer option is: (when viewing site is everything with white bg at bottom of page)
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-row-padding">
<div class="w3-third">
<h2>Twitter</h2>
<p><a href="https://twitter.com/TenchyStriker" target="_blank"><img src="/wp-content/uploads/2015/11/tweet1.png" alt="Follow Us" style="width:150px;height:150px;"></a></p>
<p><b>Follow us on Twitter. </br>Just click image above</b></p>
</div>
<div class="w3-third">
<h2>Responsive</h2>
<p><img src="/wp-content/uploads/2015/11/responsive.png" alt="Responsive" style="width:150px;height:150px;"></p>
<p><b>Our website is fully responsive.</br>It will work on mobile, tabs and PC's</b></p>
</div>
<div class="w3-third">
<h2>Instagram</h2>
<p><a href="https://www.instagram.com/tenchy_striker "target="_blank" ><img src="/wp-content/uploads/2015/11/Instagram_Icon.png" alt="Instagram" style="width:150px;height:150px;"></a></p>
<p><b>You can follow us on Instagram.</br> Just click the logo above</b></p>
</div>
</div>
<div class="w3-container w3-orange">
</br>
<p><strong>%copy% 2009 to %current_year% | ™ Tenchy Striker | ♥ All Rights Reserved ♥</strong></p>
</div>
</body>
</html>Hi there,
Do you have the GP Hooks add-on?
If so, try adding it to the wp_head hook - that's where all stylesheets should go.
Let me know :)
Hi Tom
Not sure I understand. Do you mean dump the w3 style sheet I downloaded from w3schools into the top section of hooks?
If so, all that done is dump my home page with the actual code.
I have tried placing the w3.css file in various locations on my server like below, but I loose the footer effect I created.
This is original code that works calling from w3schools.
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
And some examples of what won't work calling .css file I downloaded from my server.
<link rel="stylesheet" href="http://www.mysite.com/w3.css">
<link rel="stylesheet" href="http://www.mysite.com/corefile/wp-content/themes/generatepress/w3.css">
<link rel="stylesheet" href="http://www.mysite.com/corefile/wp-includes/css/w3.css">
Plus loads more attempts. On the w3schools it states the file can be downloaded and used directly on a site.
Hi there,
I mean add this to the wp_head hook:
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
Or better yet, upload it to your server, and link to it:
<link rel="stylesheet" href="http://yourwebsite.com/w3.css">
To make sure you're calling the right URL, enter it into your browser and make sure it takes you to the CSS (yourwebsite.com/w3.css for example).
Hi Tom
Just went for your second option which is what I was trying to achieve ......
.... Wasn't working because the w3.css file had not saved properly so the below is now working 100%
<link rel="stylesheet" href="http://mysite.com/w3.css">
Mostly .... it's the silliest things I get caught out on :-(
Much appreciate the help Tom.
Happens to all of us! Glad it's working now :)