Profile Help

HOME | CHAT [better_messages_unread_counter hide_when_no_messages=”1″ preserve_space=”0″] | PROFILE

If you’re interested in sprucing up your profile page you can use HTML/CSS to customize the appearance further. This page will provide code snippets for achieving certain custom properties, along with additional information that you might find useful!
HTML code is entered through your profile ‘about me’ when you are editing your profile.

Text styling:

You can go about changing the color of your text, the size of it, or if you’re feeling adventurous – both!
It’s simple to do (if you can actually believe that).

Let’s start by changing the color of the text, you want to enclose your text with the paragraph tag which looks like: <p>Hello world!</p>
The setup for styling is: style="" then followed by the styles contained within it style="color: blue;"
When done it will look like this: <p style="color: blue;">Hello world!</p> and now you will have colored text!

You should now have the understanding of applying a style into the paragraph tag. Here are some extra styles applied to the paragraph:

<p style="color: blue; font-style: italic; font-weight: bold; font-size: 110%;">Hello world!</p>
Result:

Hello world!

If you just want to add unique styles to sections of a paragraph you can easily do it with the <span> tag.
It should look something like this:
<p style="color: blue;">Hello <span style="color: red;">world!</span></p>

Result:

Hello world!

Adding images:

To add an image is as simple as using the <img> tag, (using </img> is not necessary for this markup) and sourcing the image you want to use inside the tag with a URL, which looks like:
<img src="https://shoponline.click/example-img-file">

Result:

You can style images with the same method as styling paragraphs:
<img style="width: 128px; border: dotted red 4px;" src="https://shoponline.click/example-img-file">

Result:

As you could imagine, there is a lot you can do with just the basics learned so far. You can combine both <p> and <img> with each other to add images next to your text! Provided here is a quick example of how you can achieve that:
<p><img style="width: 16px;" src="https://shoponline.click/example-img-file-2"> Hello world! <img style="width: 16px;" src="https://shoponline.click/example-img-file-2"></p>

Result:

Hello world!

Profile background:

Feel free to experiment with backgrounds to make a page that is truly yours!

To save the heartache, you can make a background for your profile by simply by adding this code into your ‘about me’:
Replace URL in the code with an image URL of your choice.

<div style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-image: url(https://shoponline.click/example-img-file-3); background-size: repeat; z-index: -1;"></div>

Press this button Show to preview what "background-size: repeat; looks like.

Press this button Show to preview what "background-size: cover; looks like.

Learn more information about HTML:

There is far more you can learn about coding in HTML of course, and this page is only meant to scratch the surface of it, but it’s not so intimidating once you spend a little time with it, and remember you don’t have to learn everything there is to know to have fun with it! If you’d like to learn more about styling and markups then w3schools.com is a great place to start.

In case you’re curious about how a link was added in the text above, that’s done using the <a> tag:

Result:

Hello world!