WordPress.org

Support

Support » Themes and Templates » [Theme: Twenty Twelve] Add logo to header using CSS?

[Theme: Twenty Twelve] Add logo to header using CSS?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi jen.guyton

    Because we’re restricted to CSS-only, we’ll have to utilize background-image as your logo.

    If you want the logo to the left of the site title only:

    .site-title {
    background: url('ImageLink.png') no-repeat;
    padding-left: 50px; /* increase this depends on your logo's width */
    }

    If you want the logo to the left of BOTH the site title and subtitle:

    hgroup {
    background: url('ImageLink.png') no-repeat;
    padding-left: 50px; /* increase this depends on your logo's width */
    }

    You can add one of these code to the bottom of your site’s style.css; or if you have the official WordPress plugin Jetpack, you can add it to Appearance –> Edit CSS.

    Hope this helps,
    Nhat

    esmi

    @esmi

    Forum Moderator

    You can add one of these code to the bottom of your site’s style.css

    No! Do not edit the theme itself. First create a child theme for your changes. Or install a custom CSS plugin.

    @esmi: He said he has access to nothing but the CSS. If he can create a child-theme, then he wouldn’t be restricted so.

    Plus, the server is under control of Princeton University. I doubt that they would give him FTP access.

    As for custom CSS plugin, I did mention Jetpack, which does have that module.

    esmi

    @esmi

    Forum Moderator

    You posted:

    You can add one of these code to the bottom of your site’s style.css

    You are posting the same thing in many other topics. Please stop this.

    Thanks Nhat — that sort of worked, but the logo is chopped off (see the site)! Any idea what I can do to fix it?

    Thanks Nhat — that sort of worked, but the logo is chopped off (see the site)! Any idea what I can do to fix it?

    Ah, that’s because the image’s height is larger than the container’s height.

    If you used hgroup
    hgroup { background: url('ImageLink.png') no-repeat; }
    then resize your image’s height to 80px.

    If you used .site-title
    .site-title { background: url('ImageLink.png') no-repeat; }
    then resize your image’s height to 49px.

    ———–

    Alternatively, we can increase the size of the container to fit your image’s height. Please tell me which one you plan to use (.site-title vs hgroup) if you choose to go this route.

    Thanks,
    Nhat

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Theme: Twenty Twelve] Add logo to header using CSS?’ is closed to new replies.
Skip to toolbar