Changing Site Title to a Logo Image with the Site Title

  • Author
  • #670560


    Hello. I am a beginner. I am happy with Inuit theme but would like to customize some features. Right now, my blog has a site title (made up of words), and I placed an Image widget on the front page intro to contain the image. I would like to find out how I can change this, using Edit Custom CSS feature, so that the site title into a combination of words and an image. How do I do this?

    What have I done so far? I tried reading through the CSS Beginner’s Tutorial. But my head is spinning and am very confused. I also looked into this page ( for help. But when I follow the direction (“the CSS Editor can be found under Edit CSS in the Appearance menu of your dashboard”), what comes up is not the same as what is pictured. I don’t see a similar CSS Stylesheet Editor. I also do not find that question, “Do you want to make changes to your current stylesheet…?” On the plus side, I do see the preview and save buttons,

    As an aside, I am curious to know if it is possible for me to change the size of the font for the site title so that, say, the first line is made up of smaller font, and the second line is made up bold caps.

    The blog I need help with is


    We would need a link to the image that you are wanting to use. In general it should be no larger than 150px wide by 180px tall.


    The font change is certainly doable



    Thanks for the reply. Changing the image to the required specifications is not a problem on my end. But, what exactly are the steps or code I need to do this (using a logo with words and image)? Would you please enumerate so that I can use the Edit Custom CSS feature? In addition, I am glad the font change is doable–but how?



    Hi there,
    I don’t help with CSS. At this time only Staff and thesacredpath do. What I do know is that when you alter a theme‚Äôs stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info: Hope this is helpful while you wait.


    For the logo to the left of the site title and tagline, add the following to the CSS edit window. Upload your image to the media library, get the URL of that image and then replace URL OF IMAGE between the double quote marks. The “margin-left” in the second bit will need to be adjusted for the width image you use. I’ve just popped 150px in as a placeholder. The third bit makes the site description uppercase.

    #header {
    background: url("URL OF IMAGE") no-repeat scroll 0 0 transparent;
    #header .blog-title, #header .blog-description {
    margin-left: 150px;
    #header .blog-description {
    text-transform: uppercase;


    thank you for the answer…. may i be more precise about the Site Title? my present title consists of two phrases, with the first phrase in lowercase, and the second phrase right below the first phrase, like this

    this is the first phrase
    To My Second Phrase…

    all i really want is for the second phrase to be in a bigger font than the first phrase.

    i think the code you suggested above make the entire site title in upper case….

    again, i thank you for your patience in answering my questions…good night.


    Sorry, the “bold caps” threw me. The easiest way is to adjust the size as a percentage. Just increase the percentage below as desired (108, 110, 120, whatever).

    #header .blog-description {
    text-size: 100%;


    thank you very much. i will implement this. i will get back in case i have some issue. but i think this might do the trick. thank you again.


    You are welcome.

The topic ‘Changing Site Title to a Logo Image with the Site Title’ is closed to new replies.