Group finder
Group Finder Homepage Widget
To add a group finder (drop down list) to your homepage, you can add a HTML widget to the teal widget area on the home and paste the code below (after customising it).
Code
<div class="group-finder"> <div id="group-picker"> <div class="top"><span class="text">Select a group...</span><span class="arrow"></span></div> <ul class="dropdown"> <li><b><a href="/locator/">Search by Postcode</a></b></li> <li><a href="/groups/aquila-explorers-widnes">Aquila Explorers (Widnes)</a></li> <li><a href="/groups/beacon-explorers-frodsham">Beacon Explorers (Frodsham)</a></li> <li><a href="/groups/cestrian-explorers-runcorn">Cestrian Explorers (Runcorn)</a></li> <li><a href="/groups/draco-explorers-alvanley">Draco Explorers (Alvanley)</a></li> <li><a href="/groups/young-leader-unit/">Young Leader Unit</a></li> <li><a href="/groups/3rd-frodsham-sea-scouts">3rd Frodsham Sea Scouts</a></li> <li><a href="/groups/4th-frodsham-overton">4th Frodsham (Overton)</a></li> <li><a href="/groups/1st-halton">1st Halton</a></li> <li><a href="/groups/1st-helsby">1st Helsby</a></li> <li><a href="/groups/1st-ince-and-elton">1st Ince and Elton</a></li> <li><a href="/groups/1st-moore">1st Moore</a></li> <li><a href="/groups/1st-newton-and-kingsley">1st Newton and Kingsley</a></li> <li><a href="/groups/1st-norley">1st Norley</a></li> <li><a href="/groups/3rd-and-9th-runcorn">3rd and 9th Runcorn</a></li> <li><a href="/groups/4th-runcorn">4th Runcorn</a></li> <li><a href="/groups/6th-runcorn">6th Runcorn</a></li> <li><a href="/groups/1st-weston-and-weston-point">1st Weston and Weston Point</a></li> <li><a href="/groups/4th-widnes-st-bedes">4th Widnes (St Bedes)</a></li> <li><a href="/groups/8th-widnes">8th Widnes</a></li> <li><a href="/groups/10th-widnes-hough-green">10th Widnes (Hough Green)</a></li> <li><a href="/groups/12th-widnes-st-lukes">12th Widnes (St Lukes)</a></li> <li><a href="/groups/14th-widnes">14th Widnes</a></li> </ul> </div> </div><br>
🚨 Remember to replace the links and names of your groups/units
Group Finder Wordpress Blocks
You can also use the group finder in blocks I have attached code for
Block with just finder
Code
<!-- wp:group {"backgroundColor":"scout-teal","textColor":"white"} -->
<div class="wp-block-group has-white-color has-scout-teal-background-color has-text-color has-background"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:heading {"align":"center","level":4,"style":{"color":{"text":"#ffffff"}}} -->
<h4 class="has-text-align-center has-text-color" style="color:#ffffff">Find your local Group </h4>
<!-- /wp:heading -->
<!-- wp:html -->
<div class="group-finder group-finder-column">
<div id="group-picker">
<div class="top"><span class="text">Select a group...</span><span class="arrow"></span></div>
<ul class="dropdown">
<li><b><a href="/locator/">Search by Postcode</a></b></li>
<li><a href="/groups/aquila-explorers-widnes">Aquila Explorers (Widnes)</a></li>
<li><a href="/groups/beacon-explorers-frodsham">Beacon Explorers (Frodsham)</a></li>
<li><a href="/groups/cestrian-explorers-runcorn">Cestrian Explorers (Runcorn)</a></li>
<li><a href="/groups/young-leader-unit/">Young Leader Unit</a></li>
<li><a href="/groups/3rd-frodsham-sea-scouts">3rd Frodsham Sea Scouts</a></li>
<li><a href="/groups/4th-frodsham-overton">4th Frodsham (Overton)</a></li>
<li><a href="/groups/1st-halton">1st Halton</a></li>
<li><a href="/groups/1st-helsby">1st Helsby</a></li>
<li><a href="/groups/1st-ince-and-elton">1st Ince and Elton</a></li>
<li><a href="/groups/1st-moore">1st Moore</a></li>
<li><a href="/groups/1st-newton-and-kingsley">1st Newton and Kingsley</a></li>
<li><a href="/groups/1st-norley">1st Norley</a></li>
<li><a href="/groups/3rd-and-9th-runcorn">3rd and 9th Runcorn</a></li>
<li><a href="/groups/4th-runcorn">4th Runcorn</a></li>
<li><a href="/groups/6th-runcorn">6th Runcorn</a></li>
<li><a href="/groups/1st-weston-and-weston-point">1st Weston and Weston Point</a></li>
<li><a href="/groups/4th-widnes-st-bedes">4th Widnes (St Bedes)</a></li>
<li><a href="/groups/8th-widnes">8th Widnes</a></li>
<li><a href="/groups/10th-widnes-hough-green">10th Widnes (Hough Green)</a></li>
<li><a href="/groups/12th-widnes-st-lukes">12th Widnes (St Lukes)</a></li>
<li><a href="/groups/14th-widnes">14th Widnes</a></li>
</ul>
</div>
</div>
<!-- /wp:html -->
<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#ffffff"}}} -->
<p class="has-text-align-center has-text-color" style="color:#ffffff"><a href="https://mwscouts.org/join/locator/"><strong>use your current location</strong></a></p>
<!-- /wp:paragraph -->
<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group -->
🚨 Remember to replace the links and names of your groups/units
Block with Image
Code
<!-- wp:media-text {"mediaId":13607,"mediaType":"image","isStackedOnMobile":false,"imageFill":true,"className":"is-stacked-on-mobile","style":{"color":{"background":"#00a794"}}} -->
<div class="wp-block-media-text alignwide is-image-fill is-stacked-on-mobile has-background" style="background-color:#00a794"><figure class="wp-block-media-text__media" style="background-image:url(https://mwscouts.org/wp-content/uploads/2019/07/group-of-scouts-in-helmets-jpg-1024x768.jpg);background-position:50% 50%"><img src="https://mwscouts.org/wp-content/uploads/2019/07/group-of-scouts-in-helmets-jpg-1024x768.jpg" alt="" class="wp-image-13607"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"style":{"color":{"text":"#ffffff"}}} -->
<h2 class="has-text-color" style="color:#ffffff">Find your local Group </h2>
<!-- /wp:heading -->
<!-- wp:html -->
<div class="group-finder">
<div id="group-picker">
<div class="top"><span class="text">Select a group...</span><span class="arrow"></span></div>
<ul class="dropdown">
<li><b><a href="/locator/">Search by Postcode</a></b></li>
<li><a href="/groups/aquila-explorers-widnes">Aquila Explorers (Widnes)</a></li>
<li><a href="/groups/beacon-explorers-frodsham">Beacon Explorers (Frodsham)</a></li>
<li><a href="/groups/cestrian-explorers-runcorn">Cestrian Explorers (Runcorn)</a></li>
<li><a href="/groups/young-leader-unit/">Young Leader Unit</a></li>
<li><a href="/groups/3rd-frodsham-sea-scouts">3rd Frodsham Sea Scouts</a></li>
<li><a href="/groups/4th-frodsham-overton">4th Frodsham (Overton)</a></li>
<li><a href="/groups/1st-halton">1st Halton</a></li>
<li><a href="/groups/1st-helsby">1st Helsby</a></li>
<li><a href="/groups/1st-ince-and-elton">1st Ince and Elton</a></li>
<li><a href="/groups/1st-moore">1st Moore</a></li>
<li><a href="/groups/1st-newton-and-kingsley">1st Newton and Kingsley</a></li>
<li><a href="/groups/1st-norley">1st Norley</a></li>
<li><a href="/groups/3rd-and-9th-runcorn">3rd and 9th Runcorn</a></li>
<li><a href="/groups/4th-runcorn">4th Runcorn</a></li>
<li><a href="/groups/6th-runcorn">6th Runcorn</a></li>
<li><a href="/groups/1st-weston-and-weston-point">1st Weston and Weston Point</a></li>
<li><a href="/groups/4th-widnes-st-bedes">4th Widnes (St Bedes)</a></li>
<li><a href="/groups/8th-widnes">8th Widnes</a></li>
<li><a href="/groups/10th-widnes-hough-green">10th Widnes (Hough Green)</a></li>
<li><a href="/groups/12th-widnes-st-lukes">12th Widnes (St Lukes)</a></li>
<li><a href="/groups/14th-widnes">14th Widnes</a></li>
</ul>
</div>
</div>
<!-- /wp:html -->
<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph {"style":{"color":{"text":"#ffffff"}}} -->
<p class="has-text-color" style="color:#ffffff"><a href="https://mwscouts.org/join/locator/">or use your current location</a></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->