WordPress.org

Ready to get started?Download WordPress

Forums

[Theme: Presswork] How to make Content Background transparent (16 posts)

  1. postpurpose
    Member
    Posted 1 year ago #

    Hello,

    I am trying to make the content background of my site transparent so the background picture I have uploaded will show.

    The site is postpurpose.com

    I made an "artsy" yellow splatter, and the White box of the Header, Menu and main content is blocking the main part of the background.

    I tried making a child theme with a number of tags including;
    '#wrapper {
    zoom: 1;
    filter: alpha(opacity=90);
    opacity: 0.9;
    }'

    '#content {
    background-color: transparent;
    }'
    and

    '#content {
    background-color: transparent!important;
    }'

    All of these tags do not make the page transparent and cause the theme to lose all formatting and squish to the left.

    I am currently using Presswork as a theme.

    Thank you,
    Scott

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Activate your Child Theme through the dashboard in Appearance > Themes.

  3. postpurpose
    Member
    Posted 1 year ago #

    Thank you, but I can activate the child theme with the tags I have listed.

    I do not have the child theme active right now because it does not make the page transparent. It only causes the theme to lose all formatting and squish to the left.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are you willing to resolve your Child Theme issues prior to your transparency issue?

  5. postpurpose
    Member
    Posted 1 year ago #

    Absolutly! I have activated the child theme if that helps.

    Sorry, I have experience with HTML, but wordpress and CSS are all quite new to to me.

    What are your thoughts on the formatting issue?

    This is all that is in my child theme, style.css

    *\
    Theme Name:     Child theme 1
    Theme URI:      http://presswork.me/
    Description:    Child theme for the Presswork theme
    Author:         Scott White
    Author URI:     postpurpose.com
    Template:       presswork
    */
    
    @import url("../presswork/style.css");
    
    #wrapper {
    	zoom: 1;
    	filter: alpha(opacity=50);
    	opacity: 0.5;
    }

    Thank you,
    Scott

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Is your Child Theme within the /wp-content/themes directory, or is it within /wp-content/themes/presswork/?

  7. postpurpose
    Member
    Posted 1 year ago #

    Right now I have it in the themes directory at /wp-content/themes/presswork-child

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    May you activate it so we can debug any errors the browser may throw?

  9. postpurpose
    Member
    Posted 1 year ago #

    Yes, it should already be active, the site again is postpurpose.com

    Thank you so much!

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Swap the characters around of your first line in style.css of your Child Theme.

  11. postpurpose
    Member
    Posted 1 year ago #

    Rookie mistake, huh? Hahaha.

    So I changed the first characters from */ to /*

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Yes, try and see if that resolves your Child Theme issue.

  13. postpurpose
    Member
    Posted 1 year ago #

    Great! So that fixed the formatting issue, thanks for helping me start with that.

  14. postpurpose
    Member
    Posted 1 year ago #

    But my transparency tag still appears to not be working.

    Thank you,
    Scott White

  15. Andrew
    Forum Moderator
    Posted 1 year ago #

    There isn't an element with the id of "wrapper" so that CSS isn't going to work.

    Use a browser developer tool to help you identify the selectors you'll need to use, as exampled [screenshot].

  16. postpurpose
    Member
    Posted 1 year ago #

    Awesome thank you so much. I'll start using that and see where it gets me.

    Thanks again,
    Scott

Topic Closed

This topic has been closed to new replies.

About this Topic