16. Plastic glitter css (Code)

GutterGlitter

Profile


/* [ 
Css by hiilumaru! Colors for the glitter bars are in rgba format. crtl+F the colors below and replace with colors of your choice! I made each section a different color because it took so long for me to isolate each part of the code rippp anyweay ily mwah have fun

    Top bar: 255, 0, 0
        border: #ff0000
    Dropdowns: 255, 255, 0
        Border: #ffff00
    Sidebar: 0, 255, 0
        Border: #00ff00
    Buttons/selected page: 0, 255, 255
        border: #00ffff
    Pagination: 0, 0, 255
        border: #0000ff
        
    Sidebar and card backgrounds: 255, 255, 255
    Main text/headings: #111
    lighter text: #888
    buttons/menus: white
    menu hover: black
 ] */

/* [  FONT  ] */
@import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');

/* [  WHOLE PAGE  ] */

body {
    font-family:'fredoka one';
    color:#111;
    background-color:#FFF;
    background-image:url(BACKGROUND URL GOES HERE);
    background-size:auto;
    background-attachment:fixed;}
body a {color:#888;}
h1, h2 {color:#111;}
h1 a, h2 a {color:#888!important;}
.card, .card-block,.profile-info-section {background-color:rgba(255, 255, 255,0.5);}

/* [  TOP BAR  ] */
.navbar, .nav-mobile-menu {
    background-color:rgba(255, 0, 0,0.5);
    background-image:url(https://i.imgur.com/oQsyRwO.png);
    background-blend-mode:luminosity;
    border-bottom: 1px solid #ff0000;}
/* [  dropdowns  ] */
.navbar .dropdown-menu {
    background-color:rgba(255, 255, 0,0.5);
    background-image:url(https://i.imgur.com/oQsyRwO.png);
    background-blend-mode: luminosity; 
    background-opacity:.5;
    border: 1px solid #ffff00;}
.dropdown-divider {border-top: 1px solid #ffff00!important;} 
.dropdown-menu a, .dropdown-header {color: white!important;}
.dropdown-menu a:hover {color:black !important;background:none!important;}

/* [  SIDEBAR  ] */

.side-nav li.header, #sidebar .header,#sidebar .subheader {
    background-color:rgba(0, 255, 0,0.5);
    background-image:url(https://i.imgur.com/oQsyRwO.png); 
    background-blend-mode:luminosity;
    border: 1px solid #00ff00;}
.sidebar,.sidebar.active {
    background-color:rgba(255, 255, 255,0.75);
    top:0px;}
.side-nav li > a,.side-nav .display-user a {color:#00ff00;}
.side-nav li > a:hover {color:black !important;}
.side-nav li.divider {border-color:#00ff00;}

/* [  BUTTONS/PAGINATION  ] */

.btn, .badge{background-color:rgba(0, 255, 255,0.5)!important;
    background-image:url(https://i.imgur.com/oQsyRwO.png); 
    background-blend-mode:luminosity; 
    border: 1px solid #00ffff!important; 
    color:white!important;}
    
.page-link {
    background-color:rgba(0, 0, 255,0.5);
    background-image:url(https://i.imgur.com/oQsyRwO.png); 
    background-blend-mode:luminosity; 
    color:white; 
    border: 1px solid #0000ff;}

.page-link:hover {
    background-color:rgba(0, 255, 255,0.5);
    background-image:url(https://i.imgur.com/oQsyRwO.png); 
    background-blend-mode:luminosity; 
    color:white; 
    border: 1px solid #00ffff;}

.page-item.active .page-link, .page-item.disabled .page-link {
    background-color:rgba(0, 255, 255,0.5);
    background-image:url(https://i.imgur.com/oQsyRwO.png); 
    background-blend-mode:luminosity; 
    color:white; 
    border: 1px solid #00ffff;}