Front page call to action box – any way to make more transparent?

  • Love this theme, but finding the big white call to action box on the front page template to be a little hard to work with. Is there any way to make it more transparent and not so solid white? On an iPad, the white box covers almost the entire header image, which is unfortunate. (On a phone it looks great because the box moves down, but not on iPad.)

Viewing 3 replies - 1 through 3 (of 3 total)

  • Would you please provide the link of your site?
    Thanks

    Moderator Kathryn Presner

    (@zoonini)

    Sure, you can reduce the opacity of the white background on the hero box with some custom CSS:

    .front-page-content-area .with-featured-image {
  background-color: rgba(255, 255, 255, 0.6);
}

    Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

    Moderator Kathryn Presner

    (@zoonini)

    p.s. modify 0.6 as you like. 0.6 = white at 60% opaque

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Front page call to action box – any way to make more transparent?’ is closed to new replies.