code support | Questions about service

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 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 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 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 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 It is not a 'responsive' design in the true sense it is two totally separate templates one for web and another for mobile
with what seems to be his own server based code to select between the 2 different versions

# 2017-02-13 07:52 (edited 2017-02-13 07:59 by Graham ) · (0)

bemethavinci

Graham waw...thats interestinq...at lease this css design is more better then bootstrap and will be good for designinq responsive blog usinq css...what do you suggest?...because i was thinkinq of makinq my own design that will not showcase errors on any browser...both old and new

# 2017-02-13 06:44 · (0)

Graham

bemethavinci The site is built with a template but not actual bootstrap
it belongs to a longtime xtgem user but is not hosted on xtgem (although some of the code and css is on xtgem)
The web version seems to be this http://www.free-css.com/free-css-templates/page127/coolblue-v1.0
but it switches to a totally different css/html template for mobiles (not 'bootstrap' either)

There are hundreds of sites offering many thousands of templates
They all do the same basic thing some better than others
most rely on checking screensize some may do some user agent sniffing to deliver mobile content
The rest is just layout

Some browsers cause problems even on devices that can use the markup in their native browsers
notably most operamini and ucweb versions do not like any form of 'dynamic' content

xtgem actually has a built in system for mobile content when you are using xtgem_template.css (or if the file exists and has at least 1 class in it)
if the device is detected as 'web' then the xt_touch class is added to the body tag and this can be used to add extra css by reference to this class
This is the system used by the built in css templates
The blogs twig 'data' array also has a device detection feature in the data.device value which returns web/touch/mobile
xtgems xt function <xt:get_device_template /> used to return web/touch/mobile but these days just returns web/mobile in most cases
The google tool to check if a site is mobile friendly is https://search.google.com/search-console/mobile-friendly
Although you may have issues using the tool from a mobile (typical google)

# 2017-02-13 02:57 (edited 2017-02-13 06:02 by Graham ) · (0)

bemethavinci

Graham i think i will start to work on my own design for my blog...but check this site@vineng.ga...is the site buildt with full bootstrap codinq or just html and css...because i've used all my mobile browsers to check the site and i noticed its user friendly and responsive.

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

Graham

bemethavinci You don't need to use all the fancy drop downs and stuff in bootstrap but as a basic framework it takes care of layout and resizing for mobile devices pretty well.
it is also pretty easy to add your own css and stuff
except for the bbcode tool (not bootstraps fault) my bootstrap blog works fine on all the mobiles and emulators i've tested http://baretest.xtgem.com/Blog
Why redo the work that somebody else has already done

# 2017-02-12 13:53 (edited 2017-02-12 14:02 by Graham ) · (-1)