you're reading:
Blog title, Color changes, Header customization, Html & inline css codes, Position absolute, Tagline, Themes

Customizing the blog title in Blogum

http://wpbtips.wordpress.com/

The blog title in Blogum is black, and it comes with a decorative dash.
If you don’t like the dash, you can use HTML in a text widget to hide it. Using a similar technique, you can also color the title, if you wish, or reposition the tagline, or hide the title and tagline altogether.

1. Hiding the dash

Paste this in a text widget:

<div align="center" style="width:100%;height:0;top:0;right:344px;position:absolute;z-index:11;">
<div style="position:relative;top:65px;width:50px;height:25px;background-color:#fff;">
</div>
</div>

This will create a white rectangle in front of the dash.

2. Coloring the title

Paste this in a text widget:

<div align="center" style="width:100%;top:44px;left:0;position:absolute;z-index:11;background-color:#fff;">

<div style="text-align:left;margin-left:160px;">

<a style="color:#000000;text-decoration:none;font-weight:bold;font-size:42px;" href="BLOG URL HERE">BLOG TITLE HERE</a>

<div style="color:#9d9d9d;">TAGLINE HERE</div>

</div>

</div>

Once you paste the blog URL and type the blog title and tagline where I’m showing, you’ll have an exact simulation of the actual blog title and tagline, placed in front of them. Replace the original 000000 (and the 9d9d9d, if you wish to change the color of the tagline too) with the hex code(s) for the color(s) you prefer. For colors and hex codes see Colors under Links 1 in my sidebar.

3. Repositioning the tagline

If your title and tagline are short, you can use a variation of the previous code to position the tagline next to instead of below the title (and make it larger as well). Paste this in a text widget:

<div align="center" style="width:100%;top:44px;left:0;position:absolute;z-index:11;background-color:#fff;">

<div style="text-align:left;margin-left:160px;padding-bottom:20px;">

<a style="color:#000000;text-decoration:none;font-weight:bold;font-size:42px;" href="BLOG URL HERE">BLOG TITLE HERE</a>

<span style="color:#9d9d9d;font-size:21px;font-style:italic;padding-left:40px;">TAGLINE HERE</span>

</div>

</div>

You can change the numbers in the span tag, to change the font size of the tagline and its distance from the end of the title. You can also remove the font-style:italic; bit, if you prefer regular text.

4. Hiding the blog title and tagline

You can hide the regular blog title and tagline if you’d like to incorporate them in your header image. In that case paste this in a text widget:

<div align="center" style="top:0;right:0;width:945px;height:125px;background-color:#fff;position:absolute;z-index:11;">
</div>

This will produce a white strip in front of the blog title and tagline.

If you don’t like the resulting white space, you’ll need a more complicated solution.
a) Go to Appearance > Header and remove the header image.
b) Go to Media > Library and copy the URL of the header image.
c) Paste the folllowing code in a Text widget:

<div align="center" style="position:absolute;top:0;left:0;z-index:11;width:100%;height:180px;background-color:#fff;">
<div style="position:relative;top:5px;text-align:left;margin-left:160px;font-size:16px;font-weight:bold;">
<a style="color:#000;text-decoration:none;" href="BLOG URL HERE">Home</a> <span style="color:#9d9d9d;">/</span> <a style="color:#000;text-decoration:none;" href="PAGE URL HERE">About</a>
</div>
<div style="position:relative;top:1px;">
<a href="BLOG URL HERE"><img style="max-width:945px;" src="IMAGE URL HERE"></a>
</div>
</div>

This model includes a Home link and an About link. If you need more links, repeat the part I have highlighted in red (with a space before it).

http://wpbtips.wordpress.com/

Please don’t paste code in comments – see comment guidelines.
About these ads

Discussion

