Sela theme – placing a logo on the left of the webpage title

  • Unknown's avatar
    staceymeikelly · Member ·

    Hello,

    I cannot figure out how to add a logo just to the left of my site title and tagline, is this possible? I am using the Sela theme, and my site is http://www.staceymeikelly.com

    Thank you for your help!
    Stacey

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

  • Unknown's avatar
    gemmacevans · Member ·

    Hi Stacey,

    Please try pasting the following CSS in to My Site > Design > Customise > CSS:

    @media screen and (min-width: 600px) {

    /* header background */
    header {
        background: #fff;
    }
    
    /* fixed width site branding */
    .site-branding {
        display: table;
        width: 600px;
        margin: 0 auto;
        border-collapse: collapse;
    }

    /* place elements side by side using table cell */
    .site-branding a.site-logo-link {
        display: table-cell;
        padding: 60px 0;
    }

    /* align title and tagline text to left */
    .site-branding .site-title, .site-branding .site-description {
        text-align: left;
    }
    
     /* centre tagline and text vertically*/
    .site-branding .site-title {
        padding-top: calc(35%);
    }

}

    If the logo sits too low or high compared to the site title and tagline, you can change the 35% value until you find a suitable position. You’re welcome to reply here or start a chat if you need any further help :)

  • Unknown's avatar
    staceymeikelly · Member ·

    Hi Gemma,

    Thank you so much, I’ve made some progress. So I added the logo and used your css text, as I resized the logo playing with the numbers, the text lost its more linear form and is now stacked, ideally it should be centered at the top with the logo with the text looking like:

    Stacey Kelly
    Paper Conservation Studio

    And not:
    Stacey
    Kelly
    Paper
    Conservation
    Studio

    How do I fix that?

    Thank you again, you’ve already been a great help!

    Stacey

  • Unknown's avatar
    gemmacevans · Member ·

    Hi Stacey,

    You’re very welcome! It looks like cut off was being caused by width change to 200px in .site-branding (it was a little small). I’ve made a couple of changes that I’m hoping will help:

    @media screen and (min-width: 600px) {
	/* header background */
	header {
		background: #fff;
	}
	
	/* fixed width site branding */
	.site-branding {
		display: table;
		width: 400px;
		margin: 0 auto;
		border-collapse: collapse;
	}

        /* logo size */
        .site-logo {
                max-width: 150px;
        }
	
	/* place elements side by side using table cell */
	.site-branding a.site-logo-link {
		display: table-cell;
		padding: 70px 0;
	}
	
	/* align title and tagline text to left */
	.site-branding .site-title, .site-branding .site-description {
		text-align: left;
	}
	
	/* centre tagline and text vertically*/
	.site-branding .site-title {
		padding-top: calc(35%);
	}
}

    Come back to me if you need any help tweaking the code.

  • Unknown's avatar
    staceymeikelly · Member ·

    Hi Gemma,

    It works!! It’s perfect. One more question, when looking at it on my mobile device it doesn’t show the same thing. I did check the box which says “Include this CSS in the Mobile Theme” but it is showing a large logo above the site name like it did at the beginning of this thread. Anyway to fix that?

    I really appreciate your help!

    Best,
    Stacey

  • kokkieh · Staff ·

    Hi Stacey,

    The CSS Gemma gave you is specifically for bigger screens. That’s what the @media code does – it restricts the CSS to only be applied at certain screen sizes.

    I wouldn’t recommend going for the same layout on mobile – on mobile there’s not enough space next to the site title for the logo, so we’d have to shrink down the title and tagline significantly in order for the logo to fit, which would make the text very hard to read.

    It’s exactly because of this lack of space that modern themes are designed to follow a different layout on mobile than on a computer screen.

    Have you considered instead creating an image file that incorporates both your logo and your title text laid out the way you want it, and setting that as a custom header image for the site rather than using a logo only? Then you hide the actual site title using the setting in the Site Identity section of the Customizer.

    Such a header image should dynamically adjust based on the size of the screen your site is loaded on.

    I did check the box which says “Include this CSS in the Mobile Theme”

    That does not refer to the mobile version of your theme, but to the default WordPress.com mobile theme, meant for sites using themes that aren’t already responsive. You don’t have that mobile theme active on your site, so that setting won’t do anything.

  • Unknown's avatar
    staceymeikelly · Member ·

    Hi,

    Thank you so much for explaining all of that to me, clearly I am a beginner at this and have much to learn! I really appreciate all the help you have both provided. I will try your header image file idea on the weekend when I have some time and see if that works better!

    Thanks!
    Stacey

  • The topic ‘Sela theme – placing a logo on the left of the webpage title’ is closed to new replies.