Layout creation
Drag and Drop the elements in your template to construct your page. Organize them like you want.
Color and Design
Play with the styles to create your own design with gradient, rounded corners, shadows and much more.
Responsive design
Set up your responsive behavior and select which element to show or hide on different resolutions.
Template Creator Joomla! Wordpress
joomla template
Latest version for
3.6.12
joomla template
Latest version for
1.3.6

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

 

 

 

List of Features

 

 

Responsive design

 

Responsive design joomla template

Template creator creates some Responsive Design Joomla templates.

You choose how the template is displayed with the mobile devices.

100% Satisfaction

 

money back guarantee

You will have a 30 day trial, if the software does not fit your needs you can ask for a refund*

* see our refund policy

Get it now

 

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.