Customizable Pet Profile 01

Customizable Pet Profile 01

Large Preview


Large Preview

Series: Custom
Featuring: Whatever you want

Notes: There are two versions, a full profile and a profile without the stats. This is a fixed width profile.

Background image from upsplash


Directions:

To have the description as a fixed height, add the following:

#pet_desc {
height: ###px;
overflow: auto;
}

- Replace ### with the height you desire.



To have the treasure as a fixed height, add the following:

#pet_treasure {
height: ###px;
overflow: auto;
}

- Replace ### with the height you desire.



To have the friends as a fixed height, add the following:

#pet_friends {
height: ###px;
overflow: auto;
}

- Replace ### with the height you desire.



To change the link color:

Find:

a:link, a:visited, a:hover {
color: #35A1B6;
}

and replace #35A1B6 with your color choice.



To change the font color:

Find:

body {
width: 760px;
height: auto;
margin: 0 auto;
position: relative;
background: transparent;
margin-top: 50px;
margin-bottom: 50px;
font-size: 10px;
color: #545454;
}

Find color and replace #545454 with the color you want.



Stats:


To change the stat bar colors:

For the bar color, find:

.statbar div.stat {
background-color: #35a1b6;
height: 10px;
}

and replace #35A1B6 with your color choice.


For the star bar border color, find:

.statbar {
border: 0px solid #017d90;
}

and replace #017d90 with your color choice, and 0px for the thickness of the border.




Treasure:

To change the treasure item size:

Find:

.treasure_item img, .treasure_item {
width: 64px;
height: 64px;
}

and replace both 64px with your size of choice. Note: The items are naturally 64px and making them bigger will make them big and pixely.

To change the spacing of the treasure items:

Find:

treasure_item {
margin-right: 6px;
margin-bottom: 6px;
}

and choose what ever values you want.



Background:

Find:

html {
margin: auto !important;
width: 100%;
height: 100%;
background: url(http://i.imgur.com/GNDLBdK.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: green;
}



To change the background image:

Replace the link in background to the background you want. I would suggest a large image or wallpaper.



To use a repeating/tileing background image:

Replace with:

html {
margin: auto !important;
width: 100%;
height: 100%;
background: url(URL_TO_REPEATING/TILING_BACKGROUND) repeat fixed;
background-color: green;
}

Make sure to replace URL_TO_REPEATING/TILING_BACKGROUND with the link to your background.



To use a solid background color:

Replace with:

html {
margin: auto !important;
width: 100%;
height: 100%;
background-color: green;
}

Change green to what ever color you want. If you want a wide variety of colors use hex or rgb/rgba codes.




Legacy Names:



Change the Appearance

/* Change the appearance Legacy Name */

span.legacy-name {
   font-size: 14px !important;
   line-height: 14px;
   color: #000 !important;
}

/* Change the appearance of the bolded name
  Initially set to unbold name */

span.legacy-name b {
   font-weight: normal !important;
}

Removal

span.legacy-name { display: none;}

















Full Profile


<style>

/* A free Pet Profile created by FallenSamurai, avaliable at https://subetagraphics.proboards.com */



/* ------------------ Overall ------------------ */
html {
margin: auto !important;
width: 100%;
height: 100%;
background: url(http://i.imgur.com/GNDLBdK.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
background-color: green;
}


body {
width: 760px;
height: auto;
margin: 0 auto;
position: relative;
background: transparent;
margin-top: 50px;
margin-bottom: 50px;
font-size: 10px;
color: #545454;
}

h2, #header, #menu, #sidebar, #bookmarks, #footer, #postcards, #rightbg, #spacer, .pet_age_info_date, .pet_wco_info_date {
display:none;
}

a:link, a:visited, a:hover {
color: #35A1B6;
}

#content, #page {
height: auto !important;
background-color: rgba(255,255,255,1);
margin-left: 0px;
padding: 0px;
min-width: 100%;
}

#page {
background: transparent;
}

