• I’m a bit of a newbie to WP and am currently feeling my way.
    Is it possible to edit the text styling in the Header Image Caption Box without having to use CSS, which I’m not very conversant with please?

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

    (@shaped-pixels)

    Unfortunately, the only way is to use (or edit) the caption box CSS styling. The theme’s styling is done from this:

    
    .banner-caption-content {
        z-index: 2;
        position: absolute;
        top: 50%; 
        left: 0;
        right: 0;
        margin: 0 auto;
        background-color: rgba(255,255,255,0.90);
        text-align: center;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    
    .banner-caption-content:after {
        z-index: -1;
        position: absolute;
        top: -10px;
        left: -10px;
        width: calc(100% - -18px);
        height: calc(100% - -18px);
        border: 1px solid #fff;
        content: "";
    }
    .banner-caption-content-title {
        margin-bottom: 0;
        text-transform: uppercase;
        font-size: 140%;
        line-height: 26px;
        letter-spacing: 6px;
    }
    .banner-caption-content-subtitle {
        margin-top: 6px;
        text-transform: uppercase;
        font-size: 90%;
        letter-spacing: 4px;
    }

    If you need to make changes to the CSS, and on WordPress 4.7, you can add your custom changes to the Additional CSS tab in the customizer, but to be honest, I would recommend a plugin called “Simple Custom CSS”. This gives you more working space and easy to manage. However, if you use Jetpack, it has its own Custom CSS feature you can enable instead, so you can also use that.

    What was it you were wanting to change?

    • This reply was modified 7 years, 10 months ago by Shaped Pixels.
    Thread Starter basils57

    (@basils57)

    Thanks for this Shaped Pixels, much appreciated. It gives me something to investigate. I just wanted to modify the font, but have left it as is for now.

    Theme Author Shaped Pixels

    (@shaped-pixels)

    You are very welcome…. if it’s just the font, then you only have to use this part:

    .banner-caption-content-title {
        margin-bottom: 0;
        text-transform: uppercase;
        font-size: 140%;
        line-height: 26px;
        letter-spacing: 6px;
    }
    .banner-caption-content-subtitle {
        margin-top: 6px;
        text-transform: uppercase;
        font-size: 90%;
        letter-spacing: 4px;
    }

    You can add a font-family to either one or both if you want a different font. More on font families here:

    https://www.w3schools.com/cssref/pr_font_font-family.asp

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Styling Header Image Caption Box’ is closed to new replies.