Home
Forums
New posts
Search forums
Steam
Most active players
Most active games
Most played games
Most owned games
Gambling
What's new
New posts
New sportsbook events
New media
New sportsbook comments
New media comments
New items
New profile posts
Latest activity
Members
Current visitors
New profile posts
Search profile posts
Credits
Transactions
Credits: 0
Shop
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Search forums
Menu
Log in
Register
Install the app
Install
Home
Forums
The Lab
Tutorials/Guides
How 2 Make Ur Own Custom Username Styles With CSS
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="almodammer" data-source="post: 252" data-attributes="member: 1"><p>this feature has become kinda popular here and i want everyone 2 have complete freedom on their username styles so i'm just adding this repository of code i've been working with for a bunch of the username styles... i'll explain what all the code does and hopefully u should be able 2 kinda piece together how 2 custom code ur own usernames if u find the builder i provided a bit limiting</p><p></p><p>before i start... most of the resources i use are found in <strong>[URL unfurl="true"]https://forumthatneverwas.com/forums/gallery/[/URL]</strong>... this is just a hidden developer forum i've been using 4 image resources so that i can link to them in the code... probably one that will come in handy if u want 2 use the gifs i've uploaded as well... <strong>this forum is only accessed by the link so i dont bloat the main website so if u cant find it... its intentional lol</strong></p><p></p><p>so basically: all username styling follows this initial framework</p><p></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">font-weight: bold; <strong>makes text bold</strong></span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">color:#FF0000; <span style="color: rgb(209, 72, 65)">defines the color (using hex in this example but rgb also works)</span></span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">font-size: 8; </span><span style="font-size: 9px">defines the font size</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">background: transparent url('images/8ball.png') no-repeat; <strong>places an image or gif (in this case an 8 ball) beside the user name</strong></span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">padding-left: 14px; adjusts the padding</span></span></span></p><p></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">so for a relevant example here's the code 4 my current username using multiple gifs,, colors,, shadows,, and styles</span></span></span></p><p></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">background-color: rgba(0, 0, 0, 0);</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">background-image: url("<a href="https://forumthatneverwas.com/attachments/bg14-gif.42" target="_blank">https://forumthatneverwas.com/attachments/bg14-gif.42</a>"), url("<a href="https://forumthatneverwas.com/attachments/bg15-gif.43" target="_blank">https://forumthatneverwas.com/attachments/bg15-gif.43</a>"), url("<a href="https://forumthatneverwas.com/attachments/bg26-gif.54" target="_blank">https://forumthatneverwas.com/attachments/bg26-gif.54</a>"), url("<a href="https://forumthatneverwas.com/attachments/bg25-gif.53" target="_blank">https://forumthatneverwas.com/attachments/bg25-gif.53</a>");</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">background-position: 6px center, 52px center, 136px center, -24px center;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">background-repeat: no-repeat;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">color: black;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">font-size: 13px;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">padding-left: 5px;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">padding-right: 5px;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">text-shadow: 0 1px 0 gold, 4px 0 5px gold, -3px 2px 6px yellow;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">font-weight: bold;</span></span></span></p><p></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">while u might be overwhelmed looking at this ((ik i was))... a lot of this comes with trial and error... my suggestion is taking an existing template i have made and just editing specific values 2 ur liking</span></span></span></p><p></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">also ik the other question is where would i put this code? well... 4 now just message me the code thru the forum or thru any means u have of contacting me and i can make it happen... i'm trying 2 add a text box in the account details or style settings where u would be able 2 adjust this urself but it's j conflicting w a bunch of shit so i'll edit this once i get it working... shouldn't be long from this post tho</span></span></span></p><p></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px"><strong>anyway here are the templates for the styles i've made on the site so far... edit them and use them as u like! i'll add more of these as well!</strong></span></span></span></p><p></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px"><strong>have fun!!!!</strong></span></span></span></p><p></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px"><strong>SHADOW:</strong></span></span></span></p><p>color: #000;</p><p>background: #fff;</p><p>text-shadow: 2px 2px 3px #000;</p><p></p><p><strong>Red Animated:</strong></p><p>text-shadow: red 1px 1px 10px;</p><p>color: red;</p><p>background: url('<a href="https://xnforo.ir/16066101745881.gif');" target="_blank">https://xnforo.ir/16066101745881.gif');</a></p><p></p><p><strong>Spoooky:</strong></p><p>background-attachment: scroll, scroll, scroll, scroll;</p><p>background-clip: border-box, border-box, border-box, border-box;</p><p>background-color: rgba(0, 0, 0, 0);</p><p>background-image: url("<a href="https://forumthatneverwas.com/attachments/bg23-gif.51/" target="_blank">https://forumthatneverwas.com/attachments/bg23-gif.51/</a>"), url("<a href="https://forumthatneverwas.com/attachments/bg15-gif.43/" target="_blank">https://forumthatneverwas.com/attachments/bg15-gif.43/</a>");</p><p>background-size: auto auto, auto auto, auto auto, auto auto;</p><p>color: #DEE1FF;</p><p>font-size: 12px;</p><p>font-weight: bold;</p><p>letter-spacing: 1px;</p><p>text-shadow: -1px -2px 2px #a200ff, 1px -2px 2px #a200ff, 1px 2px 2px blue, 1px 2px 2px blue;</p><p></p><p><strong>3D Glasses:</strong></p><p>background: url("<a href="https://forumthatneverwas.com/attachments/bg4-gif.32" target="_blank">https://forumthatneverwas.com/attachments/bg4-gif.32</a>") ;</p><p>color: #000000;</p><p>font-size: 13px;</p><p>font-weight: bold;</p><p>text-shadow: -1px 0 yellow, 0 1px green, 1px 0 #00e1ff, 0 -1px hotpink;</p><p></p><p><strong>4th of July:</strong></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">color: #fff7f7;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">font-size: 13px;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">font-weight: bold;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">text-shadow: 1px 1px 0 red, 1px 2px 0 #000000, 1px 1px 6px #8b0000, 1px 1px 9px #f00;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">background: url("<a href="https://forumthatneverwas.com/attachments/bg23-gif.51" target="_blank">https://forumthatneverwas.com/attachments/bg23-gif.51</a>"), url("<a href="https://forumthatneverwas.com/attachments/bg19-gif.47" target="_blank">https://forumthatneverwas.com/attachments/bg19-gif.47</a>"), url("<a href="https://forumthatneverwas.com/attachments/bg1-gif.29/" target="_blank">https://forumthatneverwas.com/attachments/bg1-gif.29/</a>")</span></span></span></p><p></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px"><strong>Hot Pink:</strong></span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">color: black;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">font-size: 12px;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">font-weight: bold;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">text-shadow: 0 0 8px #EF0FE9, 0 0 2px lightskyblue, 0 1px 0 violet, 0 0 9px #EF0FE9;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">background: url("<a href="https://forumthatneverwas.com/attachments/bg4-gif.32" target="_blank">https://forumthatneverwas.com/attachments/bg4-gif.32</a>"), url("<a href="https://forumthatneverwas.com/attachments/bg1-gif.29" target="_blank">https://forumthatneverwas.com/attachments/bg1-gif.29</a>"), url("<a href="https://forumthatneverwas.com/attachments/bg9-gif.37" target="_blank">https://forumthatneverwas.com/attachments/bg9-gif.37</a>");</span></span></span></p><p></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px"><strong>Orange Fireworks:</strong></span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">color: #FF8C00;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">font-size: 13px;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">font-weight: bold;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">text-shadow: 1px 1px 0 #000000, 1px 1px 8px #FFFF00, 1px 1px 6px #FFA500, 0 0 4px #000000;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">background: url("<a href="https://forumthatneverwas.com/attachments/bg13-gif.41" target="_blank">https://forumthatneverwas.com/attachments/bg13-gif.41</a>"), url("<a href="https://forumthatneverwas.com/attachments/bg4-gif.32" target="_blank">https://forumthatneverwas.com/attachments/bg4-gif.32</a>"), url("<a href="https://forumthatneverwas.com/attachments/bg5-gif.33" target="_blank">https://forumthatneverwas.com/attachments/bg5-gif.33</a>");</span></span></span></p><p></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px"><strong>Ocean: (my fav one lol)</strong></span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">color: #005fff;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">text-shadow: 0px 0px 9px #07dede, 0px 0px 5px #07dede;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">font-size: 13px;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">font-weight: bold;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">background: url(<a href="https://forumthatneverwas.com/attachments/bg20-gif.48" target="_blank">https://forumthatneverwas.com/attachments/bg20-gif.48</a>), url(<a href="https://forumthatneverwas.com" target="_blank">https://forumthatneverwas.com</a></span></span></span><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">/attachments/bg9-gif.37);</span></span></span></p><p></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px"><strong>Purple Flame:</strong></span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">color: #6B59CC;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">text-shadow: 0px 0px 9px #c66af0, 0px 0px 5px #c66af0;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">font-size: 13px;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">font-weight: bold;</span></span></span></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px">background: url(<a href="https://forumthatneverwas.com/attachments/bg10-gif.38/" target="_blank">https://forumthatneverwas.com/attachments/bg10-gif.38/</a>)</span></span></span></p><p></p><p><span style="font-size: 16px"><span style="font-family: inherit"><span style="font-size: 15px"><strong>have tons of fun fucking around w these! hopefully this was a decent overview,, just post a reply if u have any questions... i will keep this updated w more styles as i make them!</strong></span></span></span></p></blockquote><p></p>
[QUOTE="almodammer, post: 252, member: 1"] this feature has become kinda popular here and i want everyone 2 have complete freedom on their username styles so i'm just adding this repository of code i've been working with for a bunch of the username styles... i'll explain what all the code does and hopefully u should be able 2 kinda piece together how 2 custom code ur own usernames if u find the builder i provided a bit limiting before i start... most of the resources i use are found in [B][URL unfurl="true"]https://forumthatneverwas.com/forums/gallery/[/URL][/B]... this is just a hidden developer forum i've been using 4 image resources so that i can link to them in the code... probably one that will come in handy if u want 2 use the gifs i've uploaded as well... [B]this forum is only accessed by the link so i dont bloat the main website so if u cant find it... its intentional lol[/B] so basically: all username styling follows this initial framework [SIZE=16px][FONT=inherit][SIZE=4]font-weight: bold; [B]makes text bold[/B][/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]color:#FF0000; [COLOR=rgb(209, 72, 65)]defines the color (using hex in this example but rgb also works)[/COLOR][/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]font-size: 8; [/SIZE][SIZE=1]defines the font size[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]background: transparent url('images/8ball.png') no-repeat; [B]places an image or gif (in this case an 8 ball) beside the user name[/B][/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]padding-left: 14px; adjusts the padding[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]so for a relevant example here's the code 4 my current username using multiple gifs,, colors,, shadows,, and styles[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]background-color: rgba(0, 0, 0, 0);[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]background-image: url("[URL]https://forumthatneverwas.com/attachments/bg14-gif.42[/URL]"), url("[URL]https://forumthatneverwas.com/attachments/bg15-gif.43[/URL]"), url("[URL]https://forumthatneverwas.com/attachments/bg26-gif.54[/URL]"), url("[URL]https://forumthatneverwas.com/attachments/bg25-gif.53[/URL]");[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]background-position: 6px center, 52px center, 136px center, -24px center;[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]background-repeat: no-repeat;[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]color: black;[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]font-size: 13px;[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]padding-left: 5px;[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]padding-right: 5px;[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]text-shadow: 0 1px 0 gold, 4px 0 5px gold, -3px 2px 6px yellow;[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]font-weight: bold;[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]while u might be overwhelmed looking at this ((ik i was))... a lot of this comes with trial and error... my suggestion is taking an existing template i have made and just editing specific values 2 ur liking[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]also ik the other question is where would i put this code? well... 4 now just message me the code thru the forum or thru any means u have of contacting me and i can make it happen... i'm trying 2 add a text box in the account details or style settings where u would be able 2 adjust this urself but it's j conflicting w a bunch of shit so i'll edit this once i get it working... shouldn't be long from this post tho[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4][B]anyway here are the templates for the styles i've made on the site so far... edit them and use them as u like! i'll add more of these as well![/B][/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4][B]have fun!!!![/B][/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4][B]SHADOW:[/B][/SIZE][/FONT][/SIZE] color: #000; background: #fff; text-shadow: 2px 2px 3px #000; [B]Red Animated:[/B] text-shadow: red 1px 1px 10px; color: red; background: url('[URL]https://xnforo.ir/16066101745881.gif');[/URL] [B]Spoooky:[/B] background-attachment: scroll, scroll, scroll, scroll; background-clip: border-box, border-box, border-box, border-box; background-color: rgba(0, 0, 0, 0); background-image: url("[URL]https://forumthatneverwas.com/attachments/bg23-gif.51/[/URL]"), url("[URL]https://forumthatneverwas.com/attachments/bg15-gif.43/[/URL]"); background-size: auto auto, auto auto, auto auto, auto auto; color: #DEE1FF; font-size: 12px; font-weight: bold; letter-spacing: 1px; text-shadow: -1px -2px 2px #a200ff, 1px -2px 2px #a200ff, 1px 2px 2px blue, 1px 2px 2px blue; [B]3D Glasses:[/B] background: url("[URL]https://forumthatneverwas.com/attachments/bg4-gif.32[/URL]") ; color: #000000; font-size: 13px; font-weight: bold; text-shadow: -1px 0 yellow, 0 1px green, 1px 0 #00e1ff, 0 -1px hotpink; [B]4th of July:[/B] [SIZE=16px][FONT=inherit][SIZE=4]color: #fff7f7; font-size: 13px; font-weight: bold; text-shadow: 1px 1px 0 red, 1px 2px 0 #000000, 1px 1px 6px #8b0000, 1px 1px 9px #f00; background: url("[URL]https://forumthatneverwas.com/attachments/bg23-gif.51[/URL]"), url("[URL]https://forumthatneverwas.com/attachments/bg19-gif.47[/URL]"), url("[URL]https://forumthatneverwas.com/attachments/bg1-gif.29/[/URL]")[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4][B]Hot Pink:[/B][/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]color: black; font-size: 12px; font-weight: bold; text-shadow: 0 0 8px #EF0FE9, 0 0 2px lightskyblue, 0 1px 0 violet, 0 0 9px #EF0FE9; background: url("[URL]https://forumthatneverwas.com/attachments/bg4-gif.32[/URL]"), url("[URL]https://forumthatneverwas.com/attachments/bg1-gif.29[/URL]"), url("[URL]https://forumthatneverwas.com/attachments/bg9-gif.37[/URL]");[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4][B]Orange Fireworks:[/B][/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]color: #FF8C00; font-size: 13px; font-weight: bold; text-shadow: 1px 1px 0 #000000, 1px 1px 8px #FFFF00, 1px 1px 6px #FFA500, 0 0 4px #000000; background: url("[URL]https://forumthatneverwas.com/attachments/bg13-gif.41[/URL]"), url("[URL]https://forumthatneverwas.com/attachments/bg4-gif.32[/URL]"), url("[URL]https://forumthatneverwas.com/attachments/bg5-gif.33[/URL]");[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4][B]Ocean: (my fav one lol)[/B][/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]color: #005fff; text-shadow: 0px 0px 9px #07dede, 0px 0px 5px #07dede; font-size: 13px; font-weight: bold; background: url([URL]https://forumthatneverwas.com/attachments/bg20-gif.48[/URL]), url([URL]https://forumthatneverwas.com[/URL][/SIZE][/FONT][/SIZE][SIZE=16px][FONT=inherit][SIZE=4]/attachments/bg9-gif.37);[/SIZE][/FONT][/SIZE] [B][/B] [SIZE=16px][FONT=inherit][SIZE=4][B]Purple Flame:[/B][/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4]color: #6B59CC; text-shadow: 0px 0px 9px #c66af0, 0px 0px 5px #c66af0; font-size: 13px; font-weight: bold; background: url([URL]https://forumthatneverwas.com/attachments/bg10-gif.38/[/URL])[/SIZE][/FONT][/SIZE] [SIZE=16px][FONT=inherit][SIZE=4][B]have tons of fun fucking around w these! hopefully this was a decent overview,, just post a reply if u have any questions... i will keep this updated w more styles as i make them![/B][/SIZE][/FONT][/SIZE] [/QUOTE]
Name
Verification
Post reply
Home
Forums
The Lab
Tutorials/Guides
How 2 Make Ur Own Custom Username Styles With CSS
Top