#pet_info {
width: auto;
padding: 25px 25px 0;
}


/* ------------------ DO NOT TOUCH ------------------ */
#content::after {
content: 'free profile by FallenSamurai @ subetagraphics.proboards.com';
font-size: 12px;
margin-left: 5px;
}
/* ------------------  END DO NOT TOUCH ------------------ */




/*  ------------------ Minion  ------------------ */

#column_1 {
width: 200px;
height: 163px;
margin: 0;
padding: 0;
font-size: 10px;
}


/*  ------------------ Pet Info  ------------------ */

#column_2 {
width: 290px;
}

.pet_name {
font-family: georgia;
}


/* Change the appearance Legacy Name */
span.legacy-name {
   font-size: 14px !important;
   line-height: 14px;
   color: #000 !important;
}

/* Change the appearance of the bolded name
  Initially set to unbold name */

span.legacy-name b {
   font-weight: normal !important;
}



.pet_color_info {
position: relative;
top: -15px;
}

.owner {
position: relative;
top: -15px;
}


#pet_image {
width: 250px;
height: 250px;
margin: 0 auto;
background-position: 50% 50%;
background-repeat: no-repeat;
}

/*  ------------------ Stats  ------------------ */

#column_3 {
width: 200px;
padding-top: 0px;
height: 325px;
font-size: 10px;
}


#pet_stats {
margin: 0px;
padding: 0px;
}


.statbar div.stat {
 background-color: #35a1b6;
 height: 10px;
}
.statbar {
 border: 0px solid #017d90;
}


/*  ------------------ Spotlight  ------------------ */


.pet_spotlight {
position: absolute;
left: 25px;
top: 176px;
width: 200px;
height: 163px;
padding-top: 10px;

}



/* ------------------ Pet Description ------------------ */


#pet_desc {
padding-bottom: 20px;
padding-top: 20px;

}


/* ------------------ Pet Treasure ------------------ */

#pet_treasure {
}

.treasure_item {
margin-right: 6px;
margin-bottom: 6px;
}

.treasure_item img, .treasure_item {
width: 64px;
height: 64px;
}


/* ------------------ Pet Friends ------------------ */


#pet_friends {
}

.friend_div {
display: block;
height: auto;
margin: 3px;
padding: 5px;
text-align: center;
width: 100px;
}


</style>



Profile sans Stats


<style>

/* A free Pet Profile created by FallenSamurai, avaliable at https://subetagraphics.proboards.com */

/* ------------------ Overall ------------------ */
html {
margin: auto !important;
width: 100%;
height: 100%;
background: url(http://i.imgur.com/GNDLBdK.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
background-color: green;
}


body {
width: 760px;
height: auto;
margin: 0 auto;
position: relative;
background: transparent;
margin-top: 50px;
margin-bottom: 50px;
font-size: 10px;
color: #545454;
}

h2, #header, #menu, #sidebar, #bookmarks, #footer, #postcards, #rightbg, #spacer, .pet_age_info_date, .pet_wco_info_date {
display:none;
}

a:link, a:visited, a:hover {
color: #35A1B6;
}

#content, #page {
height: auto !important;
background-color: rgba(255,255,255,1);
margin-left: 0px;
padding: 0px;
min-width: 100%;
}

#page {
background: transparent;
}

#pet_info {
width: auto;
padding: 25px 25px 0;
}


/* ------------------ DO NOT TOUCH ------------------ */
#content::after {
content: 'free profile by FallenSamurai @ subetagraphics.proboards.com';
font-size: 12px;
margin-left: 5px;
}
/* ------------------  END DO NOT TOUCH ------------------ */




/*  ------------------ Minion  ------------------ */

#column_1 {
width: 200px;
height: 163px;
margin: 0;
padding: 0;
font-size: 10px;
}


/*  ------------------ Pet Info  ------------------ */

#column_2 {
width: 290px;
}

.pet_name {
font-family: georgia;
}

/* Change the appearance Legacy Name */
span.legacy-name {
   font-size: 14px !important;
   line-height: 14px;
   color: #000 !important;
}

