0
Welcome Guest! Login
0 items Join Now

How to adjust text margins for articles, blog posts?

  • How to adjust text margins for articles, blog posts?

    Posted 15 years 4 months ago
    • Hi,

      In general, if I want to add padding to keep text from going all the way to the edge of the text area, where and how do I do that?

      Right now, my text is butting right up against the right column and I want to pull it back 10-20px.

      Thanks.
      This image is hidden for guests.
      Please log in or register to see it.
    • Terp's Avatar
    • Terp
    • Elite Rocketeer
    • Posts: 1720
    • Thanks: 23

    Re: How to adjust text margins for articles, blog posts?

    Posted 15 years 4 months ago
    • Me again. ;)

      I looked at the site again and think this is what you are looking for; open up your template.css and:

      Change:
      #maincontent-block {
      padding:0 0 0;
      }

      To:
      #maincontent-block {
      padding: 0 10px 0 10px
      }

      ...airs all of the main content out a little.
  • Re: How to adjust text margins for articles, blog posts?

    Posted 15 years 4 months ago
    • Hi Terp,

      It worked on the lead article, but not on what follows. Please see image on the two-column format -- still flush on the margin.

      Still, it's certainly progress.

      Thanks!

      Jerry
      This image is hidden for guests.
      Please log in or register to see it.
  • Re: How to adjust text margins for articles, blog posts?

    Posted 15 years 4 months ago
    • Hi Terp,

      Here's the other piece of the puzzle, the white BG of the text area and the white BG of the right column, butted up against each other.

      Unlike the calender issue, this time I don't want to shrink the right column, I'd just like to separate the two columns somehow -- and I'm sure the main column is the one that needs to get pulled back to create space.

      Can this be done?

      Thanks.
      This image is hidden for guests.
      Please log in or register to see it.
    • Terp's Avatar
    • Terp
    • Elite Rocketeer
    • Posts: 1720
    • Thanks: 23

    Re: How to adjust text margins for articles, blog posts?

    Posted 15 years 4 months ago
    • Jerry Roberts wrote:
      and I'm sure the main column is the one that needs to get pulled back to create space.

      Can this be done?

      Sure, in your body-light.css file:
      #maincol {
      color:#333333;
      padding:0 10px 0 10px;
      }
    • Terp's Avatar
    • Terp
    • Elite Rocketeer
    • Posts: 1720
    • Thanks: 23

    Re: How to adjust text margins for articles, blog posts?

    Posted 15 years 4 months ago
    • I'd recommend downloading Firebug to inspect these elements...a couple of clicks points out what is controlling what and you can make the changes on the fly to see how changes will impact the look, then apply the settings you settle on to the actual file. ;)
  • Re: How to adjust text margins for articles, blog posts?

    Posted 15 years 4 months ago
    • Thanks. Worked perfectly and cleared up both the "bottom" text issue and the columns kissing up on each other. Very nice. Really appreciate your help.

      I've got Firebug but just haven't gotten a handle on it yet. I can click on things but much of the time I don't know what I'm really looking at.

      Hopefully, I'll have some time over the holidays to seek a "plain English" tutorial on it and I'm sure that would help.

      Best,

      Jerry
  • Re: How to adjust text margins for articles, blog posts?

    Posted 15 years 4 months ago
    • Terp,

      Found what I think it is in Firebug...highlighted the whole gray strip from top to bottom and side to side...Line 19 in body-light.css

      .x-c-x .colmask {background: #eee none repeat scroll 0 0;

      Can I delete the whole thing without blowing up the template? Or what?

      If so, how do I add another spacer under the RokTabs? What I thought was a border at top is apparently a spacer.

      Hope I'm doing this right.

      Jerry
    • Terp's Avatar
    • Terp
    • Elite Rocketeer
    • Posts: 1720
    • Thanks: 23

    Re: How to adjust text margins for articles, blog posts?

    Posted 15 years 4 months ago
    • Jerry Roberts wrote:
      Can I delete the whole thing without blowing up the template? Or what?

      Sure, you can remove that. ;)

      The top thin line in your PM screenshot is controlled here:

      .../header-light.css
       
      #menu-spacer {
      -moz-background-clip:border;
      -moz-background-inline-policy:continuous;
      -moz-background-origin:padding;
      background:#D2D2D2 none repeat scroll 0 0;
      }
       

      The bottom area, as you discovered, is controlled here:

      .../body-light.css
       
      .x-c-x .colmask {
      -moz-background-clip:border;
      -moz-background-inline-policy:continuous;
      -moz-background-origin:padding;
      background:#EEEEEE none repeat scroll 0 0;
      }
       



      Now, if you want to get really fancy and keep the menu divider, but mirror the thick line on the bottom of your tabs, do this:

      Open .../body-light.css and remove the background line here:
       
      .x-c-x .colmask {
      -moz-background-clip:border;
      -moz-background-inline-policy:continuous;
      -moz-background-origin:padding;
      background:#EEEEEE none repeat scroll 0 0;
      }
       

      Then open .../templates/rt_nexus_j15/css/primary-yellow.css and find:
       
      #tabs-bar {
      -moz-background-clip:border;
      -moz-background-inline-policy:continuous;
      -moz-background-origin:padding;
      background:transparent url(../images/primary/yellow/tabs-bar.png) repeat-x scroll 0 0;
      }
       

      Add this line to the bottom of that block:
       
      border-bottom:thick solid #D2D2D2;
       

      And here is the result [attached]
  • Re: How to adjust text margins for articles, blog posts?

    Posted 15 years 4 months ago
    • Terp,

      I deleted the line:

      .x-c-x .colmask {background: #eee none repeat scroll 0 0;

      but what was left is a big white space (see attached).

      I guess I figured the module of images underneath would jump up to fill that space. I used Firebug to ID that particular white section in HTML as:

      <div class="colmask leftmenu <?php if (rok_isIe(6)) echo 'wrapper'; ?>"><?php if (!rok_isIe(6)):?>

      Well, I tried to delete that section and indeed blew up the template. I restored it and all is back to normal, but that big white space remains. Obviously, Firebug in the hands of a novice is an incredibly dangerous weapon.

      Got two questions...

      1. How can I get that white space closed up and the bottom module of images to move up to occupy that space and stop just under the tabs section?

      *** and since I removed it, is it possible to even execute the following instruction you gave?

      2. "Open .../body-light.css and remove the background line here:"

      .x-c-x .colmask {
      -moz-background-clip:border;
      -moz-background-inline-policy:continuous;
      -moz-background-origin:padding;
      background:#EEEEEE none repeat scroll 0 0;
      }

      Was that to remove all of that? The word "background" is in there four times on four lines. Just not sure.

      You also said to "mirror" the thick line on the bottom of the tabs. I thought I was trying to get rid of it.

      REALLY SORRY for being dense on this, but it's pretty confusing.

      The image shows what I'm trying to do.

      Thanks.

      Jerry
      This image is hidden for guests.
      Please log in or register to see it.

Time to create page: 0.076 seconds