The Furry Forums would like to place cookies on your computer to help us make this website better. To find out more about the cookies, see our privacy notice.
To accept the cookie click here, or please login or register.

Author Topic: Profile Customization! [Tutorials / Ask for help / show off your profile here!]  (Read 26701 times)

0 Members and 0 Guests are viewing this topic.

Offline Zarconite

  • Hug Enthusiast
  • Jovial Jaguar
  • ******
  • awards This user has been a forum member for over 8 years This user has donated to the forum more than once. This user has donated more than $50 to the forum. This user has donated to the forum.
  • Posts: 851
  • Gender: Male
  • May or may not be a demon
    • Skype
    • Steam
    • Awards
  • Species: Wolf / Fox Hybrid
  • Coloring: Grey / White / Blue
  • Height: 5' 7"
  • Weight: 170
  • Reference: [link]
  • Currently: I think I'm finished here, I may pop up from time to time though
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 ^_^
« Last Edit: May 19, 2016, 10:11:14 AM by Zarconite »
  • Avatar by: Commision by Nimroderick
  • Signature art by: Myself - so that its easier for me to tell which posts are mine

Offline The Past

  • Archmage
  • Tackling Tiger
  • **********
  • awards Assigned to someone who is observed to be very friendly toward other members (frequently welcoming people in the Intro board, answering questions, etc.) This user has been a forum member for over 10 years Top 10 Most Online Top 50 Topic Starter
  • Posts: 2404
    • Awards
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.
« Last Edit: June 26, 2016, 06:31:13 AM by Evnamishko »

Offline Zarconite

  • Hug Enthusiast
  • Jovial Jaguar
  • ******
  • awards This user has been a forum member for over 8 years This user has donated to the forum more than once. This user has donated more than $50 to the forum. This user has donated to the forum.
  • Posts: 851
  • Gender: Male
  • May or may not be a demon
    • Skype
    • Steam
    • Awards
  • Species: Wolf / Fox Hybrid
  • Coloring: Grey / White / Blue
  • Height: 5' 7"
  • Weight: 170
  • Reference: [link]
  • Currently: I think I'm finished here, I may pop up from time to time though
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 ^_^
  • Avatar by: Commision by Nimroderick
  • Signature art by: Myself - so that its easier for me to tell which posts are mine

Offline Nishjin

  • Gregarious Gnu
  • ****
  • awards This user has been a forum member for over 5 years
  • Posts: 508
  • Gender: Male
  • Personal Text
    • Awards
  • Coloring: Clear
  • Height: 6'
  • Currently: Alive and kicking
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!
uʍopǝpᴉsd∩
Stuff. More Stuff. Even More Stuff.
"The problem is not the problem. The problem is your attitude about the problem. Do you understand?" -Captain Jack Sparrow

Offline Ventus Fall

  • Zoomorphic Zebra
  • **********
  • awards This user has been a forum member for over 10 years This user has reported a valid and verified forum bug This user has made a suggestion for the forum that was approved and implemented Top 50 Poster
  • Posts: 5204
  • Gender: Gender Fluid
  • The dragon caretaker
    • Fur Affinity
    • DeviantArt
    • Awards
  • Species: Fur dragon
  • Coloring: Greens, reds and grey
  • Height: Approx. 2,10m (6.9ft) -with ears-
  • Build: Slender
  • Reference: [link]
  • Currently: -Local senpai- Will maybe have ninjurai's in the future.
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 ;_;
  • Avatar by: Hello preset gallery
  • Signature art by: Mr. Razot
♦ The friendly fluffy furry art dragon ♦
-> PM me for any questions or if you just want to chat ^^ I love to help! <-


> > Ventus Fall's backstory and information. < <


Links to my art pages and more:

deviantArt - FurAffinity - YouTube - Twitch - Twitter


Offline Zarconite

  • Hug Enthusiast
  • Jovial Jaguar
  • ******
  • awards This user has been a forum member for over 8 years This user has donated to the forum more than once. This user has donated more than $50 to the forum. This user has donated to the forum.
  • Posts: 851
  • Gender: Male
  • May or may not be a demon
    • Skype
    • Steam
    • Awards
  • Species: Wolf / Fox Hybrid
  • Coloring: Grey / White / Blue
  • Height: 5' 7"
  • Weight: 170
  • Reference: [link]
  • Currently: I think I'm finished here, I may pop up from time to time though
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?
  • Avatar by: Commision by Nimroderick
  • Signature art by: Myself - so that its easier for me to tell which posts are mine

Offline Ventus Fall

  • Zoomorphic Zebra
  • **********
  • awards This user has been a forum member for over 10 years This user has reported a valid and verified forum bug This user has made a suggestion for the forum that was approved and implemented Top 50 Poster
  • Posts: 5204
  • Gender: Gender Fluid
  • The dragon caretaker
    • Fur Affinity
    • DeviantArt
    • Awards
  • Species: Fur dragon
  • Coloring: Greens, reds and grey
  • Height: Approx. 2,10m (6.9ft) -with ears-
  • Build: Slender
  • Reference: [link]
  • Currently: -Local senpai- Will maybe have ninjurai's in the future.
Ahw, that's a shame ^^;
And darn, more effort :P But fine, I'll do so if there is no other way o3o
Thanks!
  • Avatar by: Hello preset gallery
  • Signature art by: Mr. Razot
♦ The friendly fluffy furry art dragon ♦
-> PM me for any questions or if you just want to chat ^^ I love to help! <-


> > Ventus Fall's backstory and information. < <


Links to my art pages and more:

deviantArt - FurAffinity - YouTube - Twitch - Twitter


Offline Kara

  • Optimistic Owl
  • ********
  • awards This user has been a forum member for over 8 years Top 50 Topic Starter
  • Posts: 1471
  • Gender: Non-binary
  • "That's what's up."
    • Steam
    • DeviantArt
    • Awards
  • Species: Coywolfdog
  • Coloring: Shades of gray with other colors mixed in
  • Height: 5'9
  • Weight: 195lbs
  • Build: Average
  • Reference: [link]
  • Currently: Wheeeee
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)
  • Avatar by: SearingPaint on dA
Welcome, Child, To the wishing well. You ask for heaven, we give you hell.

---
I do commissions on dA! throw a PM at me if you're interested!


Offline Zarconite

  • Hug Enthusiast
  • Jovial Jaguar
  • ******
  • awards This user has been a forum member for over 8 years This user has donated to the forum more than once. This user has donated more than $50 to the forum. This user has donated to the forum.
  • Posts: 851
  • Gender: Male
  • May or may not be a demon
    • Skype
    • Steam
    • Awards
  • Species: Wolf / Fox Hybrid
  • Coloring: Grey / White / Blue
  • Height: 5' 7"
  • Weight: 170
  • Reference: [link]
  • Currently: I think I'm finished here, I may pop up from time to time though
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;
}
« Last Edit: September 10, 2016, 08:28:58 AM by Zarconite »
  • Avatar by: Commision by Nimroderick
  • Signature art by: Myself - so that its easier for me to tell which posts are mine

Offline Kara

  • Optimistic Owl
  • ********
  • awards This user has been a forum member for over 8 years Top 50 Topic Starter
  • Posts: 1471
  • Gender: Non-binary
  • "That's what's up."
    • Steam
    • DeviantArt
    • Awards
  • Species: Coywolfdog
  • Coloring: Shades of gray with other colors mixed in
  • Height: 5'9
  • Weight: 195lbs
  • Build: Average
  • Reference: [link]
  • Currently: Wheeeee
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
  • Avatar by: SearingPaint on dA
Welcome, Child, To the wishing well. You ask for heaven, we give you hell.

---
I do commissions on dA! throw a PM at me if you're interested!


Offline Zarconite

  • Hug Enthusiast
  • Jovial Jaguar
  • ******
  • awards This user has been a forum member for over 8 years This user has donated to the forum more than once. This user has donated more than $50 to the forum. This user has donated to the forum.
  • Posts: 851
  • Gender: Male
  • May or may not be a demon
    • Skype
    • Steam
    • Awards
  • Species: Wolf / Fox Hybrid
  • Coloring: Grey / White / Blue
  • Height: 5' 7"
  • Weight: 170
  • Reference: [link]
  • Currently: I think I'm finished here, I may pop up from time to time though
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
  • Avatar by: Commision by Nimroderick
  • Signature art by: Myself - so that its easier for me to tell which posts are mine

Offline Okami hightop

  • Avid Aardvark
  • *
  • awards This user has been a forum member for over 5 years
  • Posts: 17
  • Gender: Agender
  • im one of a kind and so are you.... :)
    • Awards
  • Species: Monnekijn wolf
  • Coloring: red and black
  • Height: 5'9"
  • Weight: 175 pounds
  • Build: slender
  • Reference: [link]
  • Currently: scared of storms!!!
ive created a new signiture but i have no clue how to put it on my forum... please help!!!
  • Avatar by: me
  • Signature art by: me

Offline Zarconite

  • Hug Enthusiast
  • Jovial Jaguar
  • ******
  • awards This user has been a forum member for over 8 years This user has donated to the forum more than once. This user has donated more than $50 to the forum. This user has donated to the forum.
  • Posts: 851
  • Gender: Male
  • May or may not be a demon
    • Skype
    • Steam
    • Awards
  • Species: Wolf / Fox Hybrid
  • Coloring: Grey / White / Blue
  • Height: 5' 7"
  • Weight: 170
  • Reference: [link]
  • Currently: I think I'm finished here, I may pop up from time to time though
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!
  • Avatar by: Commision by Nimroderick
  • Signature art by: Myself - so that its easier for me to tell which posts are mine

Offline Okami hightop

  • Avid Aardvark
  • *
  • awards This user has been a forum member for over 5 years
  • Posts: 17
  • Gender: Agender
  • im one of a kind and so are you.... :)
    • Awards
  • Species: Monnekijn wolf
  • Coloring: red and black
  • Height: 5'9"
  • Weight: 175 pounds
  • Build: slender
  • Reference: [link]
  • Currently: scared of storms!!!
thanks XD
« Last Edit: January 02, 2017, 09:23:52 PM by Alistair, Reason: Try to post two words as per the rules. »
  • Avatar by: me
  • Signature art by: me

 

Powered by EzPortal