/* Change the appearance of the bolded name
  Initially set to unbold name */

span.legacy-name b {
   font-weight: normal !important;
}

.pet_color_info {
position: relative;
top: -15px;
}

.owner {
position: relative;
top: -15px;
}


#pet_image {
width: 250px;
height: 250px;
margin: 0 auto;
background-position: 50% 50%;
background-repeat: no-repeat;
}

/*  ------------------ Stats  ------------------ */

#column_3 {
display:none;
}


/*  ------------------ Spotlight  ------------------ */


.pet_spotlight {
position: absolute;
left: 525px;
top: 15px;
width: 210px;
height: 163px;
padding-top: 20px;
font-size: 10px;

}



/* ------------------ Pet Description ------------------ */


#pet_desc {
padding-bottom: 20px;
padding-top: 20px;
}


/* ------------------ Pet Treasure ------------------ */

#pet_treasure {
}

.treasure_item {
margin-right: 6px;
margin-bottom: 6px;
}

.treasure_item img, .treasure_item {
width: 64px;
height: 64px;
}


/* ------------------ Pet Friends ------------------ */


#pet_friends {
}

.friend_div {
display: block;
height: auto;
margin: 3px;
padding: 5px;
text-align: center;
width: 100px;
}


</style>



I tried this on my test board but it doesn't seem to work:

turtletestforum.freeforums.net/page/pet

Also, the 'highlight code' button doesn't work.

turtle

This is not a proboards code, this is for Subeta.net

Ah ok, np.

Tried adding a description into the code but it doesn't work. Where do I put it at?

Stray, you can put the description above or below the CSS code. Personally I would put the description above the CSS. There is no special code that you need for the description.

Hello! Thank you very much for sharing this profile! I love it!
I have a question. Can I modify the code so that it shows the Born and Adopted dates? I will still leave credit for your work, of course.
Thanks in advance!

@ Mage
I do not mind, go ahead.

Thank you!

Hi there, I was wondering if it's possible to change the credit to a credit link so it's shorter on the pet profile. If not, that's alright too. ALso, I'm having a little trouble writing my pet description. It doesn't show on the profile. I don't know if I'm writing in the correct spot or not :$

Thanks in advance !

Hi @muffin! I think you have to write the pet's dresription on top of the pet profile code. It would look something like this:


***Pet description here***


<style>

/* A free Pet Profile created by FallenSamurai, avaliable at subetagraphics.proboards.com */

/* ------------------ Overall ------------------ */
html {
margin: auto !important;
width: 100%;
height: 100%;
background: url(http://i.imgur.com/GNDLBdK.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: green;
}


(profile code continues here...)


</style>


I hope this helps! C:

Jul 11, 2016 16:00:35 GMT -5 Muffin said:

Hi there, I was wondering if it's possible to change the credit to a credit link so it's shorter on the pet profile. If not, that's alright too. ALso, I'm having a little trouble writing my pet description. It doesn't show on the profile. I don't know if I'm writing in the correct spot or not :$

Thanks in advance !

Please do not modify the credit.

Make sure you are not writing your description in the <style></style> tags.

Thanks for such an awesome premade! I wanted to edit the pet treasure, specifically how many items are shown per row. I was thinking 6 items per row, and also to have the treasure section centered and with bigger margins just on the sides of where the treasure is. Any coding tips to do this?

Fantastic profile! I've been using it for a while, and now I'm wondering if there's a way to adjust the transparency level of the main body of information (so that more of the background is visible).

sunegami

Sure, look for:


#content, #page {
   height: auto !important;
   background-color: rgba(255,255,255,0.5);
   margin-left: 0px;
   padding: 0px;
   min-width: 100%;
}


Then look at the property background color. This is an rgba value for white. The fourth value is the opacity. Select a value between 0 and 1 to change the opacity level. For example a value of 0.5 is basically 50% opacity, rgba(255,255,255,0.5).