Border around center categories box

Hi all you helpfull people!
I´m in the final stages...
All I´m missing is a border, if possible with a header, around
my center categories box.
I attached a image on how I want it to look like.
This is my shop how it looks now:
http://pinuppeepshop.com/

Any ideas?
Thank YOU ! :smile:

Try this (adjust colors & dimensions to your taste):

.centerColumn {
    border: 1px solid #001122;
    } 

.centerColumn h1 {
    font-family: whatever;
    color: #ff99f0; 
    background-color: #334455; 
    border-bottom: 1px solid #001122; 
    padding-bottom: 0.3em; 
    margin: -8px -8px 5px -8px;
    }

gjh42:

Try this (adjust colors & dimensions to your taste):

.centerColumn {
border: 1px solid #001122;
}

.centerColumn h1 {
font-family: whatever;
color: #ff99f0;
background-color: #334455;
border-bottom: 1px solid #001122;
padding-bottom: 0.3em;
margin: -8px -8px 5px -8px;
}

Alright, sounds good! Sorry to ask,but...where do I put it?
Thank you very much for helping me!!

Sorry, I thought you knew since you had already done some customizing.
It could go anywhere in your stylesheet (/includes/templates/your_template/css/stylesheet.css), but best to group it with similar declarations, and if you already have a .centerColumn declaration, combine them rather than having declarations for the same thing scattered around.

gjh42:

Sorry, I thought you knew since you had already done some customizing.
It could go anywhere in your stylesheet (/includes/templates/your_template/css/stylesheet.css), but best to group it with similar declarations, and if you already have a .centerColumn declaration, combine them rather than having declarations for the same thing scattered around.

Hmm, well I thought it was the stylesheet but when i put the code in there nothing happened, so I thought it must be another place..
Now I tried again and put the code in all possible places in my stylesheet but still nothing changes on my page.
Any idea what I´m going wrong?
The only centerColum declaration I can find in my stylesheet is:
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;
}

Are you sure it's the right stylesheet (in the right folder)? Are you sure it is uploading correctly to your server?

gjh42:

Are you sure it's the right stylesheet (in the right folder)? Are you sure it is uploading correctly to your server?

Pretty sure-
It´s :
puplic_html/includes/templates/MY_TEMPLATE/css/stylesheet.css

Right!?

I´ve copy/paste your code in where it makes most sense..
and then just about everywhere else.
I know I MUST be doing something wrong cause you guys are usually always right...:frusty:

Is the code still in your stylesheet? It does not exist in the stylesheet that is being applied to your site (pinuppeepshop.com/includes/templates/purple/css/stylesheet.css).
(pinuppeepshop.com = public_html)

No I didn´t leave it in my stylesheet. After it didn´t seam to have any effect I took the code out again.
But now its back in the stylesheet - directly underneath:

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

Thank you!!

I have to admit I'm stumped. The code is there in your stylesheet, and I can't find anything after it that should override it, except
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;
}
which does not conflict and is already accounted for in my code.

When I look at the page, I see no border/header, but as soon as I hit Edit CSS, the border and header appear just as they should. There is a bug in Web Developer Edit CSS that causes background images to disappear while editing, so I would think that some background that normally appears on top of this border vanishes, allowing it to be visible; however, I can't find any such thing in the stylesheet.

Just for laughs, what happens if you move the code to the very end of your stylesheet?

Nothing happens when I put it at the end of my stylesheet...
Oh my god I have a problem that someone "Totally Zenned" can´t fix?!:ohmy:
That´s serious. Well I guess I will have to find another layout solution...
Thank you for trying though!!

One thing I would suggest, which I can't try myself because of the Web Dev bug, is to find all instances of background-color: #ffffff; (except #mainWrapper) and change them to background-color: transparent;
Check after each one to see if it made a difference.

It is possible that I missed one that is hiding the border.