[alwilleford]

Hi.

I would like to use a custom font for the site title. Is this possible?

Also, is it possible to add an image to the promotion area?

Thanks

[Mahesh]

@alwilleford: What font do you want to use? Google fonts? If so, this can be done through Custom CSS. Let me know the font you want to use and I’ll provide you the CSS. Please post in your site url.
Promotion area is for main Headlines or something, image can’t be added to this. If you do want image it this anyway, I recommend you to hire a customizer.

Regards,
Mahesh

[alwilleford]

Thanks for your reply. I will look into a customizer for the promotion area.

I don’t think the font I want to use is a google font, but I use it in my logo and it is has become like a signature, so it makes sense to me to use it there. It is called Playlist Script.

If it isn’t possible to use this font in custom css, could I design an signature image and insert it in place of the site title?

My site is http://www.amandawilleford.com

[Mahesh]

@alwilleford: Adding Custom font can be done with Custom CSS. First you’ll need to upload Playlist Script font to your site. Upload it to the wp-content/uploads folder. Then go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

@font-face {
    font-family: 'Playlist Script';
    src: url('http://yoursite/wp-content/uploads/Playlist Script.otf');
}
/* Change site-title's font to Playlist Script */
.site-title {
    font-family: 'Playlist Script';
}

Note: Please change the your src url in the above code to match your font file.

Regards,
Mahesh

[alwilleford]

Worked perfect! Thank you.

[alwilleford]

I managed to get an image in the promotion area using

#promotion-message {
background: url(“http://www.amandawilleford.com/wp-content/uploads/2016/06/Get-My-FREE-eBook-Clearing-the-Clutter-1.png”);
}

I am trying to “clean it up” and make it centered under the header image without the repeat. As it is now the code is:

#promotion-message {
background: url(“http://www.amandawilleford.com/wp-content/uploads/2016/06/Get-My-FREE-eBook-Clearing-the-Clutter-1.png”);
display: block;
max-width: 60%;
margin-right: auto;
margin-left: auto;
}

See it at: amandawilleford.com

Also, what would be the best size for the image to fit in the promotion area?

One more question…can the promotion button be linked to a service like mailchimp? I have a mailchimp widget that is a form requiring name and email. I can’t figure out how to set all of that up with the url the customizer is requesting.

Thanks.

[Mahesh]

@alwilleford: Please use the following CSS for background-image in Promotion Headline:

#promotion-message {
    background-image: url("your_image_url_1200X111");
    background-position: center center;
    background-repeat: no-repeat;
    max-width: 100%;
}

Hope this helps, let me know if any problem.
Note: For best fit, use image with dimension 1200X111.

Promotion headline button, allows you to put the desired url and link to it. If you mean to display the form instead of button, you’ll need further customization. I recommend you to hire a customizer.

Regards,
Mahesh

[alwilleford]

Hi.

I have began to design another website using clean journal. I am wanting to customize the promotion message background like you have helped me with before in this thread. I don’t know if maybe it’s because I’m using a newer version of clean journal, but the code above isn’t working like it did before.

The site isn’t live. I’m working behind another domain, so I can’t give you the site.

Any thoughts?

Thanks.

[alwilleford]

Ok…The code above worked…I had accidentally deleted a }

Question: Is there anyway to make the promotion message larger, like 150px in height?

Where could I customize that?

Thanks.

[Mahesh]

@alwilleford: Add the following CSS:

#promotion-message {
    padding-top: 16px;
    padding-bottom: 16px;
}

Regards,
Mahesh

[Author]

Posts