Joomla Templates Club 406,261 posts

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#196605

I like this template but the customer thinks the container padding is excessive. I am being asked to tighten up the white space at the boundary of the page and the body background. Can this be done in the variables.less file? I read a somewhat-related thread but the the variables.less file seems to have changed again. I am seeing differences from the posted tutorial. If this isn’t possible, do I edit the CSS as I used to? What is the best approach?
Thanks!
-Jim G.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530182

You can try adding the following to your custom.css file . . .


.main-container {
margin: 0 50px;
}


You can then play around with the pixel value (trial-and-error) until you arrive at the result you and your client are most satisfied with. (There may be an additional tweek/adjustment here and there required – depending on the width value you decide upon).

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#530189

Thanks, but this is just going to mess up the layout unless I can reduce template width at the same time by whatever value I reduce the margin. That’s what happened when I tried it. So, does anyone else out there have a suggestion?
Thanks!
-Jim G.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530192

Well, another thing you can try adding the following to your custom.css file . . .


.container {
width: 1150px;
}


This will reduce the width of the overall content/container area. Again, you can then play around with the pixel value (trial-and-error) until you arrive at the result you and your client are most satisfied with. (There may be an additional tweek/adjustment here and there required – depending on the width value you decide upon).

However, you’re STILL going to have issues with the “white space” margin – hence my original suggestion.

You can better see the margin issues utilizing an online web development tool like

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#530202

Right, I use Firebug along with everybody else. That’s how I knew this approach was going to be dicey. Other related posts hint at modifying the core file: variables.less. There must be a better, simpler answer.
Thanks though for caring,
-Jim G.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530203

I am forwarding your issue onto the JA Development Team for review and (hopefully) further comment/suggestion(s).

😎

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#530205

Thanks, that’s just what I was hoping.

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#530311

@gribblej,

To reduce the container padding, you can add this rule into the file: /templates/your_template_name/css/custom.css (if does not exist, pls create a new one)

#t3-mainbody.container {
padding: 10px;
}

You can change the value in red as you wish.

Hope this helps.

1 user says Thank You to Nazario A for this useful post

1. gribblej

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#534389

Just to follow up and for the benefit of other customizers, this is the way that works. There’s one wrinkle if you are using a theme (blue) like I am. Your custom.css file has to be uploaded to the root folder of all the css files for whichever theme you are using. .

Then drop in:
container {
width: 1150px;
}

And adjust the width value to your liking. Keep in mind that you may have to retune some other layout elements. In my case turned out to be no big deal.
Thanks Tom,
-Jim G.

[Author]

Posts