WordPress.org

Ready to get started?Download WordPress

Forums

Responsive
[resolved] Need to know how to make something transparent (30 posts)

  1. jeabeatz
    Member
    Posted 1 year ago #

    I have a background image but the context table covers the image. I was wondering if there was a way to make it transparent so that you can see the image in the back.

    http://www.jeabeatz.com/wordpress

    Thank you in advanced.

  2. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    Hi,

    First we need to switch your page to correct landing page like this.

    After that's done, add this to your Child Theme and or Appearance > Theme Options > Custom CSS

    #featured {
        background-color: transparent;
    }

    If you have more questions, please feel free to visit our support forums.

    Thanks for using Responsive!
    Emil

  3. jeabeatz
    Member
    Posted 1 year ago #

    ok. i understand what needs to be done, but i have an issue. I dont see the front page displays in the reading settings.

  4. jeabeatz
    Member
    Posted 1 year ago #

    OK, i figured it out. I still noticed one lil weird white outline on the site. Is there a way to adjust that?

    BTW - thank you so much for the quick replies.

  5. jeabeatz
    Member
    Posted 1 year ago #

    Sorry, i dont mean to bombard you with questions, but this is probably my last one. Can you tell me the image name that still shows up? I am hoping to replace that with one of mine or remove it completely and put something up later.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Use a browser inspector tool to find issues like these out.

  7. jeabeatz
    Member
    Posted 1 year ago #

    Ok, ive figured out the home page. I have some CSS in the theme options area, but noticed that when i go to another page, the transparent background doesn't move with it. I looked around on the forums, tried a few things, and am at a complete loss. Is there a way to make the white content part transparent for all the pages that are created?

  8. jeabeatz
    Member
    Posted 1 year ago #

    just for more information, noticed that a lot of declarations are dropped or have bad slectors on the pages.

  9. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    Hi,

    Sure you can:

    #wrapper {
    .home #wrapper {
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        background-color: transparent;
        border: none;
        border-radius: 0;
    }

    Emil

  10. jeabeatz
    Member
    Posted 1 year ago #

    Should I post it in the theme options section or on the edit page html tab? OR am i doing it completely wrong? tried both ways and didnt see the changes - cleared cache...

  11. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    HTML Tab will not work because that would apply to one page only. Best way is to use Child Theme, or Appearance > Theme Options > Custom CSS, the choice is yours :)

    Thanks,
    Emil

  12. standardenglishacademy
    Member
    Posted 1 year ago #

    I had the same problem and the 1st code worked the 2nd one doesn't:

    #featured {
    background-color: transparent;
    }

    I added the 2nd to Appearance > Theme Options > Custom CSS and nothing happened.

    Also, once I make the field transparent, the text is hard to see because of my background image. There aren't any settings in Appearance>Theme Options>Home Page to change the font size or color. How can I change the font color on the Home Page?

    This is my website> http://www.aecajarn.com

  13. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    Try this please :)

    #wrapper,
    #featured {
        background-color: transparent;
    }

    Emil

  14. standardenglishacademy
    Member
    Posted 1 year ago #

    Hi,

    Thanks for your help. That worked but with the same result as the 1st code. The border is still there. Also, how can I change the font color on the Home Page, in that field that's now transparent?

    Thanks again for your help.

  15. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    Oh no border? sure!

    #wrapper,
    #featured {
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        background-color: transparent;
        border: none;
        border-radius: 0;
    }

    Emil

  16. standardenglishacademy
    Member
    Posted 1 year ago #

    Haha! Thanks so much. Worked like a charm.

    What about the font color? When the field was white, the black font was no problem. Now that it's transparent, the black font is hard to see on top of my background pic. There aren't any settings in Appearance>Theme Options>Home Page to change the font size or color. How can I change the font color on the Home Page? Am I missing a setting in the WordPress wizard?

    Again, thanks for the very quick support. Great customer service!

  17. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    Thanks!

    .featured-title,
    .featured-subtitle,
    #featured p {
        color: #fff;
    }

    Emil

  18. standardenglishacademy
    Member
    Posted 1 year ago #

    Sorry. I'm new to this. Do I just add it below the code for transparency that you gave me, in Custom CSS? If so, do I need to put a space between the 2 codes or on space between them?

    Thanks again. Sorry for the newbie questions.

  19. standardenglishacademy
    Member
    Posted 1 year ago #

    Haha! Never mind. I figured it out.

    Thanks very much for all the help.

  20. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    No worries friend, I am here to help as much as I know and can.

    If you feel that Theme deserves, please write few words here.

    We also offer free and dedicated support forum too :)

    Thanks,
    Emil

  21. standardenglishacademy
    Member
    Posted 1 year ago #

    Sorry, if I'm asking on the wrong forum. I thought it was ok because the questions are related to transparency. If I'm in the wrong place, just let me know. Thanks again for all the help.

    If not:
    The codes you gave are perfect. Because of the transparency, I have to edit the font color for each page to white through the page editor. No problem. I still have the following problems/Can you please help he to change the following problems?:

    1. Each page has a heading/name. I can't edit the font color for them either.
    Example: I've got a "Services" page that has the "Services" still in black, on the page. This is the same for all my pages.

    2. I've got a contact form too. Each section of the form's headings are still black.

    3. At the bottom of each page there's a "Share this:" section. That phrase: "Share this:" is still black.

  22. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    Hi,

    h1 {}

    but also

    .post-title {}

    General font color settings:

    body {
        color: blue;
    }

    Emil

  23. standardenglishacademy
    Member
    Posted 1 year ago #

    Emil,
    Thanks. I'm not sure how to put them together.

  24. standardenglishacademy
    Member
    Posted 1 year ago #

    Emil,

    The body code works fine. It changed 2 & 3 from the above post. Thanks.

    body {
    color: blue;
    }

    The title code works fine. It changed 1 from the above post. I just added "color: white;" to the code. Thanks.

    .post-title {
    color: blue;
    }

    What does this code do?

    h1 {}

  25. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    They're global headings :)

    Emil

  26. standardenglishacademy
    Member
    Posted 1 year ago #

    Thanks for that. Works great. How can I make the widgets transparent too?

  27. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    .widget-wrapper {
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        background-color: transparent;
        border: none;
        border-radius: 0;
    }
  28. standardenglishacademy
    Member
    Posted 1 year ago #

    You're the man. Thanks.

  29. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    You're welcome!

  30. philipshambrook
    Member
    Posted 1 year ago #

    Thanks, in part to the content here, and other sites I collated this piece of code and add it to the child theme for the Responsive theme. Widgets and text background affected nicely:

    #wrapper
    {
    background-color: #FFFFFF;
    opacity: 0.85;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.