12 thoughts on “Customizing the blog title in Blogum

  1. thnx for sharing this.
    Can u also explain how u modified ur blog’s header?
    coz as far as i knw, the-morning-after doesn’t have custom header.. so how did u get a background design with it?
    It that using the same technique as quoted above?

    Posted by genobz | August 11, 2011, 00:11
  2. You’re welcome.

    No, TMA does have a custom header – see my guide to the theme:

    http://wpbtips.wordpress.com/2011/06/02/the-morning-after/

    But its regular header image is not where I put mine. Yes, I added it using a variation of this technique (the image is transparent and lets the actual blog title and tagline show through).
    Note that the technique can’t be used in any theme – see here:

    http://wpbtips.wordpress.com/2009/12/15/position-absolute-pt-2/

    Posted by Panos | August 11, 2011, 01:21
  3. Thanks. Will take a look at that. :)

    Posted by genobz | August 11, 2011, 15:20
  4. You’re welcome!

    Hope you read my reply here, not in an email, because the initial phrasing was misleading and I changed it.

    I like your front page, by the way. Took me by surprise at first!

    Posted by Panos | August 11, 2011, 19:12
  5. I read your reply on email as well as here so i had no confusions.

    Thanks for the compliment abt the front page.

    I blog on too many categories and i can’t maintain separate blogs for them. Hence, I have to blog abt all of those on one blog which makes it kinda difficult for a new visitor.

    For the same reason, I was looking for a possibility to change my theme to a magazine styled theme. But I am unable to come across a completely-fit one. :(

    TMA is very close to that. I’ll mention the problems i have on the TMA theme page u have. Maybe you have some solutions to that.. :)

    For now, to tackle those problems, I thought of putting the categories as grids. I hope that it works out to make it easier for a new visitor to read what might interest him.

    Posted by genobz | August 12, 2011, 00:33
  6. And it works great, but if you use a full width page on Blogum, i.e. no text widget, no customization.

    Posted by Jennifer | September 5, 2011, 00:23
  7. Right! This is just a no-CSS-upgrade workaround: like many workarounds, it’s got its limitations…

    Posted by Panos | September 5, 2011, 04:15
  8. Panos,hello.
    i did read your guidelines,but this is a ‘blogum’ related question.
    i used your ‘hiding the dash’..thank you.
    is it possible to remove the ‘read more’ at the bottom of each post?

    Posted by john | October 5, 2011, 10:56
  9. Hi John,
    This may be a Blogum related question alright, but the whole point is that we don’t run the same software.
    a) To get rid of the dash you don’t need my workaround, you just change your CSS (and you don’t change it the way we do if we have the CSS upgrade).
    b) Your read-more tags (which you have now corrected) linked to the rest of a non-existent about page: this is impossible to happen in a wp.com blog, so I cannot possibly know why it happened – much less tell you how to fix it.
    So, you see, your Blogum isn’t our Blogum!

    Posted by Panos | October 5, 2011, 18:33
  10. Hi Panos,

    thank you for all the precious information you provide and share.
    I’m working on the Blogum template but I can’t see to understand how to do something.
    I’m trying to move the header image above the main menu.
    I do have the css edit option active.
    i can see using Firebug that I need to change the #header-image option to the following settings:

    #header-image {
        margin: -250px 0px 80px 0px;
    }

    But when I do add the code to my CSS Stylesheet Editor it won’t work as it won’t even save the code I’ve just added.

    It seem to like only code that starts with the . eg .

    emdash {
    display:none;
    margin:0 0 0 -52px;
    }

    I would really appreciate if you could give me some advice in regard.

    Thank you for your help

    Cheers

    Posted by snatcholo | February 22, 2012, 08:00
  11. Hi, but
    a) The way the theme is designed, top menu below header image doesn’t look good unless you make extensive modifications; and you’re not telling me what you want to do with the blog title, the tagline, and the searchbox. So I can’t really reply without knowing about these, and I can’t reply without a link to the blog in question.
    b) You’d better post CSS questions in the CSS section of the wordpress.com forum: users who have the Custom Design upgrade are entitled to staff support.

    Couple of trivial details on the bits you pasted:
    - Zero margin is expressed as 0, not 0px.
    - When you say display:none, you don’t add anything else: there’s no point specifying margins for something that won’t show up.
    Less trivial (since those margin values are the ones specified in the original stylesheet of the theme): even if you didn’t want to remove the ridiculous dash but wanted to, say, change its color, again you wouldn’t add the margin command. In the CSS editor you don’t repeat what’s already there in the original stylesheet, you only add what you want to change.

    Posted by Panos | February 22, 2012, 09:21
  12. Hi Panos,

    thank you for your reply and my apologies for not been clear.

    I would like to get rid of the blog title and the tagline.
    After that I basically would like to swap the menu with the header image.

    I’ve managed to achieve that using Firebug for Firefox editing this bit here:

    #header-image {
    margin: -250px 0px 80px 0px;
    }

    I hope this makes sense, I will try to post on the wordpress.com forum.

    I’ve also fixed the css regarding the dash.

    Thank you for your help.

    Cheers

    Posted by snatcholo | February 22, 2012, 09:40

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,593,517 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: