w3.css vs bootstrap! | Coding help | XtGem

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

# 2017-03-18 13:36 (edited 2017-03-18 13:43 by Graham ) · (0)

bemethavinci

Graham thats really cool...how do i create the footer,change the background and customise the twig

# 2017-03-18 23:32 · (0)

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

# 2017-03-19 00:01 (edited 2017-03-19 00:25 by Graham ) · (0)

bemethavinci

Graham can you please share me the .zip file of the w3.css

# 2017-03-19 01:09 · (0)

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

# 2017-03-19 01:33 (edited 2017-03-19 01:39 by Graham ) · (0)

bemethavinci

Graham so if i should get the css...thats all?...i can design it to my taste

# 2017-03-19 04:08 · (0)

bemethavinci

Mwebvendor waw...your bootstrap site looks responsive and neat...did you twig it?

# 2017-03-19 07:20 · (0)

Mwebvendor

bemethavinci yes,,, i twig it. thaks for graham to helping me....

# 2017-03-19 23:43 · (0)

bemethavinci

Mwebvendor waw...thats good...did you use twiging from the beginning to the end?

# 2017-03-20 00:11 · (0)

Mwebvendor

bemethavinci yes...... if you have a skills in html and css. yoou can customize your own twig template....

You can download our twig file in here http://syntax.xtgem.com/manual/xtgem/pages/blog

# 2017-03-20 00:23 · (0)