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

TFF Central => Suggestions => Questions and Guides => Topic started by: Zarconite on October 27, 2015, 03:59:08 PM

Title: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on October 27, 2015, 03:59:08 PM

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/ (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&border=1&rel=0&loop=1&autoplay=1&showsearch=0&showinfo=0&version=3">
<param name="movie" value="//www.youtube.com/v/mi1M747Iw48?color2=FBE9EC&border=1&rel=0&loop=1&autoplay=1&showsearch=0&showinfo=0&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/ (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& 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 (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 (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!)

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Taliaka Anichezachi on October 28, 2015, 09:09:39 AM

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

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Ventus Fall on November 25, 2015, 01:00:00 PM

*rolls around in joyness*

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: anoni on November 25, 2015, 02:38:09 PM

Zarc! I've turned my profile page into a disco but it has no music D:. 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?

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on November 25, 2015, 04:48:06 PM

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

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on December 01, 2015, 11:05:47 PM

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

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Raven MacKenzie on December 15, 2015, 10:16:01 PM

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.

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on December 15, 2015, 10:53:48 PM

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 :P

<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 (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 (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>

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Raven MacKenzie on December 15, 2015, 10:59:02 PM

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

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Kyuusoku on December 29, 2015, 04:24:05 PM

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

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on December 30, 2015, 11:56:06 AM

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!

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Kyuusoku on February 02, 2016, 04:40:34 PM

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

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Ventus Fall on February 03, 2016, 11:00:15 AM

@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

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Kyuusoku on February 03, 2016, 03:39:23 PM

Thanks, also, your profile picture is awesome!

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Farewell on February 03, 2016, 03:59:18 PM

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.

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on February 04, 2016, 11:23:40 AM

To anyone who want's to change the text colour:
<style>
body, td, th, tr{
color: red; /* red (via naming the color) */
}
.windowbg, #preview_body{
color: rgb(0,255,0); /* green (via RGB settings) */
}
h1, h2, h3, h4, h5, h6{
color: #0000ff; /* blue (via Hex value) */
}
</style>

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Crest Is Dead ((For Now)) on February 20, 2016, 03:15:28 PM

How come whenever I try the background it never works?

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on February 20, 2016, 04:10:02 PM

Do you have your ultimate profile enabled?
Are you placing the code into customization?
Are you wrapping the code with <style> and </style>?

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Crest Is Dead ((For Now)) on February 20, 2016, 04:51:13 PM

Aye sir.

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on February 20, 2016, 11:01:08 PM

Can you paste everything you've entered into the customization box?
your profile currently doesn't have the ultimate profile layout

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Sub-Zero Knight on March 06, 2016, 07:20:32 PM

I tried to change my background, but it just turned it red. Is there a way you can help me out?

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Farewell on March 06, 2016, 09:56:24 PM

For some reason music won't play nor show up on my profile. I've tried to put it back in and then it gets rid of something else as if it's limiting me. Any way I can fix that?

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: HyenaKing on March 07, 2016, 01:47:43 AM

Quote from: Zaida on March 06, 2016, 09:56:24 PM

For some reason music won't play nor show up on my profile. I've tried to put it back in and then it gets rid of something else as if it's limiting me. Any way I can fix that?

Been having the same problem.

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Kyuusoku on March 07, 2016, 09:54:22 PM

I FINALLY found a BB Coding (http://www.dailywritingtips.com/forum/misc.php?s=fc868a112a86154694c9a0d4e2261549&do=bbcode#basic) site that works for this forum! It's how I do all my centered paragraphs, ETC on here!

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on March 10, 2016, 12:43:45 PM

To the people trying to use the music player, place it into the customization section above everything else - even above <style>
if the music player is inside the <style> tag, it will treat the code as CSS causing it to not work (as it's using HTML)

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Farewell on March 10, 2016, 03:53:21 PM

Ah alright, thanks!

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on April 13, 2016, 09:22:22 AM

Just updated the first post to a slightly better advanced version
Also, for anyone looking to replace the TFF logo with their own picture, you can use something like this:

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

h1.forumtitle{
display: none;
}

#top_section{ /* change this to an image that will roughly fit into the top bar, I can help with this if needs be */
background: url(http://i.imgur.com/fgCwqP6.png (http://i.imgur.com/fgCwqP6.png)) no-repeat 0px 5px;
}

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

And if you're looking for something cool to try, here's some code that will allow you to have two backgrounds! left click anywhere on the profile and it will change as long as you have the mouse held down (Remember to delete your current body section):

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

body
{ /* Leave this one as is */
background: url(https://upload.wikimedia.org/wikipedia/commons/5/54/Blank_Canvas_on_Transparent_Background.png (https://upload.wikimedia.org/wikipedia/commons/5/54/Blank_Canvas_on_Transparent_Background.png)) no-repeat center center fixed;
}
body:before, body:after {
content: "";
position:absolute;
top:0%;
right:0%;
bottom:-1337%;
left:0%;
opacity: 1;
overflow: hidden;
}
body:before { /* this is the image that will be shown if you aren't clicking */
background: url(http://i.imgur.com/Z7zDiQn.png (http://i.imgur.com/Z7zDiQn.png)) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transition: opacity 0.5s;
Z-index:-1999998;
}

/* If you want to speed up or slow down the animation, change the pink number above to any amount of seconds you like */

body:after { /* this is the image that will be shown if hold left click down anywhere on your profile */
background: url(http://i.imgur.com/LHXaqkH.png (http://i.imgur.com/LHXaqkH.png)) no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
Z-index:-1999999;
}

body:active:before { /* Leave this one as is */
opacity: 0;
}

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

If you want any help with anything profile related, feel free to pm me ^_^

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: BlueWolf on April 13, 2016, 12:55:24 PM

Some interesting little tidbits in here that I might have to give a try. I feel this (or something very similar to it) should be stickied at the top of the general board. ^_^

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on April 16, 2016, 09:37:00 AM

Some new code for you people,

Easy (ish) youtube playlists!
This code looks more scary than it is, just focus on the coloured sections and leave the rest as is:

The green parts of the code are just your video link, so you'd just copy the video id and replace it there (this bit: https://www.youtube.com/watch?v= (https://www.youtube.com/watch?v=)_pR575Gxuww)

As for the orange parts, find any youtube playlist like this one: https://www.youtube.com/watch?v=Q50OntO-dD4& (https://www.youtube.com/watch?v=Q50OntO-dD4&)list=RDEM1R5zqDAOWV9_6J1zVEjzpA - and replace the list part of the code above with the code for your playlist

After that, place the code into the customization section of your ultimate profile and you're good to go! (Just make sure it's at the very bottom below everything)

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: The Past on April 16, 2016, 09:45:06 AM

Quote from: Zarconite on April 16, 2016, 09:37:00 AM

Some new code for you people,

Easy (ish) youtube playlists!
This code looks more scary than it is, just focus on the coloured sections and leave the rest as is:

<div style="width:224px;height:24px;overflow:hidden;display:table-cell;vertical-align:bottom"><object width="265" height="24"><param name="movie" value="http://www.youtube.com/v/ (http://www.youtube.com/v/)k3aCGU2SC18&modestbranding=1&shuffle=1&fs=0&rel=0&hd=1&showinfo=0&iv_load_policy=0&autoplay=1&loop=1&list=PLlirgeHmmztqyCG3GpxWIEMRJGf5UhkJp&version=3&autohide=0&theme=dark" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/ (http://www.youtube.com/v/)k3aCGU2SC18&modestbranding=1&shuffle=1&fs=0&rel=0&hd=1&showsearch=0&showinfo=0&iv_load_policy=0&autoplay=1&loop=1&list=PLlirgeHmmztqyCG3GpxWIEMRJGf5UhkJp&version=3&autohide=0&theme=dark" type="application/x-shockwave-flash" width="222" height="24" /></object></div>

The green parts of the code are just your video link, so you'd just copy the video id and replace it there (this bit: https://www.youtube.com/watch?v= (https://www.youtube.com/watch?v=)_pR575Gxuww)

As for the orange parts, find any youtube playlist like this one: https://www.youtube.com/watch?v=Q50OntO-dD4& (https://www.youtube.com/watch?v=Q50OntO-dD4&)list=RDEM1R5zqDAOWV9_6J1zVEjzpA - and replace the list part of the code above with the code for your playlist

After that, place the code into the customization section of your ultimate profile and you're good to go! (Just make sure it's at the very bottom below everything)

Thank you, Zarc, I owe you one! :D

You can also place it in the "My Media" section.

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on May 19, 2016, 09:55:16 AM

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 ^_^

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: The Past on June 26, 2016, 05:31:04 AM

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&border=1&rel=0&loop=1&autoplay=1&showsearch=0&showinfo=0;list=PLlirgeHmmztqyCG3GpxWIEMRJGf5UhkJp&version=3">
<param name="movie" value="//www.youtube.com/v/cON4bkq5xpc?color2=FBE9EC&border=1&rel=0&loop=1&autoplay=1&showsearch=0&showinfo=0;list=PLlirgeHmmztqyCG3GpxWIEMRJGf5UhkJp&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.

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on June 26, 2016, 06:36:54 AM

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

playlist=GtSn9LqlXJI,fXqksdsvqO8&

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

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Nishjin on August 21, 2016, 05:58:30 PM

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

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Ventus Fall on September 05, 2016, 08:44:01 AM

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 ;_;

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on September 06, 2016, 04:12:07 PM

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?

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Ventus Fall on September 06, 2016, 04:23:53 PM

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

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Kara on September 10, 2016, 02:42:20 AM

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)

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on September 10, 2016, 08:23:28 AM

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;
}

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Kara on December 21, 2016, 07:02:27 PM

I was wondering if getting the big box transparent was possible ( http://prntscr.com/dmanyi (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

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on December 29, 2016, 11:15:15 AM

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 (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

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Okami hightop on January 02, 2017, 05:21:44 PM

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

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Zarconite on January 02, 2017, 05:43:32 PM

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

Hope this helps!(http://tag to load it as an imageHope this helps!http://tag with the link (EG: [img}i.imgur.com/i/link)

Title: Re: Profile Customization! [Tutorials / Ask for help / show off your profile here!]
Post by: Okami hightop on January 02, 2017, 06:01:18 PM

thanks XD

The Furry Forums

TFF Central => Suggestions => Questions and Guides => Topic started by: Zarconite on October 27, 2015, 03:59:08 PM