2.0.2 2.0.2 PROFILE CUSTOMIZATION GUIDE! - last updated 4/7
Beasts of Beyond

PROFILE CUSTOMIZATION GUIDE! - last updated 4/7

Offline fabther christmas

  • 182
  • 【*✿❀⁎― love】
  • awards This member has participated in the 2018 site-wide Halloween event!
    • View Profile
    • Awards
PROFILE CUSTOMIZATION GUIDE! - last updated 4/7
« on: April 08, 2018, 01:56:54 AM »
heya! here's an entire guide to a basic ultimate profile. it's nothing too fancy, but it makes it so you can personalize everything. i have a code below for you to copy, as well as a step-by-step guide to help you out!

before you start, i'd recommend gathering up the picture(s) and colors that you want for your profile. i also recommend looking up repeating backgrounds/images, since these will repeat multiple times if they don't fit in the section. if you're just using colors, then don't worry about it.

step 1

copy the code from the spoiler below, and paste it in the customization section of your ultimate profile.

code: ShowHide
 
Code: [Select]
<style>
body {
background: url(IMAGELINK) or COLOR;
}
header {
Background: url(IMAGE) or COLOR;
box-shadow: 0 -3px COLOR inset;
}
.navigate_section {
background: url(IMAGE) or COLOR; }
.breadcrumb {
background: url(IMAGE) or COLOR; }
.breadcrumb &gt; li &gt; a {
color: FONTCOLOR;
}
h3.catbg, h4.catbg, div.cat_bar {
background: url (IMAGE) or COLOR;
font-family: FONT;
font-size #px;
text-align: ALIGNMENT;
Color: FONTCOLOR; }
.windowbg {
background: url(IMAGE) or COLOR;
font-family: FONT;
font-size: #px ;
color: FONTCOLOR; }
td {
color: FONTCOLOR;
}
.windowbg span.topslice span {
background: url(IMAGE) or COLOR; 
}
.windowbg span.botslice span {
background: url(IMAGE) or COLOR;
}
.windowbg span.botslice {
background: url(IMAGE) or COLOR }
.poster h4 {
Background: url(IMAGE) or COLOR;
}
.poster ul li  {
Background: url(IMAGE) or COLOR; }
a:link {
color: LINKCOLOR;
}
a:visited {
color: VISITEDCOLOR;
}
footer {
background: url(IMAGE) or COLOR;
text-align: center;
box-shadow: 0 -7px COLOR;
Font-family: font }
</style>


step 2

find this code in your profile template;;
Quote
body {
background: url(IMAGELINK) or COLOR;
}

this is the main background of your profile. if you're using an image, copy and paste the link in the url area and delete the "or COLOR" section of the code. if you're using a color, put in the color and delete the other text. after that, move onto the next step.

step 3

next up is the header [the area that contains the "beasts of beyond" text, which is this part of the code;;
Quote
header {
Background: url(IMAGE) or COLOR;
box-shadow: 0 -3px COLOR inset;
}

just like the main background, paste the image or link you are going to use in the appropriate area and delete what you don't need. now, pick a color for the box shadow [the little line of color that is beneath your header] and paste it in the color area. after that, you should be done with the header!

step 4

next up, find this part of your code;;
Quote
.navigate_section {
background: url(IMAGE) or COLOR; }
.breadcrumb {
background: url(IMAGE) or COLOR; }
.breadcrumb &gt; li &gt; a {
color: COLOR;
}
this is the bar underneath the header.

the .navigate_section colors the outside of this section, so pick the image or color you want and fill it out!

the .breadcrumb is the area that contains the "beasts of beyond / profile of ___ / summary" section on your profile. fill out whatever background or color you would like for it here!

the .breadcrumb &gt; li &gt; a colors the forwards slashes between each of the links in the navigation section, though the links won't be colored. just paste or type whatever color you want here!

step 5

after that, scroll down to this section of the code;;
Quote
h3.catbg, h4.catbg, div.cat_bar {
background: url(IMAGE) or COLOR;
font-family: FONT;
font-size #px;
text-align: ALIGNMENT;
Color: FONTCOLOR; }

these are the little boxes that hold the titles of each section of your profile, as well as set of boxes on the left of your profile [which may be hidden, depending on what way you're viewing your profile.]

here, you do your usual step for the background, pick the font, font size and alignment you want. after that, paste the color that you want for your text in the color section!

step 6

next up;;
Quote
.windowbg {
background: url(IMAGE) or COLOR;
font-family: FONT;
font-size: #px ;
color: FONTCOLOR; }
td {
color: FONTCOLOR;
}

.windowbg is all of the background boxes for the section of your profile. this also covers everything that's related to the text as well! this section is pretty easy to fill out, since you just fill out the stuff you want, and you should be good to go.

after that, there is td.

td is just the text color by your profile picture, so drop the font color you want there.

step 7

next up, scroll down to these three parts of the code;;
Quote
.windowbg span.topslice span {
background: url(IMAGE) or COLOR; 
}
.windowbg span.botslice span {
background: url(IMAGE) or COLOR;
}
.windowbg span.botslice {
background: url(IMAGE) or COLOR }

this section is the little color bars that are at the top and bottom of each of the sections in your profile. topslice refers to the top one, while botslice refers to the bottom ones. you fill these out like anything else that has the background option.

note that botslice comes in two parts;; span.botslice span is the bigger section, while span.botslice is the smaller section.

step 8

after that, go this this section;;
Quote
.poster h4 {
Background: url(IMAGE) or COLOR;
}
.poster ul li  {
Background: url(IMAGE) or COLOR; }

this is the section where you see the profile picture and name of the commenter! as always, you just put in the image or color you want in here.

.poster h4 contains the name of whoever commented on your profile, while .poster ul li contains their profile picture and online/offline status.

step 9

go to this section after that;;
Quote
a:link {
color: LINKCOLOR;
}
a:visited {
color: VISITEDCOLOR;
}

these color the links in your profile. a:link is an unvisited link, while a:visted is a visited link. put the colors you want over there! i'd personally recommend using different colors. also, feel free to skip this step if you like the colors that are already provided!

step 9

scroll down to your final part of the code.
Quote
footer {
background: url(IMAGE) or COLOR;
text-align: center;
box-shadow: 0 -7px COLOR;
Font-family: font }

the footer is almost exactly like the header, although it does contain some text that you can customize. so, fill everything out in here. have the text as centered on default [for the sake of it looking like what it was earlier], but feel free to change it. after you've gotten everything filled out, click the "change profile" button and you should be good to go!

OTHER STUFF;;

cursors--- personally, i'd recommend this site for cursors. you can use the search bar if you're looking for something specific, or just scroll through their many categories. once you have one picked, scroll down and copy the universal css/html section. after that, drop this in either the customization section of your ultimate profile, or in the 'my media' box. please note that dropping stuff in the media causes it to create a new box.

---

i'll be updating this as i go along! i'm looking into figuring out music codes, as well as a few other things. feel free to track this, or post if you're having any issues! you can also always shoot me a message if you need help or have any questions. i'd love to help you out!
you're pretty either way
she/her & slow replies & tired

& become a paradise valley hp

Offline Snow-rion

Re: PROFILE CUSTOMIZATION GUIDE! - last updated 4/7
« Reply #1 on: April 08, 2018, 02:04:01 AM »
this is amazing! pinned.
administrator of beasts of beyond!
characters - discord: star#0061

Offline Sky;;

  • the right team is always team cap!
  • 676
  • the real bucky barnes™
  • awards This glorious member has donated to our very special Breast Cancer October event. This member has participated in the 2018 site-wide Halloween event!
    • View Profile
    • Awards
Re: PROFILE CUSTOMIZATION GUIDE! - last updated 4/7
« Reply #2 on: April 08, 2018, 01:39:33 PM »
Ahh this is amazing!! I also have a question?? So I have this old music code from ff, and I believe it's correct but it won't play?
Code: [Select]
<div style="text-align: center;"><object width="1000" height="50"><param name="movie" value="https://www.youtube.com/v/ID&amp;ob=av3n;hl=en_US&amp;fs=1&amp;rel=0" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="https://www.youtube.com/v/ID&amp;ob=av3n;autoplay=1&amp;hl=en_US&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash" width="1000" height="50" /></object></div>edit: actually it pops up i realized, it just won't automatically play.

Again thanks for the guide !!
« Last Edit: April 08, 2018, 02:17:04 PM by Sky;; »
instagram art account - USD Art Shop - Buckingham Barnes
⅛ of the suts // senior mod // fmab & marvel fanatic
dakot was here <3 so was orion >)

Offline Snow-rion

Re: PROFILE CUSTOMIZATION GUIDE! - last updated 4/7
« Reply #3 on: April 08, 2018, 03:29:03 PM »
Ahh this is amazing!! I also have a question?? So I have this old music code from ff, and I believe it's correct but it won't play?
Code: [Select]
<div style="text-align: center;"><object width="1000" height="50"><param name="movie" value="https://www.youtube.com/v/ID&amp;ob=av3n;hl=en_US&amp;fs=1&amp;rel=0" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="https://www.youtube.com/v/ID&amp;ob=av3n;autoplay=1&amp;hl=en_US&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash" width="1000" height="50" /></object></div>edit: actually it pops up i realized, it just won't automatically play.

Again thanks for the guide !!

You can use this code w/ no autoplay or use this within your interests/about me section:
Code: [Select]
[youtube autoplay=1]https://www.youtube.com/watch?v=HERE[/youtube]
administrator of beasts of beyond!
characters - discord: star#0061

Offline MADI

Re: PROFILE CUSTOMIZATION GUIDE! - last updated 4/7
« Reply #4 on: April 08, 2018, 04:06:16 PM »
Code: [Select]
.navbar-default {
    background: url(LINK) or COLOR;
    border-color: black;
    border-bottom-width: 0;
    box-shadow: 0 -3px #FFE1ED inset;
}

Can be used to change the top bar navigation (still trying to figure out how to alter the hover appearance for that bar though... My edits in the developer tool show that they work but when I plug them in to my profile it suddenly doesn't compute, cry)

Code: [Select]
header ul.reset li, header ul.reset li a
{
color: black;
font-family: "Segoe UI";
font-size: 11px;
}
header ul.reset li a:hover
{
color: black;
text-decoration: none;
}

Can be used to change the color of user info in the header section (working on the nav menu drop down shit).
BEAUTY IS TERROR
premadescustom templatesstorage

Offline Sky;;

  • the right team is always team cap!
  • 676
  • the real bucky barnes™
  • awards This glorious member has donated to our very special Breast Cancer October event. This member has participated in the 2018 site-wide Halloween event!
    • View Profile
    • Awards
Re: PROFILE CUSTOMIZATION GUIDE! - last updated 4/7
« Reply #5 on: April 08, 2018, 04:31:53 PM »
This code here can also change your avatar and your buddie's icons to a circle, and it will rotate 360 degrees when your mouse hovers over it.
Code: [Select]
#profile_left .avatar {
border-radius: 100px;
width: 200px;
height: 200px;
border: 1px solid COLOR;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
img:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}

And you can make backgrounds(not your main background, things like header, footer, boxes, etc) a different opacity.
Code: [Select]
filter:alpha(opacity=60); opacity:.6;
« Last Edit: April 08, 2018, 04:35:42 PM by Sky;; »
instagram art account - USD Art Shop - Buckingham Barnes
⅛ of the suts // senior mod // fmab & marvel fanatic
dakot was here <3 so was orion >)

Offline Snow-rion

Re: PROFILE CUSTOMIZATION GUIDE! - last updated 4/7
« Reply #6 on: April 08, 2018, 05:39:17 PM »
What I have so far. Missing the header change(now can remove the header, add a transparent background in), hover over 'show ___' options, and changes for 'profile pictures'/'my buddies'/'add comment' links. Will edit this as I get those fixed... + missing navigation bar at the top

Code: [Select]
<style>
body {
background: url(IMG) or #COLOR;
}

header {
background: url(https://i.imgur.com/GamsdEg.png) no-repeat scroll 0 0 transparent or #COLOR;
background-position: position name, px, or percentage here;
box-shadow: 0 -3px #COLOR inset;
height: #px;
}

img {
    max-width: 0%;
    height: auto;
}

.navigate_section {
background: #COLOR; }

.breadcrumb {
background: #COLOR; }

.breadcrumb > li > a {
color: #COLOR;
}

h3.catbg, h4.catbg, div.cat_bar {
background: #COLOR;
font-family: arial;
font-size: #px;
text-align: center;
Color: #COLOR; }

.windowbg {
background: #COLOR;
font-family: arial;
font-size: #px ;
color: #COLOR; }

td {
color: #COLOR;
}

.windowbg span.topslice span {
background: #COLOR; 
}

.windowbg span.topslice {
background: #COLOR; 
}

.windowbg span.botslice span {
background: #COLOR;
}

.windowbg span.botslice {
background:#COLOR;
}

.poster h4 {
Background: #COLOR;
}

.poster ul li  {
Background: #COLOR; }
a:visited {
color: #COLOR;
}

a:link {
    color: #COLOR;
    text-decoration: none;
}

.dropmenu li li
{
width: 19em;
padding: 3px;
margin: 0;
background: #COLOR;
}

.dropmenu li li a
{
color: #COLOR;
padding: 4px 2px;
border-radius: 3px;
}

.dropmenu li a.active
{
color: #COLOR;
background: #COLOR;
border-radius: 3px;
}

.dropmenu li a.active:hover, .dropmenu li:hover a.active
{
color: #COLOR !important;
}

/* the hover effects */
.dropmenu li a.firstlevel:hover, .dropmenu li:hover a.firstlevel
{
color: #COLOR;
cursor: pointer;
text-decoration: none;
}

/* the hover effects on level2 and 3 */
.dropmenu li li a:hover, .dropmenu li li:hover&gt;a
{
background: #COLOR;
text-decoration: none;
}

header ul.reset li, header ul.reset li a
{
color: #COLOR;
font-family: "Segoe UI";
font-size: 11px;
}

header ul.reset li a:hover
{
color: #COLOR;
text-decoration: none;
}

footer
{
margin-top: 20px;
background: #COLOR;
padding: 20px 0;
text-align: center;
box-shadow: 0 -7px #COLOR;
font-family: "Segoe UI";
}

footer, footer a
{
color: #COLOR;
}

span.smalltext {
        color: #COLOR;
}

a:link, a:visited {
    color: #COLOR;
    text-decoration: none;
}

a:visited {
    color: #COLOR;
}

a.new_win {
color: #COLOR;
}

a.new_win:link, a.new_win:visited {
    color: #COLOR;
}

h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a {
    color: #COLOR;
}

.navbar-default .navbar-nav &gt; li &gt; a, .navbar-default .navbar-brand
{
   color: #COLOR;
   font-weight: bold;
   font-family: "Segoe UI";
   text-shadow: 0 2px #COLOR;
}

.navbar-default, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    background: #COLOR;
    border-color: #COLOR;
    border-bottom-width: 0;
    box-shadow: 0 -3px #COLOR inset;
}

.navbar-nav {
background: #COLOR;
}

input, button, select, textarea {
    font: 95%/115% verdana, Helvetica, sans-serif;
    color: #COLOR;
    background: #COLOR;
    padding: 2px;
}

</style>
« Last Edit: April 11, 2018, 06:49:10 PM by Orion »
administrator of beasts of beyond!
characters - discord: star#0061

Offline MADI

Re: PROFILE CUSTOMIZATION GUIDE! - last updated 4/7
« Reply #7 on: April 09, 2018, 11:20:30 PM »
Did you get those navigation bar / dropdown menu codes to work? I tried that same coding sequence poached from the developer codes and couldn't get it to work for me
BEAUTY IS TERROR
premadescustom templatesstorage

Offline fabther christmas

  • 182
  • 【*✿❀⁎― love】
  • awards This member has participated in the 2018 site-wide Halloween event!
    • View Profile
    • Awards
Re: PROFILE CUSTOMIZATION GUIDE! - last updated 4/7
« Reply #8 on: April 10, 2018, 12:57:39 AM »
hey! thanks for all of this, everyone! 0:

i was actually able to figure out navigation bar for the most part, though it probably looks a bit wonky. i can drop the code here tomorrow, since it's pretty late for me + it's sort of a mess right now.

you're pretty either way
she/her & slow replies & tired

& become a paradise valley hp

Offline Snow-rion

Re: PROFILE CUSTOMIZATION GUIDE! - last updated 4/7
« Reply #9 on: April 10, 2018, 06:33:32 AM »
lovely!! thank you <3
administrator of beasts of beyond!
characters - discord: star#0061

Offline fabther christmas

  • 182
  • 【*✿❀⁎― love】
  • awards This member has participated in the 2018 site-wide Halloween event!
    • View Profile
    • Awards
Re: PROFILE CUSTOMIZATION GUIDE! - last updated 4/7
« Reply #10 on: April 10, 2018, 07:13:15 PM »
here's the navigation stuff, if any of you would like to test it out! i might separate the dropdowns later, but since i know this works, they're grouped with the hovering colors + text as well.

Code: [Select]
.navbar-default .navbar-nav .active a {
background: COLOR;
color: TEXTCOLOR;
text-shadow: 0 2px COLOR;
box-shadow: 0 -3px COLOR inset; }
.navbar-default {
background: COLOR;
color: TEXTCOLOR;
box-shadow: 0 -3px COLOR inset;
}
.navbar-default .navbar-nav li a {
color: TEXTCOLOR;
text-shadow: 0 2px COLOR; }
.navbar-default .navbar-nav .active a:hover, .navbar-default .navbar-nav  .open  a, .navbar-default .navbar-nav  .open a:hover, .navbar-default .navbar-nav  .open a:focus, .navbar-default .navbar-nav  li  a:hover, .navbar-default .navbar-nav  li  a:focus {
Background: COLOR;
Color: TEXTCOLOR;
box-shadow: 0 -3px COLOR inset; }
.dropdown-menu {
Background: COLOR }
« Last Edit: April 10, 2018, 07:13:57 PM by fab »
you're pretty either way
she/her & slow replies & tired

& become a paradise valley hp

Offline MADI

Re: PROFILE CUSTOMIZATION GUIDE! - last updated 4/7
« Reply #11 on: April 10, 2018, 09:07:26 PM »
Has any one figured out the "Beasts of Beyond / Profile..." links yet? In developer tools it looks like this section changes it:

Code: [Select]
.breadcrumb > li > a {
color: #FFE1ED;
}

But when I try that nothing happens.

Also, @fab I see from your profile that your secondary hover in the navigation area is a different color so it worked for you, but every time I try to change it I'm still stuck with the default purple. How did you change that?
BEAUTY IS TERROR
premadescustom templatesstorage

Offline Snow-rion

Re: PROFILE CUSTOMIZATION GUIDE! - last updated 4/7
« Reply #12 on: April 11, 2018, 08:49:10 PM »
Code: [Select]
.YASM_wellwisher {
    font-size: 14px;
    padding: 12px 16px;
    background-color: #482D74;
    border-radius: 4px;
    border: 0px solid #482D74;
}

.YASM_wellwisher .YASM_border {
    border-bottom: 1px solid #2D1457;
}

if anyone needs the spoiler code
administrator of beasts of beyond!
characters - discord: star#0061

 

With Quick-Reply you can write a post when viewing a topic without loading a new page. You can still use bulletin board code and smileys as you would in a normal post.

Warning: this topic has not been posted in for at least 120 days.
Unless you're sure you want to reply, please consider starting a new topic.

Note: this post will not display until it's been approved by a moderator.
Name: Email:
Verification:
Type the letters shown in the picture
Listen to the letters / Request another image
Type the letters shown in the picture: