Customizable Pet Profile 07

Customizable Pet Profile 07

Last Updated: July 24 2022

Large Preview

Large Preview

See more examples in the gallery post below.

Description:
Please note that HTML is required to make this profile work. It is recommended that the HTML and story be above the CSS.


Code Explanation

Story/Description
This profile has the option to have multiple boxes or "pages" for the pet story/description.

Any text must be coded a specific way or the profile will not work as intended.

Here is a overview of how the story code should look:

<div id="sg_container">


<div id="one" class="sg_box">

Part 1

</div>

<div id="two" class="sg_box">


Part 2


</div>

</div>
There should only be one div with the id of sg_container in your code.

Each page of story that you need or want must go into a div with a class of sg_box and have an unique id. The id can be anything you want as long as there are no spaces. Each box must have a different id as this is what the navigation will be looking for.

Here is an example of multiple pages.

<div id="sg_container">


<div id="one" class="sg_box">


Hey this the first part of my story!


</div>


<div id="two" class="sg_box">


This is the second part of my story!


</div>


<div id="artwork" class="sg_box">


Here are some pictures of myself! Aren't I pretty?


</div>

<div id="credits" class="sg_box">



These are all the fine folks who made this possible!



</div>

</div>

Navigation

All the links for the navigation must be in the div with the id sg_nav. There should only be one.

Here is an overview on how the code should look using one link as an example:
<div id="sg_nav">

<div class="sg_link">


<div class="sg_tip">

Part 1

</div>


<a href="#one">

<i class="user icon"></i>

</a>

</div>

<div>




Hover/Tooltip

This is the part that appears when you hover over a link the navigation:


<div class="sg_tip">

Part 1

</div>

You can put anything in here, but it is recommended to keep it short, maybe a couple of words at most.


Navigation Link

This is the part where the unique ids chosen above come into play. For each link, the unique id you code will be the link code, with a # in front.

<a href="#one">

</a>

Navigation Link Icon

This is optional, if you do not want to use an icon, you can delete this from the code. You can check out the options here: Semantic Icons. NOTE: Not all icons work. You may want to test out the icon code on another pet profile.

<i class="user icon"></i>

In the above example, the icon that will appear will be User.



HTML Code



<!-- This is the side image, see CSS code -->

<div id="sg_image"></div>


<!-- This is the Navigation -->
<div id="sg_nav">
<div class="sg_link">
<div class="sg_tip">About</div>
<a href="#column_2"><i class="user icon"></i></a>
</div>

<div class="sg_link">
<div class="sg_tip">Stats</div>
<a href="#column_3"><i class="star icon"></i></a>
</div>

<div class="sg_link">
<div class="sg_tip">One</div>
<a href="#one"><i class="star icon"></i></a>
</div>

<div class="sg_link">
<div class="sg_tip">Two</div>
<a href="#two"><i class="star icon"></i></a>
</div>

<div class="sg_link">
<div class="sg_tip">Treasure</div>
<a href="#pet_treasure"><i class="star icon"></i></a>
</div>

<div class="sg_link">
<div class="sg_tip">Friends</div>
<a href="#pet_friends"><i class="star icon"></i></a>
</div>
</div>


<!-- This is the Story/Desc Pages -->
<div id="sg_container">
<div id="one" class="sg_box">
Part 1
</div>

<div id="two" class="sg_box">
Part 2
</div>
</div>


CSS Code
Pet Image & Info on the left - Navigation on the right.



<style>
/*  ==================================================

   Free customizable pet profile created by FallenSamurai
   Available at subetagraphics.proboards.com
   Do not remove credits

   ================================================== */




/*  ==================================================
   Google Fonts - Keep at top
   https://fonts.google.com
   ================================================== */


@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap");




/*  ==================================================
   Editing
   ================================================== */


/*  Background Image
   ================================================== */

#content {
 background-repeat: repeat;
 background-color: #000;
 background-image: url(URL HERE);
}




/*  Overall Font
   ================================================== */

#content {
 color: #7c939f;
 font-family: 'Open Sans', sans-serif;
}




/*  Links
   ================================================== */

a {
 color: #fd008a  !important;
}




/*  Background/Border behind pet info
   ================================================== */


/* Both border and background should be the same color */

div#pet_info, #pet_image {
 background-color: #042635;
 border-color: #042635;
}




/*  Info boxes
   ================================================== */


#column_3, .sg_box, #pet_treasure, #pet_friends {
 background-color: #0e1a20    !important;
}




/*  Pet Name
   ================================================== */


#column_2 h1 .pet_name {
 font-family: 'Dancing Script', cursive;
 color: #fc0090;
}

#column_2 h1 span.legacy-name {
 color: #7c939f !important;
}




/*  Pet Stats
   ================================================== */



/* Statbar background */

.statbar {
 background-color: #081419;
}


/* Statbar completion color */

.statbar div.stat {
 background-color: #9e0f4b;
}



/*  Header Image
   ================================================== */


div#sg_image {
 background-color: #040404;
 background-image: url(https://via.placeholder.com/800x200);
 background-size: cover;
 background-position: center center;
}




/*  Navigation
   ================================================== */




/* Circle Links */

div#sg_nav a {
 background-color: #0d181c;
 color: #b5b5b5 !important;
 outline: 5px solid rgba(255, 255, 255, 0.03);
}



/* Hover Tooltip */

.sg_tip {
 background: #990b45;
 text-transform: lowercase;
 letter-spacing: 2px;
 font-size: 10px;
 color: #fff;
}




/*  Minion & Spotlight
   ================================================== */


p.pet_spotlight {
 background-color: #0e1a20;
 color: inherit !important;
}

p.pet_spotlight a {
 color: inherit !important;
}

#column_1 {
 background-color: #0e1a20;
 color: inherit !important;
}



/*  ==================================================
   Credit
   
   DO NOT HIDE OR REMOVE CREDIT
   FOR COLOR COORDINATION ONLY

   ================================================== */


div#pet_info:after {
 text-transform: uppercase;
 background: #0e1a20;
 color: inherit;
}



/*  ==================================================
   CAUTION ! CAUTION ! CAUTION ! CAUTION ! CAUTION !  
   ==================================================

   Base Code

   The main code of the profile is below.
   Edit at your own risk.

   DO NOT REMOVE CREDITS.

   ==================================================
   CAUTION ! CAUTION ! CAUTION ! CAUTION ! CAUTION !  
   ================================================== */




/*  ==================================================
   Scrollbar Stuff
   ================================================== */


/* Works on Firefox */

* {
 scrollbar-width: thin;
}



/* Works on Chrome, Edge, and Safari */

*::-webkit-scrollbar {
 width: 8px;
}



/*  ==================================================
   Overall Page
   ================================================== */


#page {
 margin: 0px !important;
 padding: 0px !important;
 width: 100% !important;
}

#content {
 margin: 0px !important;
 padding: 0px !important;
 width: 100vw !important;
 height: 100vh !important;
 position: relative;
 overflow: inherit !important;
}

#header, #menu, #bookmarks, #events-bubble-wrapper,
#sidebar, #postcards {
 display: none !important;
}

div#pet_info {
 width: 800px !important;
 height: 384px !important;
 overflow: hidden !important;
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 margin: auto auto;
 min-width: unset !important;
 box-sizing: content-box;
 border-radius: 20px 20px 16px 16px;
 border-width: 216px 0 0 0;
 border-style: solid;
}



/*  ==================================================
   Column 1 (Minion) & Pet Spotlight
   ================================================== */


#column_1 {
 position: fixed;
 top: 582px;
 bottom: 0px;
 right: 658px;
 left: 0px;
 margin: auto auto !important;
 height: 20px;
 width: 100px;
 z-index: 2;
 font-size: 10px;
 justify-content: center;
 align-items: center;
 overflow: hidden;
 display: inline-block;
 transition: ease all 500ms;
 border-radius: 8px 8px 0 0;
 padding: 0px !important;
}
#column_1 h2 {
 display: none;
}
#column_1:before {
 content: 'minion';
 display: block;
 top: 19px;
 height: 20px;
 width: 100%;
 line-height: 20px;
 font-size: 10px;
 border-radius: inherit;
 opacity: 1 !important;
}

div#column_1:hover, p.pet_spotlight:hover {
 transform: translateY(-91px);
 height: 200px;
}

div#pet_minion br:nth-child(n+4) {
 display: none;
}

p.pet_spotlight {
 position: fixed;
 top: 582px;
 bottom: 0px;
 right: 444px;
 left: 0px;
 margin: auto auto !important;
 height: 20px;
 width: 100px;
 z-index: 2;
 font-size: 10px;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 overflow: hidden;
 display: inline-block;
 transition: ease all 500ms;
 border-radius: 8px 8px 0 0;
}
p.pet_spotlight:before {
 content: 'spotlight';
 display: block;
 top: 19px;
 height: 20px;
 width: 100%;
 line-height: 20px;
 font-size: 10px;
 border-radius: inherit;
 opacity: 1 !important;
}

p.pet_spotlight, div#pet_minion {
 box-sizing: border-box;
 padding: 0 4px 0 4px !important;
}



/*  ==================================================
   Column 2 (Pet Img, Name, Info)
   ================================================== */


div#column_2 {
 width: 216px !important;
 padding: 0 !important;
 box-sizing: border-box !important;
 position: fixed;
 height: 492px;
 top: 108px;
 bottom: 0px;
 left: 0px;
 z-index: 1;
 right: 552px;
 margin: auto auto !important;
}

#column_2 {
 padding: 0px !important;
 margin: 0px !important;
}
#column_2 br {
 display: none;
}

#column_2 h1 {
 background-color: transparent !important;
 width: 100%;
 padding: 16px 4px 32px 4px;
 box-sizing: border-box !important;
}
#column_2 h1 br {
 display: none;
}
#column_2 h1 .pet_name {
 font-family: 'Dancing Script', cursive;
 display: block;
}
#column_2 h1 span.legacy-name {
 font-size: 9px !important;
 display: block;
}
#column_2 h1 span.legacy-name b {
 font-weight: inherit !important;
 font-size: inherit !important;
 color: inherit !important;
}

.pet_color_info, .owner, .pet_age_info_date, .pet_wco_info_date {
 display: block;
 font-size: 10px;
 line-height: 16px;
}

p.pet_like {
 padding: 0px !important;
 margin: 0px !important;
 line-height: 33px;
}

#pet_image {
 width: 216px;
 height: 216px;
 overflow: hidden;
 padding: 0px !important;
 margin: 0px !important;
 background-repeat: no-repeat;
 background-position: center center;
 border-radius: 8px;
}



/*  ==================================================
   Column 3 (Stats)
   ================================================== */


#column_3 {
 background-color: #fff;
 overflow: auto;
 padding: 8px !important;
 margin: 0px !important;
 box-sizing: border-box;
 font-size: 10px !important;
 border-radius: 10px;
 border-width: 0px;
 border-style: solid;
}
#column_3 h2 {
 display: none;
}
#column_3 ul#pet_stats {
 padding: 0px !important;
 margin: 0px !important;
}
#column_3 br {
 display: none;
}

ul#pet_stats li {
 font-size: inherit;
 text-align: left;
 font-size: 10px;
 margin-bottom: 4px;
}

.statbar {
 width: 100%;
 height: 10px;
 border: 0px;
 margin: 4px 0;
 border-radius: 5px;
}

.statbar div.stat {
 height: inherit !important;
 border-radius: inherit !important;
}

.weapon_item {
 float: none;
 width: 100%;
 margin: 0 0 4px 0;
}

li#stat_books_read, li#stat_food_eaten, li#pet_employment {
 display: inline-block;
 width: 33%;
 text-align: center !important;
 padding-top: 4px;
}



/*  ==================================================
   Top Image
   ================================================== */


div#sg_image {
 left: 0px;
 top: -400px;
 height: 200px;
 width: 800px;
 position: fixed;
 z-index: 0;
 display: block;
 right: 0px;
 bottom: 0px;
 margin: auto;
 border-radius: 16px 16px 0 0;
}



