Shop Categories

X

How to make content transparent so you can see background slider

Home Forums Agama Pro How to make content transparent so you can see background slider

Topic Resolution: Resolved
  • This topic has 7 replies, 2 voices, and was last updated 5 years ago by Zex.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #6906
    Nicole Miller
    Participant

    Hello I have installed a background slider plugin and you can see it in the background but there is a white box and the footer blocking it from view. Can I make the content background transparent on individual pages?
    http://nbrmdesigns.com/conrad-residence/

    Also I have an accordion plugin and as the page opens I want the accordion to be closed but as you can see its open. Do you know how I can fix this?

    Thank you

    #6908
    Zex
    Moderator

    Hello, Nicole!

    Please follow the steps below:

    1. Find a specific page ID on the page to which you want to apply a transparent background as I explained earlier in THIS POST.
    For the page, you posted, page ID is 361.

    https://prnt.sc/hgqjqw

    2. Add the CSS code below into Customizing ▸ General ▸ Additional CSS

    code for the page you linked above:

    /*Background transparency for the specific page*/
    .page-id-361 #main-wrapper, .site,
    .agama-slider {
     background-color: transparent;}
    
    .page-id-361 footer-widgets {
        background-color: rgba(49, 65, 80, 0.3);
    }
    .page-id-361 footer[role=contentinfo] {
        background-color: rgba(41, 55, 68, 0.3);
    } 

    Copy/Paste the code above for every page you want to change the background and replace the page ID.

    next,…
    You will need to remove the shadow from the main wrapper, so add this code to the same place.(enter just once)

    /*Remove the shadow from the main Wrapper*/
    #main-wrapper {
      box-shadow: none;}

    To stick the footer area to the bottom use this code(enter just once):

    /*Stick the footer to the bottom of the page*/
    #footer-wrapper {
        position: fixed;
        width: 100%;
        bottom: 0;

    so, in the end, your code will look like this:
    https://prnt.sc/hgqiz9

    Best Regards

    #6965
    Nicole Miller
    Participant

    Thanks this is great and it worked.
    My only problem is that because I have this accordion plugin (when it is closed) the bottom of the page is in the middle so the footer is in the middle of the background slider is there any way to put the footer at the bottom of the background slider? Also I can’t figure out why the accordion in open when the page is open because it should be closed any ideas?

    Thanks again for your help

    #6966
    Zex
    Moderator

    Hello, Nicole!

    As I write in the previous post…

    To stick the footer area to the bottom use this code(enter just once):

    /*Stick the footer to the bottom of the page*/
    #footer-wrapper {
        position: fixed;
        width: 100%;
        bottom: 0;
    }

    As for the plugin you are referring to, I think you just need to properly set up your plugin options somewhere in the plugin settings.

    Best Regards

    #6969
    Nicole Miller
    Participant

    Hello,
    I did use this code and as I said in the above post the footer is still in the middle of the page when the accordion is closed not at the bottom.
    http://nbrmdesigns.com/conrad-residence/

    I thank you for your help.
    Best Regards

    #6972
    Zex
    Moderator

    Hello Nicole!

    Can you post your Admin user/pass in private reply? (or make a temporary admin account for us), so I can check this option directly on your site.

    Regards

    #6980
    Nicole Miller
    Participant
    This reply has been marked as private.
    #6985
    Zex
    Moderator

    Hello, Nicole!

    I added the code from the post above,
    https://prnt.sc/hjr1v0

    and seems to me, everything looks ok.

    https://prnt.sc/hjr3g9
    https://prnt.sc/hjr3u7

    Best Regards

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.