Lengthening logo – Atrium Theme

sburtonenotes · Member · Mar 9, 2015 at 11:12 pm
Copy link

Add topic to favorites
Can I make the logo on my Atrium theme longer horizontally? (I was on the atrium forum but there isn’t a place for me to post directly there).

The blog is blog.enotes.com and I’m trying to simply add the word “blog” after “enotes” in our logo. I’d prefer to keep it at the size it is now, and not snap to a smaller size when I lengthen the image. Is this something I can tweak in css?

Thanks!

The blog I need help with is blog.enotes.com.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 10, 2015 at 3:34 am
Copy link
Hi there, this is a bit of a CSS trick. We set the normal text based title to hidden and then add “Blog” using a pseudo “before” selector, make it visible and style it. I’m afraid I can’t exactly match the font weight. 400 is “normal” and you can try setting it to 300, which is a “light” version, but it is lighter than notes in your image.
```
.site-title a:before {
    content: "Blog";
    font-size: 80px;
    font-weight: 400;
    visibility: visible;
    line-height: 80px;
    color: #000;
    position: relative;
    top: -3px;
}
```
What I might suggest would be to add the word “Blog” to your image and make it longer so that you have more control over the styling. We can then add that into the site title div via CSS and hide the text based title. If you wish to give that a try, create the image and upload it to your media library and post the URL of that image here in the forum and we can help you with adding it.
sburtonenotes · Member · Mar 18, 2015 at 7:16 pm
Copy link
That would be great! Here’s a mock up image (it might get swapped out when I get the proper font, so if you can let me know how to switch them out later that’d be great!)
thesacredpath · Member · Mar 18, 2015 at 8:05 pm
Copy link
Here is the CSS using the mockup. To change out the image, upload the new one to the media library, get the URL and replace the URL in the background declaration. I also increased the width from 300px to 500px
```
.site-branding .site-logo {
    visibility: hidden;
}
.site-branding .site-logo-link {
    background: url('https://enotes.files.wordpress.com/2015/03/blog-header-copy.png') no-repeat scroll left top;
    background-size: contain;
    max-width: 500px;
}
```
See what you think.
sburtonenotes · Member · Mar 18, 2015 at 8:14 pm
Copy link
Great! Thanks!

Is there any way to keep the height the same?
thesacredpath · Member · Mar 18, 2015 at 9:05 pm
Copy link
Take out the max-width declaration and see what you think.
sburtonenotes · Member · Mar 18, 2015 at 9:14 pm
Copy link
Awesome. Thanks so much.
thesacredpath · Member · Mar 18, 2015 at 10:40 pm
Copy link
You are welcome.

No items found.