Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding wrap to div
- This topic has 7 replies, 2 voices, and was last updated 8 years, 6 months ago by Tmgale.
-
AuthorPosts
-
October 20, 2015 at 9:50 am #168587TmgaleMember
Hi All,
I am trying to add a .wrap to my css div .faqbanner.
This div currently holds a h1, h2 and search bar for my faq. I want it to span the whole width of the site container, but it is container within site-inner.
With other elemetns i.e the site-header I can use .wrap to extend it out of the site inner.
How can I do this for this custom class?
Or is there a better way for me to get this div to expand full width?
Thanks,
Tom
October 20, 2015 at 8:34 pm #168637Brad DaltonParticipantOctober 21, 2015 at 1:50 am #168649TmgaleMemberThanks for the reply Brad.
Sorry, I thought I provided one in my original post.
https://www.allclearlife.co.uk/faq/
After you search the faq, I want to have the same faq banner appear on the archive page. To emulate this, I need the faqbanner div to be full width beyond site inner.
The previous page has been built using a page builder to create a full-width container that my div could sit in. Now that I am having to insert the HTML markup into a new search.php template, I do not have the luxury of using a page builder to extend my div to the full width of the screen.
Thanks
October 21, 2015 at 3:06 am #168651Brad DaltonParticipantOctober 22, 2015 at 2:07 am #168737TmgaleMemberHi Brad,
I have copied the search.php with the additional HTML over to my child theme .
So the hook would be 'genesis_before_loop'.
add_action( 'genesis_before_loop', 'faq_banner' ); function faq_banner() { echo ( ' <div class ="explode-width"><h1 id="bannerh1">Frequently Asked Questions</h1> <h2 id="bannerh2">Search for your question or find it in the FAQ section below</h2><div class="vc_wp_search wpb_content_element faqsearch"><div class="widget widget_search"><form method="get" class="search-form" action="https://www.allclearlife.co.uk/" role="search"><input type="search" name="s" data-swplive="true" data-swpengine="default" data-swpconfig="default" placeholder="Search the faqs..." autocomplete="off"><input type="submit" value="Search"></form></div></div></div>'); } add_action( 'genesis_before_loop', 'genesis_do_search_title' ); /** * Echo the title with the search term. * * @since 1.9.0 */ function genesis_do_search_title() { $title = sprintf('<div class="archive-description"><h1 class="archive-title">%s %s</h1></div>', apply_filters( 'genesis_search_title_text', __( 'Search Results for:', 'genesis' ) ), get_search_query() ); echo apply_filters( 'genesis_search_title_output', $title ) . "\n"; } genesis();
Thanks
October 22, 2015 at 2:24 am #168739Brad DaltonParticipantgenesis_before_loop doesn't extend full width.
You can try genesis_after_header
Not sure what you mean by banner as i can't see any banner image.
October 22, 2015 at 2:41 am #168740TmgaleMemberWhen I refer to banner I mean the blue section that says FAQ.
https://www.allclearlife.co.uk/?s=DDFDFSDF
You can see that the blue section does not extend full width, I will try and hook it in to 'genesis_after_header' and see if that works.
I apprieate the help brad.
October 22, 2015 at 3:05 am #168741TmgaleMemberMoving to ‘genesis_after_header’ worked! 🙂 🙂
Nice one!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.