[Resolved] W3 CSS issues

Home Forums Support W3 CSS issues

  • This topic has 6 replies, 2 voices, and was last updated 5 years ago by Tom.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #156231
    tenchystryder

    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>
    #156313
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #156317
    tenchystryder

    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.

    SCROLL DOWN TOWARDS BOTTOM OF THIS PAGE

    #156318
    tenchystryder
    #156328
    Tom
    Lead Developer
    Lead Developer

    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).

    #156333
    tenchystryder

    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.

    #156334
    Tom
    Lead Developer
    Lead Developer

    Happens to all of us! Glad it’s working now 🙂

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.