Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • gribblej Friend
    #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
    #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
    #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
    #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
    #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
    #530203

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

    😎

    gribblej Friend
    #530205

    Thanks, that’s just what I was hoping.

    Nazario A Friend
    #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.

    gribblej Friend
    #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.

Viewing 9 posts - 1 through 9 (of 9 total)

This topic contains 9 replies, has 3 voices, and was last updated by  gribblej 10 years, 5 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum