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

Classic Stacks
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):

15
152556×1376 656 KB

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

07
072556×1134 248 KB

… 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:

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.

1 Like
3

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

4

It works great…

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?.

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.

7

Thanks anyway Stuart !.

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.

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:

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.

11

Hello Joe,

Thanks for your message.

Okay.

Do you mean this?

09
091554×1332 255 KB

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.

12

You are correct.

13

Thanks Joe! :slight_smile:

14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.