Joomla Templates Club 406,261 posts

[brennac Friend brennacJoin date: October 2009Posts: 76Downloads:0Uploads:10 Thanks: 39]

#171934

I would like to increase the width of the slideshow inside the 960 pixel frame (it was 940 in the back-end of the slideshow module). I changed the 940 to 954, but I don’t see any difference as to how filled the larger, light gray outer shell appears. Could you tell me where in the script I can reduce that 10 pixel padding on either side to 3 pixels?

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

#430300

I am not seeing a “light gray outer shell” when I view your site within Google Chrome and/or FireFox.

Which CSS did you modify to change the height?

1 user says Thank You to TomC for this useful post

1. brennac

[brennac Friend brennacJoin date: October 2009Posts: 76Downloads:0Uploads:10 Thanks: 39]

#430302

Well the height is an image that is whatever height you want, and one pixel wide, so it clearly is some fill to a percentage or something. I just changed the image height in photoshop, and then changed the image height in the back-end of the module settings. I changed the width in the module settings, too, but that didn’t change anything. There is the black page, then a silver/white/light gray border around the inner black box that houses the slideshow. That’s what I want to change…the padding between that silver/white/light gray border and the inner black box.

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

#430303

I apologize for the additional questions . . . I’m just having difficulty seeing this padding issue you’re referring to – unless you’re referring to the bit of “padding” that appears to be above the items FIRM, PLATFORM and PRODUCTS – separating them form the main slide content above.

Perhaps you can throw together a quick screenshot mock-up with an arrow or something pointing to the area(s) you’re referring to?

1 user says Thank You to TomC for this useful post

1. brennac

[brennac Friend brennacJoin date: October 2009Posts: 76Downloads:0Uploads:10 Thanks: 39]

#430305

This screen shot has an arrow to the padding I’d like to reduce.

---

Attachments:

1. 

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

#430306

<em>@brennac 289998 wrote:</em><blockquote>

This screen shot has an arrow to the padding I’d like to reduce.</blockquote>

Okay, found the culprit . . . it appears to be a “margin” issue.

Within template.css file (within path /templates/ja_pyro/css/template/css), at line 1479 . . .


/* SPOTLIGHT
--------------------------------------------------------- */
#ja-top { margin: 8px 10px 0; }

It’s that “10px” that you want to play around with. If you make it “0px,” then it removes the white margins altogether – so, depending what it is you want, you can play around with the pixel values until you arrive at the result you want.

Hope that helps.

1 user says Thank You to TomC for this useful post

1. brennac

[brennac Friend brennacJoin date: October 2009Posts: 76Downloads:0Uploads:10 Thanks: 39]

#430437

Great, thanks!! Do you know how I reduce the margins at the top and bottom? I don’t want the menu to have as much space height-wise up top. Thank you!!

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

#430441

<em>@brennac 290157 wrote:</em><blockquote>Great, thanks!! Do you know how I reduce the margins at the top and bottom? I don’t want the menu to have as much space height-wise up top. Thank you!!</blockquote>

FOR THE MAIN-NAV:
While you can adjust the height of the main-nav CSS itself, you would then also need to adjust several additional CSS parameters in oder to get things to line up properly. So, the following looks to be the most efficient way to go about this . . .

Within your template.css file, at line 1151 . . . modify the css as such:


#ja-mainnav {
font-size: 12px;
line-height: 1;
margin-bottom: -10px;
margin-top: -10px;
position: relative;
z-index: 111;

}

The difference, as you will see, is the -10px margin values for the top and bottom margins (for the main nav).
You can, of course, play around with these values to reach the desired result.

The additional thing you will need to do with the main-nav (depending on how much you reduce the margins) is modify the menu item separator image – the CSS for which can be found at line 35 within /css/menu/mega.css


ul.level0 li.mega {
background: url("../../images/mainnav-sep.gif") no-repeat scroll left bottom transparent;
display: block;
float: left;
margin: 0;
padding: 0 0 0 2px;

}

FOR THE BOTTOM:
Similar to what we did for the main-nav section, you can add some margin parameters to the following template.css, line 977:


#ja-main .inner {
margin: -10px 0 0 -10px;
padding: 11px 0 0;

}

