Documentation

 

How to install

https://codex.wordpress.org/Using_Themes

 

Grid system / Responsive Navigation

Built in 12 grid system and pure CSS responsive navigation. See line 24 to line 151 in style.css.

Simple responsive
Desktop view to Tablet & Mobile view at 768px

To use responsive grid system (grid1 to grid12)

100% grid 12
grid 11
grid 1
grid 10
grid 10
grid 9
grid 3
grid 8
grid 4
grid 7
grid 5
50% grid 6
50% grid 6
grid 5
grid 5
grid 2
grid 4
grid 4
grid 4
grid 3
grid 3
grid 3
grid 3
grid 2
grid 2
grid 2
grid 2
grid 2
grid 2
grid 1
grid 1
grid 1
grid 1
grid 1
grid 1
grid 1
grid 1
grid 1
grid 1
grid 1
grid 1

<div class="row group"> 
    <div class="grid12">
            100% grid 12 
    </div>
</div>

<div class="row group"> 
    <div class="grid11">
            grid 11 
    </div>
    <div class="grid1">
            grid 1 
    </div>
</div>

<div class="row group"> 
    <div class="grid10">
            grid 10 
    </div>
    <div class="grid2">
            grid 10 
    </div>
</div>

<div class="row group"> 
    <div class="grid9">
            grid 9 
    </div>
    <div class="grid3">
            grid 3 
    </div>
</div>

<div class="row group"> 
    <div class="grid8">
            grid 8 
    </div>
    <div class="grid4">
            grid 4 
    </div>
</div>

<div class="row group"> 
    <div class="grid7">
             grid 7 
    </div>
    <div class="grid5">
             grid 5 
    </div>
</div>

<div class="row group"> 
    <div class="grid6">
            50% grid 6 
    </div>
    <div class="grid6">
            50% grid 6 
    </div>
</div>

<div class="row group">
    <div class="grid5">
            grid 5 
    </div>
    <div class="grid5">
            grid 5 
    </div>
    <div class="grid2">
            grid 2 
    </div>
</div>

 <div class="row group">
    <div class="grid4">
            grid 4
    </div>
    <div class="grid4">
            grid 4 
    </div>
    <div class="grid4">
            grid 4 
    </div>
</div>

<div class="row group">
    <div class="grid3">
            grid 3 
    </div>
    <div class="grid3">
            grid 3
    </div>
    <div class="grid3">
            grid 3 
    </div>
    <div class="grid3">
            grid 3 
    </div>
</div>

<div class="row group">
    <div class="grid2">
            grid 2 
    </div>
    <div class="grid2">
            grid 2 
    </div>
    <div class="grid2">
            grid 2 
    </div>
    <div class="grid2">
            grid 2 
    </div>
    <div class="grid2">
            grid 2 
    </div>
    <div class="grid2">
            grid 2
    </div>
</div>

<div class="row group">
    <div class="grid1">
            grid 1 
    </div>
    <div class="grid1">
            grid 1 
    </div>
    <div class="grid1">
            grid 1 
    </div>
    <div class="grid1">
            grid 1 
    </div>
    <div class="grid1">
            grid 1 
    </div>
    <div class="grid1">
            grid 1 
    </div>
    <div class="grid1">
            grid 1 
    </div>
    <div class="grid1">
            grid 1 
    </div>
    <div class="grid1">
            grid 1 
    </div>
    <div class="grid1">
            grid 1 
    </div>
    <div class="grid1">
            grid 1 
    </div>
    <div class="grid1">
            grid 1 
    </div>
</div>

 

Layout

All layouts on Simtiful come from 2 main layouts.

full-layout

  • Header
  • Content Area
  • Sub Navigation
  • Footer

content-layout

  • Header
  • Content Area
  • Footer

Want to Modify Layout?

It’s easy to change layout on Simtiful. Look for below php files for content area.

  • archive.php
  • category.php
  • index.php
  • page.php
  • single.php

Want to change header and footer too?

  • header.php
  • footer.php

Here is more information about custom theme.

https://codex.wordpress.org/Theme_Development