Header text in different colors

  • Author
    Posts
  • #819730

    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.

    #819817

    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.

    #819818

    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).

    #819822

    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…

    #819829

    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.

    #819909

    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’.

    #819957

    timethief
    Member

    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?

    #819959

    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.

    #820038

    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’?

    #820063

    Can you post a link to the image?

    #820103

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

    Question is the script itself though…

    #820104

    raincoaster
    Member

    Ever tried inserting scripts in a WP.com blog?

    #820105

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

    The URL is:

    #820106

    raincoaster
    Member

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

    #820107

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

    #820108

    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.

    #820110

    Great! That worked.
    Thx designsimply.

    #820111

    Yay! Cheers :)

The topic ‘Header text in different colors’ is closed to new replies.