Adding a subtitle to header

Viewing 12 posts - 1 through 12 (of 12 total)
  • #14000
    nngrey
    Participant

    I would like to add a subtitle to my blog that is on the same line as the title but slightly to the right (about 15 spaces) and in a smaller font, maybe italicized. Something like this…

    Heard Immunity [spacing here] a public health blog[smaller font]

    I can’t use the existing tagline function because it appears below the title and expands the height of the header.

    Anyone have any suggestions? Thanks

    My blog is at http://heardimmunity.com/

    I have already added the following custom CSS to my Pinboard theme in order to remove social media and search icons and reduce the height of my header:

    #site-title {
    line-height: 92px;
    }

    #social-media-icons {
    display:none;
    float:none;
    margin-top:0;
    }

    #header input#s {
    display: none;
    }

    #14005
    tejae
    Participant

    You could use an image file with the text you want. I’ve attached a visual but it may not be the correct size you need. Just copy and paste it to your computer and upload it in the Appearance>header section.

    Click to see Example

    #14007
    nngrey
    Participant

    Thanks, that’s not a bad idea. I wonder if it will change my header height? I may try this though. Best, Nathan

    #14009
    tejae
    Participant

    I’m not sure. The example was just a mock up. The real one would have a transparent background.

    If you want to test it out, go ahead and add it (don’t crop)

    then let me know you’ve added it, so I can visually see it on your site. then I can adjust the size in whatever direction you need it adjusted.

    my logo took quite a few tries to get it the correct size.

    #14010
    nngrey
    Participant

    Well, I tried adding an image header but it blew up my margins. I created an image 1140 by 100. When I added it, the margins expanded top and bottom (and even side to side although it could be that my image needed to be longer. I think I saw some directions for editing the custom css if you wanted your graphic to fill the entire header without margins. I’ll have to hunt around for it again.

    #14011
    tejae
    Participant

    1140 sounds about right x 100.

    you may have seen the instructions on Alexanders website:

    http://www.mouseclick.com/tutorials-2/adjust-header-image/

    #14012
    nngrey
    Participant

    Well, I followed Alexander’s directions and used a graphic file that was 1140 x 100 but the header height did not contract to the size of the file – I had about 50 px space above and below.

    #14013
    tejae
    Participant

    Here’s a transparent file (png) that is 60px in height instead. (not sure it will work either, but thought we’d give it a go)

    Short Logo

    #14015
    nngrey
    Participant

    Well, I tried your file and it definitely looked better than mine. I was trying to create a transparent jpeg – didn’t seem to work. Your png did. But the header still won’t contract to the image size. Odd. I am playing around with other png files now.

    I really appreciate your help with this!

    Nathan

    #14016
    tejae
    Participant

    yes, as you discovered, jpg doesn’t support transparency.

    i took a look at your site, the header looks great to me. lol

    I don’t understand what you mean by “the header still won’t contract to the image size”.

    Visually, do you want the letters to take up the whole space across?

    #14017
    nngrey
    Participant

    I’m pretty happy with it now – thanks for your feedback. My image is now about 38 px high, just as high as the font itself, but the header is more like 90px high, including my image. I was hoping that I could get the header down to about 70px, but it won’t contract any further. Width is fine.

    Anyway, like I said, I’m pretty pleased now and really appreciate your support!

    #14019
    tejae
    Participant

    Happy to help. Glad you got an acceptable result. πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.