ThemeShaper Forums » Thematic


Thematic Feature Site - Replace Blog Title with Logo Image

(10 posts)
  • Started 10 years ago by snackmaster
  • Latest reply from Danieliser
  • This topic is not resolved
  1. snackmaster

    How can I replace the Text Blog title with an image and not loose the <h2> text?

    I followed this process with Thematic and it worked wonderfully, doesn't work in Thematic Feature Site - the Text stays behind the logo (and I cant figure out where it's coming from):

    Posted 10 years ago #
  2. Danieliser

    Hey, i am the writer of the Solution you posted. I havent worked with the feature site theme yet but i can probably work out your problem if you can give me a link. If not i will try to work out the problem after i get the Feature Theme installed later.

    Posted 10 years ago #
  3. northlight

    Hi there, I'd be very interested in solving this as well - thanks a lot for looking into it.

    Posted 10 years ago #
  4. Jamie Mitchell

    howdy fello Thematicans.

    so you want to add your logo to thematic blog title, and so you can't see the text behind it aswell?

    ...easy to do with css

    first we need to add position relative to our branding, so we can use position absolute on the blog title and it will stay within the width of the site.

    #branding {
        margin:0 auto;

    then we style the blog title link

    #blog-title a {
        background:url("img/my-logo.jpg") no-repeat scroll 0 0 transparent;
        height:200px; /*add your logo height*/
        width:178px;/*add your logo width*/
        text-indent:-9999px;/*get the actual text out of sight*/
        top:10px;/*only if you need to push the logo down otherwise set to 0*/

    and you can fly the blog description out of sight too

    #blog-description {
    Posted 10 years ago #
  5. Danieliser

    @Jamie Mitchell - you will wanna get away from using -9999px. It is considered bad practice to use any method to place text outside of the renderable area or use things like white text on a white background. Google hasnt began penalizing for this yet but have stated many times that they frown upon it (ie. will eventually be fixed and penalized).

    check out the function and css used on that article linked in the first post. I have had google reps tell me that it is a far better method for several reasons. mainly being that if the browsers images are off for some reason or other then you still get the text and blog info.

    still no time to test this out. might be this weekend.

    Posted 10 years ago #
  6. Jamie Mitchell

    i see where your coming from Danieliser, but the code in the tutorial does not work well at all, and it still leaves the issue of the blog description in the way, which is important for seo.

    currently the method i use is very common (Ian uses it on the themeshaper site) and it is valid, and believe me google won't penalize your site anytime soon.

    i'll keep my eyes open though for any new methods.

    Posted 10 years ago #
  7. Danieliser

    @Jamie Mitchell - I know. thats what they are wanting me to look into. you can look at and see it in action. It needs to be done slightly differently since they arnt using Thematic, but Thematic Feature Site which has a different header structure. As for which method im not saying the other method is evil but just because they dont penalize you now doesnt mean you shouldnt try to plan for the future. Plus what happens if images are not loading, then your header is blank. load that site with images off and you will still see a header with links and blog description instead of them being hidden offscreen.

    Posted 10 years ago #
  8. Danieliser

    @snackmaster - I am not sure what the problem is on your instance. You can look at and see the Feature Site Theme with my header image setup. Only problem im seeing is that the search box appears over the header as it should so you either remove it or design your image to include it and reposition it. If you can give me a link or something to look at i can help find your problem. The only thing i can think of is your using a small logo instead of a full image. The image for the header in my example is 940px x 187px. If you are using an image with transparency then you will see the text behind it as the text doesnt go anywhere just layering an image on top of it.

    Posted 10 years ago #
  9. snackmaster

    @Danieliser - I'm using a tradition Logo that's 150px wide, I found changing the color property from Transparent to White did the trick. My fear would be a potential SEO penalty?

    I changed this:
    #header-image { background:url(images/logo.jpg) no-repeat transparent;

    To this:
    #header-image { background:url(images/Logo.jpg) no-repeat WHITE;

    Posted 10 years ago #
  10. Danieliser

    @snackmaster - I am not sure but i dont think the background color should get you in to much trouble because the google render engine calculates if text is hidden based on the layers below it and this layer is above your text.

    The trick to using Text image Replacement like this is that the image has to be bigger than the text and shouldn't be transparent as you will see the text behind it. You could also make the font size on the blogtitle and bloginfo. Another opiton would be to create a banner style image and just place your small logo in the banner where you want it leaving the rest white. I hope i explained that correctly.

    Posted 10 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.