3 {{ upvoteCount | shortNum }}
3 {{ upvoteCount | shortNum }}

CSS in child theme of thematic framework

by jaybaker
2 replies
Hello all,

I have gone about the task of setting up a child theme from the thematic framework to update the look and feel of a site of mine. This is going along somewhat smoothly however when I look at the page I see this finite line under where the menu items are. I know where the css should be effected but it isnt and I want to make this look as professional as possible.

Below is my css sheet and a link to the site.

Code:
/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');
#access {
border-top:none;
border-left:none;
border-bottom:none;
position: absolute; top: 0px;
background-color: #000000;
width:100%;
}

.menu {
position: absolute; left: 5px;
background-color: #000000;
color: #ffffff;
}

.menu ul {
border-right:none;
}

.menu ul li {
background-color: #000000;
color:#ffffff;
}

.sf-menu a {
    border-left: none;
    border-top: none;
    border-right: none;
}

#branding{
width:100%;
background-color:#ff0000;
margin:0px;
}

#blog-title {
padding-left: 5px;
}

#blog-title a:hover {color: #ffffff;
}

#blog-description {
padding-left: 5px;
color: #ffffff;
}
Heres the link as promised... Your help is greatly appreciated.
#child #css #framework #thematic #theme #wordpress
  • Profile picture of the author johnnyN
    in the file called default.css on line 160 you have a selector called
    .sf-menu a (but I would not fix this)

    the first style in that selector is setting the border
    .sf-menu a {
    border-bottom: 1px solid #CCCCCC; <-- this line
    border-left: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    padding: 9px 13px;
    text-decoration: none;
    }

    but...
    it seems for some reason you have overridden the borders in another spot (there may be a good reason - i don't know)
    on line 55 of the file called style.css you have overridden many of the borders (top, left, and right) but you forgot the bottom.
    here is what it is right now
    .sf-menu a {
    border-left: medium none;
    border-right: medium none;
    border-top: medium none;
    }
    here is what I would change it to
    .sf-menu a {
    border:none;
    }
    {{ DiscussionBoard.errors[4451954].message }}
  • Profile picture of the author jaybaker
    Ugh... Such an easy fix... Tried before and didnt work... But any way thanks Johnny N ur awesome!
    Signature

    Do you want to make successes or excuses? Success? Alright then... See what's in store for you....
    - The AC Assassin

    {{ DiscussionBoard.errors[4452029].message }}

Trending Topics