Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Changing the green in Freshy (I've read the other stuff!)

  1. deadl
    Member

    Okay,

    I've searched the forums and worked out that the green navigation bar in Freshy is not a hex colour, but an image instead.
    I've followed the instuctions in this thread http://en.forums.wordpress.com/topic/freshy-theme-navigation-bar-colors?replies=7,
    but couldn't find any images (other than my own) in the image library.

    Can anyone link me to where these images are. I can change them in photoshop and upload them to my library, but I don't know where to get them from initially.

    Alternatively, can anyone tell me how to change that bar completely. It used to be just a big pink bar on my page, but it changed back today for whatever reason.

    I'm at deadl.ie (or deadl.wordpress.com)

    The blog I need help with is deadl.wordpress.com.

  2. thesacredpath
    Member

    The standard images for things in themes are not in your media library, they are in a central location in the backend of wordpress. Here are the three images that make up the navigation.

    http://s0.wp.com/wp-content/themes/pub/freshy/images/menu/menu_start_triple.gif

    http://s0.wp.com/wp-content/themes/pub/freshy/images/menu/menu_bg.gif

    http://s0.wp.com/wp-content/themes/pub/freshy/images/menu/menu_end_triple.gif

    The above images have to be either modified in photoshop and then uploaded into the media library with different names and then inserted into the proper place in the CSS, or new ones have to be created that match all the dimension and exact placement of the different elements to the pixel otherwise things will go all wonky.

    Changing the menu backgrounds on Freshy is pretty involved and require a good level of image editing experience.

  3. deadl
    Member

    Thank you!
    Something for the weekend so!

  4. deadl
    Member

    Hey,

    So I've edited what I thought was it, but nothing's changed:

    .menu {
    list-style-type:none;
    background:url('images/menu/menu_bg.gif') 50% 0 #515151 repeat-x;
    height:80px;
    width:780px;
    border-top:1px solid #FF00AF;
    overflow:hidden;
    margin:0;
    padding:0;
    }

    .menu li {
    background:none;
    display:table-row;
    vertical-align:middle;
    float:left;
    height:80px;
    padding:0;
    }

    .menu li.last_menu,.menu li.right_menu {
    float:right;
    }

    .menu li a {
    font-size:.8em;
    text-transform:uppercase;
    line-height:normal;
    display:table-cell;
    vertical-align:middle;
    height:80px;
    background:url('http://deadl.files.wordpress.com/2010/10/menu_start_triple.jpg') top left transparent repeat-x;
    color:#FFFFFF;
    text-decoration:none;
    padding:0 10px;
    }

    .menu li a:hover,.menu li a:active {
    background-position:center left;
    color:#FFFFFF;
    }

    .menu li.current_page_item a {
    background-position:bottom left!important;
    color:blue!important;
    }

    .menu li a.first_menu {
    padding-left:35px;
    background-repeat:no-repeat;
    background-image:#FF00AF;
    }

    .menu li a.last_menu,.menu li a.last_menu_off {
    padding-right:35px;
    background-repeat:no-repeat;
    background-image:url('http://deadl.files.wordpress.com/2010/10/menu_end_triple.jpg');
    background-position:top right;
    }

    .menu li a.last_menu:hover,.menu li a.last_menu:active {
    background-position:center right;
    }

    .menu li.current_page_item a.last_menu {
    background-position:bottom right!important;
    }

    .menu li.lang_menu {
    float:right;
    }

    .menu li.lang_menu a span {
    width:19px;
    height:80px;
    overflow:hidden;
    text-indent:100px;
    display:block;
    }

    .menu li.lang_menu a {
    display:block;
    width:19px;
    cursor:pointer;
    }

    .menu li#fr_FR a span {
    background:url('images/lang_fr.gif') left transparent no-repeat;
    }

    .menu li#en_US a span {
    background:url('images/lang_en.gif') left transparent no-repeat;
    }

    .menu li#fr_FR.current_page_item a span,.menu li#fr_FR a:active span {
    background-image:url('images/lang_fr.gif');
    }

    .menu li#en_US.current_page_item a span,.menu li#en_US a:active span {
    background-image:url('images/lang_en.gif');
    }

    #footer .footer_content {
    width:760px;
    display:block;
    margin-right:auto;
    margin-left:auto;
    margin-top:0;
    border-top:1px dotted silver;
    text-align:center;
    padding:10px;
    }

    .post {
    font-size:.9em;
    border-top:20px solid #F5F5F5;
    margin-bottom:10px;
    padding:1em 0;
    }

    .sticky {
    border-top:20px solid #ccc;
    background:#f7f7f7;
    padding:10px;
    }

    .post h2,.post h3,.post h4,.post h5 {
    font-size:2em;
    }

    .post hr {
    display:block;
    }

    .highlight_box {
    font-size:.9em;
    border:2px solid #F5F5F5;
    margin-bottom:20px;
    padding:1em;
    }

    .highlight_box .post {
    font-size:1em;
    border:0 none;
    margin-bottom:0;
    padding:0;
    }

    .highlight_box .post p {
    margin:0;
    }

    .highlight_box .post .date {
    display:none;
    }

    Any suggestions?

  5. thesacredpath
    Member

    OK, the first thing I would do is to delete everything from the CSS edit window, paste the following and then start from there. Pasting the entire stylesheet into the editor here at wordpress.COM will cause you issues, especially with image intense themes such as freshy since the images in the original CSS have relative links and those break in your custom CSS.

    .menu.primary li a.first_menu {
background-image:url("http://deadl.files.wordpress.com/2010/10/menu_start_triple.jpg");
}

.menu.primary li a.last_menu, .menu.primary li a.last_menu_off {
background-image:url("http://deadl.files.wordpress.com/2010/10/menu_end_triple.jpg");
}

.menu.primary li a {
background:url("images/menu/menu_triple.gif") repeat-x scroll left top
}

    The last image I see no evidence you recreated with the new colors, and that is the one that handles the center buttons. The first two handle the left button and the last button (when it is at the end of the menu bar).

    Here is the link to the "menu_triple.gif original. You need to work over the colors in that one as you did in the _start_ and _end_ images.

    http://s0.wp.com/wp-content/themes/pub/freshy/images/menu/menu_triple.gif

  6. deadl
    Member

    I'm not seeing anything at that link or the other one linked in the second reply. It's a blank screen...?

  7. thesacredpath
    Member

    That is because that image file is one meant to be repeated and is 1px wide by 240px tall and contains about about 5 or 6 different sections used for different button states and center colors. Below is a link to a file I modified to 100px wide. If you use that to modify, make sure when done that you save it to a size of 1px wide X 240px high or it will not work.

    http://flippintestblog.files.wordpress.com/2010/10/menu_triple.gif

  8. deadl
    Member

    Thanks so much!
    Will keep you posted!

  9. thesacredpath
    Member

    You're welcome.

  10. deadl
    Member

    Yup, it worked.

    Thanks again!

  11. thesacredpath
    Member

    Great, and you are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.