Move logo in Silvio theme

absoud · Member · Jul 26, 2017 at 9:30 am
Copy link

Add topic to favorites
Hi,I’m currently using the Silvio theme – I would like to move my company logo so that is above and to the right of the Header title – what coding do I need to do this. Also if possible have it act as a home button?

Thanks.

The blog I need help with is: (visible only to logged in users)
archanasolanki11 · Member · Jul 26, 2017 at 1:02 pm
Copy link
Hi there,

Hope you are doing great.

Please use the mentioned CSS if you want to display the logo on the right side of the header (reference: http://i.imgur.com/Ay14Ch3.jpg)
```
.silvio-name {
    float: right;
}
```
If this is not the case then please help me with a screenshot so that I can guide you in a right direction.

Best,
Archana.
lastfarthing · Member · Jul 26, 2017 at 1:39 pm
Copy link
Hi absoud,
If I understand correctly you would like to change the place where it says “Upstreamly” in the top left corner into your logo and make it a link to your homepage. There is a way to do this with some custom css.

1. First you should edit your logo image so that it no longer says Upstreamly. Make it just the waving lines and leave some blank space at the bottom.

2. Next get the direct link to the image. In this step I am using Firefox. There might be an easier way to do this part, so you should experiment. The way I did this was to make a blog post with the image in it. Now go to the blog post and right click on the image. Click on “Copy Image Location” and paste this into a notepad for later.

3. Now in the Custom CSS section add the following code:
```
.silvio-name {
  background: url('https://yourimagelocation');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
  height: 48px;
  max-width: 220px; }

.site-title-name {
	margin-top: 18px; }
```
https://yourimagelocation should be the location of your image that you pasted into a notepad earlier.
height: 48px should be adjusted to the display size of your logo.
max-width: 220px should probably stay the same unless you really need to change it.
margin-top: 18px; should be adjusted in order to push the text underneath the waving logo.

Notes
What you are doing here is setting a background image for the part of your site where Silvio naturally displays your blogs title, then moving the displayed title (which is also a link to your home page) down to replicate your original logo. This customization will probably require you to try out multiple image files and experiment with sizes and margins in order to arrive at the best combination.
absoud · Member · Jul 27, 2017 at 12:54 pm
Copy link
Hi – I can’t seem to add a screen shot of what I mean.

N.B Silvio theme makes the header title appear in the centre of the feature image AND in the top left corner – this I am fine with and want to leave.

Lastfarthing you have the right idea however it’s not the Header title ‘Upstreamly’ I want to move, but the logo (which currently isn’t there – because it looks wrong) which the template places directly above the header.

I have currently imported the feature image with the logo attached onto it so the logo at the moment on the website is where I want it to be BUT it’s obviously just an image and so cannot be clicked on and when you view the page in other displays, i.e. mobile instead of desktop, the image doesn’t move to fit accordingly.

Let me know if you need any more details, thanks for the help!
absoud · Member · Jul 27, 2017 at 1:00 pm
Copy link
Alternatively, is there a way I can move the logo (which the silvio theme puts above the header title) to replace the ‘Upstreamly’ which is currently in the top left corner? >> this might be a better option and maybe easier to do. It would require removing that header title from the top left corner and then moving the logo.
absoud · Member · Jul 27, 2017 at 2:11 pm
Copy link
I’ve managed to do it myself! thanks though

No items found.