Adding A Site Logo

By pieterhpieterh

Description

This snippet lets you add a logo to the site by creating a custom CSS.

Code

  1. Create logo, 90px high by (e.g.) 500px wide
  2. Upload logo to start page as file 'logo.jpg'
  3. Go to site manager
  4. Choose Appearance/Custom themes
  5. Create a new theme called 'custom'
  6. Enter CSS code below and save theme
  7. Choose Appearance/Themes
  8. For _default, choose custom theme
#header {
    height: 100px;
}
#header h1 a span{
    display: none;
}
#header h2 {
    display: none;
}
#header h1 a,#header h1 a:hover{
    margin: 0;
    padding: 0;
    background-image: url(http://mywikidotsite.wikidot.com/local--files/start/logo.jpg);
    height: 90px;
    width: 500px;
    position: absolute;
    top: 10px;
    left: 20px;
}

Notice (by helmuti_pdorf.):
1. I have changed the URL of the background-image to the correct syntax
2. sometimes in the discussions down (in the forum) some useres prefer a png image format instead of jpg…

In action

See http://www.digitalmajority.org


Thanks to tsangk for this great snippet: conditional-blocks


text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by pieterh


Rate this solution

If you think this solution is useful — rate it up!

rating: +86+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License