Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • January 15, 2016 at 8:36 pm #566317
    kfranck

    I would like to have the home page of my website be 3 columns with a drop shadow around the entire page.

    How can I create the drop shadow effect? Do I use an image with a drop shadow? If so, how big should the image be in size? Or do I use css or a combination of image and css?

    The effect I am looking forward can be seen on the Page: Dual Sidebar page at http://kriesi.at/themedemo/

    I can send an example of what I am talking about if that would help.

    Thanks in advance.

    kfranck

    January 16, 2016 at 3:08 am #566378
    Elliott

    Hi Kurt!

    Add this to your custom CSS.

    #main {
    box-shadow: 0px 0px 4px black;
}

    Regards,
    Elliott

    January 17, 2016 at 6:50 am #566746
    kfranck

    Elliott:

    I added the css code you suggested in the quick css and there is no drop shadow. Nothing changed.

    Suggestions?

    January 18, 2016 at 4:39 am #566886
    Rikard

    Hi,

    The code Elliott gave you was black so you can’t really see it, please try the following instead and adjust to your liking: 

    #main {
    box-shadow: 10px 0px 10px white;
}

    Best regards,
    Rikard

    January 18, 2016 at 4:49 am #566894
    kfranck

    Rikard:

    Thank you. Can a certain page have drop shadow effect? I want to mimic this page:

    Page: Dual Sidebar

    If so, do I make the css changes in the Quick css or within in the actual page. In my case, it would be home2 page.

    Thanks,
    kfranck

    January 18, 2016 at 11:14 am #567064
    Rikard

    Hi,

    Yes that should be possible, but you will need to find the page id class of the page, you can find it by inspecting the page, the page id class is in the body tag. You can also see it in the URL when you are editing the page. So your CSS would look something like this: 

    .page-id-000 #main {
    box-shadow: 10px 0px 10px white;
}

    Best regards,
    Rikard

    January 19, 2016 at 10:19 pm #568176
    kfranck

    Rikard:

    This is a big help. Thank you.

    One other thing — and if you want me to open another post, I will — how would I create a main page that has rounded corners and the drop shadow?

    I want to pattern it after this site — http://kriesi.at/themes/abundance/templates/page-dual-sidebar/ — where the page (home2, in my case) has a drop shadow and rounded corners.

    Suggestions? Thanks.
    kfranck

    January 20, 2016 at 3:47 pm #568691
    Vinay

    Hi!

    Please use the below css for rounded corner + drop shadow
    Feel free to change the value of border-radius:10px; to suit your design. Target the container by it’s class name such as “wrap_all”

    .page-id-000 .wrap_all {
    box-shadow: 10px 0px 10px white;
    border-radius:10px;
}

    Regards,
    Vinay

    January 20, 2016 at 8:32 pm #568865
    kfranck

    Thank you. If I want to change the width of my frontpage settings page (in my case Home2), how do I do that? I don’t want that page to be as wide. I want white space on both side.

    Where do I make those adjustments?

    Thanks,
    kfranck

    January 20, 2016 at 11:58 pm #568982
    Yigit

    Hey!

    Please go to Enfold theme options > General Layout > Dimensions and adjust them as needed.

    Cheers!
    Yigit

    January 21, 2016 at 12:24 am #569000
    kfranck

    Yigit:

    I didn’t explain myself well enough. My goal is to have reduce the size of the pages, much like the http://kriesi.at/themes/abundance/ site. I want these pages to float inside the container.

    Can that be done?

    January 21, 2016 at 12:04 pm #569331
    Vinay

    Hi!

    Drag and drop a 1/1 layout grid and put all your page content inside it. You can then target the width using custom css or click the edit icon and add left and right padding like 30% or 25% each.

    Regards,
    Vinay

    January 22, 2016 at 7:57 pm #570294
    kfranck

    Thanks. Do I need a gridrow, too? If so, below the 1/1 layout?

    I envision, I would drag and drop a 1/1 layout and below that would by 1/5, 35/5 and 1/5. Then, I would change the left and right padding on the 1/1 layout to 25% or 30%.

    Does that sound right?

    K

    January 25, 2016 at 12:55 pm #571306
    Andy

    Hi!

    yes, you can try that. Let us know if you need help with this and show us the results you have achieved so far.

    Cheers!
    Andy

    June 9, 2016 at 6:10 am #645229
    kfranck

    Thanks.

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Create a page where the whole page has a drop shadow’ is closed to new replies.