Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Overlay on blog post featured image

    • 7 years, 5 months ago mrchurch49
      Participant

      Expired

      I cannot find a way to change the overlay on the featured image in individual blog posts.  I would like for this to be lighter.  As it is I find it too dark.  Is there way to change the opacity or color of this?  Cannot find it anywhere.

      Here is a link to a screenshot of one of my blog post pages featured image.

      Thanks

    • 7 years, 5 months ago Mirela
      Participant

      Hello,

      Yes, please add this code into your custom css box in Appearance > Customize > Additional Css:

      #blog-entries.media-entries article .entry-media .entry-overlay {    
          background: rgba(159, 13, 195, 0.68) !important;
      }

      Change the color and gradient to your wish.
      Let us know.

      Best regards!

    • 7 years, 5 months ago mrchurch49
      Participant

      Expired

      I added the custom css, but still do not see where to make the change.  Do I have to alter the code for changes?

    • 7 years, 5 months ago Mirela
      Participant

      Hello,

      Yes, to change the color you need to change the values inside the rgba(). In order to find this easy do this:
      -open your page and open inspect element in it. Open Inspect Element by pressing F12 or right click > Inspect, in your keyboard;
      -find the color you need and gradient using the color picker in the background color in the css of the page. Copy the values and paste them in the code i gave you.
      See a screen recording of it: https://drive.google.com/file/d/1AWKE3EZzv21rmnAcyf8dRKTFGnC349yM/view
      Or if you show me the color you want i can find the rgba values and send them to you.
      Let us know.

      Best regards!

    • 7 years, 5 months ago mrchurch49
      Participant

      Expired

      <div>Actually it is not the color I want to change but the opacity.  The pages I need to change this on are on each individual post. The header that has the featured image is where I would like to change the opacity. I want it to be for all blog posts. Below is a link to a screenshot of the element I am talking about.</div>
      https://1drv.ms/f/s!AuBkiERgQuNRiwFSPgsFOGtIJx_a

    • 7 years, 5 months ago Mirela
      Participant

      Hello,

      Change the overlay on blog posts, please add this code into your Additional Css box:

      .cl_page_header .overlay {
          opacity: 0.8 !important;
      }

      Change the opacity gradient to your wish. The values should be from 0 (completely transparent) to 1 (opaque). Let us know.

      Best regards!

    • 7 years, 5 months ago mrchurch49
      Participant

      Expired

      That did it.  Thanks.

Viewing 6 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password