/*  ==================================================
   Navigation
   ================================================== */


div#sg_nav {
 position: fixed;
 margin: auto !important;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 flex-direction: row;
 z-index: 99;
 top: -248px;
 height: 48px;
 right: 0px;
 left: 718px;
 bottom: 0px;
 width: 80px;
 border: 0px solid red;
 Border-radius: 0px;
 padding: 0px;
 box-sizing: border-box;
}

.sg_link {
 position: relative;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 margin: 8px;
}

.sg_tip {
 opacity: 0;
 position: absolute;
 width: auto;
 top: -50px;
 padding: 8px;
 border-radius: 4px;
 transition: ease-in all 600ms;
 font-family: 'Open Sans' !important;
}

.sg_link:hover .sg_tip {
 opacity: 1;
 transform: translateY(10px);
}

div#sg_nav a {
 width: 25px;
 height: 25px;
 margin: 0 4px 0 0;
 overflow: hidden;
 border-radius: 50%;
 display: inline-flex;
 font-size: 15px;
 justify-content: center;
 align-items: center;
 text-decoration: none;
}
div#sg_nav a i {
 padding: 0px;
 margin: 0px;
 opacity: 1 !important;
}

div#pet_info:after {
 content: 'Free Profile by FallenSamurai at subetagraphics.proboards.com';
 position: fixed;
 bottom: 0;
 top: 580px;
 height: 20px;
 line-height: 20px;
 text-align: center;
 width: 536px;
 right: 0;
 left: 232px;
 font-size: 9px;
 border-radius: 8px 8px 0 0;
 margin: auto auto;
}



/*  ==================================================
   Desc Boxes
   ================================================== */


div#sg_container {
 position: absolute;
 top: 0px;
 left: 248px;
 width: 536px;
 display: inline-block;
}

.sg_box {
 width: 536px;
 height: 348px;
 overflow: auto;
 text-align: justify;
 font-size: .7em;
 font-weight: 400;
 padding: 8px;
 margin: 0 0 100px 0;
 box-sizing: border-box;
 border-radius: 10px;
 border-width: 0px;
 border-style: solid;
 opacity: 1 !important;
}



/*  ==================================================
   Targets
   ================================================== */


#pet_treasure, #column_3, #pet_friends {
 position: absolute;
 top: -600px;
 left: 248px;
 width: 536px;
 height: 348px;
 z-index: 1;
}
#pet_treasure:target, #column_3:target, #pet_friends:target {
 top: 0px;
}



/*  ==================================================
   Treasure
   ================================================== */


#pet_treasure {
 overflow: auto;
 padding: 8px !important;
 margin: 0px !important;
 box-sizing: border-box;
 display: inline-flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-content: flex-start;
 border-radius: 10px;
 border-width: 0px;
 border-style: solid;
}
#pet_treasure h2 {
 display: none;
}

.treasure_item {
 width: 64px;
 float: none;
 text-align: center;
 display: inline-flex;
 justify-self: center;
 align-self: flex-start;
 padding: 8px;
}

div#pet_treasure br {
 display: none;
}



/*  ==================================================
   Friends
   ================================================== */


#pet_friends {
 overflow: auto;
 padding: 8px !important;
 margin: 0px !important;
 display: inline-flex;
 flex-direction: column;
 justify-items: center;
 box-sizing: border-box;
 font-size: 10px;
 border-radius: 10px;
 border-width: 0px;
 border-style: solid;
}
#pet_friends h2 {
 display: none;
}

.friend_div {
 border-radius: 5px;
 margin: 0 0 8px 0 !important;
 width: 100% !important;
 box-sizing: border-box;
 padding: 16px;
}

.friend_div a {
 margin: 0 16px 0 0;
 float: left !important;
}

.friend_div:nth-child(even) a {
 float: right !important;
 margin: 0 0 0 16px;
}



/*
Removes break between Pet Name and Image
Only use when Floating image left/right
*/


div.friend_div br:first-of-type {
 display: none;
}

</style>


Gallery

Large Preview

Large Preview