Add logo image to site

  • Unknown's avatar
    weasesportswear · Member ·

    On the following site, I have a W logo in the top left corner: http://www.weasesportswear.com
    I’m building a blog for the site here, and would like to add the W logo to the top left corner of it as well: https://blog.weasesportswear.com/
    What CSS can accomplish that?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, add the following CSS and see what you think. 

    .main-navigation {
    background-image: url("http://www.weasesportswear.com/shop/ws72/49172/logotypes/standard-log-f0d288.png");
    background-repeat: no-repeat;
    background-position: 20px center;
}
  • Unknown's avatar
    weasesportswear · Member ·

    Hey!
    Wow, thanks! You just made my day! :-) I’m a big amateur and CSS is like greek language to me. So I’m really grateful that you solve my problem, and it worked on the very first try!

    Now I start wondering if it would be possible to get even closer to our e-commerce site when it comes to the pink colored text in the header. Here on the WordPress blog it looks too big and a bit unsharp due to it’s a screen shot I’ve pasted into the header. After that it’s just the small dots between each category in the menu raw that should be deleted. After that it’s ready to publish!

    I’m not sure if you can make it, or if you have time to check into this? No matter what I’m very happy with the logo in the menu raw! :-)

    BR
    Fredrik

    7 sep. 2016 kl. 10:11 skrev donotreply>:

    thesacredpath replied to a forum topic that you subscribe to

    in response to the topic “Add logo image to site”:

    Hi there, add the following CSS and see what you think.

    .main-navigation { background-image: url(“http://www.weasesportswear.com/shop/ws72/49172/logotypes/standard-log-f0d288.png”); background-repeat: no-repeat; background-position: 20px center; }
    Reply View forum topic

    Want less email? Unsubscribe from this topic

    Thanks for flying with WordPress.com

    _ _

  • Unknown's avatar
    thesacredpath · Member ·

    The hex color code on your ecommerce site is #f27490. We can use the “before” pseudo selector to add that text above your logo with the following. 

    .site-logo-link:before {
    content: "Free shipping and returns over 500 SEK";
    color: #f27490;
    display: block;
    position: relative;
    top: -40px;
}
  • Unknown's avatar
    thesacredpath · Member ·

    Whoops, I forgot the pointer event declaration. Use this instead of the above. 

    .site-logo-link:before {
    content: "Free shipping and returns over 500 SEK";
    color: #f27490;
    display: block;
    position: relative;
    top: -40px;
    pointer-events: none;
}
  • Unknown's avatar
    weasesportswear · Member ·

    Hi again!
    Many thanks for another perfect code! :-)

  • The topic ‘Add logo image to site’ is closed to new replies.