New task was created

Anybody able to look into this today by any chance?? We should try to have this sorted before going live...

Perhaps I can try. Are the credentials in the vault?

Task was assigned to Aristide Athanassiadis

Wow this is freaking cool.

Ok here are my favourite ones using our Editorial Style Guide

Status change: Open → In Progress

Haha OK great Aris! I'll try these few and let's see how it comes out!

Hey Aris, we actually need it in CSS format and not in downloaded SVG ~ uh oh!! I have attached a video with more details. Do you mind trying that out??

Sorry I'm heading out. Will try this evening if I manage!

OK copy that!

Hey, I'll try it. Let me know whether it is possible to make many background for the homepage. Or place the same background in many different sections (for instance in the "featured project" and "latest forum posts"

Hey Paul, small problem. The scale is somewhat off. I would like the pattern to be much more "dense". I can do that on the website but it still looks too sparse on our website see

Hey Aris,

Yeah I've seen that too before. I'm not totally sure how to change that. We may be able to ask Guus to help with this to sort it out, it's more his cup of tea...

Aris, I have a meeting with Guus this morning. Can you send a screenshot of exactly how it should look like? (the way it looks at SVG Backgrounds?) Also include the settings on that site so we can replicate it there. Then I can check with Guus to see if he can sort this out.

Hey Paul, the problem is that I'm just experimenting now so there is going to be a lot of back and forth. I guess though, this "hack" will apply for the other background.

Here is an example in any case: background-color: #053c5e; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%231f7a8c' stroke-width='2'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23bfdbf7'%3E%3Ccircle cx='769' cy='229' r='8'/%3E%3Ccircle cx='539' cy='269' r='8'/%3E%3Ccircle cx='603' cy='493' r='8'/%3E%3Ccircle cx='731' cy='737' r='8'/%3E%3Ccircle cx='520' cy='660' r='8'/%3E%3Ccircle cx='309' cy='538' r='8'/%3E%3Ccircle cx='295' cy='764' r='8'/%3E%3Ccircle cx='40' cy='599' r='8'/%3E%3Ccircle cx='102' cy='382' r='8'/%3E%3Ccircle cx='127' cy='80' r='8'/%3E%3Ccircle cx='370' cy='105' r='8'/%3E%3Ccircle cx='578' cy='42' r='8'/%3E%3Ccircle cx='237' cy='261' r='8'/%3E%3Ccircle cx='390' cy='382' r='8'/%3E%3C/g%3E%3C/svg%3E");

With an example of what it should look like

Thanks Aris. But if I'm not mistaken there is a panel on the left hand side where you can edit the details. Can you also send that? We need some way to log onto SVG backgrounds and replicate this bg, so those details will be most helpful.

Yes but it is very qualitative

I will check with Guus to see if he can come up with a trick for us to always get the right pattern code so that we don't depend on manual intervention, and that way you can experiment at will. Not sure if it's possible, but I can check. We just need that one sample case we can replicate.

Ahhh great Aris, got it! I just needed to see that top part so that is now all clear, thanks. I'll get back to you after discussing this with Guus.

Okay so it turned out to be easy for Guus to fix. You should add these two lines when you paste the code (put them on the last line, before the closing bracket):

background-size: contain; background-repeat: repeat;

And then it should retain the size properly!

Aris are you able to get us a background?? I guess we shouldn't go live till we have that sorted. I'm wrapping up most technical stuff and even though there's always a ton of other things to do, I'd reckon we better just get this thing online and then continue building from there. What do you think?

Hey Paul,

Thanks it works quite nice.

A couple of things. I already have added one bg which looks quite nice. However:

• Could we change the blue from the homepage (in the what we do boxes, in featured projects and a bit everywhere with #1F7A8C (see colour scheme).

• Could we try to add another bg for the featured projects (for instance background-color: #053c5e; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76' viewBox='0 0 90 90'%3E%3Ccircle fill='%231f7a8c' cx='45' cy='45' r='6'/%3E%3Cg fill='%23a31621' fill-opacity='1'%3E%3Ccircle cx='0' cy='90' r='9'/%3E%3Ccircle cx='90' cy='90' r='9'/%3E%3Ccircle cx='90' cy='0' r='9'/%3E%3Ccircle cx='0' cy='0' r='9'/%3E%3C/g%3E%3C/svg%3E");

• Another one for the latest forum ...

• Could you give me access to the rest of the bgs?

I would agree to slowly get online and continue working on things after that.

OK great to hear Aris. Okay this is what I've done:

1. The blue color was changed as requested.
2. The code you posted above is not CSS code. I would need the CSS code to try this out.
3. You did not include any code for the forum, right?
4. Which other backgrounds are you referring to?

I'm gonna work on getting this thing launched so we can get this to the next phase!

Ahhh and PS I have put the image back on the homepage itself - this was overwritten initially but that wasn't intentional from my side. Or do you prefer to have the pattern there as well instead of the image?

Ok here is the CSS code

background-color: #053c5e; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Ccircle fill='%231f7a8c' cx='45' cy='45' r='7'/%3E%3Cg fill='%23a31621' fill-opacity='1'%3E%3Ccircle cx='0' cy='90' r='9'/%3E%3Ccircle cx='90' cy='90' r='9'/%3E%3Ccircle cx='90' cy='0' r='9'/%3E%3Ccircle cx='0' cy='0' r='9'/%3E%3C/g%3E%3C/svg%3E");

I though I had but it was separted in different lines.

I don't know whether we want or not we want the picture. Keep for the moment I guess and let's see whether we want to change it.

For the other backgrounds, I meant the premium collection. I can only see a couple of the backgrounds.

Finally something wrong happened in the homepage see

Hey Aris,

1. Something doesn't work with that CSS code and the FEATURED PROJECTS box. As you know all this front-end stuff is not my specialty and moving away from the pre-configured option to change the headers seems not to be straightforward. If we have some CSS-savvy volunteer popping up I recommend we re-visit, but for now consider it not an easy thing to play with. You can see what it looks like when I try -- just a solid color and no pattern.
2. We do have access to the premium backgrounds. Grab the password from our vault and log in, and you should then have access.
3. I fixed the issue on the homepage.

Ok let's pause this then for the moment. And proceed as is then!