Profile Customization! [Tutorials / Ask for help / show off your profile here!]

[Zarconite]

Hey there!
I thought I'd show you how I create custom profiles for you people to try and use. Just make sure your ultimate profile is enabled!
Feel free to do as you please with it:


===============


Youtube / Music on your profile!

Use this website to create some code to embed onto your profile:
https://www.tools4noobs.com/online_tools/youtube_xhtml/

Use the following settings:
Width: 222
Height: 26
Align: left
show related: [ ]
Play: (do as you please for this one, I'd recommend ticking autoplay)
Show buttons: Fullscreen [ ] | Search [ ] | Video info [ ] | Playback controls [√]
Player Version: V3
Remove youtube logo: [√]

It should look something like this:

---------------

<div style="float: left; margin: 3px"><object type="application/x-shockwave-flash" style="width:222px; height:26px;" data="//www.youtube.com/v/mi1M747Iw48?color2=FBE9EC&amp;border=1&amp;rel=0&amp;loop=1&amp;autoplay=1&amp;showsearch=0&amp;showinfo=0&amp;version=3">
        <param name="movie" value="//www.youtube.com/v/mi1M747Iw48?color2=FBE9EC&amp;border=1&amp;rel=0&amp;loop=1&amp;autoplay=1&amp;showsearch=0&amp;showinfo=0&amp;version=3" />
        <param name="allowFullScreen" value="true" />
        <param name="allowscriptaccess" value="always" />
        </object><div style="font-size: 0.8em"><a href="https://www.tools4noobs.com/online_tools/youtube_xhtml/">Get your own valid XHTML YouTube embed code</a></div></div>

---------------

you can remove the last part that's in green if you don't want the link to be there.

If you don't want the controls to disappear, add this autohide=0&amp; between the two red parts in your code

Paste this into the customization section of your ultimate profile.


===============


The theme!

Simple background

Add the following into the customization section of your ultimate profile, then simply change the image link to one of your preference!

---------------

<style>
body {
        background: url(http://www.technocrazed.com/wp-content/uploads/2015/12/HD-Space-Wallpaper-For-Background-13.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

#content_section{
    background:rgba(0, 0, 0, 0.0)!important;
}

#content_section div.frame{
    background:rgba(0, 0, 0, 0.0)!important;
}
<style>

---------------


Advanced profile

This one is a bit more complex, I'll link my one with comments explaining most of the stuff
((sidenote, /* text */ is a comment in CSS and will be ignored - you can either leave this in or remove it, either way it will work))
Add all of the following to your Customization section of your ultimate profile (if you leave it as it is, it will look identical to my old profile, if you want to know anything else, pm me!):

---------------

<style>
body { /* this is the tag for the background property */
        background: url(http://media.giphy.com/media/xTiTnwYaKbooszltqU/giphy.gif) no-repeat center center fixed; /* this replaces the background of your profile with the image from the URL (in pink) - to change the background, get a (preferably hd(1920x1080) image link (EG: http://topgamewallpapers.com/wp-content/uploads/2014/07/235470.jpg) and place it where the current pink one is */
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

#content_section{ /* This is one of the content sections! the below one is another content section */
    background:rgba(0, 0, 0, 0.0)!important; /* this is explained just below the bracket */
}

/* rgba means red green blue alpha, each of these range from 0 to 255 (alpha is 0% to 100% or 0 to 1 (0.5 = 50%)), so rgba(255,0,0,100%) is red with no transparency, rgba(0,0,0,0) is fully transparent and causes the frame to be invisible - a few more examples are as follows: rgba(0,255,255,1) is cyan with 100% alpha, rgba(100,100,100,0.5) is grey with 50% alpha */

#content_section div.frame{
    background:rgba(0, 0, 0, 0.0)!important; /* invisible, 0% alpha, the !important overrides the forum default and prioritizes this */
}

.h4.catbg,h4.catbg2,h3.catbg,h3.catbg2,.table_list tbody.header td.catbg{ /* the title bars */
    background:rgba(0,125,175,0.4)!important; /* cyan ish and 40% alpha */
}

.windowbg span.topslice{ /* the top part of any content box */
    background:rgba(0,125,175,0.4)!important;
}

.windowbg span.topslice span{ /* leave the [span] options as they are */
    background:rgba(0,0,0,0.0)!important;
}

.windowbg span.botslice{ /* the bottom part of any content box */
    background:rgba(0,125,175,0.4)!important;
}

.windowbg span.botslice span{ /* leave the [span] options as they are */
    background:rgba(0,0,0,0.0)!important;
}

.windowbg2 span.topslice{ /* Comments section, the top part of the content box */
    background:rgba(0,45,175,0.3)!important;
}

.windowbg2 span.topslice span{
    background:rgba(0,0,0,0.0)!important;
}

.windowbg2 span.botslice{ /* Comments section, the bottom part of the content box */
    background:rgba(0,45,175,0.3)!important;
}

.windowbg2 span.botslice span{
    background:rgba(0,0,0,0.0)!important;
}

.windowbg2{ /* Comments section, the background of the content box */
    background: rgba(0, 0, 0, 0.3)!important;
}

.windowbg,#preview_body { /* the section behind the text in your comments / content sections */
    background: rgba(0, 0, 0, 0.3)!important;
}

#header { /* the header section of the page */
background: rgba(0, 0, 0, 0.3)!important;
}

#header div.frame {
    background: rgba(0, 0, 0, 0.0)!important;
}

#footer_section{ /* The footer of the page */
    background:rgba(0,0,0,0.0)!important;
}

#footer_section div.frame{
    background:rgba(0,0,0,0.0)!important;
}

a:link,a:visited{ /* the color of every link on your profile */
    color: rgb(45,175,225)!important; /* Notice that this is rgb and not rgba, text can't have alpha */
}

.dropmenu li a.firstlevel:hover, .dropmenu li:hover a.firstlevel{ /* the color of the drop down menu's boxes when you hover over them */
    background:rgb(0,0,0)!important;
}

.dropmenu li a.active { /* the color of the little line showing that you're in the profile section of the forums */
    background: rgb(0,35,100)!important;
}

.dropmenu li ul { /* the color of the drop down menu's boxes */
    background:rgb(0,15,45);
}

.dropmenu li li.additional_items { /* The same as above, but just for longer lists */
    background:rgb(0,15,45);
}

.dropmenu li a.firstlevel span.firstlevel { /* the navigation bar (home/rules etc) - this one is more complex, leave it as it is if you prefer (you can change the colour though) - or edit it if you're feeling brave */
    background: rgb(0,55,75)!important;
    display: block;
    position: relative;
    left: 5px!important;
    padding-left: 0px!important;
    padding: 5px!important;
    height: 22px;
    line-height: 19px;
    white-space: pre;
    font-size: 105%;
}

#main_menu .dropmenu li { /* kinda the same as above ish */
    background: rgb(0,55,85)!important;
}

.button_submit, .button_reset { /* search button */
    background: rgb(0,66,100)!important;
}

</style>


---------------

If you feel like something is missing, on firefox you can right click somewhere and "inspect element", from here you can go to the "style editor" tab and look through the entire style sheet or look at the top right of the "inspector" tab to see all the style sheets that are being used by what you right clicked.


===============

If you have any questions, feel free to ask and I'll try my best to help out.
Have fun!
(Sorry if I went over the top with colors!)

[Taliaka Anichezachi]

Ohh, CSS and HTML thats the stuff i am doing for a living Nice one Zarc

[Ventus Fall]

*rolls around in joyness*

[anoni]

Zarc! I've turned my profile page into a disco but it has no music . I've been looking at ways to embed and auto-play music on my page, do you have any suggestions on how to go about this?

[Zarconite]

Try using the YouTube thingy above, I had issues embedding YouTube videos too, but this way seems to work
You can probably hide it if you set the size to be 0px by 0px or something

I'm on my phone right now, but if you're looking for something specific, feel free to pm it to me and I'll try to sort it when I'm home

[Zarconite]

+Added a simple background section!
Just replace the image url and you're away, its as simple as that

[Raven MacKenzie]

Exile has sent me the link to this tutorial. It's awesome! My profile is so much prettier than before. Thank you for these wonderful codes.

[Zarconite]

Hey there!
No problem, if you want anything else customizing then feel free to pm me!

---------------

I've created a snowfall thingy that might look nice if anyone is feeling festive!
Add all of the following to your customization if you like

<div id="snoww">
    <div class="snow x1"></div>
</div>
<style>
#snoww {
    background: rgba(0,0,0,0);
        pointer-events: none;
        Z-Index:10000;
}
.snow {
    width: 1920px; height: 2160px;
    background: url(http://i.imgur.com/Bv8WG8U.png);
    position: fixed;
        pointer-events: none;
        Z-Index:10001;
        margin-left: -160px;
}
.snow:before, .snow:after {
    content: '';
    position: absolute;
    background: url(http://i.imgur.com/Bv8WG8U.png);
    width: 1920px; height: 2160px;
    position: absolute;
}

.x1 {
    -webkit-animation: movesnoww 11s linear infinite;
    -moz-animation: movesnoww 11s linear infinite;
    -o-animation: movesnoww 11s linear infinite;
}
@-webkit-keyframes movesnoww {
    0% {margin-top: -1620px;}
    100% {margin-top: -540px;}
}
@-moz-keyframes movesnoww {
    0% {margin-top: -1620px;}
    100% {margin-top: -540px;}
}
@-o-keyframes movesnoww {
    0% {margin-top: -1620px;}
    100% {margin-top: -540px;}
}
</style>

[Raven MacKenzie]

Ok, I'll remember, if I had any questions.
Haha, already used!

[Kyuusoku]

 How do you create bold and underlined and italic texts on your profile?

[Zarconite]

For bold text you can use add <strong> for Bold text </strong> outside of your <style> tags
For italics you can use <i> for Italic text </i> outside of your <style> tags
And finally, for underlining text you can use <ins> for underlined text </ins>outside of your <style> tags

Hope this helps!
 

[Kyuusoku]

 What do you mean 'outside of <style> tags'?

[Ventus Fall]

@Penny


When you type inside of any tags:  <example tag > text text text </example tag >
When you type outside of any tags:  text text <example tag >  </example tags > text text

[Kyuusoku]

 Thanks, also, your profile picture is awesome!

[Farewell]

Alright since I've tried and seemed I failed... How do I make the grey platform barely visible and the square grey platforms over layering it a bit transparent on my profile... (If that doesn't make sense please Pm) along with how do I make all font teal.