Support » Theme: Sela » Transparency of Front Page Box in Sela

  • Resolved artkilgour

    (@artkilgour)


    Is it possible to adjust the transparency of the Front Page white box on the Sela static front page? I want it MORE transparent — i.e. showing more of the background image through. I assume that I will have to paste in some additional CSS code.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi @artkilgour,

    You can adjust the opacity value until you reach your desired output:

    @media screen and (min-width: 768px) {
    .front-page-content-area .with-featured-image {
    opacity: 0.90;
    }

    The default value is 0.95 for the Sela theme. If you notice, opacity will reflect on screen wider than 768px (desktops or iPads, for example)

    Note: WordPress highly recommends to create a child theme. It is necessary if you are doing heavy customization to your selected theme.
    https://developer.wordpress.org/themes/advanced-topics/child-themes/

    I have my personal experience with child theme when I realized its importance and I wrote a post about it if you are interested: https://poetsgig.com/2017/07/how-to-create-a-wordpress-child-theme/

    Here a bracket is missing, correcting it:

    @media screen and (min-width: 768px) {
    .front-page-content-area .with-featured-image {
    opacity: 0.90;
    }
    }

    oh, that’s awesome. thanks very much bigacelloy. works perfectly.

    i had a look at your blog post — that makes it sound easier to create the child theme than the wordpress link you gave!

    can you give me a brief rationale for why creating a child theme is better than adding code to the additional CSS section within the parent theme? i have about 70 lines of additional code in my Sela theme now, but it’s working perfectly. why mess with success?

    a.

    • This reply was modified 1 year, 9 months ago by artkilgour.

    It’s great to hear you are doing well with your CSS success.

    I probably have a different site requirement than yours. As I go along, I’m making changes on the style.css and I have a custom PHP functions file. Also, I edited other PHP files as well like header.php, footer.php to suit my liking and these two files exist in the parent theme, I copied them to my child before making the change.

    Just imagine, if your theme is updated to the recent version, any changes you made to these theme files will be overwritten. If you do not want your efforts gone to waste, the way to avoid that is to have a child theme.

    When you troubleshoot an error, isolation would be easier because in the child theme, you will have less files to look at where you made a mistake. Coding, especially PHP is unforgiving, a missing comma or bracket can wreak havoc on your site.

    Trust me, I was grateful I created a child theme before I made a mess to my own blog. Thanks to a WordPress moderator who reminded me to refrain from editing the parent theme’s files directly.

    This could be irrelevant to your question but I recommend that you do a regular backup of your site. Good luck!

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    To add to what bigacelloy said, there’s no need to create a child theme if you’re only making CSS changes.

    However:

    can you give me a brief rationale for why creating a child theme is better than adding code to the additional CSS section within the parent theme? i have about 70 lines of additional code in my Sela theme now, but it’s working perfectly. why mess with success?


    You should not be editing your theme directly.
    You’ll lose your changes every time Sela is updated to a new version, when Sela’s files will be overwritten with the latest copy of the theme.

    The simplest place to make CSS changes (when you don’t also need to make other modifications, like to HTML, PHP, or JavaScript) is right in the Customizer’s Additional CSS panel. Your changes will be protected there when the theme is updated.

    hey kathryn:

    that IS where i’ve made all my customizations — in the additional CSS panel. it works great. that’s also where i’ve pasted the code provided by bigacelloy.

    tx.
    a.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Awesome – glad it’s working well for you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Transparency of Front Page Box in Sela’ is closed to new replies.