- This topic has 11 replies, 2 voices, and was last updated 3 years, 3 months ago by
Leo.
-
AuthorPosts
-
October 27, 2019 at 3:42 pm #1046258
Karen
Hello,
I’m using a hook element with the inside_container hook to add a slider on my front page. I want to remove the 40px padding for the slider div while keeping it for the rest of the content on the page. However, if I set the padding for the .site-content class to 0 it messes up the rest of the page. What is the best way to achieve the desired layout?
Much thanks!
October 27, 2019 at 5:53 pm #1046288Leo
StaffCustomer SupportHi there,
Try using the header element:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/how-to-create-a-page-hero/Let me know if this helps π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 27, 2019 at 6:19 pm #1046300Karen
I tried it with the header element initially, but then the background color of the header extended to the bottom of the slider. I’m trying to get the slider image to fill the width of the grid-container and have the body’s background-color on each side of the slider image. Any other suggestions much appreciated.
October 27, 2019 at 7:33 pm #1046329Leo
StaffCustomer SupportI tried it with the header element initially, but then the background color of the header extended to the bottom of the slider.
Not quite sure if I understand, can you show me the issue?
Header element is definitely the way to go – it’s built for something like this.
Make sure you go through the tutorial here:
https://docs.generatepress.com/article/how-to-create-a-page-hero/Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 27, 2019 at 8:36 pm #1046357Karen
I edited the web URL to point to a page I created to show this scenario. The “home-test” page represents what happens with putting the image in a header element. The “home” page exhibits the image in the hook. For this example, to simplify things I’m just using a single image instead of a slider.
Thanks again for your assistance!
October 28, 2019 at 8:14 am #1046904Leo
StaffCustomer SupportTry turning off merge with content for the element:
https://docs.generatepress.com/article/header-element-overview/#merge-with-contentDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 28, 2019 at 11:26 am #1047102Karen
The problem that I ran into when I turned off merge with content was with the display of the image on the right side of the header. I want that image to show through the navigation bar (as it does on the “home” page). I couldn’t find a way to make that happen when I turn off merge with content.
October 28, 2019 at 11:30 am #1047105Leo
StaffCustomer SupportAhh ok. That case we need to scratch the header element idea and go back to using the hooks as you were doing before.
This time try the
before_main_content
hook:
https://docs.generatepress.com/article/hooks-visual-guide/Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 28, 2019 at 11:41 am #1047119Karen
That didn’t work either. See result on “home-test” page.
October 28, 2019 at 11:58 am #1047130Leo
StaffCustomer SupportHmm try this:
https://www.screencast.com/t/QZqCeILQxNJCDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 28, 2019 at 12:22 pm #1047162Karen
Wow! I believe that is precisely the solution I’ve been searching for!
Thank you so very much for your help!!
October 28, 2019 at 12:48 pm #1047175Leo
StaffCustomer SupportNo problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.