BREAD's Ownership
Please read the Characters FAQ for further information on permissions and original ownership!
Creator
Character Permissions
Cannot be transferred for any reason.
Design Terms of Use
SOTOMO Global Rules
/*************************************************************
background pattern
*************************************************************/
body { background: url(https://thumbs.gfycat.com/ChubbyNiceCommabutterfly-max-1mb.gif) repeat fixed; }
/* content background */
.content-main { background: url(https://www.toptal.com/designers/subtlepatterns/patterns/asanoha-400px.png) repeat fixed; }
/*************************************************************
primary color
*************************************************************/
::-webkit-scrollbar-thumb, .page-link:active, .btn-primary, .btn.btn-default:hover, .btn.btn-secondary:hover, .btn-outline-secondary:hover,
.btn-outline-secondary:focus, .btn-outline-secondary:active, .page-link:hover, .page-link:focus, .navbar, .navbar .dropdown-menu,
.navbar .dropdown-menu .dropdown-divider, .footer, .charizard
{ background: #60000c; }
a:hover, a:focus, a:active, .user-comments a, .user-characters a, .user-bulletins a, .user-links a, .user-groups a,
.user-favorited a, .user-created a, .user-art a, .user-literatures a, .user-comments a, .user-stats a, .character-comments a,
.character-links a, .character-groups a, .character-literatures a, .character-comments a, .character-links a, .character-groups a,
.character-literatures a, .character-image-gallery a, .btn.btn-default, .btn.btn-secondary, .btn.btn-secondary:active, .footer a,
.side-nav li>a, .side-nav .display-user a, .side-nav .display-character a, .charmeleon, .wartortle,
.comment .forum-post-post .forum-post-actions .post-action:hover, .forum-post .forum-post-post .forum-post-actions .post-action:hover
{ color: #e06661; }
.page-link:hover, .page-link:focus, .page-link:active { border-color: #b14623; }
.navbar .dropdown-menu { border-bottom: .125em #b3927f solid; }
.navbar .dropdown-menu .dropdown-divider { border-top: 1px solid #b3927f; }
.charizard { border: 20px solid #3e0000; }
/*************************************************************
secondary color
*************************************************************/
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .side-nav li.subheader, .side-nav li.active>a, .nav-pills .nav-link.active,
.side-nav li.active>a:focus, .side-nav li.active>a:hover, .navbar .dropdown-menu a:hover, .side-nav li.active>a:link, .side-nav li>a:focus,
.side-nav li>a:hover, .side-nav .display-user a:hover, .side-nav .display-character a:hover, .nav-mobile-menu
{ background: #7c1319; }
.btn-link:focus, .btn-link:hover, .nav-pills .nav-link, .user-characters a:hover, .user-bulletins a:hover, .user-links a:hover,
.user-groups a:hover, .user-favorited a:hover, .user-created a:hover, .user-art a:hover, .user-literatures a:hover, .user-comments a:hover,
.user-stats a:hover, .character-image-gallery a:hover, .character-comments a:hover, .character-links a:hover, .character-groups a:hover,
.character-literatures a:hover, .character-comments a:hover, .character-links a:hover, .character-groups a:hover, .character-literatures a:hover,
.navbar .dropdown-menu .dropdown-header
{ color: #7c1319; }
/*************************************************************
tertiary color
*************************************************************/
.kakuna, .fearow, .raichu a { color: #e06661; }
/*************************************************************
main areas
*************************************************************/
::-webkit-scrollbar-thumb {
border-left: 7px solid #fff; border-right: 6px solid #fff;
border-top: 5px solid #fff; border-bottom: 5px solid #fff; }
::-webkit-scrollbar-track { background-color: #fff; }
.user-characters, .user-bulletins, .user-links, .user-groups, .user-favorited, .sidebar,
.user-created, .user-art, .user-literatures, .user-comments, .user-stats, .character-comments,
.character-links, .character-groups, .character-literatures, .character-image-gallery
{ background: #3e0000; }
.card, .btn.btn-default, .btn.btn-secondary, .btn.btn-secondary:active,
.page-item.disabled .page-link, .page-item.active .page-link
{ background: #3e0000; }
.page-link { border-color: #f1f1f1; }
.comment .comment-replies, .forum-post .comment-replies { border-left: 1px solid #f1f1f1; }
hr { border-top: 1px solid #e8e8e8; }
/*************************************************************
fonts and others
*************************************************************/
body { color: #c35b63; }
h1, .h1 { color: #b3927f; }
.side-nav li.subheader, .side-nav li>a:focus, .side-nav li>a:hover, .navbar-inverse .navbar-brand,
.display-user a, .navbar .dropdown-menu a, .navbar-inverse .navbar-nav .nav-link,
.navbar-inverse .navbar-nav .nav-link:focus,
.navbar-inverse .navbar-nav .nav-link:hover
.side-nav li.active>a, .side-nav li.active>a:focus, .side-nav li.active>a:hover, .page-link:active,
.side-nav li.active>a:link, .side-nav li>a:focus, .side-nav li>a:hover, .side-nav .display-user a:hover,
.side-nav .display-character a:hover, .navbar .dropdown-menu a:hover, .btn.btn-default:hover,
.btn.btn-secondary:hover, .btn-outline-secondary, .btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-outline-secondary:active, .page-item.active .page-link, .page-link, .page-link:hover, .page-link:focus
{ color: #fff; }
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .side-nav li.active > a, .footer a
{ color: #fff !important; }
.thumb-character-stat { color: #d0d0d0 !important; }
.page-item.disabled .page-link { color: #5a5a5a; }
.comment .forum-post-post .forum-post-actions .post-action, .forum-post .forum-post-post .forum-post-actions .post-action,
.comment .forum-post-post .forum-post-footer .forum-post-time, .forum-post .forum-post-post .forum-post-footer .forum-post-time
{ color: #3e0000; }
/*************************************************************
rest of the code
*************************************************************/
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Meow+Script&display=swap');
body { font-family: 'Poppins', sans-serif; font-size: 12px; }
.weedle { margin-top: 20px; }
.pikachu { margin-bottom: 20px; }
.bulbasaur {
top: 0px;
left: 0px;
right: 0px;
position: absolute;
width: 100%;
transform: rotate(180deg);
}
.ivysaur {
bottom: 0px;
left: 0px;
right: 0px;
position: absolute;
width: 100%;
}
.metapod {
position: absolute;
top: 25px;
right: 100px;
color: #fff;
font-size: 7px;
text-transform: uppercase;
letter-spacing: 2px;
width: 450px;
text-align: justify;
display: none;
}
.butterfree {
position: absolute;
bottom: 25px;
left: 100px;
color: #fff;
font-size: 7px;
text-transform: uppercase;
letter-spacing: 2px;
width: 450px;
text-align: justify;
display: none;
}
.venusaur { margin: 150px 0px 150px; }
.charmander {
width: 100% !important;
height: 750px !important;
object-fit: cover;
border-radius: 50px;
}
.charmeleon {
font-family: 'Meow Script', cursive;
font-size: 48px;
line-height: 100%;
text-align: center;
text-shadow: 2px 2px 0px #fff;
}
.charizard {
color: #fff;
font-size: 9px;
text-transform: uppercase;
width: 290px;
height: 135px;
text-align: justify;
margin: auto;
letter-spacing: 1px;
overflow: auto;
}
.charizard::-webkit-scrollbar { width: 0px; }
.squirtle {
background: #fff;
padding: 20px;
border-radius: 15px;
}
.kakuna {
text-transform: uppercase;
font-size: 10px;
font-weight: 900;
letter-spacing: 2px;
}
.beedrill {
width: 15px;
height: 15px;
border-radius: 50%;
}
.pidgey { display: flex; justify-content: space-around; }
.fearow { padding-right: 10px; }
.raichu {
font-size: 20px;
letter-spacing: 5px;
text-align: center;
}
.glaceon {
right: 0px;
bottom: 0px;
position: fixed !important;
z-index: 9999;
border: none;
border-radius: 10px 0px 0px 0px !important;
}
::-webkit-scrollbar { width: 15px; }
.nav-pills .nav-link {
height: 50px;
width: 50px;
font-size: 17px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
padding: 5px;
}
.display-user-tiny img, .nav-item .fa, .hide, .subnavigation-header, .side-nav li.header, .characters-title i,
.side-nav li.divider, .characters-gallery-folder-description-header i, .characters-folder-description-header i,
.characters-folder-description-header h4, .characters-gallery-none, .footer .mx-1, .profile-header, .profile-name-section,
.profile-content-title, .profile-gallery-section { display: none !important; }
h1, .h1 {
font-family: 'Meow Script', cursive;
font-size: 38px;
line-height: 100%;
text-transform: lowercase;
}
a, a:hover, a:active, a:focus { text-decoration: none; }
.navbar, .footer {
text-transform: lowercase;
font-size: 13px;
}
.sidebar {
padding: 10px;
max-width: 200px;
text-transform: lowercase;
}
.sidebar::-webkit-scrollbar {width: 0px;}
.navbar-brand { font-weight: 800; }
.side-nav li.subheader.subheader-margin { margin: 0px; }
.side-nav li.subheader, .side-nav .display-character a:hover,
.side-nav li>a:hover, .side-nav .display-user a:hover, .side-nav li.active > a
{ border-radius: 6px; }
.side-nav li>a { margin: 3px 0px; }
.navbar .dropdown-menu {
border-radius: 0px;
letter-spacing: 1px;
}
.navbar .dropdown-menu a {
font-size: 12px;
text-transform: lowercase;
}
.navbar .dropdown-menu .dropdown-header {
text-transform: lowercase;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
}
.side-nav li.divider { border-color: transparent; }
.side-nav li .sidebar-icon { float: right; margin: 3px 0px 3px 0px !important; }
.user-name {
font-family: 'Meow Script', cursive;
font-size: 34px;
line-height: 100%;
text-align: center;
}
.character-name {
text-align: center;
font-weight: 900;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 2px;
}
.nav-mobile-menu { border: none; }
.card {
border: none;
border-radius: 5px;
}
.bg-faded { background-color: transparent; }
.img-thumbnail {
padding: 0px;
background-color: transparent;
border: none;
border-radius: 5px;
transition-delay: 0s;
transition: all 0.3s ease-in-out;
}
.user-characters, .user-bulletins, .user-links, .user-groups, .user-favorited, .user-created, .user-art, .user-literatures,
.user-comments, .user-stats, .character-comments, .character-links, .character-groups, .character-literatures, .character-image-gallery {
max-width: 1200px;
margin: 0px auto;
min-height: 650px;
padding: 20px;
border-radius: 5px;
}
.img-thumbnail:hover {
border: none;
webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.gallery-thumb .thumb-image>a:hover { box-shadow: none; }
.comment .forum-post-post .forum-post-actions .post-action, .forum-post .forum-post-post .forum-post-actions .post-action,
.comment .forum-post-post .forum-post-footer .forum-post-time, .forum-post .forum-post-post .forum-post-footer .forum-post-time {
font-size: 10px;
}
abbr[title] { text-decoration: none; }
.display-user img, .display-character img {
display: block;
margin: 15px auto!important;
max-height: 120px;
max-width: 120px;
border-radius: 50%;
}
.btn {
border: none;
font-size: 12px;
padding: 9px 15px;
text-transform: lowercase;
font-family: 'Poppins', sans-serif;
letter-spacing: 1px;
}
.btn-primary {
font-weight: 100;
border-radius: 5px;
}
.btn-outline-secondary { font-size: 12px !important; }
.page-link { background-color: transparent; }
Media screen and (min-width: 576px) {
.list-unstyled {
top: 0;
position: sticky;
z-index: 70;
}
.container, .container-fluid { max-width: 1120px; }
.navbar .nav-user-link { margin: 5px; }
.sidebar { font-size: 12px; }
.side-nav li>a, .side-nav .display-user a,
.side-nav .display-character a { padding: 6px 7px; }
.side-nav li.subheader.subheader-margin { margin: 0px; }
.side-nav li.subheader { padding: 0px; }
.metapod, .butterfree { display: block; }
.pikachu { margin-bottom: 0px; }
}
