Graham
bemethavinci There is no zip file just a css
https://www.w3schools.com/w3css/3/w3.css same as the css link uses copy the url and upload by remote server direct to your site
bemethavinci
Graham can you please share me the .zip file of the w3.css
Graham
bemethavinci <div class="w3-bar w3-red ">The footer</div> is a basic bar you could use
look in the code w3css uses named colors in the classes (ie: w3-red) just change them
The body colors are not set at all so either give the <body> tag a color class or set your own styles for the body in a custom style sheet
Twig is a lot of work but the same as for any other template most of it is just change the class names
you don't even have to change them all or delete the old ones just add the new classes
everything is in the docs with examples
You could even have one of the xtgem css templates on the site as well as the w3css then you don't have to change the blog twig at all
like this
http://cssw3s.xtgem.com/blog
bemethavinci
Graham thats really cool...how do i create the footer,change the background and customise the twig
Graham
bemethavinci Here is a w3css _header code for a header that collapses to a 'hamburger' menu on mobiles
demo
http://cssw3s.xtgem.com/
There is some js but w3css puts it in the actual code
I have also added a routine to mark the 'active' link
Note links are set in two places one for pc and one for mobile
<div class="w3-bar w3-red mark-active">
<a href="/" class="w3-bar-item w3-button">Home</a>
<a href="/blog" class="w3-bar-item w3-button w3-hide-small">Blog</a>
<a href="/forum" class="w3-bar-item w3-button w3-hide-small">Forum</a>
<a href="/about" class="w3-bar-item w3-button w3-hide-small">about</a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="showNav()">☰</a>
</div>
<div id="mobile-nav" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium mark-active">
<a href="/blog" class="w3-bar-item w3-button">Blog</a>
<a href="/forum" class="w3-bar-item w3-button">Forum</a>
<a href="/about" class="w3-bar-item w3-button">About</a>
</div>
<script type="text/javascript" >
function showNav()
{
var x = document.getElementById("mobile-nav");
if (x.className.indexOf("w3-show") == -1)
{
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
if ( document.getElementsByClassName )
{
window.mark_active = function ()
{
var items = document.getElementsByClassName('mark-active');
if ( items != undefined && items != null && items [0] != undefined )
{
for (var h = 0; h < items.length; h++)
{
var item = items[h].childNodes;
var loc = decodeURI ( document.location.pathname ).replace ( ' ', '+' ).replace ( /\/__xt.+/, '' );
for (var i = 0; i < item.length; i++)
{
if ( item [ i ] && item [ i ].getAttribute && item [ i ].getAttribute('href') == loc ) { item[i].className += ' w3-opacity'; break; };
}
}
}
};
window.mark_active ();
}
</script>
Copy code
Mwebvendor
Im using bootstrap.. its good for mobile and desktop...
http://flickvid.com watch more hollywood movies for free
bemethavinci
Graham waw...thats cool...and i think im done but now that xtgem has some problem with their server...do you think i can still use it?
Graham
bemethavinci Its a responsive template so it does most of that automatically
bemethavinci
Graham ok...thank you...but i can design it the way i want for mobile and web
Graham
bemethavinci all the instructions to use it are on the w3s site
https://www.w3schools.com/w3css/default.asp
all you need to set it up is to add the css link
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
Copy code to _headtags
