Petite Melodies logo insertion

Home Forums Automattic Petite Melodies Petite Melodies logo insertion

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #162413 Resolve

    St Paul’s Crossover

    We have purchased the Petite Melodies theme but cannot seem to find a way to add a logo in the header area.

    Although it is possible to add a header image, this would have to be 1000 × 250 in size which would distort the dimensions of the logo.

    If we cannot get a logo in the header text area we may have to switch to an alternative theme.

    Please advise?
    Thank You

    #162414

    Kathryn P.
    Happiness Engineer

    I can think of a couple of options for displaying your logo:

    – place your logo within a canvas that’s 1000 × 250 in size, making the background transparent in your graphics program
    – position a logo with custom CSS, using background-position to place it where you want it in the theme

    There may be other options depending on your specific logo dimensions.

    If you provide a link to your logo in your Media Library (copy it from the URL field) I’d be glad to have a look directly and see which option might suit your logo best.

    #162431

    St Paul’s Crossover

    Hello Kathryn,

    That sounds like a plan – should have thought of that ourselves really :-(

    Here is the logo link if you wish to take a peek:

    One last thing, I take it that the theme banner image across the very top can only be changed using CSS? Or can users only use one of the 3 theme options provided?

    Thanks
    Larry

    #162433

    Kathryn P.
    Happiness Engineer

    Something like this should display your logo instead of the default site title, and add a bit of space above the tagline:

    .site-title a {
    	text-indent: -9999px;
    	background: url(https://stpaulnursery.files.wordpress.com/2014/10/st-pauls-nursery-logo-blue.jpg) center no-repeat;
    	display: block;
    	width: 250px;
    	height: 174px;
    }
    #header-wrapper .site-description {
    	margin-top: 10px;
    }
    

    Let me know how it goes.

    #162438

    St Paul’s Crossover

    Hello Kathryn,

    That CSS does indeed work but I wonder if you could clarify the other question in my last post – “I take it that the theme banner image across the very top can only be changed using CSS? Or can users only use one of the 3 theme options provided?”

    See image here:

    • This reply was modified 5 years, 10 months ago by  St Paul's Crossover.
    #162440

    Kathryn P.
    Happiness Engineer

    Oh, sorry I missed seeing your other question!

    You can indeed change the image at the very top of the site with CSS. Start by uploading an image about the same dimensions as the current one to your media library:

    Next, grab the image’s URL and place it in your custom CSS, like this:

    .theme-style-music #header-wrapper {
        background: url("http://path/to/your/image.png") repeat-x scroll 30px 30px transparent;
    }

    The image is currently set to repeat horizontally, so keep that in mind when creating your image. You can then tweak the CSS to achieve the specific effect you want.

    #162441

    St Paul’s Crossover

    Oh that’s great! Just signing off here but will try these tweaks tomorrow.
    I’ll let you know how we get on.

    Thanks again for your solid advice and support.

    #162443

    Kathryn P.
    Happiness Engineer

    Sounds good. Let me know how it goes!

    #162457

    St Paul’s Crossover

    Just tested the theme banner image across the very top with a dummy image(dimensions 990 x 75) and the CSS tweak worked a treat. We just need to sort an appropriate image at our end now.

    We’re now also clear on how to add the logo / banner within the 1000 × 250 header area just above the menu using the other CSS tweak.

    Many thanks. Your advice has been spot on and brilliant.

    Regards
    Larry

    #162458

    St Paul’s Crossover

    Oh sorry, just one last thing.
    Does the logo / banner within the 1000 × 250 header area have to be 250 in height or is there a way to tweak that CSS? If not no worries.

    Larry

    #162459

    Kathryn P.
    Happiness Engineer

    I’m glad everything is working well!

    Does the logo / banner within the 1000 × 250 header area have to be 250 in height or is there a way to tweak that CSS?

    You should be able to tweak that – remember the CSS I gave you earlier? Try modifying the height and width there to match your image.

    .site-title a {
    	text-indent: -9999px;
    	background: url(https://stpaulnursery.files.wordpress.com/2014/10/st-pauls-nursery-logo-blue.jpg) center no-repeat;
    	display: block;
    	width: 250px;
    	height: 174px;
    }

    I pulled those specific dimensions from the logo here, but if you tweak them to match a different image that should do the trick.

    Let me know how it goes!

    #162460

    St Paul’s Crossover

    That’s great! Thanks again.

    #162475

    Kathryn P.
    Happiness Engineer

    You’re very welcome. I’m marking this post as resolved, but if you need further help feel free to start a new thread.

    #162854

    St Paul’s Crossover

    Hi there

    It’s me again! We are just resuming work on this website.

    I’m having problems with the fix previously suggested re:
    “Does the logo / banner within the 1000 × 250 header area have to be 250 in height or is there a way to tweak that CSS?”

    As you can see from the screenshot – https://stpaulnursery.files.wordpress.com/2015/02/st-paul-s-nursery-local-community-childcare-services.png
    I have sorted out the very top banner but the CSS added for the logo header area isn’t working / displaying the image.

    The complete CSS I added is shown below: (we wanted to adjust the height if you recall).

    .site-title a {
    text-indent: -9999px;
    background: url(https://stpaulnursery.files.wordpress.com/2015/02/st-pauls-nursery-banner-dark-blue-v1-0-2c-copy.png) center no-repeat;
    display: block;
    width: 1000px;
    height: 180px;
    }

    .theme-style-music #header-wrapper {
    background: url(‘https://stpaulnursery.files.wordpress.com/2015/02/kid-banner2-copy4.png’) repeat-x scroll 30px 30px transparent;
    }

    Any suggestions why this has not worked?

    Many thanks
    Larry

    #162855

    Hi Larry, It looks like you’re on the right track! You just need to make one more adjustment to properly position the banner. Try adding the following to your CSS:

    h1.site-title {
    position: static !important;
    }

    Let me know if that does the trick!

    #162857

    St Paul’s Crossover

    Hi Ryan

    Thanks for the prompt response.

    Is this an additional line of code or should it somehow be added to;

    .site-title a {
    text-indent: -9999px;
    background: url(https://stpaulnursery.files.wordpress.com/2015/02/st-pauls-nursery-banner-dark-blue-v1-0-2c-copy.png) center no-repeat;
    display: block;
    width: 1000px;
    height: 180px;
    }

    Many thanks
    Larry

    #162858

    St Paul’s Crossover

    Hi Ryan,

    Just one other thing!

    Is it possible to replace the image in the sidebar (top) of this theme?
    Here’s the image: https://theme.files.wordpress.com/2012/06/welcome.png?w=256&h=300

    Many thanks
    Larry

    #162860

    Kathryn P.
    Happiness Engineer

    Is this an additional line of code or should it somehow be added to;

    Yes, it’s a separate line of code as it’s targetting a different element.

    #162861

    Kathryn P.
    Happiness Engineer

    Is it possible to replace the image in the sidebar (top) of this theme?

    Try adding this to your custom CSS, replacing the image path here with your new image file.

    .theme-style-music #secondary #welcome {
        background: url("//theme.files.wordpress.com/2012/06/welcome.png) no-repeat scroll center center transparent;
    }

    Make sure the image is the final size you want it before uploading.

    If you have further questions, could you please start a new thread rather than continuing to add here, since this one’s already marked as resolved? Thanks!

    #162862

    St Paul’s Crossover

    Dear Kathryn,

    These did the trick – thank you!

    My sincere apologies for reposting here. I misunderstood your previous advice.
    It won’t happen again.

    Thanks again for the help from you and your colleague.

    Larry

Viewing 20 posts - 1 through 20 (of 20 total)

You must be logged in to reply to this topic.