I Made A Valorant BDD CSS THEME

Posted by Steve

Monday, August 1, 2022 8:12 PM

I Made A Valorant BDD CSS THEME

Using a custom CSS omen theme from this post and some other custom CSS scripts I made a nice chill theme. Here is a picture UPDATED VERSION

This theme compacts channels and categories, Rounds all menus, Adds a custom home menu icon, Removes the discord text at the top, Adds more text to the about me page, and Capitalizes channel names.

@import url(https://vsthemes.org/uploads/generator/client/BasicBackground.css);
:root {
    --transparencycolor: 0,0,0;
    --transparencyalpha: 0.05;
    --messagetransparency: 0.35;
    --guildchanneltransparency: 0.2;
    --memberlistransparency: 0;
    --accentcolor: 158,238,216;
    --background: url("https://vsthemes.org/uploads/posts/2021-07/1627679805_1086709.png");
    --backdrop: rgba(0,0,0,0.2);
    --backgroundblur: 0px;
    --popoutblur: 0px;
    --backdropblur: 0px;
    --version1_0_5:none;
    --backgroundsize: cover;
    --popoutsize: cover;
    --backdropsize: cover;
} /* Add custom home icon */
/* Add custom home icon */

.homeIcon-r0w4ny {
    display: none;
}

.tutorialContainer-1pL9QS .wrapper-3kah-n .childWrapper-1j_1ub {
    background-color: transparent;
}

.tutorialContainer-1pL9QS .wrapper-3kah-n .childWrapper-1j_1ub:before {
    position: absolute;
    content: " ";
    width: 45px; /* Change size if needed */
    height: 45px; /* Change size if needed */
    background-image: url('https://preview.redd.it/pq2si1uks8t41.png?width=512&format=png&auto=webp&s=a86b0d7a2620b6f0d404e191d37d75f895996c23'); /* Replace the link, with your image link */
    background-size: contain;
}/* Rounded Context Menu */

.menu-1QACrS, .colorDefault-CDqZdO { 
    border-radius: 15px; 
}/* Channels & Categories Color: */

.channelName-3KPsGw{color: #30D5C8 !important;}
.icon-2W8DHg,.container-q97qHp,.icon-3zI3d2{color: #30D5C8 !important;}



}/* Add custom title! */

.wordmarkWindows-2dq6rw svg {
  width: 0px;
}

.wordmarkWindows-2dq6rw::after {
  content: '';
  display: inline-block;
  -webkit-mask-image: url("https://raw.githubusercontent.com/LawOff/10CustomCSS/1ead8e178dd6eb1fe160d97726b0eb89bd8b1a81/assets/logo_law.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  background-color: var(--highlight);
  width: 240px !important;
  height: 14px !important;
}/* Channel Names Capitalized */

.channelName-3KPsGw {
text-transform: capitalize;
}/* Unclamp the About Me section, so it's not limited to just 6 lines. (normally it cuts off at 6 and adds a ...) */
.clamped-2ZePhX{
    -webkit-line-clamp: 190; /*Maximum amount of characters as new lines, unset just breaks links*/
    max-height:112px;
    overflow-x: hidden;
    overflow-y:scroll;
}
.clamped-2ZePhX::-webkit-scrollbar {
  width: 10px;
  height: 15px;
}
.clamped-2ZePhX::-webkit-scrollbar-track {
  border-radius: 10px; /*How round you want the scrollbar to be. 0 is square, 10px is round.*/
  background-color: rgb(255 255 255 / 10%); /*Edit this to what color you want the track to be.*/
}
.clamped-2ZePhX::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #C62347, #830432); /* Edit this to whatever color/colors you'd like*/
  border-radius: 10px; /*How round you want the scrollbar thumb to be. 0 is square, 10px is round.*/
}/* Compact channels catégories */

:root {
    --category-spacing: 0px;
    --channel-spacing: 4px;
}

.containerDefault-3TQ5YN, .containerDragAfter-1J_-1V, .containerDragBefore-ei4h1m, .containerUserOver-3woq86 {
    padding-top: var(--category-spacing);
}

.mainContent-20q_Hp {
    padding: var(--channel-spacing);
}

References

  • https://www.reddit.com/r/VALORANT/comments/wd1642/i_made_a_valorant_bdd_css_theme/
  • https://reddit.com/wd1642

More Like This