WordPress.org

Ready to get started?Download WordPress

Forums

[Theme: Twenty Twelve] Add logo to header using CSS? (7 posts)

  1. jen.guyton
    Member
    Posted 5 months ago #

    Hi all,

    I'm trying to add a logo to my header at pringle.princeton.edu, but due to the constraints on the Princeton University WordPress platform, I can't edit the HTML -- only the CSS. So, can anyone suggest a way to add a logo to the header only with CSS?

    Thank you!
    Jen

  2. Nhat
    Member
    Posted 5 months ago #

    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

  3. esmi
    Forum Moderator
    Posted 5 months ago #

    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.

  4. Nhat
    Member
    Posted 5 months ago #

    @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.

  5. esmi
    Forum Moderator
    Posted 5 months ago #

    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.

  6. jen.guyton
    Member
    Posted 5 months ago #

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

  7. Nhat
    Member
    Posted 5 months ago #

    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

Reply

You must log in to post.

About this Topic