Need help? Check out our Support site, then


Header text in different colors

  1. ronaldstevens27
    Member

    I was wondering if it is possible to have two words in the header (main text on WordPress blog) be two colors?
    Is this possible by the CSS-upgrade?

    Let's say it is 'company name', i.a. "Company" in blue and "name" in yellow.

    Theme used is: Twenty Ten

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

  2. No, not through CSS only. What you could do through CSS though would be to create an image with the text and colors you want, and then that can be substituted for the text site-title through CSS, and even remain clickable.

  3. If you go the image route, we can help with the CSS. I would suggest creating and saving it as a PNG image with a transparent background. PNG will retain a good crisp clean edge to the text whereas a JPG will not (anti-aliasing).

  4. ronaldstevens27
    Member

    I do have a psd-file.
    What steps do I need to take to have this image CSS'ed in the header?

    ... and how does an image and header affect being found and indexed into search engines, whilst this is not text (and searchable?) anymore...

  5. The way we do the insertion, and the hiding of the original text, will not affect search engines. The text will still be there for the search engines to find, it will just be out of view from the visitors to your site.

    Since the site linked to your username is private, we volunteers cannot see it. At the very least we need to know what theme you are using.

  6. ronaldstevens27
    Member

    Theme used is: Twenty Ten

    Can the rest be done by the private settings? Or do I need to set it on public?
    Blog is still 'under construction'.

  7. Just something to consider. Did you know that the second option "Ask search engines not to index this site" for blog visibility (privacy) settings blocks search engines?

  8. I was wondering if it is possible to have two words in the header (main text on WordPress blog) be two colors?

    I think you can do this with CSS, try this:

    #site-title a:after {
    content: " Hello!";
    color: green;"
    }

    Also, you could make the site title one color and the tagline another color (just an alternative option).

    I do have a psd-file.
    What steps do I need to take to have this image CSS'ed in the header?

    You must convert your PSD file to a PNG, GIF, or JPG file before uploading. You can use Appearance → Header to add it to your site without using CSS if the preset size of header image that comes with the theme works for you. In Twenty Ten, the header image size is 940 × 198 pixels.

    ... and how does an image and header affect being found and indexed into search engines, whilst this is not text (and searchable?) anymore...

    If you shift the text left instead of hiding it using display:none, it shouldn't make any difference for search engines.

  9. ronaldstevens27
    Member

    I would like to have the image where now the header text is situated.

    When inserting the image "as is" via Appearance > Header it shows totally left above (and I would like it to be aligned with the main blog/website column)

    So, I guess png-insertion is a good way. I have created a png file, but how do I CSS it as 'header text'?

  10. Can you post a link to the image?

  11. ronaldstevens27
    Member

    Why do you need a link?
    Can't there be a CSS script like "insert <image/link.png>?

    Question is the script itself though...

  12. Ever tried inserting scripts in a WP.com blog?

  13. ronaldstevens27
    Member

    The blog is currently marked as private. Is this an issue?

    The URL is:
    http://stevensconsultancy.files.wordpress.com/2012/02/stevens-consultancy.png

  14. designsimply is staff, so she can see into your blog and see the file, although the volunteers like me can't.

  15. ronaldstevens27
    Member

    Aha. I see.
    I guess this is sufficient at the moment than.

  16. To replace the site title in the Twenty Ten theme with the image you linked, use this CSS:

    #site-title a {
      display: block;
      width: 600px;
      height: 100px;
      background: url(http://stevensconsultancy.files.wordpress.com/2012/02/stevens-consultancy.png) no-repeat;
      text-indent: -9999px;
    }

    I asked for a link to the image because it's far easier to work with CSS when you can see the components. I could have just posted some CSS with fill-in-the-blanks, but if possible it's much, much nicer to be able to see the image itself when working with it.

  17. ronaldstevens27
    Member

    Great! That worked.
    Thx designsimply.

  18. Yay! Cheers :)

Topic Closed

This topic has been closed to new replies.

About this Topic