Post by FallenSamurai on Mar 9, 2022 11:38:42 GMT -5
Customizable User Profile 02
Last Updated: March 9 2022
Description:
Small 1 column customizable user profile. There are two options, a left image or right image. No HTML needed.
Before you Start:
This is a 1 column profile. All content not in column 1, which is the left-most column, will be hidden by the code.
You will also need to have the Profile section. If this section is missing, the code will not show up.
Profile Dashboard:
When you are ready to paste in the code, navigate to your dashboard and click on the profile tab. Here is a handy link
Instructions:
Instructions are in the CSS. If any thing is not explained properly, feel free to contact me.
Left Image CSS:
<style>
/*===================================================================
=====================================================================
Free User Profile by FallenSamurai
Available at https://subetagraphics.proboards.com/
Last updated: March 9 2022
=====================================================================
===================================================================*/
/*===================================================================
Side Image
===================================================================*/
div#overall:before {
background-color: #000;
background-image: url(https://i.imgur.com/167Om9X.gif);
background-size: cover;
background-position: center center;
}
/*===================================================================
Overall
===================================================================*/
/*Font Size & Color*/
body {
font-size: 10px;
color: #5f5f5f !important;
}
/*Link color, weight, decoration, & hover color*/
a:link, a:visited {
color: #8cbd58;
font-weight: bold;
text-decoration: none;
}
a:link:hover, a:visited:hover {
color: #538320 !important;
}
/*===================================================================
Navigation
===================================================================*/
/*Nav background & font color and size*/
div#navigation {
font-weight: normal;
background-color: #919191;
color: #fff;
text-transform: uppercase;
font-size: 10px;
}
/*Nav link color*/
div#navigation a {
color: #fff;
text-decoration: none !important;
}
/*===================================================================
Side Box
===================================================================*/
ul#column1 {
background: #e4e4e4;
border-color: #cdcdcd;
}
/*===================================================================
Info Boxes
===================================================================*/
div.header, ul li.block {
border-color: #cdcdcd;
}
div.header {
background-color: #f3f3f3;
font-size: 11px;
line-height: 11px;
color: #727272;
}
#column1 table.info_block {
background: #F5F5F5 !important;
color: #5f5f5f;
}
/*===================================================================
Comment Box
===================================================================*/
.textbox {
border: 0px;
background-color: rgba(0, 0, 0, 0.05);
}
.forminput {
border: 0px;
background-color: #919191;
color: white;
text-transform: lowercase;
}
/*===================================================================
Credits
NOTE: This is only for formatting the credit box to match the
theme/colors you pick for the profile. DO NOT REMOVE OR HIDE.
===================================================================*/
div#overall:after {
background: #e4e4e4;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
color: #979797;
border: 1px solid #cdcdcd;
}
/*=====================================================================
DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !!
=====================================================================
=====================================================================
DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !!
=====================================================================
Below is the base code of the profile.
Do not edit anything below this warning.
Edit at your own risk.
DO NOT REMOVE ANY CREDITS.
=====================================================================
DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !!
=====================================================================
=====================================================================
DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !!
=====================================================================*/
/*=====================================================================
Scrollbar Stuff
Makes the scrollbar vanish.
=====================================================================*/
* {
scrollbar-width: thin;
}
*::-webkit-scrollbar {
width: 0px;
}
/*=====================================================================
General Stuff
=====================================================================*/
body {
width: 100vw;
HEIGHT: 100vh;
margin: auto auto;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
.column {
margin: 0 !important;
padding: 0 !important;
}
div#navigation {
background-image: none !important;
border: 0px;
padding: 0px;
text-align: center;
padding: 8px 0;
text-shadow: none;
text-transform: uppercase;
font-family: open sans;
text-decoration: none;
}
#overall {
position: absolute;
width: 600px;
height: 300px;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto auto;
box-sizing: border-box;
}
div#overall:before {
content: '';
width: 300px;
height: 300px;
position: absolute;
left: 0px;
background-repeat: no-repeat;
}
.div_float {
float: none;
position: relative;
}
ul#column1 {
width: 300px;
left: 300px;
position: absolute;
overflow-x: hidden;
height: 300px;
overflow-y: auto;
padding: 4px !important;
border-width: 1px 1px 1px 0;
border-style: solid;
}
ul#column2, ul#column3 {
display: none;
}
ul li.block {
padding: 0px !important;
border-radius: 0px !important;
border-width: 1px !important;
border-style: solid;
}
div.header {
background-image: none;
border-width: 0px;
padding: 8px !important;
font-weight: normal;
height: 100% !important;
border-style: solid;
border-width: 0 0 1px 0;
}
#column1 table.info_block {
margin: 0px !important;
padding: 12px !important;
display: inline-block;
}
/*========================================================================
Comments Reformating
========================================================================*/
div#column1_comments .info_block {
display: none;
}
.comment_table {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
width: unset !important;
background-image: none;
display: inline-block;
padding: 12px !important;
}
#all_comments {
border: 0px !important;
padding-top: 10px;
line-height: 20px;
text-align: center;
}
.comment_table tr {
width: 100%;
}
.comment_text img {
position: relative;
width: 100%;
}
.comment_info {
background-color: transparent;
width: 30% !important;
text-align: center;
}
.ui.image.circular {
margin: 0 auto;
width: 60px !important;
height: 60px !important;
border-radius: 30px;
}
.comment_text {
display: inline-block;
width: unset !important;
margin: 0 0 0 12px !important;
}
table#content_comment tbody, table#content_comment tr, table#content_comment td, table#content_comment form, table#content_userinfo2 tbody, table#content_userinfo2 tr, table#content_userinfo2 td, table#content_userinfo2 form {
display: inline-block !important;
width: 100% !important;
}
.textbox {
width: 100% !important;
margin: 0 auto !important;
margin-bottom: 5px !important;
padding: 5px;
box-sizing: border-box;
}
.forminput {
width: 100% !important;
font-weight: normal;
}
.data {
width: initial !important;
}
.data .avatar_head {
margin: 0 auto;
border: 0px;
border-radius: 30px;
}
/*=========================================================================
Friend Reformat
=========================================================================*/
#content_friends tbody {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#content_friends tr {
display: inherit !important;
width: 100% !important;
}
#content_friends td.data {
width: 100% !important;
}
#content_friends .ui.image.circular {
width: 100% !important;
max-width: 64px !important;
min-width: 25px !important;
border-radius: 30px !important;
}
/*=========================================================================
Credits - Do Not Remove
=========================================================================*/
div#overall:after {
content: 'Free Profile by FallenSamurai at Subetagraphics.proboards.com';
position: absolute;
bottom: -30px;
width: 600px;
height: auto;
padding: 4px;
box-sizing: border-box;
font-size: 8px;
}
/*=========================================================================
Medals Reformat
=========================================================================*/
#content_medals tbody {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#content_medals tr {
display: inherit !important;
width: 100% !important;
}
#content_medals td.data {
width: 100% !important;
margin: 2%;
}
#content_medals .data img {
width: 100% !important;
max-width: 64px !important;
min-width: 25px !important;
}
/*=========================================================================
Wishlist Reformat
=========================================================================*/
#content_wishlist tbody {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#content_wishlist tr {
display: inherit !important;
width: 100% !important;
}
#content_wishlist td.wishlist_item {
width: 100% !important;
margin: 2%;
}
#content_wishlist .wishlist_item img {
width: 100% !important;
max-width: 64px !important;
min-width: 25px !important;
}
/*=========================================================================
Stickers Reformat
=========================================================================*/
#content_wishlist tbody {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#content_wishlist tr {
display: inherit !important;
width: 100% !important;
}
#content_wishlist td.wishlist_item {
width: 100% !important;
margin: 2%;
}
#content_wishlist .wishlist_item img {
width: 100% !important;
max-width: 64px !important;
min-width: 25px !important;
}
#content_stickers tbody {
display: flex !important;
justify-content: center;
flex-wrap: wrap;
}
#content_stickers tr {
display: inherit !important;
width: 100% !important;
}
table#content_stickers td.data {
flex-basis: auto;
width: inherit !important;
margin: 5%;
}
#content_stickers .data img {
min-width: 25px;
width: 100%;
max-width: 64px;
}
/*=========================================================================
Attempted Video Reformat
=========================================================================*/
table#content_multimedia {
display: none !important;
margin: 0px;
padding: 0px;
height: 0px;
}
iframe {
border: none;
padding: 12px;
width: 100%;
}
table#content_options tbody, table#content_options tr, table#content_options td, table#content_options form {
display: inline-block !important;
width: 100% !important;
}
div.user-options {
text-align: center;
}
div.user-options a {
text-align: center;
}
div.user-options a img {
margin: 0 8px;
}
table#content_shops tbody, table#content_shops tr {
display: inline-flex !important;
width: 100%;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
}
table#content_shops td {
margin: 4px;
}
/*
========================================================================
Toolbar/Editing Reformating
========================================================================
*/
div#toolbar_return {
height: 0px !important;
}
#toolbox {
position: fixed !important;
z-index: 1 !important;
margin: 4px auto !important;
background-image: none !important;
max-width: 100vw !important;
min-width: fit-content;
padding: 10px 0 !important;
border: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-image: none;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
/* max-width: max-content; */
/* display: table-column-group; */
box-sizing: content-box;
}
.modal-content {
max-width: 90% !important;
}
.modal-dialog {
max-width: 80% !important;
}
.toolbox_button {
width: 20%;
background-color: #ebebeb;
font-weight: bold !important;
margin-top: 5px !important;
color: black;
border: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
input, textarea, select {
border: 0px !important;
font-family: Helvetica,Verdana,Arial,sans-serif !important;
font-size: 13px;
letter-spacing: 1px;
font-weight: 100 !important;
/*box-sizing: content-box;*/
padding: 4px;
background-color: #ebebeb;
}
div#toolbar_return {
height: 0px;
margin: 0 auto !important;
position: fixed !important;
z-index: 2;
top: 100px;
}
.updated_text {
position: relative !important;
width: 100% !important;
margin: 0 auto !important;
/*left: 50%;*/
/*right: 50%;*/
/*font-weight: bold !important;*/
border: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-image: none;
color: #333;
background-color: rgba(255, 255, 255, 0);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0);
}
.updated_text form input[type='submit'] {
color: #1d1d1d !important;
box-sizing: border-box;
width: 100% !important;
text-transform: uppercase;
margin: 0px !important;
margin-top: 5px !important;
}
.updated_text form {
font-weight: normal;
}
.updated_text form input[type='radio'] {
width: initial !important;
}
.updated_text form input[type='submit'].toolbox_button {
width: 49% !important;
margin: 0.5% !important;
text-decoration: none !important;
text-transform: inherit !important;
font-weight: normal !important;
}
</style>Right Image CSS:
<style>
/*===================================================================
/////////////////////////////////////////////////////////////////////
=====================================================================
Free User Profile by FallenSamurai
Available at https://subetagraphics.proboards.com/
Last updated: March 9 2022
=====================================================================
/////////////////////////////////////////////////////////////////////
===================================================================*/
/*===================================================================
Side Image
===================================================================*/
div#overall:before {
background-color: #000;
background-image: url(https://i.imgur.com/167Om9X.gif);
background-size: cover;
background-position: center center;
}
/*===================================================================
Overall
===================================================================*/
/*Font Size & Color*/
body {
font-size: 10px;
color: #5f5f5f !important;
}
/*Link color, weight, decoration, & hover color*/
a:link, a:visited {
color: #8cbd58;
font-weight: bold;
text-decoration: none;
}
a:link:hover, a:visited:hover {
color: #538320 !important;
}
/*===================================================================
Navigation
===================================================================*/
/*Nav background & font color and size*/
div#navigation {
font-weight: normal;
background-color: #919191;
color: #fff;
text-transform: uppercase;
font-size: 10px;
}
/*Nav link color*/
div#navigation a {
color: #fff;
text-decoration: none !important;
}
/*===================================================================
Side Box
===================================================================*/
ul#column1 {
background: #e4e4e4;
border-color: #cdcdcd;
}
/*===================================================================
Info Boxes
===================================================================*/
div.header, ul li.block {
border-color: #cdcdcd;
}
div.header {
background-color: #f3f3f3;
font-size: 11px;
line-height: 11px;
color: #727272;
}
#column1 table.info_block {
background: #F5F5F5 !important;
color: #5f5f5f;
}
/*===================================================================
Comment Box
===================================================================*/
.textbox {
border: 0px;
background-color: rgba(0, 0, 0, 0.05);
}
.forminput {
border: 0px;
background-color: #919191;
color: white;
text-transform: lowercase;
}
/*===================================================================
Credits
NOTE: This is only for formatting the credit box to match the
theme/colors you pick for the profile. DO NOT REMOVE OR HIDE.
===================================================================*/
div#overall:after {
background: #e4e4e4;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
color: #979797;
border: 1px solid #cdcdcd;
}
/*===================================================================
DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !!
=====================================================================
=====================================================================
DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !!
=====================================================================
Below is the base code of the profile.
Do not edit anything below this warning.
Edit at your own risk.
DO NOT REMOVE ANY CREDITS.
=====================================================================
DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !!
=====================================================================
=====================================================================
DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !! DANGER !!
===================================================================*/
/*=====================================================================
Scrollbar Stuff
Makes the scrollbar vanish.
=====================================================================*/
* {
scrollbar-width: thin;
}
*::-webkit-scrollbar {
width: 0px;
}
/*=====================================================================
General Stuff
=====================================================================*/
body {
width: 100vw;
HEIGHT: 100vh;
margin: auto auto;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
.column {
margin: 0 !important;
padding: 0 !important;
}
div#navigation {
background-image: none !important;
border: 0px;
padding: 0px;
text-align: center;
padding: 8px 0;
text-shadow: none;
text-transform: uppercase;
font-family: open sans;
text-decoration: none;
}
#overall {
position: absolute;
width: 600px;
height: 300px;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto auto;
box-sizing: border-box;
}
div#overall:before {
content: '';
width: 300px;
height: 300px;
position: absolute;
right: 0px;
background-repeat: no-repeat;
}
.div_float {
float: none;
position: relative;
}
ul#column1 {
width: 300px;
left: 0px;
position: absolute;
overflow-x: hidden;
height: 300px;
overflow-y: auto;
padding: 4px !important;
border-width: 1px 0 1px 1px;
border-style: solid;
}
ul#column2, ul#column3 {
display: none;
}
ul li.block {
padding: 0px !important;
border-radius: 0px !important;
border-width: 1px !important;
border-style: solid;
}
div.header {
background-image: none;
border-width: 0px;
padding: 8px !important;
font-weight: normal;
height: 100% !important;
border-style: solid;
border-width: 0 0 1px 0;
}
#column1 table.info_block {
margin: 0px !important;
padding: 12px !important;
display: inline-block;
}
/*========================================================================
Comments Reformating
========================================================================*/
div#column1_comments .info_block {
display: none;
}
.comment_table {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
width: unset !important;
background-image: none;
display: inline-block;
padding: 12px !important;
}
#all_comments {
border: 0px !important;
padding-top: 10px;
line-height: 20px;
text-align: center;
}
.comment_table tr {
width: 100%;
}
.comment_text img {
position: relative;
width: 100%;
}
.comment_info {
background-color: transparent;
width: 30% !important;
text-align: center;
}
.ui.image.circular {
margin: 0 auto;
width: 60px !important;
height: 60px !important;
border-radius: 30px;
}
.comment_text {
display: inline-block;
width: unset !important;
margin: 0 0 0 12px !important;
}
table#content_comment tbody, table#content_comment tr, table#content_comment td, table#content_comment form, table#content_userinfo2 tbody, table#content_userinfo2 tr, table#content_userinfo2 td, table#content_userinfo2 form {
display: inline-block !important;
width: 100% !important;
}
.textbox {
width: 100% !important;
margin: 0 auto !important;
margin-bottom: 5px !important;
padding: 5px;
box-sizing: border-box;
}
.forminput {
width: 100% !important;
border: 0px;
font-weight: normal;
}
.data {
width: initial !important;
}
.data .avatar_head {
margin: 0 auto;
border: 0px;
border-radius: 30px;
}
/*=========================================================================
Friend Reformat
=========================================================================*/
#content_friends tbody {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#content_friends tr {
display: inherit !important;
width: 100% !important;
}
#content_friends td.data {
width: 100% !important;
}
#content_friends .ui.image.circular {
width: 100% !important;
max-width: 64px !important;
min-width: 25px !important;
border-radius: 30px !important;
}
/*=========================================================================
Credits - Do Not Remove
=========================================================================*/
div#overall:after {
content: 'Free Profile by FallenSamurai at Subetagraphics.proboards.com';
position: absolute;
bottom: -30px;
width: 600px;
height: auto;
padding: 4px;
box-sizing: border-box;
font-size: 8px;
}
/*=========================================================================
Medals Reformat
=========================================================================*/
#content_medals tbody {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#content_medals tr {
display: inherit !important;
width: 100% !important;
}
#content_medals td.data {
width: 100% !important;
margin: 2%;
}
#content_medals .data img {
width: 100% !important;
max-width: 64px !important;
min-width: 25px !important;
}
/*=========================================================================
Wishlist Reformat
=========================================================================
*/
#content_wishlist tbody {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#content_wishlist tr {
display: inherit !important;
width: 100% !important;
}
#content_wishlist td.wishlist_item {
width: 100% !important;
margin: 2%;
}
#content_wishlist .wishlist_item img {
width: 100% !important;
max-width: 64px !important;
min-width: 25px !important;
}
/*=========================================================================
Stickers Reformat
=========================================================================*/
#content_wishlist tbody {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#content_wishlist tr {
display: inherit !important;
width: 100% !important;
}
#content_wishlist td.wishlist_item {
width: 100% !important;
margin: 2%;
}
#content_wishlist .wishlist_item img {
width: 100% !important;
max-width: 64px !important;
min-width: 25px !important;
}
#content_stickers tbody {
display: flex !important;
justify-content: center;
flex-wrap: wrap;
}
#content_stickers tr {
display: inherit !important;
width: 100% !important;
}
table#content_stickers td.data {
flex-basis: auto;
width: inherit !important;
margin: 5%;
}
#content_stickers .data img {
min-width: 25px;
width: 100%;
max-width: 64px;
}
/*=========================================================================
Attempted Video Reformat
=========================================================================*/
table#content_multimedia {
display: none !important;
margin: 0px;
padding: 0px;
height: 0px;
}
iframe {
border: none;
padding: 12px;
width: 100%;
}
table#content_options tbody, table#content_options tr, table#content_options td, table#content_options form {
display: inline-block !important;
width: 100% !important;
}
div.user-options {
text-align: center;
}
div.user-options a {
text-align: center;
}
div.user-options a img {
margin: 0 8px;
}
table#content_shops tbody, table#content_shops tr {
display: inline-flex !important;
width: 100%;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
}
table#content_shops td {
margin: 4px;
}
/*
========================================================================
Toolbar/Editing Reformating
========================================================================
*/
div#toolbar_return {
height: 0px !important;
}
#toolbox {
position: fixed !important;
z-index: 1 !important;
margin: 4px auto !important;
background-image: none !important;
max-width: 100vw !important;
min-width: fit-content;
padding: 10px 0 !important;
border: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-image: none;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
/* max-width: max-content; */
/* display: table-column-group; */
box-sizing: content-box;
}
.modal-content {
max-width: 90% !important;
}
.modal-dialog {
max-width: 80% !important;
}
.toolbox_button {
width: 20%;
background-color: #ebebeb;
font-weight: bold !important;
margin-top: 5px !important;
color: black;
border: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
input, textarea, select {
border: 0px !important;
font-family: Helvetica,Verdana,Arial,sans-serif !important;
font-size: 13px;
letter-spacing: 1px;
font-weight: 100 !important;
/*box-sizing: content-box;*/
padding: 4px;
background-color: #ebebeb;
}
div#toolbar_return {
height: 0px;
margin: 0 auto !important;
position: fixed !important;
z-index: 2;
top: 100px;
}
.updated_text {
position: relative !important;
width: 100% !important;
margin: 0 auto !important;
/*left: 50%;*/
/*right: 50%;*/
/*font-weight: bold !important;*/
border: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-image: none;
color: #333;
background-color: rgba(255, 255, 255, 0);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0);
}
.updated_text form input[type='submit'] {
color: #1d1d1d !important;
box-sizing: border-box;
width: 100% !important;
text-transform: uppercase;
margin: 0px !important;
margin-top: 5px !important;
}
.updated_text form {
font-weight: normal;
}
.updated_text form input[type='radio'] {
width: initial !important;
}
.updated_text form input[type='submit'].toolbox_button {
width: 49% !important;
margin: 0.5% !important;
text-decoration: none !important;
text-transform: inherit !important;
font-weight: normal !important;
}
</style>
