How to add a logo instead of blog name ?

Topics: Themes
Jul 24, 2013 at 4:05 AM
How to add a logo image instead of blog name and short description ?

I want the logo in the same place / position but do not want any text, how to do that ?
Jul 24, 2013 at 11:26 AM
Hi Pepper,

It's probably a good idea to keep the text, but just not display it.

Following suggestion is for the Standard theme.
Look in site.master for the following code block:
 <div class="BlogTitle">
                <div class="Container ClearFix">
                    <h1 class="Title">
                        <a href="<%=Utils.AbsoluteWebRoot %>"><%=BlogSettings.Instance.Name %></a>
                    </h1>
                    <span class="Desc"><%=BlogSettings.Instance.Description %></span>
                </div>
            </div>
Replace with:
<div class="BlogTitle">
                <div class="Container ClearFix">
                    <h1 class="Title" id="logo">
                        <a href="<%=Utils.AbsoluteWebRoot %>"><%=BlogSettings.Instance.Name %></a>
                    </h1>
                    <span class="Desc off-screen"><%=BlogSettings.Instance.Description %></span>
                </div>
            </div>
Deposit your logo image in the Standard->img folder

In the Standard->include folder, add the following rules to styles.min CSS file.
Substitute logo image name, width, height and margin to suit your logo in both "#logo" and "#logo a"
/* -- logo  -- */
#logo {
    float:left;
    padding:0;
    width:270px;
    height:80px;    
    margin:5px 15px;
}
#logo a {
    float:left;
    padding:0;
    margin:0;
    width:270px;
    height:80px;    
    background:url(../img/logo.png) no-repeat 0 0;  
    text-indent:270px;
    overflow:hidden;
    white-space:nowrap;     
}
.off-screen {
    position:absolute !important;
  height:1px;
    width:1px; 
  overflow:hidden;
  clip:rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip:rect(1px, 1px, 1px, 1px);
} 
Probably need to refresh your browser a couple of times to see changes.
Jul 24, 2013 at 2:14 PM
Edited Jul 24, 2013 at 2:22 PM
Thank you, it worked

Could you please help me in adding a logo in FlatBlog theme ?
Jul 24, 2013 at 2:31 PM
Actually I did it myself, I would just like you to double check if the approach is correct or not ?
 <div class="Second-Line">
                <div class="Container">
                    <hgroup class="Blog-Title">
                        <%--<h1><a href="<%=Utils.AbsoluteWebRoot %>"><%=BlogSettings.Instance.Name %></a></h1>--%>
                        <h1 class="Title" id="logo">
                        <a href="<%=Utils.AbsoluteWebRoot %>"><%=BlogSettings.Instance.Name %></a>
                    </h1>
                        

                       <%-- <h2><%=BlogSettings.Instance.Description %></h2>--%>
                    </hgroup>
                    <span class="Desc off-screen"><%=BlogSettings.Instance.Description %></span>
                    <nav class="Blog-Social">
                        <ul>
                            <li><a href="<%=Utils.FeedUrl %>"><img src="/themes/FlatBlog/img/RSS.png" /></a></li>
                            <li><a href="#"><img src="/themes/FlatBlog/img/facebook.png" /></a></li>
                            <li><a href="#"><img src="/themes/FlatBlog/img/googleplus.png" /></a></li>
                            <li><a href="#"><img src="/themes/FlatBlog/img/twitter.png" /></a></li>
                            <li><a href="#"><img src="/themes/FlatBlog/img/Linkedin.png" /></a></li>
                        </ul>
                    </nav>
                </div>
            </div>
Jul 24, 2013 at 3:50 PM
Looks good to me.

The only bit I might change is
                    <span class="Desc off-screen"><%=BlogSettings.Instance.Description %></span>
To
                    <span class="off-screen"><%=BlogSettings.Instance.Description %></span>
Since you don't need the 'Desc' class.
Jul 24, 2013 at 3:52 PM
Thank you Andy