Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Using CSS to replace site title and tagline with an image?

  1. zarajewelry
    Member

    Hello,

    I'm new to WordPress and recently created a blog using the "Chateau" theme. I am considering the Custom Design upgrade - but I'm wondering if I can remove the standard typed blog title/tagline between the nav-bar and header image, and replace it entirely with an image? (I'd like to import the logo from my website, that includes my business name and my name to place in that position.)

    Here's my blog:
    http://zarajewelry.wordpress.com/

    Here's my website:
    http://www.zarajewelry.com/

    My current knowledge of CSS is rather limited: just wondering if it's even possible to do - OR is it possible using html or anything else?

    Thanks for any intel you can send my way - and for being patient with a newb. : )

    The blog I need help with is zarajewelry.wordpress.com.

  2. designsimply
    Happiness Engineer

    Welcome!

    I'm wondering if I can remove the standard typed blog title/tagline between the nav-bar and header image, and replace it entirely with an image?

    You can absolutely do that with some CSS. Try adding this to your Appearance → Custom Design → CSS page and click the preview button:

    hgroup {
height: 140px;
}

#main-title #site-title {
display: block;
}

#main-title #site-title a {
display: block;
width: 382px;
height: 120px;
background: url(http://www.zarajewelry.com/images/stories/zara-logo.png) no-repeat 0 -20px;
text-indent: -9999px;
}

#main-title #site-description {
display: block;
text-indent: -9999px;
}

    If you'd like to change the spacing around the image, adjust the height values until you find something that you like.

    Note that this CSS is specific to the Chateau theme and the heights are setup specifically for the image mentioned, so other users who see this as an example may need to adjust their CSS if their image is a different size.

  3. zarajewelry
    Member

    Wow, that was fast - and very cool! I am psyched!

    One more question - and forgive my total lack of knowledge, here - if I want the image to be larger than what is on my website, can I import the size I need into my media, copy the url, and paste it in the CSS you provided?

    You seriously just made my day!

  4. designsimply
    Happiness Engineer

    Can I import the size I need into my media, copy the url, and paste it in the CSS you provided?

    Yep. Try it out with your new image and adjust the width and height numbers until you get a result you like. If you run into any trouble, post the image link in a reply here and I'd be happy to take a look.

  5. zarajewelry
    Member

    Oh, this is so awesome! I am really pleased with the results and super grateful for your help. Now, I just need to learn how to write this stuff myself.

    Many, many thanks!

  6. designsimply
    Happiness Engineer

    :) Start here: http://www.htmldog.com/guides/cssbeginner/

  7. godadago
    Member

    Hi! I want my site to look like http://www.hms.harvard.edu
    My current site is http://www.endosim.com but I am working on a WP.com site at godadago.worpress.com....

    I have read through the html & css tutorials but I do not know how to begin... I have the custom upgrade but there is not code to look at... do you have a suggestion?

  8. timethief
    Member

    @godadago
    This support forum is not for sites like the two you link to above. It's only for blogs being free hosted by WordPress.com like this one linked to your username http://godadago.wordpress.com/ for which the blogger has purchased a custom design upgrade. Please read > WordPress.com vs WordPress.org: The Differences
    http://wordpress.org/support/

  9. godadago
    Member

    er... but I am asking a question about my wp.com site? Wouldn't that apply?

  10. timethief
    Member

    It's only for blogs being free hosted by WordPress.com like this one linked to your username com http://godadago.wordpress. for which the blogger has purchased a custom design upgrade.

    Have you purchased an annually renewable custom design upgrade from WordPress.com for that specific blog?
    If so, then that blog is wearing the Structure theme and all CSS editing here is theme specific. You have posted into a thread for the "Chateau" theme. If you have the custom design upgrade then you need to post your own thread by using this link > http://en.forums.wordpress.com/forum/css-customization#postform

  11. designsimply
    Happiness Engineer

    There is a not a simple solution to make a WordPress.com look just like a site such as http://hms.harvard.edu/ which is probably a custom design built just for that site.

    One thing you can do instead is to review the WordPress.com themes listed at the http://theme.wordpress.com/ showcase site, pick something that looks the closest to what you want, and then make adjustments to update the look.

    Another thing you can do is use one of the starter themes such as Sandbox or Toolbox to create a design from scratch. We can help answer questions about CSS here, but we wouldn't design complete custom site for you here. You could hire a designer to do that for you though. You might find one listed at http://directory.codepoet.com/ if you're interested.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags