WordPress.org

Ready to get started?Download WordPress

Forums

Distinction
[resolved] Aligning logo and header title in Distinction theme (12 posts)

  1. jenntru
    Member
    Posted 2 years ago #

    I need some help aligning my logo with the header title. The logo is in the top left corner and has pushed down the title.

    My site is rockitmomma.com

    Thank you!!

  2. peredur
    Member
    Posted 2 years ago #

    Start off by putting the image in the #masthead or #branding div, whichever looks best. You may need to float it left to get the effect you want.

    HTH

    PAE

  3. jenntru
    Member
    Posted 2 years ago #

    Thank you Peredur! I will give it a shot - I'm learning as I go :) I'm very new to all of this.

  4. jenntru
    Member
    Posted 2 years ago #

    Peredur, am I correct that you are talking about the CSS menu and not the header php menu? I added the image into the header.php menu, but nothing I'm doing in the CSS menu is working. Again, I'm very very new to this :)

  5. peredur
    Member
    Posted 2 years ago #

    No. I'm talking about the HTML. I don't know what you're referring to when you talk about menus. I'm talking about files. Exactly which file will depend on your theme.

    If you wanted to do it solely via CSS, you could make your image absolutely positioned with respect to some convenient div (which would have to be non-statically positioned---relative is the usual technique), or the viewport. Or you could float it left, although that might give you problems with IE.

    You would alter the CSS in the style.css file, preferably in a child theme.

    Your HTML seems odd, though. The #header div surrounds the #logo, #wrapper and #footer divs. usually, the wrapper goes outside with the header, content and footer divs enclosed within in. This makes it a lot easier to deal with a header logo. What theme are you using? Is this the HTML that came with the theme?

    Also, your logo is a 1120px x 1583px image scaled to 200 x 250. Your page would load a lot quicker if you scaled your image in an image manipulation program like the GIMP before uploading it.

    HTH

    PAE

  6. jenntru
    Member
    Posted 2 years ago #

    I'm using the Distinction theme, and that is the HTML that came with it. I am going to fiddle with the logo more, but wanted to learn how to get it properly inserted and positioned. I must admit that I am completely confused about folders - I have been reading so much about inserting logos and haven't read anything about that. All I've learned is that you insert the logo into the header.php and then manipulate the CSS as well. (my very generic lay mans explanation)

  7. James Laws
    The WP Ninjas
    Theme Author

    Posted 2 years ago #

    @jemmtru You have modified the theme so much you seem to have broken the layout. The Distinction theme is supposed to look like this: http://themes.wpninjas.net/distinction/.

    @perdur There is the header div and then a wrapper div for everything else. @jenntru has modified the theme in some way that has broken the layout as you can see by viewing the link above.

  8. James Laws
    The WP Ninjas
    Theme Author

    Posted 2 years ago #

    @jenntru For your purposes the logo should be placed within the #branding div within the header.php file.

  9. peredur
    Member
    Posted 2 years ago #

    @james: Yes. That's what I thought, but I was too polite to say :-)

    @jemmtru: I think I'd go back to square one (i.e. start over). You probably need to take from this what you can and then list the things you want to do to get the theme right for you. When you've done that, you can seek advice on each one in turn so that you don't end up breaking the layout. If you validate your HTML you'll see that there are some serious errors that might come back to bite you later on, especially in respect to cross-browser compatibility.

    If you need to make sweeping changes to the template, you might ask yourself if this is the template for you.

    HTH

    PAE

  10. peredur
    Member
    Posted 2 years ago #

    Oh! And if you need to make changes like these it's almost always better to do them in a child theme.

    Cheers

    PAE

  11. jenntru
    Member
    Posted 2 years ago #

    Thank you both for your help, I appreciate your time.

  12. jenntru
    Member
    Posted 2 years ago #

    :) yes, I learned that the hard way. Thank you again for all of your help and insight.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic