Note that this code is NOT complete and wont be until the new modules for the site are fixed, and the new comment box is implemented later this month. Feel free to use this for now, but note that some things may no longer work as I wrote this when the site first opened for testing at the beginning of this month.
(I will comment on this topic when the layout gets updated.)
.layout_core_html_block_custom {
width: 700px !important; /* Base width for desktop */
border: 3px solid #630101;
max-width: 90% !important; /* Ensures responsiveness on smaller screens */
margin: 0 auto; /* Centers the element horizontally */
padding: 10px; /* Optional: Adds padding for better appearance */
box-sizing: border-box; /* Ensures padding doesn't affect the overall width */
background-color: black !important;
}
/* banner */
.profile_cover_wrapper{
display: none !important;
}
/* hides html header */
h3{
display: none !Important;
}
/* background of page */
body {
background-image: url(https://wallpaper.dog/large/17089456.jpg) !important;
background-size: cover !important; /* Makes the background cover the entire viewport */
background-repeat: no-repeat !important; /* Ensures the background doesn't repeat */
background-position: center center !important; /* Centers the background image */
}
/* Hides Nav Bar */
.layout_core_menu_main{
display: none !important;
}
/* hides search bar */
#global_search_field{
display: none !Important;
}
/* hides button with search bar */
.layout_core_search_mini{
display: none !important;
}
/* hides site logo */
.layout_core_menu_logo{
display: none !Important;
}
/* Top banner */
.layout_page_header {
width: 500px; /* Set width for the banner */
padding: 10px;
border: 3px solid #630101;
background: linear-gradient(to right, black, #4d0000);
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin: 0; /* No auto-centering of the banner */
}
/* Center the menu inside the banner */
.layout_core_menu_mini {
width: 300px; /* Set width for the menu */
margin: 0 auto; /* Center the menu horizontally */
display: flex; /* Use Flexbox to center items inside */
justify-content: center; /* Center menu items horizontally */
}
/* Media query for smaller screens */
@media (max-width: 768px) {
.layout_page_header {
width: 90%; /* Adjust width on smaller screens */
padding: 10px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.layout_core_menu_mini {
width: 100%; /* Allow the menu to take full width */
margin: 0 auto;
}
}
/* Initial state for .layout_left (partially hidden off the side) */
.layout_left {
position: fixed;
top: 20%;
left: -250px;
width: 250px;
height: 300px;
background-color: transparent !important;
transition: left 0.6s ease;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
z-index: 1000;
padding-right: 10px;
border-radius: 0 10px 10px 0;
}
/* Dark circle with a red arrow outlined in red */
.layout_left::before {
content: '➤';
position: absolute;
top: 10px;
right: -50px;
width: 50px;
height: 50px;
background-color: black;
color: #630101;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border: 3px solid #630101;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
/* Slide out when hovering */
.layout_left:hover {
left: 0;
}
/* Media query to hide the panel on tablet-sized screens and smaller */
@media (max-width: 768px) {
.layout_left {
display: none; /* Hide the panel */
}
}
/* bottom section with comments and tabs */
.layout_core_container_tabs{
width: 700px !important; /* Base width for desktop */
max-width: 90% !important; /* Ensures responsiveness on smaller screens */
padding: 10px; /* Optional: Adds padding for better appearance */
box-sizing: border-box; /* Ensures padding doesn't affect the overall width */
background-color: black !important;
margin: auto !important;
}
/* tabs for profile */
#main_tabs{
background-color: black !important;
border: 3px solid #630101 !important;
}
/* comments page box*/
.layout_core_comments{
background-color: black !important;
border: 3px solid #630101;
}
/* actual comments */
.comments>ul{
background-color: black !important;
}
/* hide page footer */
.layout_page_footer{
display:none !important;
}
/* occ info box */
.layout_user_profile_fields{
background-color: black !important;
border: 3px solid #630101;
}
/* activity feed section */
.activity-post-container{
background-color: black !Important;
border: 3px solid #630101;
}
.compose-content{
background-color: black !Important;
}
.activity-item{
background-color: black !Important;
border: 3px solid #630101;
}
/* chat box */
.layout_chat_chat{
background-color: black !Important;
}
.chat_container{
background-color: black !Important;
}
.chat_messages_wrapper {
background-image: url('https://images.unsplash.com/photo-1516565349308-c76fe36a115c?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGRhcmslMjByb3NlfGVufDB8fDB8fHww');
background-size: cover; /* Ensure the background covers the entire area */
background-position: center; /* Center the background image */
background-repeat: no-repeat; /* Prevent tiling of the background image */
opacity: 0.85; /* Slight transparency for the entire content */
position: relative; /* Ensure text stays in position */
}
.chat_users_wrapper{
background-color: black !Important;
border: 1px solid #630101 !important;
}
.chat_input{
background-color: black !Important;
}
.chat_input_wrapper{
background-color: black !important;
}
.chat_main{
background-color: black !important;
border: 1px solid #630101 !important;
}
.pulldown>a{
background-color: black !important;
border: 1px solid #630101 !important;
color: #630101 !important;
}
.chat_users>li{
background-color: black !Important;
border: 1px solid #630101 !Important;
}
/* WebKit Browsers (Chrome, Safari, Edge) */
/* Entire scrollbar */
::-webkit-scrollbar {
width: 8px; /* Narrower width */
}
/* Scrollbar Track (the background) */
::-webkit-scrollbar-track {
background: black; /* Black tray */
}
/* Scrollbar Thumb (the draggable part) */
::-webkit-scrollbar-thumb {
background-color: #630101; /* Dark red thumb */
border-radius: 10px; /* Rounded corners for the thumb */
}
/* Scrollbar Thumb on Hover */
::-webkit-scrollbar-thumb:hover {
background-color: #800000; /* Slightly lighter red when hovered */
}
/* For Firefox */
.scrollable-content {
scrollbar-width: thin; /* Makes the scrollbar narrower in Firefox */
scrollbar-color: #630101 black; /* Dark red thumb and black track */
}
/* member sub */
.layout_payment_subscribe_plan{
background-color: black !Important;
border: 3px solid #630101;
}
/* member info */
.layout_user_profile_info{
background-color: black !Important;
border: 3px solid #630101;
}
/* Keep the same style for hover */
a:hover {
color: #fff; /* Keep text white */
text-shadow: -1px -1px 0 #630101, 1px -1px 0 #630101, -1px 1px 0 #630101, 1px 1px 0 #630101; /* Keep red outline */
}
/* Keep the same style for active state */
a:active {
color: #fff; /* Keep text white */
text-shadow: -1px -1px 0 #630101, 1px -1px 0 #630101, -1px 1px 0 #630101, 1px 1px 0 #630101; /* Keep red outline */
}
/* Keep the same style for visited links */
a:visited {
color: #fff; /* Keep text white */
text-shadow: -1px -1px 0 #630101, 1px -1px 0 #630101, -1px 1px 0 #630101, 1px 1px 0 #630101; /* Keep red outline */
}
/* removes border on links */
.tabs_alt>ul>li>a {
border-bottom: none; /* Remove default border for all links */
}
/* Remove the blue border for active and hovered links */
.tabs_alt>ul>li>a:hover,
.tabs_alt>ul>li>a:focus,
.tabs_alt>ul>li.tab_active>a,
.tabs_alt>ul>li.active>a
{
border-bottom: none !important; /* Ensure the border is removed */
outline: none; /* Remove any focus outline */
box-shadow: none; /* Remove any shadow that might appear */
}
/* Forum Posts */
.layout_forum_profile_forum_posts{
background-color: black !Important;
overflow: auto !important;
border: 3px solid #630101;
max-height: 600px !important;
}
/* friends section */
.layout_user_profile_friends{
background-color: black !important;
border: 3px solid #630101;
}
/* extras for links */
a{
color: white !important;
text-shadow: -1px -1px 0 #630101, 1px -1px 0 #630101, -1px 1px 0 #630101, 1px 1px 0 #630101; /* Red outline */
}
.user_profile_friends_right>a{
color: red !important;
}
/* IM cover only */
.im_item{
background-color: black !Important;
}
#im_container{
border: 1px solid #630101 !important;
}
#im_container>li{
border-left: 1px solid #630101 !important;
}
/* top icons */
#core_menu_mini_menu>ul>li>a.show_icons,
#core_menu_mini_menu>ul>li>span>a.show_icons
{
background-color: #630101 !important; /* Dark red background */
color: #fff !important; /* White text */
} 
