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

[Zarconite]

A little extra thing!
Secret sections for your profile, kinda like an easter egg if you will:

-----

<div class="hiddenBox">
stuff
</div>

<style>
.hiddenBox {
float:left;
text-align:center;
opacity:0;
}
.hiddenBox:hover {
float:left;
text-align:center;
opacity:1;
}
</style>
-----

Basically, what this will do is display the words stuff but if you hover over it, the words will become invisible (as the opacity is set to 0).
The opacity ranges from anywhere between 0 (Completely invisible) to 1 (fully visible), so opacity: 0.5; would be 50% see through.
Also, the red part will tell the text to be on the left side of the screen (This also works for images).

You could replace the text that says stuff with an image by using this instead:

-----

<div class="hiddenBox">
<img src="http://i.imgur.com/kAiqIcb.png" />
</div>

<style>
.hiddenBox {
float:left;
text-align:center;
opacity:0;
}
.hiddenBox:hover {
float:left;
text-align:center;
opacity:1;
}
</style>
-----

Simply replace the pink link above to add an image.

The next thing we can do is get an image to smoothly fade in and out when you hover over it:

------

<div class="hiddenBox">
<img src="http://i.imgur.com/kAiqIcb.png"/>
</div>

<style>
.hiddenBox {
float:left;
text-align:center;
opacity:0;
transition:opacity0.2s ease-in-out;
-moz-transition:opacity0.2s ease-in-out;
-o-transition:opacity0.2s ease-in-out;
-webkit-transition:opacity0.2s ease-in-out;
}
.hiddenBox:hover {
float:left;
text-align:center;
opacity:1;
}
</style>

------

The teal part of the code will tell it to smoothly fade in (on every browser) in 0.2 seconds, this is adjustable by the brown number.

If you have any questions or anything, feel free to pm me

[The Past]

To give this a bump/info, it seems Youtube videos no longer work on profiles. I don't know if it's from a glitch or what.

Well, looking around, apparently it's broken for some people's profiles, but not all. I'm guessing the way the codes work updated somewhat, so those done a specific way end up breaking now? I have little clue how coding works, so someone else probably has a better answer.


Edit:

GOOD NEWS EVERYONE! I discovered a fix, and simpler code for embedding Youtube Playlists!

-----


 <div style="float: left; margin: 3px"><object type="application/x-shockwave-flash" style="width:188px; height:26px;" data="//www.youtube.com/v/cON4bkq5xpc?color2=FBE9EC&amp;border=1&amp;rel=0&amp;loop=1&amp;autoplay=1&amp;showsearch=0&amp;showinfo=0;list=PLlirgeHmmztqyCG3GpxWIEMRJGf5UhkJp&amp;version=3">
        <param name="movie" value="//www.youtube.com/v/cON4bkq5xpc?color2=FBE9EC&amp;border=1&amp;rel=0&amp;loop=1&amp;autoplay=1&amp;showsearch=0&amp;showinfo=0;list=PLlirgeHmmztqyCG3GpxWIEMRJGf5UhkJp&amp;version=3" />
        <param name="allowFullScreen" value="true" />
        <param name="allowscriptaccess" value="always" />
        </object></div>
 
-----

Orange is the ID of the first video you want to play, found in the Youtube video's URL.

Yellow is the playlist option, which is where you place your playlist ID (the limegreen example here). You can find the playlist ID in the URL as you're playing videos from the playlist.

If you want to embed only a single video, just remove the ";list=" and playlist ID. Easy as pie.

[Zarconite]

Just to add onto what Evna said, you can add this code instead of the list=PLlirgeHmmztqyCG3GpxWIEMRJGf5UhkJp&amp; if you don't have a pre-made playlist to use:

playlist=GtSn9LqlXJI,fXqksdsvqO8&amp;

Just replace the green text with video links and add comas between them

[Nishjin]

Wow. CSS and HTML aren't so different from C. But different enough for me to need help.
Thanks for the epic tutorial Zarconite!

[Ventus Fall]

So I've been dealing with this for ages and am starting to feel there is no solution to it. I'm hoping someone can help ;-;


I want to change the font style of the text I wrote at the top of my profile. It currently says:
"The Friendly Fluffy Furry Art Dragon."

I found some fonts online, but I cannot seem to implement it properly in the code for it to work. I've tried a variety of things. Halp please ;_;

[Zarconite]

I don't think it's possible to use a custom font, however you could just create an image using said font and display an image instead of text?

[Ventus Fall]

Ahw, that's a shame ^^;
And darn, more effort But fine, I'll do so if there is no other way o3o
Thanks!

[Kara]

Alright- so, is there a way to change of the background of the text on a profile? (Such as 'About me' or 'Contact Me ' spaces)

[Zarconite]

From all my testing I don't believe you can modify individual sections, though you can edit the entire lot of them using the following:

Code: [Select]

.windowbg,#preview_body {
    background:rgba(0,0,0,0.3)!important;
}


[Kara]

I was wondering if getting the big box transparent was possible ( http://prntscr.com/dmanyi )


Also how do I change the font to comic sans?


Could you take a look at my profile (epilepsy warning) and tell me how I could make it neater?
How do you spell epilepsy

[Zarconite]

I believe you're looking for this bit:

#header {
background: rgba(0, 0, 0, 0.3)!important;
}

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


As far as font goes, place this line into your body tag:
font-family: "Comic Sans MS", "Comic Sans", cursive;

EG:
body { /* this is the tag for the background property */
        background: url(http://media.giphy.com/media/xTiTnwYaKbooszltqU/giphy.gif) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        font-family: "Comic Sans MS", "Comic Sans", cursive;
}


Hope this helps! Sorry it was a bit late

[Okami hightop]

ive created a new signiture but i have no clue how to put it on my forum... please help!!!

[Zarconite]

Upload the image to a website such as www.imgur.com
Then use the [ img] tag to link it as an image.

Hope this helps!

[Okami hightop]

thanks