Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Morning After theme - title and menu changes

  1. forensicfocus
    Member

    Hi,

    I run a blog at http://articles.forensicfocus.com which is part of an existing site http://www.forensicfocus.com

    I'd like to redesign the header section of the blog to fit the syle of the main site, namely by replacing the blog title and tagline with a logo and (if possible) changing the horizontal menu to the same style used on the main site.

    I've uploaded the logo to Media and tried one or two attempts at CSS found by browsing this forum but without success (I'm not at all familiar with CSS). Can someone point me in the right direction with regard to this theme?

    Many thanks in advance,

    Jamie

    The blog I need help with is articles.forensicfocus.com.

  2. timethief
    Member

    Hello,
    I don't help with CSS editing. Staff provide support but this theme is highly customizable. Just in case you aren't aware of the options in it I'm posting a link to the Guide to The Morning After Theme for you.
    Hope this helps.

  3. forensicfocus
    Member

    Many thanks for that quick reply. Based on the information in that guide (specifically in the comments section) I seem to be making some progress as far as the logo image is concerned by using absolute positioning within a text widget. It'll take a bit more tweaking but I'm heading in the right direction, thank you.

    That leaves the menu section which I'm very much in the dark about. If anyone can assist - even if it's just to say that replicating the horizontal menu from the main site isn't possible - I'd be very grateful.

  4. timethief
    Member

    It seems that Staff are providing the only CSS editing support these days so please be patient while waiting for them to help you. Here's an excellent post that describes how custom menus operate and I think you ought to read it before you start any editing.
    http://wpbtips.wordpress.com/2011/12/19/custom-menus/

  5. timethief
    Member

    YIKES! I made the classic error of not clicking both links in the OP.
    The first link is to a free hosted WordPress.com blogs and we do provide support for that blog at WordPress.com. Free hosted by WordPress.com blogs are the only sites we provide support for on this forum.

    The second link http://www.forensicfocus.com is to a site that we do not provide support for. All support for that site has to come from http://wordpress.org/support/

  6. forensicfocus
    Member

    To clarify, the only site I'm seeking support for is the free WordPress.com blog at http://articles.forensicfocus.com. The other site at http://www.forensicfocus.com runs on a completely different CMS (not WordPress) and I'm not looking for support for that at all, I simply mentioned it to give a clearer idea of the design I'm trying to implement.

  7. justpi
    Member

    If you mean you'd like to make the top menu link to category pages etc., you need to create a custom menu. See here:
    http://wpbtips.wordpress.com/2011/12/19/custom-menus/

  8. forensicfocus
    Member

    Thanks justpi, although in fact I'm already using a custom menu, what I'm really trying to do is change the look of the menu itself (i.e. change the background, use images for the menu items etc.) I'm not technically proficient enough with either WordPress or CSS to know if that's something which is even possible.

  9. designsimply
    Staff

    I see that you were able to add in an image to replace the site title at http://articles.forensicfocus.com/

    Here is some CSS to get you started with menu edits:

    #navigation {
  font-size: 1.0em;
}
#navigation ul {
  background: #3375B0 url(http://www.forensicfocus.com/themes/ff_reDesign3/images/backgrounds/header/menu/menu_slice.png) repeat-x;
  padding-left: 15px;
  width: 945px;
  height: 81px;
}
.nav a {
  color: white;
  line-height: 81px;
  padding: 0px 10px;
  text-shadow: none;
}
.nav a:hover,
.nav li.current_page_item a,
.nav li.current_page_parent a,
.nav li.current-menu-ancestor a {
  background: none;
  color: #688AAb;
}
.nav ul li a:hover,
.nav ul li.current_page_item a,
.nav ul li.current-menu-item a {
  background: none;
  color: #688AAb;
}
#navigation ul.rss {
  display: none;
}

    I made some assumptions and you may need to adjust some things. :)

    Feel free to post back with more questions if you have any.

  10. forensicfocus
    Member

    Fantastic, that's exactly what I needed! Thank you so much! Custom design add-on has been purchased :-)

    I can't seem to come close to replicating the Futura Bold font used on the main site, which uses image files for the menu text, but I didn't really expect to so it's not a big problem (although I'm not sure why the text is all uppercase rather than just capitalised as it is in the custom menu section).

    The only thing remaining now is to try to remove the area of blank space below the menu where the header image used to be. Is that even possible?

  11. designsimply
    Staff

    Yeah, you can add Futura Bold to the font stack for the menu links, but font stack fonts only display if the font is installed on the computer viewing the page. See this for more info about how font stacks work: http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

    Impact might look okay, but the trouble is that the fonts in the stack have different widths and so if someone didn't have Impact installed it might cause the spacing to look totally different. Try the following CSS and then check it by removing fonts from the list one at a time to see the differences. Use the live edit feature of Firebug if you want to experiment without having to save the CSS on the Appearance → Custom Design → CSS page every time.

    .nav a {
  font-family: Impact, "Arial Narrow Bold", sans-serif;
  text-transform: capitalize;
  font-size: 130%;
}

    To get rid of the blank space, you can hide the element using "topbanner" as the ID: 

    #topbanner {
  display: none;
}

  12. designsimply
    Staff

    Impact might be okay though... I think it's a pretty basic, common font to have installed.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags