Archived topic
Crypto Demo Tweaks
19 replies · Started by kazama on August 4, 2021
Viewing posts 1–15 of 20
Hi,
I was wondering if it's possible to change the Hero Banner in the crypto demo theme and replace it with magazine-style layout of Dispatch for displaying latest posts?
Basically, replacing this section over here: Crypto with this: Dispatch
Can it be done? I've added the site in question in the private information area.
Hi there,
you can construct the Dispatch magazine grid hero yourself. I provide a 'how to' here:
Neat. Before I dig into it, this "how to" is meant for tweaking the crypto demo site hero right?
Also, is it possible to change the footer of dispatch mag demo and make it look similar to crypto's? As of now, it looks very basic. The crypto demo site footer is splendid.
Thank you.
The 'how to' explains how to create a new Header Element that is populated with a WP Show Posts list, that with additional PHP Snippet and CSS will create the dispatch header. It can be added to any site not just Crypto.
I understood the "how to" part. Can you also please share a "how to" guide for tweaking the footer section of Dispatch theme so that it looks similar to Crypto's?
Something like this: Footer.
Thanks.
Sorry i though you wanted to add the Dispatch Grid to the Crypto site. Not the crypto footer to the Dispatch site.
If you want to mix and match sites, the you would need to install the other site on a local/test server and then copy the elements from one site to another.
To get you started, here is the HTML code for the Crypto footer:
<!-- wp:generateblocks/container {"uniqueId":"eae04a8a","paddingTop":"140","paddingRight":"0","paddingBottom":"40","paddingLeft":"0","backgroundColor":"#1f2641","gradientColorOne":"","gradientColorOneOpacity":1,"gradientColorTwo":"","gradientColorTwoOpacity":1,"bgImage":{"id":393,"image":{"height":360.81,"width":600,"url":"https://gpsites.co/crypto/wp-content/uploads/sites/90/2021/06/footer_background.svg","orientation":"portrait"}},"bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"center center","size":"50%","repeat":"repeat-x","attachment":""},"isDynamic":true} -->
<!-- wp:generateblocks/container {"uniqueId":"39517758","outerContainer":"contained","paddingTop":"80","paddingRight":"40","paddingBottom":"40","paddingLeft":"40","paddingRightMobile":"30","paddingLeftMobile":"30","marginTop":"-180","borderRadiusTopRight":"12","borderRadiusTopLeft":"12","borderRadiusTopRightTablet":"0","borderRadiusTopLeftTablet":"0","backgroundColor":"#1f2641","zindex":1,"isDynamic":true} -->
<!-- wp:generateblocks/grid {"uniqueId":"cd21e57e","columns":4,"horizontalGap":60,"verticalGap":60,"isDynamic":true} -->
<!-- wp:generateblocks/container {"uniqueId":"f1c676e9","isGrid":true,"gridId":"9fd6a7b4","width":25,"widthTablet":100,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","removeVerticalGap":true,"isDynamic":true} -->
<!-- wp:image {"id":9,"width":134,"height":21,"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large is-resized"><a href="https://gpsites.co/crypto/"><img src="https://gpsites.co/crypto/wp-content/uploads/sites/90/2021/05/crypto_logo.svg" alt="Crypto logo" class="wp-image-9" width="134" height="21"/></a></figure>
<!-- /wp:image -->
<!-- wp:generateblocks/headline {"uniqueId":"98111db0","element":"p","textColor":"#f2f2f2","showAdvancedTypography":true,"fontSize":14,"marginTop":"20","marginBottom":"0"} -->
<p class="gb-headline gb-headline-98111db0 gb-headline-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus cursus rutrum est nec suscipit. Ut et ultrices nisi. Vivamus id nisl ligula. Nulla sed iaculis ipsum.</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- wp:generateblocks/container {"uniqueId":"e1025ee0","isGrid":true,"gridId":"9fd6a7b4","width":25,"widthTablet":33.33,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","removeVerticalGap":true,"removeVerticalGapTablet":true,"isDynamic":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"323d39f3","element":"h5","textColor":"#ffffff","showAdvancedTypography":true} -->
<h5 class="gb-headline gb-headline-323d39f3 gb-headline-text">Services</h5>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"ee5ae7f5","element":"p","textColor":"#ffffff","linkColor":"#ffffff","linkColorHover":"#30bced","showAdvancedTypography":true,"fontSize":14,"marginBottom":"18","hasIcon":true,"iconColor":"#fcba04"} -->
<p class="gb-headline gb-headline-ee5ae7f5"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span><span class="gb-headline-text"><a href="#">Secure platform</a></span></p>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"9d969616","element":"p","textColor":"#ffffff","linkColor":"#ffffff","linkColorHover":"#30bced","showAdvancedTypography":true,"fontSize":14,"marginBottom":"18","hasIcon":true,"iconColor":"#fcba04"} -->
<p class="gb-headline gb-headline-9d969616"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span><span class="gb-headline-text"><a href="#">Easy transactions</a></span></p>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"c5b6525b","element":"p","textColor":"#ffffff","linkColor":"#ffffff","linkColorHover":"#30bced","showAdvancedTypography":true,"fontSize":14,"marginBottom":"18","hasIcon":true,"iconColor":"#fcba04"} -->
<p class="gb-headline gb-headline-c5b6525b"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span><span class="gb-headline-text"><a href="#">Wallet system</a></span></p>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"305257fb","element":"p","textColor":"#ffffff","linkColor":"#ffffff","linkColorHover":"#30bced","showAdvancedTypography":true,"fontSize":14,"marginBottom":"18","hasIcon":true,"iconColor":"#fcba04"} -->
<p class="gb-headline gb-headline-305257fb"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span><span class="gb-headline-text"><a href="#">Investment</a> <a href="#">opportunities</a></span></p>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"4c03069b","element":"p","textColor":"#ffffff","linkColor":"#ffffff","linkColorHover":"#30bced","showAdvancedTypography":true,"fontSize":14,"marginBottom":"18","hasIcon":true,"iconColor":"#fcba04"} -->
<p class="gb-headline gb-headline-4c03069b"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span><span class="gb-headline-text"><a href="#">Buy & Sell</a></span></p>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"25a80675","element":"p","textColor":"#ffffff","linkColor":"#ffffff","linkColorHover":"#30bced","showAdvancedTypography":true,"fontSize":14,"marginBottom":"0","hasIcon":true,"iconColor":"#fcba04"} -->
<p class="gb-headline gb-headline-25a80675"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span><span class="gb-headline-text"><a href="#">24/7 Support</a></span></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- wp:generateblocks/container {"uniqueId":"bf7ca9ec","isGrid":true,"gridId":"9fd6a7b4","width":25,"widthTablet":33.33,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","removeVerticalGap":true,"removeVerticalGapTablet":true,"isDynamic":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"33429490","element":"h5","textColor":"#ffffff","showAdvancedTypography":true} -->
<h5 class="gb-headline gb-headline-33429490 gb-headline-text">Resources</h5>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"839d5961","element":"p","textColor":"#ffffff","linkColor":"#ffffff","linkColorHover":"#30bced","showAdvancedTypography":true,"fontSize":14,"marginBottom":"18","hasIcon":true,"iconColor":"#fcba04"} -->
<p class="gb-headline gb-headline-839d5961"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span><span class="gb-headline-text"><a href="https://gpsites.co/crypto/blog/" data-type="page" data-id="482">Blog</a></span></p>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"aacd9f2d","element":"p","textColor":"#ffffff","linkColor":"#ffffff","linkColorHover":"#30bced","showAdvancedTypography":true,"fontSize":14,"marginBottom":"18","hasIcon":true,"iconColor":"#fcba04"} -->
<p class="gb-headline gb-headline-aacd9f2d"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span><span class="gb-headline-text"><a href="#">Developer Center</a></span></p>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"c48b7198","element":"p","textColor":"#ffffff","linkColor":"#ffffff","linkColorHover":"#30bced","showAdvancedTypography":true,"fontSize":14,"marginBottom":"18","hasIcon":true,"iconColor":"#fcba04"} -->
<p class="gb-headline gb-headline-c48b7198"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span><span class="gb-headline-text"><a href="#">Exchange</a></span></p>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"7d76f3af","element":"p","textColor":"#ffffff","linkColor":"#ffffff","linkColorHover":"#30bced","showAdvancedTypography":true,"fontSize":14,"marginBottom":"0","hasIcon":true,"iconColor":"#fcba04"} -->
<p class="gb-headline gb-headline-7d76f3af"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span><span class="gb-headline-text"><a href="#">FAQ</a></span></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- wp:generateblocks/container {"uniqueId":"1af1db78","isGrid":true,"gridId":"9fd6a7b4","width":25,"widthTablet":33.33,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","removeVerticalGap":true,"removeVerticalGapTablet":true,"removeVerticalGapMobile":true,"isDynamic":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"99a51d4e","element":"h5","textColor":"#ffffff","showAdvancedTypography":true} -->
<h5 class="gb-headline gb-headline-99a51d4e gb-headline-text">Contact</h5>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"05929be8","element":"p","textColor":"#f2f2f2","showAdvancedTypography":true,"fontSize":14,"marginTop":"20","marginBottom":"0"} -->
<p class="gb-headline gb-headline-05929be8 gb-headline-text">Company Name</p>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"36ee4221","element":"p","textColor":"#f2f2f2","showAdvancedTypography":true,"fontSize":14,"marginTop":"20","marginBottom":"0"} -->
<p class="gb-headline gb-headline-36ee4221 gb-headline-text">Address</p>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/button-container {"uniqueId":"03fa5ef2","marginTop":"40","isDynamic":true} -->
<!-- wp:generateblocks/button {"uniqueId":"e0ca8f47","hasUrl":true,"hasIcon":true,"removeText":true,"backgroundColor":"#fcba04","textColor":"#1f2641","backgroundColorHover":"#30bced","textColorHover":"#ffffff","marginRight":"10","paddingTop":"10","paddingRight":"10","paddingBottom":"10","paddingLeft":"10","borderRadiusTopRight":"100","borderRadiusBottomRight":"100","borderRadiusBottomLeft":"100","borderRadiusTopLeft":"100","borderRadiusUnit":"%"} -->
<a class="gb-button gb-button-e0ca8f47" href="#"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg></span></a>
<!-- /wp:generateblocks/button -->
<!-- wp:generateblocks/button {"uniqueId":"a924c66b","hasUrl":true,"hasIcon":true,"removeText":true,"backgroundColor":"#fcba04","textColor":"#1f2641","backgroundColorHover":"#30bced","textColorHover":"#ffffff","marginRight":"10","paddingTop":"10","paddingRight":"10","paddingBottom":"10","paddingLeft":"10","borderRadiusTopRight":"100","borderRadiusBottomRight":"100","borderRadiusBottomLeft":"100","borderRadiusTopLeft":"100","borderRadiusUnit":"%"} -->
<a class="gb-button gb-button-a924c66b" href="#"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg></span></a>
<!-- /wp:generateblocks/button -->
<!-- wp:generateblocks/button {"uniqueId":"d8a5bfc9","hasUrl":true,"hasIcon":true,"removeText":true,"backgroundColor":"#fcba04","textColor":"#1f2641","backgroundColorHover":"#30bced","textColorHover":"#ffffff","marginRight":"10","paddingTop":"10","paddingRight":"10","paddingBottom":"10","paddingLeft":"10","borderRadiusTopRight":"100","borderRadiusBottomRight":"100","borderRadiusBottomLeft":"100","borderRadiusTopLeft":"100","borderRadiusUnit":"%"} -->
<a class="gb-button gb-button-d8a5bfc9" href="#"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg></span></a>
<!-- /wp:generateblocks/button -->
<!-- wp:generateblocks/button {"uniqueId":"72aa9c10","hasUrl":true,"hasIcon":true,"removeText":true,"backgroundColor":"#fcba04","textColor":"#1f2641","backgroundColorHover":"#30bced","textColorHover":"#ffffff","paddingTop":"10","paddingRight":"10","paddingBottom":"10","paddingLeft":"10","borderRadiusTopRight":"100","borderRadiusBottomRight":"100","borderRadiusBottomLeft":"100","borderRadiusTopLeft":"100","borderRadiusUnit":"%"} -->
<a class="gb-button gb-button-72aa9c10" href="#"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></span></a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->In your site, create a new Block Element.
Change the editor to Code Editor ( in the 3 dot menu in top bar ).
And paste in the code above.
Then switch back to the Visual Editor.
Set the Hook to before_footer
And display rules to Entire Site.
Then in Customizer > Layout > Footer set the Footer widgets to 0 - this will remove the themes ( Dispatch ) Footer.
Thanks a heap, David. I'll try these tweaks. One last question, would it impact site speed if I add that HTML code in my site's footer?
would it impact site speed if I add that HTML code in my site’s footer?
I don't think so :)
So, I tried applying the same tweaks to the "Stream" demo theme. However, the Dispatch magazine grid is not coming along fine. The hero grid appears to break. I've crosschecked both CSS and PHP codes. Nothing wrong there, I guess. Maybe I am missing something?
Here's what it looks like now: http://prnt.sc/26csxpt
But I want it to look like this: http://prnt.sc/26csygy
If you want the Dispatch Grid then either:
a. Import the Dispatch site and then import content from another site.
OR
b. Follow the instructions here:
I've done exactly what you have mentioned, David. That doesn't seem to be the issue here. It looks like some block elements are in conflict with each other, hence the posts are not aligning in a grid like fashion. I've already shared the site in question. I don't want to use Dispatch because of certain missing features.
As you may able to see, the posts are stacked up vertically in a linear way. I've already replicated the same (PHP,CSS, Block element hack) in other sites and it works like a charm. But, this Stream demo has some conflict. Could you please check it?
Edit: By conflict, I mean a rule error/overwrite issue.
Hi there,
I think you're pretty close. The filter for the WPSP content wrap is applied.
I think the only thing missing is the CSS which is this one:
/* WPSP Grids */
/* Single column align side image */
/* Add wpsp-align class to to WPSP List shortcode wrapper */
@media (min-width: 420px) {
.wpsp-align .wp-show-posts-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.wpsp-align .wp-show-posts-inner>div {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
@media (max-width: 768px) and (min-width: 420px) {
.wpsp-align .wp-show-posts-inner .wp-show-posts-image {
margin-right: 1.5em;
}
}
/* magazine Grid Golden Ratio 5 block standard */
/* Add wpsp-grid class to WPSP List shortcode wrapper */
@media (min-width: 600px) {
.wpsp-grid .wp-show-posts {
display: grid;
}
}
@media (min-width: 900px) {
.wpsp-grid .wp-show-posts {
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 1fr auto;
}
.wpsp-grid .wp-show-posts article:first-child {
grid-column: 1 / 5;
grid-row: 1 / 4;
}
.wpsp-grid .wp-show-posts article:nth-child(2) {
grid-column: 5 / end;
grid-row: 1 / 2;
}
.wpsp-grid .wp-show-posts article:nth-child(3) {
grid-column: 5 / 7;
grid-row: 2 / 4;
}
.wpsp-grid .wp-show-posts article:nth-child(4) {
grid-column: 7 / end;
grid-row: 2 / 4;
}
}
@media (max-width: 899px) and (min-width: 600px) {
.wpsp-grid .wp-show-posts article {
grid-column: span 4;
}
.wpsp-grid .wp-show-posts article:nth-child(3), .wpsp-grid .wp-show-posts article:nth-child(4) {
grid-row: 3;
grid-column: span 2;
}
}
.wpsp-grid article:not(:first-child) .wp-show-posts-image a img {
height: 250px;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.wpsp-grid article:first-child .wp-show-posts-image a img {
height: 500px;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.wpsp-grid article:not(:first-child) .wp-show-posts-entry-summary, .wpsp-grid article:not(:first-child) .wp-show-posts-entry-meta-below-post, .wpsp-grid article:not(:first-child) .wpsp-read-more {
display: none;
}
/* WPSP Card Styling */
/* Add wpsp-card class to WPSP List shortcode wrapper */
.wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
}
:not(.widget).wpsp-card .wp-show-posts article, .wpsp-card .wp-show-posts-image {
margin-bottom: 0 !important;
}
.wpsp-card .wp-show-posts-inner {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpsp-card .wpsp-content-wrap {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 5% 8%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.35);
background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}
.wpsp-card article {
position: relative;
overflow: hidden;
}
.wpsp-card article, .wpsp-card article .wp-show-posts-image img {
-webkit-backface-visibility: hidden;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
.wpsp-card article:hover .wp-show-posts-image img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}It's expected effect when added will look lke this - https://share.getcloudapp.com/NQuxrvgL
The empty spot on the left is because "Hello world" post on your site doesn't have featured image. If all your posts have featured images then it should look fine. :D
As I mentioned before, I've already added the above CSS plus everything else mentioned by David. The grid still remains vertically stacked. :(
The example that you shared is the intended effect I want to replicate. But, something is amiss. Maybe some extra bit of CSS or an element block rule overwrite? I dunno.
You have an error in your CSS - see here:
https://www.screencast.com/t/VsGy6fXpyRL
You have an open @media query that is missing its closing bracket: }
Oh yeah, that's done the trick! Thank you.
As an aside, would it be possible to add a separate CSS class for other email plugins such as Mail Poet?
This archived topic is closed to new replies.
