Petite Melodies logo insertion

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

Author

Posts
October 21, 2014 at 1:55 pm #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

October 22, 2014 at 3:13 pm #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.

October 24, 2014 at 3:00 pm #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

October 24, 2014 at 3:59 pm #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.
October 27, 2014 at 8:30 pm #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.
October 27, 2014 at 9:21 pm #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.
October 27, 2014 at 10:10 pm #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.

October 28, 2014 at 1:52 pm #162443

Kathryn P.
Happiness Engineer

Sounds good. Let me know how it goes!

October 29, 2014 at 9:25 pm #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

October 29, 2014 at 9:28 pm #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

October 29, 2014 at 9:35 pm #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!
October 29, 2014 at 9:41 pm #162460

St Paul’s Crossover

That’s great! Thanks again.

November 3, 2014 at 3:07 pm #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.

February 7, 2015 at 6:05 pm #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

February 7, 2015 at 6:54 pm #162855

Ryan C

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!

February 9, 2015 at 8:34 am #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

February 9, 2015 at 9:42 am #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

February 10, 2015 at 4:07 pm #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.

February 10, 2015 at 4:11 pm #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!
February 13, 2015 at 12:29 pm #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
Author

Posts

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

You must be logged in to reply to this topic.