How to set my Logo as a "Pattern" on a Wallpaper Stack


(Adriano ) #1

Hello everybody,

I am using RW7 with Foundation.
As the title of this topic mentions clearly, I want to do just that with the wallpaper stack.

This is an example of what I would like to achieve (probably using a different scale setting):

At the moment I have set this banner on my site using Wallpaper

… I think by using the symbol of the logo would be much better, instead than the leaf.

Could you give some directions on how to do that?

Cheers Waivers :slight_smile:


(Stuart Marshall) #2

Not sure what you mean by a wallpaper stack but there are a load of free online css pattern generators where you can simply grab the code and paste it into the likes of a Sections Pro background child stack from BWD.

Hero patterns is a good one: https://www.heropatterns.com

If you’ve got a svg version of your logo then you can just swap out the svg part of the generated code for that.


(Robert Ziebol 🖖🏼) #3

I think he is asking about the Wallpaper stack by Joe Workman.


(Joe Martin) #4

It works great…


(Adriano ) #5

Hello and thanks everyone for being part of the conversation.

The Wallpaper Stack is the new stack by Joe Workman (great intuition Zeebe!).

Okay, I am understanding I need to generate a CSS code from my SVG file. On the website that Stuart posted I couldn’t find a CSS generator.

Do you have any favourite resources to do that?.


(Stuart Marshall) #6

Apologies. I didn’t realise you were talking about a particular stack. I don’t have it so can’t comment on whether you can add your own custom pattern within it.


(Adriano ) #7

Thanks anyway Stuart !.


(Robert Ziebol 🖖🏼) #8

Have you watched the Wallpaper videos here:

I believe in the second video around the 9:20 mark, he talks about custom patterns. That should help.

Just realized the websites he mentions there do not allow you to upload your image and create an SVG pattern out of that. Hopefully @joeworkman can help you out.


(Adriano ) #9

Hello Zeebe,

Thanks for your help.

Yes, I have seen the video and indeed it doesn’t mention how to do that.

I am sure there is a way!. Hopefully is not too complicated!. XD

Cheers :slight_smile:


(Joe Workman) #10

Rob is correct. You would need to use the Custom CSS portion of the stack. You would need to create your logo as an SVG file. Its easiest to warehouse the SVG. Then you will need to create your background css.

background-image: url('warehouse-url.svg');

Paste that background image CSS above into the stack. I didn’t add official support for this because there are somethings that would not work. You are on your own with coloring and styling the SVG. The stack settings will not work when using custom CSS. Another reason that I have not added official support for something like this is that my support inbox would be flooded with requests for help with SVGs.


(Adriano ) #11

Hello Joe,

Thanks for your message.

Okay.

Do you mean this?

If yes, should I put this CSS code (background-image: url(‘warehouse-url.svg’):wink: in that box?.

I think that’s what you meant on the above quote.

And lastly, but I think most importantly, HOW do I warehouse the SVG file?

Thanks for your support Joe.


(Joe Workman) #12

You are correct.


(Adriano ) #13

Thanks Joe! :slight_smile: