Header Border (bottom)

Hi,

Terribly sorry for the delay, my mistake.

I looked at your images but they really don’t tell me what code to manipulate. Instead lets take a look at the theme demo site kriesi.at/themes/enfold (your site would be een better since otherwise I would have to rebuild your entire site and with this theme there is always more than one way to make something.

It looks like you are showing the border of the main content area with the header area on top and with the footer area on the bottom. And the last image shows a fatter bottom border. Alright. So you want

1) bottom line to be lighter OR have a drop shadow that comes on top of the footer in order to put footer in back. I can make the line any color you want but as to whether the effect you are looking for is achieved I don’t know (since I am not sure what you are trying to do, sorry)

#top .footer_color {

border-color: rgba(234, 234, 241, 0.56);

}

Please take a look at the css above (add to /css/custom.css) to lighten bottom line. If you want it lighter, change the .56 lower as 0 is completely transparent and 1 is fully visible.

2) There really is no way to shorten the line under the header since its the header border that runs all the way across on top and below. It can be removed and in its place could be placed something else , a smaller container for instance whose width can be controlled, but no way to make only a portion of the header bottom border visible, and mask the rest without introducing extra elements.

3) You wrote ‘I want the footer to stretch across all the way but the line shortens for the header border.’

#top .header_color {

border-color: rgba(255, 10, 10, 0);

}

Thanks,

Nick

Hi,

Oh I got you now on 1st point. You want an optical illusion of some kind .. like this site http://goo.gl/L6Lh4 … This is better done to background image. I am not a graphics guy to do this with images or css and in my view that would be outside the scope of the support team. However I will try to to give you code for how i would go about this, because I honestly don’t know how to put a shadow there that would create a 3rd depth effect, If you can show me some website or an image i can try to copy it but inventing stuff like that requires a designer to invent it artistically.

You probably need something like this (this image to big, but you understand, to create depth

http://www.clipular.com/c?6670313=69-7h3iFcO_WmALqJurLRMiWElw&f=.png

I made this by adding this css, and if you find an image with right shading to create the effect it would look pretty good.

.footer_color {

background: rgb(15, 15, 15) url(https://static5.depositphotos.com/1026931/508/v/950/depositphotos_5082857-3d-Empty-shelf-for-exhibit-in-the-wall.jpg) center center no-repeat fixed;

margin-top: -25px;

}

Here is different way to go about it https://docs.google.com/file/d/0B8hqGBMSfHtKZjlUempxb0s2dmc/edit?usp=sharing

============================

For your second point, no problem: Just add this to the bottom of your /css/custom.css or to Quick CSS , but to the very end of either one.

@media only screen and (min-width: 1140px){

.main_color .container {

width: 1030px;

border-top-color: #e1e1e1;

border-top-style: solid;

border-top-width: 1px;

border-bottom-color: #e1e1e1;

border-bottom-style: solid;

border-bottom-width: 1px;

}}

.container_wrap{

border-top-width: 0px !important;

}



.main_color .container {

width: 100%

max-width:910px;

border-top-color: #e1e1e1;

border-top-style: solid;

border-top-width: 1px;

border-bottom-color: #e1e1e1;

border-bottom-style: solid;

border-bottom-width: 1px;

}

http://www.clipular.com/c?7164011=a1fnzkGw40ncschUaspMWLp54pQ&f=.png

Thanks,

Nick

Hi,

Try this. I took the image you provided , cut a piece off and you can use it. Now you can get the effects just the way you want them with any paint program. You can ask someone else on here or get a freelancer if you are determined to have a css only solution.

.fullsize{

background: rgb(221, 221, 221) url("http://i.imgur.com/vbwgGgi.png") bottom left repeat-x scroll;

}

The code I gave you before would work with Ismael’s css since I tested it on your site as I did this one so it accounts for whatever css is already there. The trick is to figure out if it goes before or after Ismael’s css (i added it to your css/custom.css file while testing it)

Thanks,

Nick

Hi,

If that is the correct then this will hide it

.stretch_full.container_wrap.alternate_color.light_bg_color.title_container {

display:none;

}

or you can try this

#top .title_container{

display:none !important;

}

Thanks,

Nick

Hi,

Would you please show a url where this is taking place. You can mask the url in http://www.goo.gl

Thanks,

Nick