Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • #23840

    Hello.

    Is there a way to shorten the line under the header where I have the following settings:

    Stretched Layout

    Responsive Layout: Fixed Layout

    Header type:Small non-fixed header

    I want the footer to stretch across all the way but the line shortens for the header border.

    Thanks

    #121304

    Also, is there a way to display a shadow under the page that goes on the footer.

    #121305

    Hi,

    I’m sorry but can you give us a screenshot of what you are trying to do?

    Regards,

    Ismael

    #121306

    How do I upload a image on here? Can I email it to you?

    #121307

    Hey,

    Okay this first image shows the bottom of the page. You can see where the page ends and the footer begins. There is a dark black line. I would want that line to be lighter or have a drop shadow that comes on top of the footer. This will give the effect that the footer is in the back? hopefully it makes sense.

    https://docs.google.com/file/d/0B8Ofil_BJ_yzaEN2dVRSMklONFk/edit?usp=sharing

    #121308

    This second image shows the header with a line that is full width. I want to change it so it is equal to all the other lines in the body. It should start at where the logo is and finish at the search icon. 960px im guessing.

    https://docs.google.com/file/d/0B8Ofil_BJ_yzRm5UMjBHNmFTamc/edit?usp=sharing

    #121309

    some help please..

    #121310

    Hi,

    Please add this on your custom.css

    #header_main {
    border-bottom: none;
    }

    .stretch_full.container_wrap.alternate_color.light_bg_color.title_container {
    border-top: none;
    }

    #header_main .container {
    border-bottom: 1px solid #E1E1E1;
    }

    Regards,

    Ismael

    #121311

    Thanks brother.

    SW.

    What about shadow on the bottom of the page that comes over the footer area?

    p.s. the code you provided then breaks the page heading’s / breadcrumb.

    #121312

    Here is a screen shot for your ref. http://preview.tinyurl.com/qa43d8w

    #121313

    Calling Mr. Ismael or any other support staff.

    #121314

    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 http://www.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

    #121315

    Hey Nick!

    Thanks for the response. I’ve put the site online and can be found here: http://staging.avenirtechnologies.co/

    I’ll try to address the issues one by one.

    First:

    Lets visit the home page: http://staging.avenirtechnologies.co/

    – Lets scroll to the bottom where the footer is. I want to have a shadow below the white space (before the footer) to give the effect the footer is in the back.

    - The css you provided to to lighten the border on the footer helped. Thanks!

    Second:

    - Lets go to the products page. http://staging.avenirtechnologies.co/products/ – you can see that the top header border is short (thanks Ismael) But you can see where the title is as well as breadcrumbs that container goes all the way across (background color and bottom border).

    I would like to have this aligned with the top border which is shorter.

    I hope I made sense in all this.

    Thanks again for the help

    #121316

    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(http://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

    #121317

    Hey Nick,

    Thanks a lot with this!

    For the first issue with the drop shadow see this attachment: http://tinyurl.com/meou5o9 I don’t think it is anything graphical but just a drop shadow.

    New Issue:

    I do have another problem, since I put in your css code and Ismael, on my one of my product page you can see it here:

    staging.avenirtechnologies.co/product/model-602d01-low-cost-industrial-icp-accelerometer/

    you will notice how the bottom border for the title container now has some serious padding issues.

    Also, there seems to be an clash between your code and Ismael as it creates a thicker top border. Here is what I have on my quick css (i edited some of your code as it was putting a line on the footer):

    .avia_cart_buttons {

    display: none;

    }

    #header_main {

    border-bottom: none;

    }

    .stretch_full.container_wrap.alternate_color.light_bg_color.title_container {

    border-top: none;

    }

    #header_main .container {

    border-bottom: 1px solid #E1E1E1;

    }

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

    .main_color .container {

    width: 1030px;

    border-top-color: #e1e1e1;

    border-top-style: solid;

    border-top-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;

    }

    #121318

    Thanks!

    #121319

    Hey,

    To make things easy for you lol I’ve just used your full code and Ismael’s. This way you can see what the affect is. Please visit my page to see how the things are out of place.

    1. On the ‘Home’ page you will notice that the top border (right under the logo/menu) is thicker because of Ismael’s code and yours clashing.

    2. On the ‘Home’ page if you scroll all the way to the bottom you will notice that after putting your code it has created a border above the footer that is around 900px wide.

    3. Please visit this page: http://staging.avenirtechnologies.co/product/model-602d01-low-cost-industrial-icp-accelerometer/ – you will notice how the bottom border has a lot of padding. Also on this page if you scroll all the way to the footer area you will see that the 900px wide border line has disappeared.

    Here is the code:

    .avia_cart_buttons {
    display: none;
    }

    #header_main {
    border-bottom: none;
    }

    .stretch_full.container_wrap.alternate_color.light_bg_color.title_container {
    border-top: none;
    }

    #header_main .container {
    border-bottom: 1px solid #E1E1E1;
    }

    @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;
    }

    #121320

    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

    #121321

    Hi, I need help to hide the area stretch_full.container_wrap.alternate_color.light_bg_color.title_container as link http://www.thiagoalencar.com.br/stretch_full.container_wrap.alternate_color.light_bg_color.title_container.jpg

    #121322

    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

    #121323

    I tried entering both codes separately both in custom.css file as quick in css and it did not work.

    #121324

    Hi,

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

    Thanks,

    Nick

    #121325
    #121326

    Strange, just access to send you the link and the area is hidden, as I wanted. is there any difference if I’m logged in as when I took the print http://www.thiagoalencar.com.br/stretch_full.container_wrap.alternate_color.light_bg_color.title_container.jpg I was logged in?

    Another detail, accessed through iPad now, but at home was accessed by iMac / Chrome

    #121327

    Hi,

    Could be anything.. cache, browser, not sure. But I looked and this is the code that’s hitting and making it not show up, the other block isn’t working.`

    #top .title_container {
    display: none !important;
    }

    Thanks,

    Nick

Viewing 25 posts - 1 through 25 (of 25 total)

The topic ‘Header Border (bottom)’ is closed to new replies.