bemethavinci
bemethavinci good day sir graham...i need a little help on the dummy{}@xtgem_templates...i dont understand it...using bootstrap....can i create the header,twig post body and footer....with it?...i dont understand.
Graham
bemethavinci To be honest forget it stop worrying about xtgem-template or dummy classes it is easier if I just give you the code to add the 'active' navigation class direct.
Add this code to the end of your _footer
<script>
window.onload_events = function (){
if ( document.getElementsByClassName ){
window.mark_active_navigation = function (){
var items = document.getElementsByClassName('nav');
if ( items != undefined && items != null && items [0] != undefined ){
for (h=0;h<items.length;h++){
item = items[h].childNodes;
var loc = decodeURI ( document.location.pathname ).replace ( ' ', '+' ).replace ( /\/__xt.+/, '' );
for (var i = 0; i < item.length; i++){
if ( item [ i ].firstChild && item [ i ].firstChild.getAttribute && item [ i ].firstChild.getAttribute('href') == loc ){
item[i].className += ' active'; break;
}
}
}
}
}
window.mark_active_navigation ();
}
}
window.onload_events ();
</script>
Copy code
The script will add
class="active" to the element containing the current pages link in the containing element with the class 'nav'
in the html below code the class will be added to the appropriate <li> element
it will give a 'active' appearance to that link
A basic nav-tabs bootstrap page header using this script looks like this
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img class="pull-left" src="--logo goes here--" alt="logo" /></a>
</div>
<ul class="nav" style="display:inline-block">
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/forum">Forum</a></li>
</ul>
</div>
</nav>
Copy code
see the header on
http://baretest.xtgem.com
bemethavinci
Graham i am always greatful sir graham...i will work on this now....what about the post body?...im i to twig it or what...if im to twig it...how do i start the twig
Graham
bemethavinci From your original drawing this was my version
http://baretest.xtgem.com/newblog
So far I have only made changes to the post list page the rest of the twig is untouched
This is just a simple layout using very basic bootstrap classes
fancy bits can be added later
I have added a twig routine to convert the standard xtgem pagination to bootstrap classes
And another to separate the image from the rest of the description
bemethavinci
Graham nice working sir graham...atlease this one is preferable...please share me the new blog structure let me use it and add other feautres to it
bemethavinci
bemethavinci look at the one i am managing for now...which i will work on later...after gettinq what i need...check@naijaplux.mywibes.com
Graham
bemethavinci It is right there on the page
bemethavinci
Graham ok...please how do i change back ground using images...and where is it fixed?
Graham
bemethavinci Css is a
Cascading
Stylesheet
System
Styles in css files linked below the main css will add to or override those set in the main css
you can just create another css file to hold custom classes or extra styles for existing classes
and add a link to that file below the bootstrap links
ie
<link rel="stylesheet" href="/my_stylesheet.css">
or even just create a <style>...</style> in the _headtags below the main css links
look at my test page I added a basic background image for the 'body' and another for the 'panel' class in the temporary style tag in the twig
the .description-image class controls the size of the thumbnail in the post list (only using my twig as its not a standard class)
and the @media rule makes it larger on larger screens
http://baretest.xtgem.com/newblog
if you want to create a decent custom web page without just copying from other sites
you need to study everything CSS / javascript / twig / jquery / html and whatever else you want to use
