Disposition des blocs
Glissez déposez les éléments dans le template pour construire votre page. Organisez les comme vous voulez.
Couleur et style
Jouez avec les styles pour créer votre propre design en utilisation des ombres, coins arrondis, dégradé et autres..
Responsive design
Choisissez comment vous voulez que votre template se comporte, en montrant et cachant les éléments en fonction des différentes résolutions.
Template Creator Joomla! Wordpress
joomla template
Version actuelle pour
4.0.15
joomla template
Version actuelle pour
2.0.15

Create a template / theme with a sidebar design

 

 

More and more designs are made with a side bar which contains the logo, the menu, and few other things. This sidebar shall always be visible and scrollable on desktop, and shall go on the top on mobile.

Read the few steps on how to create your sidebar design with Template Creator CK, for Joomla! or Wordpress.

STEP 1 : Create the sidebar wrapper

The sidebar will be a wrapper that can contain multiple elements : logo, menu, etc ...

In the interface you must add a new wrapper bloc on the top of your template / theme. Give the name sidebar to the wrapper. Inside this wrapper you can add a logo and a menu (you can use a vertical menu, or single menu block for this).

 

STEP 2 : Custom CSS

This step is easy but this is the most important part, as it will transform the wrapper into a sidebar. We will need the following CSS code

#sidebar {
  width: 150px;
  position: fixed;
  left: 0;
  top:0;
  bottom: 0;
  overflow: hidden;
}

#sidebar > .inner {
  margin-right: -20px;
  overflow-y: scroll;
  height: 100%;
}

body {
  padding-left: 150px;
}

Firstly we place the sidebar on the left of the page and give it the height of the visible screen.

Secondly we use a css technique to make it scrollable (if you put more content in the sidebar than the height of the screen, you shall be able to scroll) and hide the scrollbar to make it more beautiful.

Thirdly we tell the body of the page to move 150px from the left, to let the place for the sidebar. Then the body / content will start exactly where the sidebar ends. You can change the both 150px values in the CSS code to adapt the sidebar width.

Now we need to place this css code into the template, but not in the custom.css file ... Why ? Just because we want this sidebar only to appear like this on computers. On tablets and phones we want to have it on the top with a mobile menu.

So take this code and place it in the custom css area in the Responsive popup >> Computer / Other resolutions.

 

That's all ! We have now finished our sidebar design. You can continue to add some elements in your template / theme, add some other wrapper or modules like you want.

You can download the template and the gabarit to import into Template Creator CK if you want to check how it is made. You can also watch the live demo of the template / theme to check the result.

  Live demo of the Barber template / theme

  Download the template and gabarit

 

 

 

Liste des options

 

 

Responsive design

 

Responsive design joomla template

Template creator crée des templates Joomla Responsive Design.

Vous choisissez la manière dont il s'affiche sur les appareils mobiles.

100% Satisfaction

 

money back guarantee

Vous avez droit à une période d'essai de 30 jours, si vous n'êtes pas satisfait vous pouvez demander le remboursement*

* voir nos conditions de remboursement

Achetez le

 

but template creator

Livre templates Joomla! 3

livre creation template joomla 3

200 pages pour apprendre à créer votre template Joomla! 3 de A à Z.