0% found this document useful (0 votes)
54 views8 pages

Free Css Template

Uploaded by

koami
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
54 views8 pages

Free Css Template

Uploaded by

koami
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 8

/*

Free to use CSS template by Katie (#106445).


This code may be altered, edited, or re-uploaded.
This template may be used to create paid codes (pre-mades and commissions).
Please do NOT remove this credit, unless your coding becomes unrecognizable from
this one!
*/

/* FONT (From Google Fonts) */

@import url('FONT LINK HERE');

/* BACKGROUND */

body {
background: url('BACKGROUND URL HERE') center center fixed;
background-size: 100%;
font-family: FONT CSS HERE;
color: #000000;
}

/* FEED ALL, PLAY ALL */

.feature {
background: rgba(0, 0, 0, 0.6) !important;
color: #000000 !important;
border: none !important;
border-radius: 5px !important;
}

/* TOPBAR ("Welcome back, ___"), NAVBAR (Den/Crossroads/Etc.) */

.topbar {
background: rgba(0, 0, 0, 0.6);
border: none;
border-top: none;
color: #000000;
border-radius: 5px;
font-family: FONT CSS HERE;
}

.navbar {
background: rgba(0, 0, 0, 0.6);
border-bottom: none;
font-family: FONT CSS HERE;
color: #000000;
border-radius: 5px;
}

.navbar li a {
color: #000000 !important;
}

/* NAVBAR HOVER COLOR */

.navbar li a:hover {
background: rgba(0, 0, 0, 0.6) !important;
}

/* MAIN PANEL */

/* RIGHT SIDE */
.container.main {
background: rgba(0, 0, 0, 0.6);
border: none;
box-shadow: none;
border-radius: 5px;
}

/* LEFT SIDE */
.col-md-9 {
background: none;
}

/* BREADCRUMB (Home / Den) */

.breadcrumb {
background: rgba(0, 0, 0, 0.6);
}

.breadcrumb .active {
color: #000000;
}

/* ALERTS (ie. "Your lionesses have returned from hunting!") */

.alert {
background: rgba(0, 0, 0, 0.6);
border: none;
color: #000000;
}

.alert-warning,
.alert-danger {
background: rgba(0, 0, 0, 0.6);
color: #000000;
}

/* "King Dynasty, Pride Dynasty, Achievements, Showcase" Panels */

.feature,
div.left {
background: rgba(0, 0, 0, 0.6);
border: none;
}

/* ENERGY BARS, ACHIEVEMENTS, & BOOKMARKS */

.panel {
background: rgba(0, 0, 0, 0.6) !important;
box-shadow: none !important;
border: none !important;
color: #000000 !important;
}

/* ENERGY BAR BACKGROUND */


.progress {
background: rgba(0, 0, 0, 0.6);
color: #000000 !important;
}

/* ENERGY BAR TEXT */


.progress div {
color: #000000 !important;
}

/* ENERGY BAR COLOR */


.progress-bar {
background: rgba(0, 0, 0, 0.6);
color: #000000 !important;
}

/* CHAT */

.s-chat-message:nth-child(even) {
background: #000000 !important;
border: none !important;
}

.s-chat-message:nth-child(odd) {
background: #000000 !important;
border: none !important;
}

/* PINNED MESSAGE */
.s-chat-message__pinned {
background: #000000 !important;
color: #000000 !important;
border: none !important;
}

.s-chat-message_timestamp {
color: #000000 !important;
}

div#chatMessageContainer {
border: none !important;
}

/* CURRENT CHANNEL TAB (MAIN, SALES, ETC.) */


button#label_currentChannel {
border: none !important;
background: #000000 !important;
}

/* BIGGEST HEADER ("___"'s DEN) */


h1 {
color: #000000;
font-size: 72px;
text-align: center;
}

/* MEDIUM HEADER */

h2 {
color: #000000;
font-size: 24px;
text-align: center;
}

/* SMALL HEADER */

h3 {
color: #000000 !important;
font-size: 14px !important
}

/* LION INFO TABLE (Level, Stats, Branch, Territory Count, Etc.) */

/* PANEL BACKGROUND COLOR */


.table {
background: rgba(0, 0, 0, 0.6);
border: none !important;
border-collapse: separate;
border-radius: 5px;
}

/* HEADERS COLOR (King Name + Title, "There are _ lions with mutations in _'s
pride.") */
.top,
.bottom,
th {
background: rgba(0, 0, 0, 0.6) !important;
color: #000000 !important;
border-radius: 5px;
}

/* Block of color where "Territory Description, Player Name, Avatar URL" etc. are
*/

