Results 1 to 6 of 6
  1. #1
    Join Date
    Jun 2011
    Posts
    92
    Plugin Contributions
    0

    Default Needs some help with header area

    i'm trying to tighten up the look of the header area on my site. I'd like the logo to be in the black space at the top but round the corners of the white area below the navCatTabs. I've been trying multiple things to make this work to no avail. I've included a screenshot of a zen cart that has a header setup exactly like i'm looking for.

    Any help on the matter would be GREATLY! appreciated.

    www.matchlockarms(dot)com/store

    Thank you in advance.
    Attached Images Attached Images  

  2. #2
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

    Default Re: Needs some help with header area

    Quote Originally Posted by matchlock View Post
    i'm trying to tighten up the look of the header area on my site. I'd like the logo to be in the black space at the top but round the corners of the white area below the navCatTabs. I've been trying multiple things to make this work to no avail. I've included a screenshot of a zen cart that has a header setup exactly like i'm looking for.

    Any help on the matter would be GREATLY! appreciated.

    www.matchlockarms(dot)com/store

    Thank you in advance.
    open includes/templates/YOUR_TEMPLATE/css/stylesheet.css

    find the following and make the highlighted changes

    #navCatTabsWrapper {
    background-color: #5B2D2F;
    color: #9a9a9a;
    background-image: none;
    font-size: 1.4em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    }

  3. #3
    Join Date
    Jun 2011
    Posts
    92
    Plugin Contributions
    0

    Default Re: Needs some help with header area

    Quote Originally Posted by clydejones View Post
    open includes/templates/YOUR_TEMPLATE/css/stylesheet.css

    find the following and make the highlighted changes

    #navCatTabsWrapper {
    background-color: #5B2D2F;
    color: #9a9a9a;
    background-image: none;
    font-size: 1.4em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    }
    very close! take a look at the site and you'll see the navcattabs have a full border on them causing a little black mark on the bottom sides. i'd like this to bleed in to the rest and look like one white area with the round corners on the top.

  4. #4
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

    Default Re: Needs some help with header area

    Quote Originally Posted by matchlock View Post
    very close! take a look at the site and you'll see the navcattabs have a full border on them causing a little black mark on the bottom sides. i'd like this to bleed in to the rest and look like one white area with the round corners on the top.
    try this:

    #navCatTabsWrapper {
    background-color: #fff;
    color: #9a9a9a;
    background-image: none;
    font-size: 1.4em;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;

    }

  5. #5
    Join Date
    Jun 2011
    Posts
    92
    Plugin Contributions
    0

    Default Re: Needs some help with header area

    Quote Originally Posted by clydejones View Post
    try this:

    #navCatTabsWrapper {
    background-color: #fff;
    color: #9a9a9a;
    background-image: none;
    font-size: 1.4em;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;

    }
    simply amazing.. THANK YOU SOOO MUCH..

  6. #6
    Join Date
    May 2010
    Location
    WA State
    Posts
    1,678
    Plugin Contributions
    3

    Default Re: Needs some help with header area

    Quote Originally Posted by clydejones View Post
    try this:

    #navCatTabsWrapper {
    background-color: #fff;
    color: #9a9a9a;
    background-image: none;
    font-size: 1.4em;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;

    }
    Except that doesn't work in IE8. Find and upload PIE.htc and add this:

    position: relative;
    behavior: url(../store/includes/PIE.htc);

    Note: I used the includes directory for the script, but you can put it anywhere. The important thing is that the path is relative to the page, not the CSS file.

 

 

Similar Threads

  1. Arrgh! Please help me with ie 7 rendering of logo / header area
    By paintersinn in forum Templates, Stylesheets, Page Layout
    Replies: 6
    Last Post: 26 Feb 2013, 09:37 PM
  2. Need help with header image/header area-Apple Zen
    By Samuz in forum Addon Templates
    Replies: 2
    Last Post: 9 Jul 2010, 12:37 AM
  3. Newbie needs help with Access to Admin area
    By sharon72 in forum Installing on a Windows Server
    Replies: 4
    Last Post: 11 Apr 2010, 12:12 PM
  4. N00b needs some help with PHP
    By TXMagnum in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 23 Jun 2008, 06:31 PM
  5. Need some help with my header
    By canemasters in forum General Questions
    Replies: 3
    Last Post: 2 Feb 2008, 07:35 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR