Welcome to Our Community

Register on JustAnimeForum and start chatting about anime with like-minded people!

Sign Up / Login
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Our site at justdubs.org is temporarily down while we work on our new site. Join us on Discord if you have any questions: CLICK HERE TO JOIN DISCORD
    Dismiss Notice

Just Dubs Unofficial Theme For Both Better Discord And Stylish And Forum

Discussion in 'Tech Temple' started by shedninja, Apr 8, 2021.

  1. shedninja the sites biggest bug Content Manager

    Rank:
    Rank:
    Rank:
    Messages:
    329
    Joined:
    Dec 14, 2019
    Likes Received:
    43
    Trophy Points:
    10

    Ratings:
    +54 / 0 / -0
    so me and a fellow staffer have been working on css for both beter discord and stylish
    please let us know how you like it what needs improving and most important is it easy on the eyes
    below is for better discord witch looks best
    https://betterdiscord.net/home/
    [​IMG]
    Code:
    @import url(https://puckzxz.github.io/NotAnotherAnimeTheme/css/scsl.css);
    @import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap'); /* Custom font import link (see fonts.google.com) */
    @import url("https://gibbu.github.io/BetterDiscord-Themes/AdjustableServerWidth/base.css");
    @import url("https://codedotspectra.github.io/themes/themes-cores/neutron8.css");
    @import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/EmojiReplace/base/Facebook.css);
    
    /* ^^^^^^^^^^^^^^^no touchy touch^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
    .scrollerInner-2YIMLh {
        background-color: rgba(0, 0, 0, 0.507);
    }
    /*^^^^^^^^^^^^^^^^^^^^^^message background transpancy ^^^^^^^^^^^^^^^*/
    .messageContent-2qWWxC {
        color: rgb(255, 255, 255);
    }
    /* ^^^^^^^^^^^^^^^^^^^^^^^^^^text color^^^^^^^^^^^^^^^^^^*/
    :root {
            --background-image: url(https://i.imgur.com/RY968JX.png);
     
            /*^^^^^^^^^^^^^backgroud image^^^^^^^^^^*/
            --main-color: rgb(101, 153, 97);
            --main-transparency: rgba(0, 0, 0, 0.8);
            --unread-server-animation: rainbow;
            --hover-list-bg-color: rgba(255, 255, 255, 0.301);
            --border-lines-color: hsla(0,0%,100%,.1);
            --scroll-bar-color: rgba(255,255,255, .15);
            --font-size: 16px;
            /* ^^^^^^^^^^^^^^^text size^^^^^^^^^^^^^*/
            --selected-text-voice-color: #f6f6f7;
            --channel-hover-text-color: rgba(255, 255, 255, 0.75);
            --unread-text-color: #dcddde;
            --user-popup-background:rgba(0, 0, 0, 0.8);
    }
    
    
    
    
    :root {
             --server-icon-size: 25px; /* Size of the server icons | DEFAULT: 35px */
            --server-icon-spacing: 8px; /* Spacing between server icons. Negative values are allowed | DEFAULT: 8px */
            --server-container-padding: 10px; /* Spacing to the left and right sides of server icons | DEFAULT: 10px */
    }
    
    
    
    
    /* ADD ANY CUSTOM CODE BELOW */
    
    
    
    
    :root {
      /* COLORS */
      --themeColor1: rgb(124, 14, 146); /* Theme's color 1 */
      --themeColor2: rgb(182, 44, 247); /* Theme's color 2 */
    /*^^^^^^^^^^^^^^^^^^^^ for the 2 tone background^^^^^^^^^^*/
      /* CUSTOM FONT */
      --customFont: 'RocknRoll One', sans-serif; /* Custom font, change the name in 'font name here', you must import the font first */
    
      /* HOME BUTTON */
      --homeImage: url('https://c.tenor.com/ORu-vf_ltnIAAAAj/sad-eyes.gif');/* Home button image, must be a direct link | You can also set it to a gradient, google "css gradient"*/
      --homeImageSize: contain;/* To cover the button, set to "cover". You can also set it to "100% 100%" but the image will be stretched. Set to "contain" to see the entire image */
    
      /* BACKGROUND */
      --backgroundColor: #31013d; /* Background color */
    --backgroundImage: url('https://cdn.discordapp.com/attachments/391417375993626625/829827050080174110/bg_default4.jpg'); /* Backround image, must be a direct link | You can also set it to a gradient, google "css gradient"*/
      /* ^^^^^^^^^^^^^^^^^same as the other background image but ontop ^^^^^^^^^^^^^^^*/
      --backgroundPosition: ; /* Image position | center, left, right, bottom, top */
      --backgroundSize: cover; /* To cover the entire app, set to "cover". You can also set it to "100% 100%" but the image will be stretched. Set to "contain" to see the entire image */
      --backgroundRepeat: no-repeat; /* if you want the image to repeat | Google "css background repeat" */
      --backgroundBlur: 5px; /* Set to 0 to remove blur | Set to 10px for average blur */
      /*^^^^^^^^^^^ the blur effect 5 - 25 look good imo ^^^^^^^^^^^^*/
      --backgroundOpacity: 0.5; /* 0 is transparent */
      /* CODE BLOCKS */
      --backgroundCode: rgba(0,0,0,.5);
      --backgroundName: rgba(0,0,0,.5);
    }
    
    

    https://chrome.google.com/webstore/...leoegfcffe/related?utm_source=chrome-ntp-icon
    or use any css modifier

    [​IMG]
    Code:
    @import url(https://puckzxz.github.io/NotAnotherAnimeTheme/css/scsl.css);
    @import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap');
    
    /* Custom font import link (see fonts.google.com) */
    @import url("https://gibbu.github.io/BetterDiscord-Themes/AdjustableServerWidth/base.css");
    @import url("https://codedotspectra.github.io/themes/themes-cores/neutron8.css");
    @import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/EmojiReplace/base/Facebook.css);
    
    /* ^^^^^^^^^^^^^^^no touchy touch^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
    
    /* ^^^^^^^^^^^^^^^no touchy touch^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
    .scrollerInner-2YIMLh {
        background-color: rgba(0, 0, 0, 0.65);
    }
    /*^^^^^^^^^^^^^^^^^^^^^^message background transpancy ^^^^^^^^^^^^^^^*/
    .messageContent-2qWWxC {
        color: white;
    }
    /* ^^^^^^^^^^^^^^^^^^^^^^^^^^text color^^^^^^^^^^^^^^^^^^*/
    :root {
        --background-image: url(https://i.imgur.com/RY968JX.png);
        --font-size: 16px;
        /* ^^^^^^^^^^^^^^^text size^^^^^^^^^^^^^*/
    }
    :root {
        --server-icon-size: 25px;
        --server-icon-spacing: 8px;
        --server-container-padding: 10px;
    }
    :root {
        /* CUSTOM FONT */
        --customFont:'RocknRoll One', sans-serif;
        /* Custom font, change the name in 'font name here', you must import the font first */
        /* HOME BUTTON */
        --homeImage: url('https://c.tenor.com/ORu-vf_ltnIAAAAj/sad-eyes.gif');
        --homeImageSize: contain;
        /* COLORS */
        --themeColor1: rgb(124, 14, 146);
        /* Theme's color 1 */
        --themeColor2: rgb(182, 44, 247);
        /* Theme's color 2 */
        /* BACKGROUND */
        --backgroundColor: #31013d;
        /* Background color */
        --backgroundImage: url('https://cdn.discordapp.com/attachments/747552664593760296/829800514488631327/Z.png');
        /* Backround image, must be a direct link | You can also set it to a gradient, google "css gradient"*/
        /* ^^^^^^^^^^^^^^^^^same as the other background image but ontop ^^^^^^^^^^^^^^^*/
        --backgroundPosition:;
        /* Image position | center, left, right, bottom, top */
        --backgroundSize: cover;
        /* To cover the entire app, set to "cover". You can also set it to "100% 100%" but the image will be stretched. Set to "contain" to see the entire image */
        --backgroundRepeat: no-repeat;
        /* if you want the image to repeat | Google "css background repeat" */
        --backgroundBlur: 5px;
        /* Set to 0 to remove blur | Set to 10px for average blur */
        /*^^^^^^^^^^^ the blur effect 5 - 25 look good imo ^^^^^^^^^^^^*/
        --backgroundOpacity: 0.75;
        /* 0 is transparent */
    }

    and now for the forum
    upload_2021-4-15_9-47-36.png

    Code:
    @import url('https://cdn.discordapp.com/attachments/747552664593760296/832245931889524756/forumcss.css');
    
    :root {
    
        /* --fsbox: 180px;*/
    
        --cbox:rgb(226, 222, 222);
    
        /*text color for boxex*/
    
        --bbcbox:rgba(0, 1, 255, 0.1);
    
        /*^^^^^^background color^^^^^*/
    
        --boxtopt: rgb(253, 245, 245);
    
        /*^^^^ hedder color ^^^^^^*/
    
        --unc:white;
    
        /*^^^^ username text^^^^^^*/
    
        --insideboxt:rgb(255, 255, 255);
    
        /*^^^^ inside box color ^^^^^^*/
    
        --bbibox1:url("");
    
        /*^^^^box background  ^^^^^^*/
    
        --cs1: rgba(241, 14, 218, 0);
    
        /*^^^^content color ^^^^^^*/
    
        --cst1:rgb(255, 255, 255);
    
        /*^^^^ text color ^^^^^^*/
    
        --csi1: url("");
    
        /*^^^^conent strip background ^^^^^^*/
    
        --tsb: rgba(255, 0, 0, 0);
    
        /* ^^^^^^^^^ thred background ^^^^^*/
    
        --ib1: url("");
    
        /* ^^^^^^^^^ thred background  ^^^^^*/
    
        --sb1: cover;
    
        /* ^^^^^^^^^ size  ^^^^^*/
    
        --bp1:;
    
        /* ^^^^^^^^^positon  ^^^^^*/
    
        --shed1:url("https://cdn.discordapp.com/attachments/747552664593760296/831863266359377920/24573.png");
    
        /* background url*/
    
        --m1b: rgba(255, 0, 0, 0);
    
        --at: 4s;
    
        /*animatin time seconds */
    
        --ac1: rgb(60, 134, 38);
    
        --ac2: rgba(224, 64, 142, 0.51);
    
        /*^^^^animation^^^^ color^^^^^^*/
    
        /*vvvvvvvvvvvvv noclue vvvvvvvvvvv*/
    
        --bc33: rgba(255, 0, 0, 0.15);
    
    }
    
    .primaryContent:hover {
    
        animation-iteration-count: infinite;
    
        animation-name: example;
    
        animation-duration: var(--at);
    
    }
    
    .visitorPanel .secondaryContent {
    
        background-color: rgba(255, 0, 0, 0);
    
    }
    
    .avatarList h3 {
    
        background-color: rgba(255, 0, 0, 0);
    
    }
    
    .staffOnline h3 {
    
        background-color: rgba(255, 0, 0, 0);
    
    }
    
    .sidebar .section .secondaryContent h3 {
    
        background-color: rgba(255, 0, 0, 0);
    
    }
    
    .userList .secondaryContent {
    
        background-color: rgba(255, 0, 0, 0);
    
    }
    
    .statsList {
    
        background-color: rgba(255, 0, 0, 0);
    
    }
    
    .sidebar .section .secondaryContent {
    
        background-color: rgba(255, 0, 0, 0);
    
    }
    
    .avatarList .secondaryContent {
    
        background-color: rgba(255, 0, 0, 0);
    
    }
     
    #1 shedninja, Apr 8, 2021
    Last edited: Apr 15, 2021

Share This Page