WordPress.org

Ready to get started?Download WordPress

Forums

How to add logo on twenty twelve theme (29 posts)

  1. toolguy
    Member
    Posted 1 year ago #

    I'm building a new site and want to add my company logo at the top right corner of all pages (in the header). The option with twenty twelve puts my logo in the body of the page and I don't want it there. I imagine I need to add some code to the css?

  2. leejosepho
    Member
    Posted 1 year ago #

    You will first need a Child Theme, then you can copy header.php over into that folder and add you modification/s...
    http://codex.wordpress.org/Child_Themes

    None of that is really difficult, and plenty of folks here will help.

  3. toolguy
    Member
    Posted 1 year ago #

    Thanks very much! It doesn't seem hard to do and the instructions are very clear. Unfortunately, I really new to this so I don't understand all the terms and how they apply. I hate being such a newbie. I will have to find someone to explain this to me.

  4. leejosepho
    Member
    Posted 1 year ago #

    Do you have FTP access at your server? If so, look for public_html/wp-content/themes, and that is where you should find your existing Twenty Twelve theme inside its own folder. To make a Child Theme, first just make a new folder right there *beside* (not inside) the Twenty Twelve folder, and you can name your new Child Theme folder anything you wish (such as my2012child, and then use that same name in the following file just below). Next, make this file and place it inside the Child Theme folder you just made:

    /*
    Theme Name: my2012child (or use any name of your own choosing)
    Description: Child theme for the twentytwelve theme
    Author: Your name here
    Template: twentytwelve
    */
    
    @import url("../twentytwelve/style.css");

    After doing that, go to your Dashboard and try a "Live Preview"...and you can then activate it if all looks well, and you will be ready to begin customizing your new Twenty Twelve Child Theme.

  5. toolguy
    Member
    Posted 1 year ago #

    You're very good at explaining. Thank you. I've created the folder which is now amongst the various theme folders I have loaded into WP. Was it supposed to be "in" the twenty twelve folder? It's not at the moment. I created the file inside the folder as instructed.

    Looking at my site nothing has changed. Looking at my Themes page it's showing my2012child theme at the bottom as being "broken" as it's missing the stylesheet. What have I missed?

  6. leejosepho
    Member
    Posted 1 year ago #

    I've created the folder which is now amongst the various theme folders I have loaded into WP. Was it supposed to be "in" the twenty twelve folder?

    No, just next to it inside wp-content. It sounds like you have that right.

    I created the file inside the folder as instructed.

    Looking at my site nothing has changed.

    That is as things should be so far...

    Looking at my Themes page it's showing my2012child theme at the bottom as being "broken" as it's missing the stylesheet. What have I missed?

    There is apparently something wrong...

    Did you name that style sheet style.css ?

  7. toolguy
    Member
    Posted 1 year ago #

    It's named mychild2012. I thought you wanted it the same name as the folder. Should it be style.css?

  8. leejosepho
    Member
    Posted 1 year ago #

    Yes, style.css is the name of the file, and your Child Theme name is on the appropriate line inside that file.

  9. toolguy
    Member
    Posted 1 year ago #

    OK. Renamed my folder twentytwelvechild so now it resides beside my twentytwelve folder. I've renamed the file style.css. It's now showing up in the themes with an activate option.

  10. toolguy
    Member
    Posted 1 year ago #

    I did a live preview and the site looks like a site map. Is this correct?

  11. leejosepho
    Member
    Posted 1 year ago #

    I think it might look like that until you set the various options, then WordPress keeps track of options set for each theme instance.

  12. toolguy
    Member
    Posted 1 year ago #

    Well, this might be too much for me. I've activated it and set some options but aside from a colour and a photo it's looking the same. Like a site map.

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    It looks like the @import line in your style.css file is not correct - it's showing as this:

    @import url("../twentytwelve/style.css");

    Did you create it using a plain text editor (not something like Word)?

  14. toolguy
    Member
    Posted 1 year ago #

    Sweet! Nice catch WPyogi! I don't know how that happened but it's fixed. Site looks like it should again. Thanks very much to both of you for your help.

    Now, I just need to figure out how to get the logo set up on the top right and some social media links at the top center.

  15. leejosepho
    Member
    Posted 1 year ago #

    Many thanks, WPyogi. I had just gone into the deep end and was hoping for some rescue!

  16. toolguy
    Member
    Posted 1 year ago #

    The first goal here was to get my logo up top. I've done this now by adding this code (I got from searching) below @import...

    img.header-image {
    border-radius:0;
    box-shadow:0 0 0 rgba(0,0,0,0);
    position:absolute;
    top:65px;
    }
    .site-header {
    padding-top:2rem;
    }

    It's worked except my logo is on the left side of the page and I want it on the right. What do I need to add/change to make this happen?

  17. leejosepho
    Member
    Posted 1 year ago #

    I do not know for certain since I do my header stuff in header.php, but pick your own numbers here and one or more of these might help:

    width:100%;
    top:48px;
    margin-left:32px;
    z-index:11;

    I suspect that margin with a much bigger number might do what you want.

  18. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    CSS code is totally site specific, so it hardly ever works to use some from another site. How did you add the logo? Did you modify the header.php file?

  19. toolguy
    Member
    Posted 1 year ago #

    I found the info here:

    http://en.forums.wordpress.com/topic/twenty-twelve-change-header-logo-location-and-border

    He relocated the header photo. So I put my logo as the header and added the code to the css file in the child theme. It's good but I need to move it from the left to the right.

  20. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Okay, well that might be okay in this case, but in general .COM and .ORG themes and advice aren't interchangeable. With this theme, because it's the default, it may work okay. How far over to the right do you want it?

  21. toolguy
    Member
    Posted 1 year ago #

    All the way. Basically it's sitting in the perfect spot but it needs to be on the right side, not the left.

  22. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Okay, see how this works:

    img.header-image {
        border-radius: 0 0 0 0;
        box-shadow: 0 0 0 transparent;
        left: 80%;
        position: absolute;
        top: 45px;
    }

    I'm a bit unsure of the positioning because it may misbehave when the page is resized on mobile devices...so do some testing.

  23. toolguy
    Member
    Posted 1 year ago #

    It worked on my laptop but the iPad gets messed up. I would imagine the iphone will be worse. Can it be fixed?

  24. leejosepho
    Member
    Posted 1 year ago #

    I am way venturing way past my actual knowledge here, but I think you might have to revert to doing this stuff in header.php rather than style.css in order to keep things properly "mobile-first" (Twenty Twelve's default).

  25. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Hmm, yeah, I looked at it on my iPhone - ugh :). It's no doubt possible, more a question of how involved, etc. Twentytwelve is coded mobile-first and I'm not totally up to speed on all the ins and outs of it. Extensive CSS is also a bit outside the scope of these forums - though a few of us like CSS enough to do it anyway :). I need to sign off for a bit, but I'll look at it some more and see what I can do. But let me ask how you would like it to look on mobile -- logo gone or still there, realigned title and logo, resized logo - don't know if I can do all of those, but in case...

    You could also ask on a CSS forums such as

    http://csscreator.com - they are quite good from what I've seen.

  26. toolguy
    Member
    Posted 1 year ago #

    I would like it to work on mobile devices. That's more important to me.

    I'm thinking I should maybe leave it on the left and either remove my title and tag line or create a new logo with my actual logo, title and tag line all in one jpg file.

  27. toolguy
    Member
    Posted 1 year ago #

    leejosepho: I don't know a lot about this but I think you're right. Should I create a header.php file in the child theme?

  28. leejosepho
    Member
    Posted 1 year ago #

    Should I create a header.php file in the child theme?

    No, not as such. That is one file you just "copy complete" from Twenty Twelve and place inside your Child Theme folder, then begin your mods there in the Child Theme folder. However, later keep in mind that "copy complete" is not true in relation to all .php files. For example, and if you might ever decide to add a footer area, you originate a complementary functions.php file for your Child Theme and leave Twenty Twelve's alone.

  29. stevenmed
    Member
    Posted 1 year ago #

    Hello, I was able to create thestyle.css but I have two questions that apparently everyone knows but I don't, and I don't see the answer here :(
    What should be the name of the logo? and, Where should it be?

    I will apreciate any help, I'm really new to this system

    Thank you

Topic Closed

This topic has been closed to new replies.

About this Topic