Want Background Images to Overlap with Shadow Canvas Pagebuilder

Hello! I have a couple of questions and I put into separate posts so that they are organized, I apologize if it is easier for you to have all of the questions in one.

I am using a new plugin for canvas on wordpress called pagebuilder for canvas. It gives the ability to set a background image for each row of the page and set the height, border and if you want a background or not. It gives you the option to have no margin on the bottom, which is fantastic, though I want them to overlap and to add a shadow, like box shadow, so that it "pops" if you will :slight_smile:

My site is http://digitalreachopm.com and it is the page that is currently on the homepage that I am working on. I have granted support access if that helps.

I am thinking that there is some sort of ID and Class that I can add css for, since you can add class and id to any row through this plugin. I am not sure of what id or class I would use to achieve this or if would just make my own?

Thank you for the help on this. I would like to know what I may add in order to achieve the overlapped/shadow appearance.

Pura Vida!
Mandy

  • Tyler Postle

    Hey Mandy,

    Hope you are doing well today!

    If the questions relate to different things, like yours do, then it's always best to put in separate topics :slight_smile: as you said, keeps things more organized - thanks!

    For your question, try this one:

    .panel-row-style {
    box-shadow: 0 10px 20px #ccc inset;
    }

    Adjust the values as needed :slight_smile: 10px refers to the vertical offset of the shadow and 20px refers to the blur radius.

    Let us know how that works for you!

    All the best,
    Tyler

  • Mandy

    Tyler, thank you so much for the input!

    One more thing I am looking to do is overlap two background images (the rows each allow a background image.)

    That CSS did not do anything…

    There is a place for class and ID in the plugin as I don't want to affect all of the "rows." I have created some CSS that helped with a border but this one is not working out. I need a ?30 margin. I have looked into relative positioning with a top and bottom with a -# but it is not working.

    Something that would be a big help would be giving me a little insight as to how I decide the id and the class. I understand how to add a class to CSS and then to HTML but I am having trouble adding an id and class to this plugin.

    How do I know what to make the id? I made an id and class in the custom CSS for the 3rd row of this page: http://digitalreachopm.com and it worked, though the css you gave me and the css that I made, did not work.

    Here is the css that worked for the border of the third row of my page:

    #border{
    border: 5px ridge #323844;
    }

    .aboutDRborder{
    border: 5px ridge #323844;
    }

    And here is the css that did not work for row 4 (I did try it as you sent it and that did not work either):

    #row{
    box-shadow: 0px 10px 20px #323844 inset;
    }

    .aboutDRrow{
    box-shadow: 0px 10px 20px #323844 inset;
    }

    (note that for both I added this CSS to my canvas custom style sheet and then added the class and id to the row settings of that portion of the page.)

    Would you please assist me with what CSS I would use for the overlap, z-index and positioning vs -# margins, and how I choose my ids and classes so that I can do this on my own moving forward (thanks for bearing with all of my questions though :wink:

    Pura Vida!

    Mandy

  • Mandy

    I also tried this and it did not work, for the fourth row on the main page of the site:

    #panel{
    position: relative;
    top: ?30px;
    bottom: ?30px;
    }

    .aboutDRpanelposition{
    position: relative;
    top: ?30px;
    bottom: ?30px;
    }

    Thank you HUGE for the help! This is a good one to know and it is exciting to be learning a bit, though I know I have much to learn still :slight_smile:

    P.S. I am not sure if I need class and ID for the plugin. In the plugin there is not place for a <div>.

    P.S.S. the code you sent to me worked to change all of the "rows" but I am wanting to affect just one row at a time…it seems like there are ids and classes that are in the php of the plugin and then you can make your own classes and ids to affect html. So, do you just make up your own classes and ids, like I did to affect the third row specifically and then use ones that are related to the plugin or theme to change all options?

    THANK AGAIN!!!!!

  • Tyler Postle

    Hey Mandy,

    Hope you are doing well today!

    How do I know what to make the id? I made an id and class in the custom CSS for the 3rd row of this page: http://digitalreachopm.com and it worked, though the css you gave me and the css that I made, did not work.

    If you're adding your own ID's to the HTML then you can make them whatever you want as long as you apply styles to the ID in your stylesheet. Otherwise the ID would just do nothing. Same goes for classes on this one as well :slight_smile:

    Each of your rows appear to have their own ID so you can style them individually. I believe this is the id for the row with a flat blue background: #pgc-13-1-0

    My original CSS was just box-shadow that made it look like the panels were overlapping - no panels actually overlapped - this might be an easier solution in this case - will keep your content aligned properly too.

    P.S. I am not sure if I need class and ID for the plugin. In the plugin there is not place for a <div>.

    When you say plugin what exactly are you referring too? Classes are usually selectors that are used all over the website. For example ".panel-grid" is a class because it's used for every panel on the site. The id I mentioned earlier, #pgc-13-1-0 - is used for only a single element on the site. You don't ever need to have both a class and an ID unless you need a specific element to have more styles that the class isn't providing.

    P.S.S. the code you sent to me worked to change all of the "rows" but I am wanting to affect just one row at a time

    Try applying the code from earlier to just this ID: #pgc-13-1-0 it should affect the blue background panel. If it works then we'll use that same code on any other panels you want to look like that :slight_smile:

    Let me know what you think!

    Cheers,
    Tyler

    Thank you HUGE for the help! This is a good one to know and it is exciting to be learning a bit, though I know I have much to learn still :slight_smile:

    No problem! Happy to help where I can :slight_smile: A lot of my CSS knowledge I picked up through forums just like this :p

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.