Theme/Skin question

[nickbe]

I've modified the css settings quite a bit for our purpose.

Is there any interest here for sharing css settings together with screenshots? Shall we open a thread for this to provide theme like css settings?

[MarceauKa]

Feel free to put your modifications here, I'll put your update in the wiki.

[nickbe]

Here's our last css theme: A wider viewport, dark transparencies, several smaller changes like button and pill appearance. We set shaark to 3 columns for this:

<style>

    @media (min-width: 992px) {
        .container, .container-lg, .container-md, .container-sm {
            max-width: 99%;
        }
    }

    @media (min-width: 1200px) {
        .container, .container-lg, .container-md, .container-sm, .container-xl {
             max-width: 1520px; 
        }
    }  

    @media (min-width: 576px) and (max-width: 991px) {
        .container, .container-sm {
            max-width: 99%; 
        }
    }  

    footer { 
        padding: 4px 0px !important; 
        position: fixed; 
        bottom: 0; 
        font-size: 12px; 
        margin-right: 20px; 
        color: #ffffff85;
    }

    .navbar-light .navbar-nav .nav-link {
        color: rgba(255, 252, 252, 0.62);
    }

    .navbar-light .navbar-nav .show > .nav-link {
        color: rgba(255, 252, 252, 0.62); 
    }  

    .navbar-light .navbar-nav .nav-link:active {     
        color: rgba(255, 252, 252, 0.86) !important; 
    } 

    .navbar-light .navbar-nav .nav-link:hover {     
        color: rgba(255, 252, 252, 1); 
    }  

    footer > p >a {     
        visbility: hidden; 
    }  

    .badge-pill {     
        margin-left: 4px; 
    } 

    .nav-wall {   
        border-radius: 0.6em; 
    } 

    .card {     
        box-shadow: 0 10px 20px rgb(0 0 0 30%);     
        border-radius: .8rem; 
    } 

    .list-group-item:first-child {
        border-top-left-radius: .8rem;
        border-top-right-radius: .8rem; 
    } 

    .list-group-item:last-child {     
        border-bottom-right-radius: .8rem;     
        border-bottom-left-radius: .8rem; 
    } 

    #app > footer, #nav {     
        background-color: hsla(0, 0%, 0%, 0.65); 
        box-shadow: 0 10px 20px rgba(18, 18, 18, 0.37);     
        padding: 1.2rem 1rem; 
    }  

    #nav {    
        position: fixed;    
        width: 100%;    
        z-index: 999; 
    }  

    .pt-4, .py-4 {     
        padding-top: 6.4rem !important; 
    } 

    #nav .navbar-brand, #nav > .container {
        color: #ffffffe3 !important; 
    } 

    .btn-group-sm > .btn, .btn-sm {    
        padding: .20rem .7rem 0.3rem .7rem;     
        border-radius: 1rem;  
    } 

    .card-footer {     
        padding: .7rem 1.5rem; 
    } 

    .badge-secondary {     
        color: #fff;     
        background-color: #516f90;     
        border-color: #516f90;     
        padding: 4px 10px 6px 10px;     
        font-size: 14px !important; 
    } 

    .card .card-footer {      
        color: #a8b3bd; 
    }  

    .multiselect__tag {     
        padding: 4px 25px 6px 12px;     
        border-radius: 12px;     
        margin-right: 10px;     
        color: #fff;     
        line-height: 1.2;     
        background: #169f62;     
        margin-bottom: 5px;     
        font-weight: bold; 
    }  

    .multiselect__tag-icon {
        margin-left: 7px; 
        width: 26px; 
        line-height: 25px; 
    }  

    .multiselect__tag-icon::after {     
        color: #266d4d;     
        font-size: 16px; 
    } 

    .multiselect__tags .multiselect__tag {     
        margin-bottom: 2px; 
    } 

    </style>

[Ezyweb-uk]

It would be brilliant if there was a theme for bookmarks like the Qlearly in multiple columns.

[MarceauKa]

Hi @Ezyweb-uk! You already can create a wall with your own custom layout: 1 to 4 columns and the ability to switch to a compact mode