Post by FallenSamurai on Aug 17, 2018 19:41:11 GMT -5
Customizable Pet Profile 02
Last Updated: July 29, 2020
Description:
This started out as a challenge to my self. I had an idea and wanted to know if it was possible. It was, but it was painful. This pet profile uses CSS Grid with a splash of flexbox.
I have rearranged the code so that sections that can be edited are at the top. I do not recommend editing anything below these codes.
Legacy Names
<style>
/* --------------------------------
-----------------------------------
A free Pet Profile created by FallenSamurai,
avaliable at https://subetagraphics.proboards.com
This profile uses both flexbox and grid.
-----------------------------------
---------------------------------*/
/* --------------------------------
-----------------------------------
Editable Sections
-----------------------------------
---------------------------------*/
/* Background color or image */
body {
background-color: #a2a2a2;
background-image: url(https://imgur.com/ZiuzkDp.png);
background-size: cover;
}
/* Links */
a {
color: #004AAD !important;
}
/* Change the appearance of the profile*/
#pet_info {
width: 60% !important;
background-color: white !important;
/*outline: 8px solid rgba(255, 255, 255, 0.32);*/
box-shadow: 0 0 12px 0px #151515;
border-radius: 8px;
border: 8px solid #fff;
}
/* Pet Minion */
div#column_1 {
font-size: 10px !important;
}
/* Pet Info */
div#column_2 {
font-size: 10px !important;
}
/* Pet Stat Bar Background Color*/
.statbar {
background-color: #cacaca;
}
/* Pet Stat Completion Bar Background Color*/
.statbar div.stat {
background-color: #000;
}
/* Font size for the description*/
div#pet_desc {
font-size: 12px;
}
/* Change the size of the items in the treasure */
div.treasure_item {
width: 64px !important;
}
/* --------------------------------
Legacy Name
---------------------------------*/
/*Change the Legacy Name: appearance*/
span.legacy-name {
font-size: 10px !important;
color: #000 !important;
font-weight: normal !important;
}
/*Change the Pet's Name Appearance*/
span.legacy-name b {
font-weight: bold;
}
/* --------------------------------
CAUTION *** CAUTION *** CAUTION ***
-----------------------------------
Below is all the code that makes everything work.
Edit at your own risk.
-----------------------------------
CAUTION *** CAUTION *** CAUTION ***
---------------------------------*/
/* --------------------------------
-----------------------------------
Remove Formatting
-----------------------------------
---------------------------------*/
body {
background-color: #fff;
}
#postcards {display: none;}
#header {display:none;}
#menu {display:none;}
#sidebar {display: none;}
#bookmarks {display: none}
#rightbg {display: none; }
.hustler {display: none;}
#page {
position: initial !important;
margin: 0 !important;
width: 100% !important;
}
#content {
margin: 0 !important;
padding: 0px !important;
position: initial !important;
zoom: initial !important;
background-color: transparent !important;
}
#pet_info {
/*width: 100% !important;*/
}
#pet_info div {
padding: 0 !important;
margin: 0;
}
/* --------------------------------
-----------------------------------
Main Structure
-----------------------------------
---------------------------------*/
body {
/*background-color: #a2a2a2;*/
/*background-image: url(https://imgur.com/ZiuzkDp.png);*/
/*background-size: cover;*/
}
a {
/*color: #004AAD !important;*/
}
#main-content {
background: none;
}
div#content {
display: block;
height: 100vh !important;
}
.container-fluid {
display: grid;
height: 100vh;
place-content: center;
box-sizing: content-box;
}
#pet_info {
/*width: 60% !important;*/
display: inline-grid;
position: relative;
/*background-color: white !important;*/
grid-template-columns: 100px 100px auto 15%;
grid-template-rows: 200px 75px 125px 150px;
/*outline: 8px solid rgba(255, 255, 255, 0.32);*/
/*box-shadow: 0 0 12px 0px #151515;*/
/*background-color: white;*/
/*border-radius: 8px; */
/*border: 8px solid #fff;*/
}
div#column_1 {
position: relative;
grid-column: 1;
grid-row: 4;
padding: 0px;
/* box-sizing: content-box; */
width: 100px;
margin: 0px;
justify-self: center;
align-self: start;
background-color: transparent;
/*font-size: 10px;*/
}
div#column_1 h2, div#column_1 br{ display: none; }
div#column_1 #pet_minion br {
display: block;
}
div#column_2 {
display: inline-grid;
grid-template-columns: 100px 100px;
grid-template-rows: 200px 24px 16px 16px 19px 125px 200px;
/*font-size: 10px !important;*/
}
div#pet_image {
grid-column: 1;
grid-row: 1;
}
#column_2 h1 {
grid-column: 1 /span 2;
grid-row: 2;
}
span.pet_color_info {
grid-column: 1 /span 2;
grid-row: 3;
}
span.owner {
grid-column: 1 /span 2;
grid-row: 4;
}
p.pet_wco_info {
/* grid-column: 1 /span 2; */
/* grid-row: 6; */
}
.pet_age_info, .pet_wco_info {
display: none;
}
p.pet_age_info_date {
grid-column: 1 /span 2;
grid-row: 5;
display: none;
}
p.pet_wco_info_date {
grid-column: 1 /span 2;
grid-row: 6;
display: none;
}
p.pet_like {
grid-column: 1 /span 2;
grid-row: 5;
padding: 0px;
margin: 0px;
}
p.pet_spotlight {
grid-row: 7;
grid-column: 2;
width: 100px;
padding: 0px;
margin: 0px;
}
/* DO NOT REMOVE */
div#pet_info:after {
content: 'Free Profile by FallenSamurai at subetagraphics.proboards.com';
display: grid;
grid-row: 5;
padding: 5px;
width: 100%;
background-color: #e6e6e6;
box-sizing: border-box;
grid-column: 1 /span 4;
font-size: 11px;
text-align: right;
margin-top: 8px;
}
/* DO NOT REMOVE */
div#column_3 {
display: flex;
grid-column: 1 /span 2;
grid-row: 3;
padding: 0px;
margin: 0px;
width: 100%;
flex-wrap: wrap;
justify-content: center;
}
#column_3 h2 {
display: none;
line-height: 0px;
}
#column_3 br {
display: none;
}
#column_3 ul {
padding: 0!important;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
margin: 0px;
}
#column_3 a {font-size: 10px;}
#pet_info li {
list-style: none;
width: 50%;
line-height: 1.5em;
font-size: 10px;
display: inline-block;
margin: 0px;
padding: 2px 0px;
}
div.statbar {
width: 90%;
height: 2px;
margin: 0px auto !important;
}
.statbar {
position: relative;
/*background-color: #cacaca;*/
border: 0px;
}
div.stat {
height: 100% !important;
}
.statbar div.stat {
/*background-color: #000;*/
height: 10px;
}
div#pet_desc {
grid-row: 1 /span 4;
overflow: auto;
min-height: max-content;
grid-column: 3;
box-sizing: border-box;
padding: 0;
margin: 0 12px;
/*font-size: 12px;*/
}
div#pet_treasure {
grid-row: 1 /span 4;
grid-column: 4;
overflow-y: auto;
padding: 4px;
box-sizing: content-box;
overflow-x: hidden;
display: inline-flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
align-content: start;
}
div.treasure_item {
display: inline-block;
/*width: 64px !important;*/
float: none;
height: fit-content !important;
}
div#pet_treasure h2 {
display: none;
}
div#pet_friends {
display: none;
}
/* Scrollbars */
div#pet_treasure, div#pet_desc {
padding-right: 17px !important;
overflow-x: hidden;
overflow-y: hidden;
}
div#pet_treasure:hover, div#pet_desc:hover {
padding-right: 0px !important;
overflow-y: auto;
}
/*Legacy Name*/
h1 br {
display: none; /*Removes the line break in the h1*/
}
span.legacy-name {
position: absolute;
bottom: 2px;
left: 0px;
margin: 0px 4px;
display: block;
min-width: 200px;
box-sizing: content-box;
text-align: left;
}
</style>