code support | Questions about service

bemethavinci

Graham hmmm...i now have a choice to choose...and goinq for bootstrap...but lets say i want to create my own bootstrap design usinq xtgem...what are the scriptss i would need to create the header,content(post page), and the footer page...or i would jus go and get a bootstrap templates and edit?

# 2017-02-13 12:25 (edited 2017-02-13 12:25 by bemethavinci ) · (0)

Graham

bemethavinci All the components are here on either
http://www.w3schools.com/bootstrap/default.asp
or
http://getbootstrap.com/components/

This is my basic template

bootstrap css link goes in _headtags
Add your theme css link here also

Copy code

This is my basic header
so that the 'active page' feature works you need to create xtgem_template.css and add at least one class to it
A dummy will do .dummy{}
Then you add the xt_navigation class to the nav tabs
this allows xtgems code to add the 'active' class to the current page item
This is also where I add the jquery and bootstrap js links because xtgem adds some code to prevent ad blocking above the first javascript on the page and some of that code is not valid in <head>

Copy code

This is a basic bootstrap 2 column responsive page it goes to single column if the screen width is less than 768px
it is set so that it can be opened using the xtgem building tool if required
you can add blocks to the containers using the building tool

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Bootstrap basic page 2 column</title>
</head>
<body>
<div data-xtcontainer="container" class="container-fluid">
  <div data-xtcontainer="row" class="row">
    <div data-xtcontainer="col sm 6" class="col-sm-6">
      <div data-xtcontainer="panel" class="panel panel-default">
        <div data-xtcontainer="panel heading" class="panel-heading">heading</div>
        <div data-xtcontainer="panel body" class="panel-body">body</div>
      </div>
    </div>
    <div data-xtcontainer="col sm 6" class="col-sm-6">
      <div data-xtcontainer="panel" class="panel panel-default">
        <div data-xtcontainer="panel heading" class="panel-heading">heading</div>
        <div data-xtcontainer="panel body" class="panel-body">body</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Copy code

This is a basic _footer except I have left in my code that moves the auth bar to the footer

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div id="auth"><xt:auth /></div>
<br style="clear:both" />
  </div>
</nav>
<script>
  var auth=document.getElementById("auth");
  var style=auth.getElementsByTagName("style");
  if (style.length){
  var iframe=auth.getElementsByTagName("iframe");
    style [0].innerHTML="#xt_auth_iframe {background: transparent;float:right}";
  iframe[0].style.maxWidth="200px";
  //iframe[0].style.width="100%";
  iframe[0].style.overflow="hidden";
  iframe[0].style.border="0";
  iframe[0].style.height="23px";
  iframe[0].style.zIndex="999999999";}
</script>

Copy code

# 2017-02-14 01:31 (edited 2017-02-14 03:56 by Graham ) · (0)

bemethavinci

Graham waw...thank you sir for your time on this tutorial and am start to understand how bootstrap works on xtgem...but only thinq now is how i can make the blog posts where all the articles appears...both the outer and inner design structure of the post body using the bootstrap

# 2017-02-14 07:59 · (0)

Graham

bemethavinci You need to go into the twig file and change the class names to bootstrap ones
as the default blog just uses the xtgem classes
thats what I did on my demo site I completely rewrote the twig you can get mine here
http://baretest.xtgem.com/templates/Blog
it is not simple this took several days and much frustration

# 2017-02-14 08:30 (edited 2017-02-14 08:59 by Graham ) · (0)

bemethavinci

Graham thank you sir,i have checked you bootstrap site but that twiginq at xtgem has always been my major problem and i dont know how to twig and i will be glad if u teach me how to twig.

# 2017-02-14 10:37 (edited 2017-02-14 10:40 by bemethavinci ) · (0)

Graham

bemethavinci Twig is pretty complex and really the only way to learn is to dive in and use it I am far from being an expert
the structure is very much like php
Xtgem uses version 1.16 this is the documentation http://twig.sensiolabs.org/doc/1.x/templates.html
I use the documentation and google to find examples as the documentation is quite brief on most of the commands
you need to start off with simple changes on a test site and keep backups all the time as you will make mistakes
if you don't want to get into the actual twig code at first you can just change the simple html that is embedded in the the script

# 2017-02-14 11:25 (edited 2017-02-14 11:29 by Graham ) · (0)

bemethavinci

Graham waw...thank you so much sir,learninq is indeed continous...and i believe nothinq is impossible to do...and i would say i wont give up on this...all i jus need is total concertrate...but everythinq wont be easy...but where do you suggest i should start from?...because this twiginq is confusinq...is there no other way

# 2017-02-14 12:18 · (0)

bemethavinci

bemethavinci good day sir graham...i need you help,i tried to add icon to my header navbar but its not workinq...please help me out.

# 2017-02-15 02:26 · (0)

Graham

bemethavinci Ok where is the code you are using !

# 2017-02-15 02:51 · (0)

Graham

bemethavinci The other choice is to not bother with the twig at all and define your own versions of the xtgem classes used in the standard blog
or just work within the existing twig and just change the classes and maybe add a few extra <div> wrappers to fit the bootstrap markup

# 2017-02-15 02:59 · (0)