Joomla Templates Club 406,261 posts

[Andrew Winkler Friend Andrew WinklerJoin date: September 2014Posts: 725Downloads:206Uploads:31 Thanks: 291 Thanked: 34 times in 2 posts]

#1091446

I would like to reduce the width of sidebar-1 by one third and sidebar-2 by two thirds and increase the width of the message and component block in the main content area accordingly. I had a quick look in Firebug but could not find the settings needed to overwrite in custom.css. How can I achieve the width changes?

• This topic was modified 6 years, 8 months ago by  Andrew Winkler.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1091773

Hi Andrew,

This template is built with Bootstrap, you can check out this docs for how to work with its Grid system: https://getbootstrap.com/docs/3.3/css/#grid

Regards

[Andrew Winkler Friend Andrew WinklerJoin date: September 2014Posts: 725Downloads:206Uploads:31 Thanks: 291 Thanked: 34 times in 2 posts]

#1093172

Could you please provide me with more specific instructions, or link to it. The link provided contains quite generic information, but no specific information on how to change the width of sidebar-1 and sidebar-2.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1093413

Hi Andrew,

Suppose that you’re using 2 sidebars, you will open this file:
root/templates/ja_social_ii/tpls/blocks/mainbody/two-sidebar.php

As you can see the 3 parts: main content – sidebar-1 – sidebar-2 are included in a div tag with row class. In Bootstrap, each row will have 12 grids, by default, the content part will have ‘col-xs-12 col-md-6 col-md-push-3’ class which is equal to 6 grids, and 3 grids for each sidebar.

You can change the width of sidebar by changing the number of grids but make sure that the total grid is equal to 12. For example, if you want to reduce the width of both sidebar from 3 grids to 2 grids, you will change to col-md-2, then increase the grid for ‘main content’ part to make sure that the total grid is 12.

The documentation I sent above gives details of how to work with grid.

pls check it out.

Regards

1 user says Thank You to Saguaros for this useful post

1. Andrew Winkler

[Author]

Posts