How to Move Logo to Immediate Left of Blog Title in Sela Theme

soosucculent · Member · Aug 27, 2015 at 2:44 am
Copy link

Add topic to favorites
Hi, I’ve scoured the Sela forums but haven’t found how to move my logo to the immediate left of my blog title on my site: http://www.soosucculent.com

I would like my small logo of a succulent in a pot to sit right above the subtitle word, “Miniature.” If someone could please advise me, I would be most appreciative. Or if there is a link specific to creating this kind of tweak, please feel free to post it here, as well. Thanks!

The blog I need help with is: (visible only to logged in users)
ehtis · Staff · Aug 27, 2015 at 6:23 am
Copy link
Hi there,

We can use two approaches here. One is to utilize absolute positioning, the other is CSS3 transforms. I’m going with the latter, because the position of the logo will change if screen size changes or you zoom in.

Give a try to this:
```
.site-logo {
	-ms-transform: translate(-154px, 50px);
	-webkit-transform: translate(-154px, 50px);
	transform: translate(-154px, 50px);
}
```
Should work on all browsers, including Internet Explorer 9+. You can change the horizontal and vertical px values according to your liking! :)
thesacredpath · Member · Aug 27, 2015 at 6:29 am
Copy link
Hi there, delete your site logo in the Customizer and then put the following into your custom CSS. It places the logo into the linked text div for your site title.
```
.site-title a {
    background: rgba(0, 0, 0, 0) url("https://soosucculent.files.wordpress.com/2015/08/logo-45-png-better.png?w=45") no-repeat scroll 0 0 transparent;
    padding-left: 55px;
}
```
thesacredpath · Member · Aug 27, 2015 at 6:30 am
Copy link
And there you go, you have two solutions, one from @ehtis and one from me. :)
ehtis · Staff · Aug 27, 2015 at 6:51 am
Copy link
The more the merrier. ;)
soosucculent · Member · Aug 27, 2015 at 3:30 pm
Copy link
Hi guys, thanks for your help. Ehtis, I’m afraid your tweak placed it to the immediate left, but somewhat raised above the title, almost like superscript. I definitely like the idea of the position being relative to the title, rather than fixed, as I’d like it to look consistent across browsers.

Thesacredpath, I used your tweak after deleting the logo, but I am not sure where to put the logo now so that it shows up. Also, I don’t think I want to move the title over any in order to fit the logo, as I believe it will still look nice just floating to the immediate left of the title. I appreciate any tweaks you can suggest. Thanks!
ehtis · Staff · Aug 27, 2015 at 3:45 pm
Copy link
Hi guys, thanks for your help. Ehtis, I’m afraid your tweak placed it to the immediate left, but somewhat raised above the title, almost like superscript

In the code above, 50px is the Y component or vertical position value. I’m changing it to 53px, try altering the value to place it at the desired position:
```
.site-logo {
	-ms-transform: translate(-154px, 53px);
	-webkit-transform: translate(-154px, 53px);
	transform: translate(-154px, 53px);
}
```

g471n · Member · Aug 27, 2015 at 3:55 pm

Hi soosucculent

Try this without the color reference.

.site-title a {
    background: url("https://soosucculent.files.wordpress.com/2015/08/logo-45-png-better.png?w=45") no-repeat scroll 0 0 transparent;
    padding-left: 55px;
}

soosucculent · Member · Aug 27, 2015 at 3:55 pm
Copy link
Hi Ehtis, thanks, but it’s still superscript-style. I left it in place so you can see it. Any other thoughts?
soosucculent · Member · Aug 27, 2015 at 4:01 pm
Copy link
Hi g471n, thanks! That’s definitely the distance I would like the logo to be from the title word “Soo.” I would still like to have the title centered over the subtitle, though. Could you please suggest how to move it?

Also, despite my desire to have as many succulents as possible, how do I get rid of the second logo that suddenly appeared again above my title when implementing this CSS edit?
g471n · Member · Aug 27, 2015 at 4:18 pm
Copy link
I’m not sure how second one grew :)

You can remove it with:
```
.site-logo {
    display: none;
}
```
g471n · Member · Aug 27, 2015 at 4:27 pm
Copy link
To centre the text of the title.
```
.site-title {
    margin-right: 1.4em;
}
```
soosucculent · Member · Aug 27, 2015 at 4:29 pm
Copy link
Thanks, g471n! That worked for removing the second logo that was on top. I’d still like to center the title again, if you have any tips for that.

I also noticed that when viewing the mobile site now, the title no longer fits on one line due to the logo being a part of it. Do you know how wide a title can be to show up on an iphone 5 regular-sized screen? Thanks!
g471n · Member · Aug 27, 2015 at 4:47 pm
Copy link
CSS to centre the text above.

I’m not sure about the width for iPhone but I just had a look at it on my iPod touch and I think it still looks good on 2 lines.

The topic ‘How to Move Logo to Immediate Left of Blog Title in Sela Theme’ is closed to new replies.

WordPress.com forums

How to Move Logo to Immediate Left of Blog Title in Sela Theme