WordPress.com

1. jacoandkatie
   Member
   Jan 24, 2012, 3:19 PM

   Hi there,

   My site is jacoandkatie.com.

   I am working on CSS customization in the Imbalance2 theme and need help with the following:

   1) Centering my header image relative to the light grey, horizontal lines that separate the header from the text body.

   2) Moving the top-most light grey, horizontal line so that it sits directly below my menu bar.

   3) Removing the page names from the main body of the pages.

   4) Achieving single spacing for the addresses on my "Travel Info" page. Basically, I don't want each line of the address to be treated like a new paragraph.

   5) The ability to add one more menu item in my horizontal menu bar without having the menu wrap around.

   The blog I need help with is jacoandkatie.com.

2. thesacredpath
   Member
   Jan 24, 2012, 6:23 PM

   1. You used a header image too wide for the theme and then increased the width of #branding without considering parent elements that were then narrower than the children. Remove the #branding stuff you have in your CSS and replace with the following.

   #branding {
   background: url("http://jacoandkatie.files.wordpress.com/2012/01/logo_2_999x200.jpg") no-repeat scroll center top transparent;
   height: 200px;
   margin: 0;
   overflow: hidden;
   width: 960px;
   }

   2. Add this to your CSS

   #header {
   padding-bottom: 0;
   }

   3. Page titles

   .post_title h2 {
   display: none;
   }

   4. To have a standard line break (no blank line) rather than a paragraph break (with the blank line) hold shift and press enter/return at the end of the line.

   5. This is sort of an illusive thing since how the menu is going to be seen by any visitor depends on what browser they are using, how they have their preferences set, whether they zoom in or zoom out on your site. One person might see a single line and the next person on a different browser will see two. This will make the area maximum width with out displacing the search box. Replace the #header rule in your CSS with the below.

   #header-left {
   width: 675px;
   }

3. jacoandkatie
   Member
   Jan 24, 2012, 6:43 PM

   Sacredpath,

   Thank you so much! Brilliant!

   Regarding page titles (item 3 in the list), the code works to remove the title from the home page, but not the rest of the pages. Do I need to customize the code with the page titles to remove the header on those pages?

   Thanks,

   Katie

4. thesacredpath
   Member
   Jan 24, 2012, 8:11 PM

   Change it into this instead then which is broader in scope. I should have looked at the selectors in the other pages..

   `.entry-title {
   display: none;
   }

5. jacoandkatie
   Member
   Jan 24, 2012, 11:07 PM

   Perfect! I truly appreciate your help!

6. thesacredpath
   Member
   Jan 24, 2012, 11:49 PM

   You are welcome.

Topic Closed

This topic has been closed to new replies.