.table .left {
background: rgba(0, 0, 0, 0.6)
}

/* Affects the color behind your territory description, player name, etc. */

input,
select,
textarea {
background: rgba(0, 0, 0, 0.6) !important;
border: none !important;
border-color: black;
border-radius: 5px;
box-shadow: none !important;
color: black !important;
text-shadow: none !important;
}

/* Color behind "Level, Stats, Branch, Territory" etc. */

.inner-table .left {
background: rgba(0, 0, 0, 0.6) !important;
}

/* Color behind the number of all of the things above */

.inner-table .right {
background: rgba(0, 0, 0, 0.6)
}

/* IGNORE */
.right_odd {
background: none !important;
}

/* ACCOUNT OPTIONS PANELS (Friend Requests Toggles, etc.) */

.item-header {
background: rgba(0, 0, 0, 0.6) !important;
color: #000000 !important;
}

.item {
background: rgba(0, 0, 0, 0.6) !important;
border: none !important;
}

/* BEETLE MOUND TOPBAR (Where it says Beetle Training Grounds, Beetle Battling,
etc.) */

.sub_menu {
background: rgba(0, 0, 0, 0.6) !important;
}

.sub_menu_item_selected {
background: rgba(0, 0, 0, 0.6) !important;
}

/* Affects the color behind "_ Unsorted", "_ Pregnant Lionesses", etc. and
cave/mound names */

.cave-grid,
.mound-grid {
background: rgba(0, 0, 0, 0.6);
border: none !important;
}

/* LINKS & LINK HOVER COLOR */

a:link,
a:visited {
color: #000000 !important;
}

a:hover {
color: #000000 !important;
}

/* BOXES (Copy paste to add more or less) */

.boxcontainer {
background: none;
height: auto;
padding: 0px;
display: flex;
justify-content: center
}

.Box1 {
float: left;
background: rgba(0, 0, 0, 0.6);
color: #000000 ;
padding: 15px;
border: none;
border-radius: 5px;
margin: 5px;
height: 300px;
width: 350px;
overflow: auto;
margin-bottom: 25px;
transition: 1s /* HOW FAST HOVER BOX EXPANDS TO FULL SIZE */7
}

/* HOVER BOX (SIZE WHEN HOVERING OVER) */


.Box1:hover {
overflow-y: auto;
}

.Box2 {
float: left;
background: rgba(0, 0, 0, 0.6);
color: #000000 ;
padding: 15px;
border: none;
border-radius: 5px;
margin: 5px;
height: 300px;
width: 350px;
overflow: hidden;
margin-bottom: 25px;
transition: 1s /* HOW FAST HOVER BOX EXPANDS TO FULL SIZE */
}

/* HOVER BOX (SIZE WHEN HOVERING OVER) */


.Box2:hover {
overflow-y: auto;
}

/* SCROLL BAR */

::-webkit-scrollbar {
width: 7px;
height: 7px;
}

/* SCROLL BAR BACKGROUND */

::-webkit-scrollbar-track {
background: #000000;
}

/* SCROLL BAR "THUMB" */

::-webkit-scrollbar-thumb {
background: #000000;
border-radius: 4px;
}

/* LION AND USER AVATAR OPACITY */

div#lion_image {
opacity: 0.6;
}

table#player img {
opacity: 0.6;
}

/* CIRCULAR LION AND USER AVATAR */

div#lion_image {
border-radius: 50% !important;
overflow: hidden;
margin-top: 19px;
margin-left: 6px;
}

table#player img {
border-radius: 50% !important;
overflow: hidden;
}

/* LIODEN LOGO REPLACER */


div.container.main>div:nth-child(1)>nav>div.navbar-header>a>img {
content: url('IMAGE URL HERE');
}

/* PREGNANT LIONESSES */

div.cave-grid>img {
content: url('https://puu.sh/EJV1D/dfefa228df.png')!important;
}

/* CAVES (Copy paste to add more) */

a[href$="CAVE ID HERE"]>div.cave-grid>img {
content: url('IMAGE URL HERE')!important;
}

/* UNSORTED */

a[href$="unsorted.php?id=USERID"]>div.cave-grid>img {
content: url('IMAGE URL HERE')!important;
}

/* PRIDE OVERVIEW */

a[href$="lionoverview.php?id=USERID"]>div.cave-grid>img {
content: url('IMAGE URL HERE')!important;
}

/* MOUNDS */

.mound-grid img {
background: url('IMAGE URL HERE');
width: 0;
height: 0;
padding-top: 80px;
padding-right: 130px;
}

You might also like