As with before, you can play around with the margin property values until you reach the desired result.

Just as a CSS FYI …
You can write out each margin property as it’s own line (i.e. margin-top, margin-bottom, margin-left, margin-right), or you can write it in condensed form (as the example above) where the “value key” is “property: top, left, right, bottom ;”

Hope that helps.

😎

1 user says Thank You to TomC for this useful post

1. brennac

[brennac Friend brennacJoin date: October 2009Posts: 76Downloads:0Uploads:10 Thanks: 39]

#430443

This was excellent help, and very quick! Much apprecaited.

[brennac Friend brennacJoin date: October 2009Posts: 76Downloads:0Uploads:10 Thanks: 39]

#430646

I reduced the margins on top and bottom to -1, and reduced the height of the mainav-sep.gif from 30 to 20 pixels, but the top seems to remain the same. Why is that?

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

#430774

<em>@brennac 290437 wrote:</em><blockquote>I reduced the margins on top and bottom to -1, and reduced the height of the mainav-sep.gif from 30 to 20 pixels, but the top seems to remain the same. Why is that?</blockquote>
Did you follow-the steps as I outlined above?

Did you save changes . . . clear jat3/browser cache . . . refresh your page?

[brennac Friend brennacJoin date: October 2009Posts: 76Downloads:0Uploads:10 Thanks: 39]

#431587

Yes – I followed your instructions and it still appears to be the same height in the top menu height and bottom article padding.

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

#431733

<em>@brennac 291692 wrote:</em><blockquote>Yes – I followed your instructions and it still appears to be the same height in the top menu height and bottom article padding.</blockquote>
I just checked your site and the CSS properties you currently have appear different than those I recommended within Post #8. Not sure if (or what) additional modifications you’ve made since then, but perhaps you can give those a try again?

ALSO, the line numbers may be a bit different – as they are a bit off from when I last looked on 19 Dec 2011.

1 user says Thank You to TomC for this useful post

1. brennac

[brennac Friend brennacJoin date: October 2009Posts: 76Downloads:0Uploads:10 Thanks: 39]

#431834

I’m looking under the template. css file and I had changed it to:

/* Main Nav —*/
#ja-mainnav {
font-size: 12px;
line-height: 1;
margin-bottom: -1px;
margin-top: -1px;
z-index: 111;
}

I also changed the main-nav image to the size I wanted. Similarly, I also changed as you recommended for the bottom:

#ja-main .inner {
margin: -1px 0 0 -1px;
padding: 4px 0 0;

I am still having these problems. Can you show me where you are seeing that the changes aren’t made? If you find them, can you change them? Many thanks for your help.

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

#431867

<em>@brennac 291990 wrote:</em><blockquote>
I am still having these problems. Can you show me where you are seeing that the changes aren’t made? If you find them, can you change them? Many thanks for your help.</blockquote>
It’s because you are not modifying the CSS as I have outlined for you.
Here is is again (and I will bold the elements you have not modified according to my suggestions)

FOR THE MAIN-NAV:
While you can adjust the height of the main-nav CSS itself, you would then also need to adjust several additional CSS parameters in oder to get things to line up properly. So, the following looks to be the most efficient way to go about this . . .

Within your template.css file, at line 1151 . . . modify the css as such:


#ja-mainnav {
font-size: 12px;
line-height: 1;
margin-bottom: -10px;
margin-top: -10px;
position: relative;
z-index: 111;

}

The difference, as you will see, is the -10px margin values for the top and bottom margins (for the main nav).
You can, of course, play around with these values to reach the desired result.

The additional thing you will need to do with the main-nav (depending on how much you reduce the margins) is modify the menu item separator image – the CSS for which can be found at line 35 within /css/menu/mega.css


ul.level0 li.mega {
background: url("../../images/mainnav-sep.gif") no-repeat scroll left bottom transparent;
display: block;
float: left;
margin: 0;
padding: 0 0 0 2px;

}

FOR THE BOTTOM:
Similar to what we did for the main-nav section, you can add some margin parameters to the following template.css, line 977:


#ja-main .inner {
margin: -10px 0 0 -10px;
padding: 11px 0 0;

}

Modify as I have outlined below and let me know if the results are any closer to what you are wanting.

[Author]

Posts