Joomla Templates Club 406,261 posts

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#130573

Hi Everyone

Me again! :-[

Does anybody know if it’s possible to ‘pad out’ or have extra Vertical space around modules?

Everything works fine on the ‘standard’ demo modules:

However, when I change the demo site content and put my own custom modules in the ‘right’ position, the spacing is not good. Modules are too close together and I have lost my grey ‘seperator lines’?

Is there a quick fix for putting a bit of space above a few modules (in this case ‘Services’ and ‘Polls’) and reclaiming the grey lines?

Thanks in advance.
Chris

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#258515

<em>@questbg 64970 wrote:</em><blockquote>Hi Everyone

Me again! :-[

Does anybody know if it’s possible to ‘pad out’ or have extra Vertical space around modules?

Everything works fine on the ‘standard’ demo modules:

However, when I change the demo site content and put my own custom modules in the ‘right’ position, the spacing is not good. Modules are too close together and I have lost my grey ‘seperator lines’?

Is there a quick fix for putting a bit of space above a few modules (in this case ‘Services’ and ‘Polls’) and reclaiming the grey lines?

Thanks in advance.
Chris</blockquote>

Chris,

This is a general direction for finding and changing the features of a CSS specification:

Do a Page Source View. Find the group of “div class” that border the image or text, usually these are nested divs

<div class="classname here">
<div class="classname here">

image here

</div>
</div>

For example, for the Hot Topic module:


<div id="ja-cols" class="clearfix">
<div id="ja-col1">
<div class="ja-innerpad">
<div class="moduletable">
<h3>
Hot Topic
</h3>

(Hot topics contents here, there are other divs specific for each photo article -- not shown)
</div>
</div>
</div>


The CSS specification for the moduletable is found in

templates => ja_teline_ii => css => templates.css

div.moduletable,
div.moduletable_hilite
{
border-top: 5px solid #ABABAB;
margin: 0 0 20px;
padding: 0 1px;
}


Understanding CSS specifications

border-top: 5px solid #ABABAB;

this means there is a solid border at the top only, it is 5px thick and has a color of #ABABAB

You can replace any of the above features of the specifications as you like.

padding: 0 1px;

this means the right and the left sides have 1px padding

if you want the padding for top right bottom and left, add this instead:

padding: 1px;

adjust the value, until you get the desired effect you want.

Using the above, once you find the “nested divs” that surround the item that you want to change, just apply similar CSS specifications.

Using the above, you can change the specification of any module in your site, by starting with the “Page Source View” of a page, finding the nested divs that wraps a module, and then find the div class in the css file, as indicated above. More often than not, it is in the template.css.

A word of caution:

Be sure you realize, how the nested divs relate to each other, the outermost div usually is the wrapper for the module, generally you do not place the detailed specification here, but to define more general skeletal layout specifications.

the closest div would define the CSS specification just for that portion of a module. For example for the Hot Topic module, the CSS specification

<h3> Hot Topic </h3>

applies only to the Module Title.

Note that the padding and the border is placed in the “div class” that wraps the whole module (but not the outermost wrap)

Cornelio

1 user says Thank You to cgc0202 for this useful post

1. questbg

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#258518

Thanks Cornelio … I’ll try this and get back to you!! 😀

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#258523

Chris,

Some webdesigners use these CSS specifications

padding: 1px;


or for more specific location

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;


which can be simplified as follows

padding: 5px 10px 15px 20px; /* t r b l */


for top right bottom and left, respectively; abbreviated as

/* top right bottom left */ => see note below

or /* t r b l */

The same can be done to define the CSS specification for

margin
border

Reminder: be sure not to forget the semi-colon, after each line of specification, otherwise it will not work.

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#258526

Chris,

I usually keep track of the changes I do when I edit the specifications, to record the original specification, and the changes I made (modified, added or deleted) by adding this:

/* orig changed added */

the presence of

/* */

means that the content is intended as “notes or guide posts” for the programmer, webdesigner or users — to allow easier editing. As such, the program script that reads the file will ignore and not execute what is inside the

/* */

For example, in the case of changing the spacings for the logo and the header:

/* HEADER
--------------------------------------------------------- */
#ja-headerwrap
{
} /* orig changed added */

#ja-header
{
height: 100px;
line-height: normal;
position: relative;
} /* orig height: 80px; changed added */

h1.logo, h1.logo-text
{
margin: 0;
padding: 0;
font-size: 100%;
} /* orig font-size: 300%; changed added */

h1.logo a
{
width: 278px;
display: block;
background: url(../images/logo.png) no-repeat;
position: absolute;
height: 80px;
top: 10px;
left: 0;
} /* orig width: 278px; background: url(../images/logo.gif) height: 42px; top: 20px;changed added */

The notes will prove useful in the future because you might not like your original edits to a module with respect to another.

However, because a module usually requires nested divs, you can target where to make the revision if you have an idea where the changes were made.

For example, two modules that are stacked one on top of each other may end up having too much space in between their top and bottom. With the notes, you will have more idea whether it is best to change both, or just one of them.

Cornelio

[Author]

Posts