[Tutorial] Adding pattern

Go down

adding music - [Tutorial] Adding pattern  Empty [Tutorial] Adding pattern

Post by System32 on August 29th 2018, 9:31 am

This tutorial is for those who want to use pattern somewhere. You add this pattern anywhere where you use HTML. So, what you need to do?

Step 1
Go to a website Subtle Patterns and find pattern you like. Download it.
Step 2
Now, use winrar to extract stuff from zip file. You will most likely see something like "__MACOSX" and "name_of_pattern". Open folder "name_of_pattern" and there checkout the image. If it's nice, good looking upload it.
Step 3
This part is easy but important. You can use any website for image upload, but I used this one: ImgBB. When upload is done, you can chose what link to use in order to use it. They suggest many different forms, which is cool. For out purpose , we pick Links>View links. Good. This was part before we even change our forum. But, when you open this in new tab, you can see their website and image hosted there. Let's take only image URL. Right click on image and click on copy image address. Okay. Now we can use our sexy pattern in CSS like this:
Step 4
Let's do some nice coding stuff. Go to stylesheet and add this:
Code:
.postbody {
background-image: url("https://image.ibb.co/m0psyU/qbkls.png");
}
After that, check how this works:
adding music - [Tutorial] Adding pattern  Screenshot_2
But, that's not the end of it. I just gave one example. Let's try it on another example since this works anywhere. Another example is:
Code:
#page-footer, .statistics {
background-image: url('https://image.ibb.co/jbzv2p/darkness.png');
color:#000;
}
Now, let's see our footer:
adding music - [Tutorial] Adding pattern  Screenshot_1

I hope you understand this tutorial. It is very simple. Always find image you want, use it in CSS, then check out how it works on website. Enjoy.


Last edited by System32 on August 29th 2018, 5:14 pm; edited 1 time in total
System32
System32
Forumember

Male Posts : 93
Reputation : 13
Language : Serbian,English

http://paganism.forumotion.com/

Back to top Go down

adding music - [Tutorial] Adding pattern  Empty Re: [Tutorial] Adding pattern

Post by SarkZKalie on August 29th 2018, 12:05 pm

I bet you already know this but I would like to share a CSS short version
Code:
#page-footer,.statistics {
background:url(image-link);
color:#hex-color;
}


adding music - [Tutorial] Adding pattern  Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1100
Reputation : 179
Language : English

https://www.rotavn.xyz/

Back to top Go down

adding music - [Tutorial] Adding pattern  Empty Re: [Tutorial] Adding pattern

Post by System32 on August 29th 2018, 12:15 pm

Yes. If I tested all CSS elements, I would use short version. Point was to explain how to get pattern, and how to insert it. It does not matter if it's
Code:
#page-footer,.statistics
or any other. Only point was to make them understand how to implement this. That's all. Thanks for explaining the short CSS element.
System32
System32
Forumember

Male Posts : 93
Reputation : 13
Language : Serbian,English

http://paganism.forumotion.com/

Back to top Go down

adding music - [Tutorial] Adding pattern  Empty Re: [Tutorial] Adding pattern

Post by mpelmmc on August 29th 2018, 5:03 pm

Hello @System32

Why don't you post your codes into the CODE tag instead of in an image? This way it will be much easier for the persons who want to use this code to add them into their forum.

Best regards.
mpelmmc
mpelmmc
Helper
Helper

Male Posts : 1081
Reputation : 166
Language : English and Spanish

https://help.forumotion.com/

Back to top Go down

adding music - [Tutorial] Adding pattern  Empty Re: [Tutorial] Adding pattern

Post by System32 on August 29th 2018, 5:04 pm

Alright, let me do so.
System32
System32
Forumember

Male Posts : 93
Reputation : 13
Language : Serbian,English

http://paganism.forumotion.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum