Can I add a "HR" horizontal rule inside my sideboxes?

[pwoens]

I just want to add a HR (horizontal rule) inside one of my sideboxes "more information" ... is there a simple way to complete this?

thanks!

[gjh42]

The simplest way is not to change code in a PHP file, but to add a border-bottom or border-top to an element in the sidebox. This can be done in your stylesheet.

A link to see your particular site and where you want the divider will let us help you.

[abs007]

Hi Glen
Ive been messing around with the css for sometime now trying to add a border bottom but i just dont get the desired affect.

The only time the border bottom shows is if i use this as the rule

border-bottom:solid;

However the width does not fill the category container width.

I tried adding the border-bottom-width: also however this does not work.

Im not sure if i am placing the code in the correct location- ive tried it on a few locations and the only location i can get it to work in is

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
color: #000000;
text-decoration: none;
}
I would also like to add a hover affect and am hoping that the hover affect fill fill the box between 1 category name and another name.

Not sure if the HR rule will be the best one for this - maybe a block layout would work better.

The website is in my sig ravsappliances

I have also changed the font so that it appears bold however i only want the bold text to appear in the centre boxes and not the sideboxes.

I did try and do this before however it affected the actual product page also so i removed the rule and added it here

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
font-weight:bold;
}

I tried to create a separate rule for the
.centerBoxContents,
.centerBoxContentsSpecials,
.centerBoxContentsFeatured,
.centerBoxContentsNew,
.centerBoxContentsAlsoPurch,

however i must have done it wrong as it didnt make a difference or it was not supposed to be done this way.

If there is any advise that you can give as to get this done then i would be grateful

thanks

Abs

[gjh42]

I tried to create a separate rule for the
.centerBoxContents,
.centerBoxContentsSpecials,
.centerBoxContentsFeatured,
.centerBoxContentsNew,
.centerBoxContentsAlsoPurch,

If you left the comma at the end of this list and before the { when making the rule, the whole thing will be invalid.

For the divider and background effects you want, a block layout will be needed. You can use

#categories a {
    display: block;
    border-bottom: 1px solid #aabbcc;
    background-color: #ddeeff;
    }
#categories a:hover {
    background-color: #ffaa00;
    }

You will then need to edit /includes/templates/your_template/sideboxes/tpl_categories.php and remove the <br /> at the ends of the category and links output code.

[abs007]

Hi Glen
Thanks alot for the reply - The block layout worked great - just need to try and play with the coding for the bold font.

One thing I was wondering is if its possible to make the block thicker in appearance.

You can see an example on my test site buycheaplcdtvs.co.uk

The block affect is deff what im looking for but I would like to have a boarder around the actual blocks - top-bottom - left and right and I would also like them to be thicker as in the height larger.

Do you know what I can add to the css to get this done

thanks

[abs007]

Hi
I have managed to play with the css and get it to the way i would like the height and the boarders.

Heres the css code that i used- hope its ok

#categories a {
display: block;
border-bottom: 1px solid #aabbcc;
border-top: 1px solid #aabbcc;
border-left: 1px solid #aabbcc;
border-right: 1px solid #aabbcc;
background-color: #ddeeff;
padding-top: 4px;
padding-bottom: 4px;
}
#categories a:hover {
background-color: #ffaa00;
}

I am also trying to use the snazzy corners affect which you can see on the left sidebox containers - I havnt managed to get the sidebox header sorted yet as ive started a new thread on this however is there any way that I can get the block boarder to appear rounded.

thanks

[abs007]

The coding for the bold text worked fine - thanks for mentioning what I was doing wrong. If you want to see the changes then you can see them on ravsapliances

[iluvedancin]

Hi
I have managed to play with the css and get it to the way i would like the height and the boarders.

Heres the css code that i used- hope its ok

#categories a {
display: block;
border-bottom: 1px solid #aabbcc;
border-top: 1px solid #aabbcc;
border-left: 1px solid #aabbcc;
border-right: 1px solid #aabbcc;
background-color: #ddeeff;
padding-top: 4px;
padding-bottom: 4px;
}
#categories a:hover {
background-color: #ffaa00;
}

I am also trying to use the snazzy corners affect which you can see on the left sidebox containers - I havnt managed to get the sidebox header sorted yet as ive started a new thread on this however is there any way that I can get the block boarder to appear rounded.

thanks

Many thanks for your contribution. This has given me a better catagory layout look. Best wishes. Claire