[Resolved] SVG Backgrounds

Home Forums Support [Resolved] SVG Backgrounds

Home Forums Support SVG Backgrounds

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1544878
    pairfum

    Dear Support,

    How can we use SVG background patterns using GP Background Images within the customizer?

    We can obviously upload an SVG background image file but I am not sure this is the best solution, as SVG files generated by Adobe Illustrator are not very lightweight.

    We particularly like http://www.heropatterns.com/ and a solution would be ideal that allows us to adjust:
    – the colours of the pattern, and
    – size of the pattern element

    We have recently started using this plugin with the BeaverBuilder plugin and it works really well:
    https://sitespot.dev/resource/beaver-builder-svg-pattern-backgrounds/

    You can see the result on these pages:
    https://www.pairfum.com/
    https://www.pairfum.com/niche-perfume-natural-eau-de-parfum/
    https://www.pairfum.com/home-fragrance-boutique/

    Is a similar solution feasible for GeneratePress?

    Many thanks for your help with this.

    Kind regards,

    Pairfum London

    #1544967
    Elvin
    Staff
    Customer Support

    Hi,

    There are multiple ways to go about this.

    1 is, applying the background on site areas through customizer by enabling the Backgrounds module:
    https://docs.generatepress.com/article/backgrounds-overview/

    Another way is, by applying the svg background to a GenerateBlock(plugin) Container or Grid block. This is done within Gutenberg editor.

    One other way is, if you have devtool and CSS knowledge, you can apply background images to anything by finding their CSS selectors and adding in a “background-image” property to add SVG backgrounds to them.

    We have recently started using this plugin with the BeaverBuilder plugin and it works really well:

    You can actually use Beaver Builder to edit your page/post. You can check our Site Builder list for known templates that uses Beaver Builder in it. https://generatepress.com/site-library/

    https://docs.generatepress.com/article/using-the-site-library/

    A wise man once said:
    "Have you cleared your cache?"

    #1546590
    pairfum

    Dear Elvin,

    Many thanks for your reply and suggestions but unfortunately they are not really in line with what we are looking for.

    The WordPress page types we are trying to add an SVG background pattern to are:
    – Blog Posts
    – WooCommerce Products, Categories, …
    We need a solution that adds an SVG background pattern to all of these, rather than on an individual basis.

    On WordPress ‘Pages’ we use the BeaverBuilder plugin instead of Gutenberg / GenerateBlocks / Kadence / etc.

    Specifically in response to your suggestions:
    1. GenerateBlocks: as mentioned, BeaverBuilder lets us add SVG background patterns to pages created with the BeaverBuilder plugin.
    2. Dev Tool & CSS: we don’t really have these skill in-house.
    3. Backgrounds Module: as mentioned above, we can obviously upload an SVG background image file but I am not sure this is the best solution, as SVG files generated by Adobe Illustrator are not very lightweight

    Instead, we followed the guidelines given on this page:
    https://generatepress.com/forums/topic/svg-background-footer-widget-area/

    Following this guideline we added the following to our GeneratePress Child theme:

    .footer-widgets {
        background-color: #ffffee;
        background-image: url("data:image/svg+xml,%3Csvg width='40' height='1' viewBox='0 0 40 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v1H0z' fill='%23fffae7' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    }
    
    .site-info {
        background-color: #3e3e3e;
        background-image: url("data:image/svg+xml,%3Csvg width='40' height='1' viewBox='0 0 40 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v1H0z' fill='%23000000' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    }
    
    .one-container .container {
        background-color: #ffffff;
        background-image: url("data:image/svg+xml,%3Csvg width='40' height='1' viewBox='0 0 40 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v1H0z' fill='%23f7f7f7' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    }

    The result is pretty close to what we are looking for and it seems very lightweight:
    https://www.pairfum.com

    Where it does not work because of margins, is on these page types:
    – Post: https://www.pairfum.com/review-of-the-perfume-experience-box-by-savanna-rae/
    – WooCommerce Product: https://www.pairfum.com/niche-perfume-natural-eau-de-parfum/

    On screens wider than 1,100 pixels a band without pattern appears on either side on these page types, i.e. coming from the following CSS code:

    .grid-container {
        margin-left: auto;
        margin-right: auto;
    }

    Would you have a suggestion how we can improve this solution or do you have a better solution?

    Kind regards,

    Pairfum London

    #1546976
    Elvin
    Staff
    Customer Support

    To clarify: You’re trying to add the SVG as a background that spans through the whole page?

    If so, you can change this:

    .one-container .container {
        background-color: #ffffff;
        background-image: url("data:image/svg+xml,%3Csvg width='40' height='1' viewBox='0 0 40 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v1H0z' fill='%23f7f7f7' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    }

    to this:

    body {
        background-color: #ffffff;
        background-image: url("data:image/svg+xml,%3Csvg width='40' height='1' viewBox='0 0 40 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v1H0z' fill='%23f7f7f7' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    }

    This is done so it goes beyond the margin imposed by content’s max-width + auto margins.

    After adding this, you’ll probably notice that a particular background color seems to be blocking the pattern added to the body. You can remove this background color through Appearance > Customize > Colors > Content and reduce the alpha/opacity of the background color to 0.

    A wise man once said:
    "Have you cleared your cache?"

    #1549040
    pairfum

    Hi Elvin,

    Many thanks for your suggestion.

    It works exactly, as we were hoping for and it is now live on our site:
    https://www.pairfum.com

    The background pattern really looks great and is easy to adjust sitewide when we want to make changes.

    Many thanks for your help.

    Kind regards,

    Pairfum London

    #1550594
    Elvin
    Staff
    Customer Support

    Nice one. Definitely looks great. ๐Ÿ™‚

    No problem. Glad to be of any help. ๐Ÿ˜€

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.