Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #92929
    alwilleford
    Participant

    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

    #92954
    Mahesh
    Keymaster

    @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

    #92977
    alwilleford
    Participant

    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

    #92995
    Mahesh
    Keymaster

    @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

    #93039
    alwilleford
    Participant

    Worked perfect! Thank you.

    #93059
    alwilleford
    Participant

    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.

    #93071
    Mahesh
    Keymaster

    @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

    #102177
    alwilleford
    Participant

    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.

    #102178
    alwilleford
    Participant

    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.

    #102197
    Mahesh
    Keymaster

    @alwilleford: Add the following CSS:

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

    Regards,
    Mahesh

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Site Title and Custom Promotion Header’ is closed to new replies.