• Hi. I’m trying to change the banner caption box. I followed the tutorial but I cant figure out the last step: where should I copy the code into?
    thank you for the help
    Shelly

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Shaped Pixels

    (@shaped-pixels)

    No worries…this is how I did the demo site one in a text widget:

    <img src="https://demos.shapedpixels.com/senses-lite/wp-content/uploads/sites/8/2015/10/banner-autumn.jpg"
    alt="autumn leaves"/>
    <div class="banner-caption">Explore Nature's Beauty<span style="color:#E3C575;">Photographic Blogging</span>
    </div>
    Thread Starter shellyshoham

    (@shellyshoham)

    great! I got it. thanx!

    Theme Author Shaped Pixels

    (@shaped-pixels)

    you place that into a text widget and drag that widget into the Banner sidebar position (in the admin area).

    Thread Starter shellyshoham

    (@shellyshoham)

    is it possible to change the font there?

    Theme Author Shaped Pixels

    (@shaped-pixels)

    The second line is styled in the theme like this:

    .banner-caption span {
    display: block;
    font-family: arial, helvetica, sans-serif;
    font-style: normal;
    font-size: 0.75rem;
    text-transform: uppercase;
    }

    You can change any of those with your own custom CSS, using a plugin like Simple Custom CSS. The font used is Arial, but if that is not available, then it moves to the Helvetica, then if that isn’t available, the third option is sans-serif. So when you add your own font, you can do the custom CSS like this:

    .banner-caption span {
       font-family: "your font", arial, helvetica, sans-serif;
    }

    If you want to change the other attributes like font style, font-size, etc., just add them to your custom CSS.

    Font management is a very involved part of any website because there are so many variations. If you want to use a font from Google fonts that does not exist on everyone’s computers, you will want to check out the Easy Google font plugin.

    To change the font for the main title part of the caption box, you can do this custom CSS:

    .banner-caption {
        font-family: "your font",arial,helvetica,sans-serif;
    }
    Thread Starter shellyshoham

    (@shellyshoham)

    thanks. 5*.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Create a Banner Caption Box’ is closed to new replies.