>You can leave the obsession behind, new forum new attitude.
  • Welcome. Registering and having your account be approved may take a while since there's only one guy checking and approving accounts and guestposts
  • Boards are being moved around and added. Leave feedback in this thread and let jannies move your threads

Custom CSS and HTML

hillel2 said:
i feel like it could look better if the the comments had a fixed height and you could scroll them
Click to expand...
Literally seconds before you sent this I slapped on a better working masonry grid. It's a bit better now methinks, I like it as is. Works better on tighter screens now too. I might leave it like this. I don't want to get pedantic with anything. I appreciate the suggestion dough.
1774718586678.png
 
Last edited:
SoyawayAccount said:
how about you expend the energy to give me free css templates instead
Click to expand...
cargo said:
/* Profile picture outline */
.memberHeader-avatar {
margin: 0 auto !important;
padding-top: 20px !important;
}

.memberHeader .avatarWrapper,
.memberHeader .avatar.avatar--l {
margin: 0 auto !important;
box-shadow: inset 2px 2px #C5E0A8,
inset -2px -2px #2E5A1F,
0 4px 8px rgba(0,0,0,0.5) !important;
border: 4px solid #3F6F29 !important;
background: #E6EAD8 !important;
}

/* Titlebar above banner */
.memberHeader--withBanner::before {
content: "";
display: block;
height: 32px;
background: linear-gradient(to bottom, #A2C38A 0%, #6B9E4A 40%, #4A7F2E 100%) !important;
border-bottom: 2px solid #2E5A1F !important;
border-top: 2px solid #C5E0A8 !important;
position: relative;
z-index: 20;
box-shadow: inset 0 1px #ffffff, 0 2px 4px rgba(0,0,0,0.4);
}

/* Square mostly everything off */
.message,
.message--simple,
.message-inner,
.message-content,
.message-cell,
.message-cell--main,
.message-cell--user,
.message-footer,
.message-actionBar,
.message-body,
.js-messageContent,
.block-container,
.block,
.block-body,
.input,
.textarea,
.button,
.avatar,
.avatar img {
border-radius: 0 !important;
}

/* Elements WITH the border */
.message,
.message--simple,
.input,
.button {
background: #E6EAD8 !important;
border: 3px solid #3F6F29 !important;
box-shadow: inset 2px 2px #C5E0A8,
inset -2px -2px #2E5A1F !important;
}

/* profile post columns*/
.block.block--messages .block-body {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
gap: 12px !important;
width: 90% !important;
max-width: 1200px !important;
margin: 30px auto 0 !important;
padding: 10px !important;
box-sizing: border-box !important;

/* Masonry magic (modern browsers) */
grid-template-rows: masonry !important; /* This creates the masonry effect */
align-items: start !important;
}

/* Fallback for browsers that don't support masonry columns */
@supports not (grid-template-rows: masonry) {
.block.block--messages .block-body {
column-count: 2 !important;
column-gap: 12px !important;
}

.block.block--messages .block-body > * {
break-inside: avoid !important;
margin-bottom: 12px !important;
}
}

/* Hidden junk */
.memberHeader-blurContainer,
.memberHeader-blur,
.memberHeader-stats,
.memberHeader-buttons,
.memberHeader-separator,
.featuredBadges,
.memberHeader--withBanner .username,
.memberHeader .userTitle,
.memberHeader-blurb,
.memberHeader-content,
.message-cell.message-cell--user,
.memberHeader-stats .pairs dt,
.memberHeader-stats .pairs dd,
.memberHeader-stats span,
.memberHeader-stats sreal womang {
display: none !important;
}

/* Essential visibility fixes */
.memberHeader .memberHeader-avatar,
.memberHeader .avatarWrapper,
.memberHeader .avatar,
.memberProfileBanner {
display: block !important;
z-index: 10 !important;
}

/* Elements WITHOUT border but WITH background */
.comment,
.message,
.message-responseRow,
.memberHeader,
.block-tabHeader.block-tabHeader--memberTabs,
.message-inner,
.message-content,
.profile-post-comment {
background: #E6EAD8 !important;
}

/* noob text and font */
h1, h2, h3, h4, h5, h6,
sreal womang, b, em, i, label, span, p, div, li, td, th, blockquote {
color: #000000 !important;
}

*,
*::before,
*::after {
color: #000000 !important;
font-family: Tahoma, sans-serif !important;
}
Click to expand...
Feed this to Grok or duck.ai and ask it to do whatever it is you want to do. Make sure to tell it to refer to Xenforo documentation on styling.
 
Please crackers, change your theme while fucking around with CSS to clean up any potential conflicts. Not everyone is using vantablack or vantawhite. I love the few themes I've saw thus far, good work.
[cobfact]

/* Shit I forget relating to my pfp*/
.memberHeader-avatar {
margin: 0 auto !important;
padding-top: 20px !important;
}

/* hacky attachment fitting*/
.js-lbImage,
.lazy.bbImage,
.message-body img,
.attachment img,
.bbImage,
.messageContent img {
max-width: 100% !important;
height: auto !important;
width: auto !important;
object-fit: contain !important;
border-radius: 0 !important;
display: block !important;
margin: 8px auto !important; /* Optional: centers the image nicely */
}

/* more hacky attachment shit*/
.attachment,
.attachment .file,
.message-body .bbWrapper img,
.js-lbContainer img {
max-width: 100% !important;
box-sizing: border-box !important;
}

/* attachment theming separately because grok is dummyed*/
.attachment {
background: #E6EAD8 !important;
border: 3px solid #3F6F29 !important;
box-shadow: inset 2px 2px #C5E0A8,
inset -2px -2px #2E5A1F !important;
padding: 8px !important;
margin: 10px 0 !important;
}

/* Profile picture outline */
.memberHeader .avatarWrapper,
.memberHeader .avatar.avatar--l {
margin: 0 auto !important;
box-shadow: inset 2px 2px #C5E0A8,
inset -2px -2px #2E5A1F,
0 4px 8px rgba(0,0,0,0.5) !important;
border: 4px solid #3F6F29 !important;
background: #E6EAD8 !important;
}

/* Titlebar above banner */
.memberHeader--withBanner::before {
content: "";
display: block;
height: 32px;
background: linear-gradient(to bottom, #A2C38A 0%, #6B9E4A 40%, #4A7F2E 100%) !important;
border-bottom: 2px solid #2E5A1F !important;
border-top: 2px solid #C5E0A8 !important;
position: relative;
z-index: 20;
box-shadow: inset 0 1px #ffffff, 0 2px 4px rgba(0,0,0,0.4);
}

/* Square mostly everything off */
.message,
.message--simple,
.message-inner,
.message-content,
.message-cell,
.message-cell--main,
.message-cell--user,
.message-footer,
.message-actionBar,
.message-body,
.js-messageContent,
.block-container,
.block,
.block-body,
.input,
.textarea,
.button,
.avatar,
.avatar img {
border-radius: 0 !important;
}

/* Elements WITH the border */
.message,
.message--simple,
.input,
.button {
background: #E6EAD8 !important;
border: 3px solid #3F6F29 !important;
box-shadow: inset 2px 2px #C5E0A8,
inset -2px -2px #2E5A1F !important;
}

/* MASONRY GRID FOR PROFILE POSTS */
.block.block--messages .block-body {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 8px !important;
width: 90% !important;
max-width: 1400px !important;
margin: 10px auto 0 !important;
padding: 8px !important;
box-sizing: border-box !important;
grid-template-rows: masonry !important;
align-items: start !important;
}

/* Fallback for browsers that don't support masonry*/
@supports not (grid-template-rows: masonry) {
.block.block--messages .block-body {
column-count: 3 !important;
column-gap: 8px !important;
}

.block.block--messages .block-body > * {
break-inside: avoid !important;
margin-bottom: 12px !important;
}
}

/* Hidden junk */
.memberHeader-blurContainer,
.memberHeader-blur,
.memberHeader-stats,
.memberHeader-buttons,
.memberHeader-separator,
.featuredBadges,
.memberHeader--withBanner .username,
.memberHeader .userTitle,
.memberHeader-blurb,
.memberHeader-content,
.message-cell.message-cell--user,
.memberHeader-stats .pairs dt,
.memberHeader-stats .pairs dd,
.memberHeader-stats span,
.memberHeader-stats sreal womang {
display: none !important;
}

/* Essential visibility fixes that I need for some reason*/
.memberHeader .memberHeader-avatar,
.memberHeader .avatarWrapper,
.memberHeader .avatar,
.memberProfileBanner {
display: block !important;
z-index: 10 !important;
}

/* Elements WITHOUT border but WITH background */
.comment,
.message,
.message-responseRow,
.memberHeader,
.block-tabHeader.block-tabHeader--memberTabs,
.message-inner,
.message-content,
.profile-post-comment {
background: #E6EAD8 !important;
}

/* Ensure headings are also black */
h1, h2, h3, h4, h5, h6,
sreal womang, b, em, i, label, span, p, div, li, td, th, blockquote {
color: #000000 !important;
}

*,
*::before,
*::after {
color: #000000 !important;
font-family: Tahoma, sans-serif !important;
}
 
Last edited:

Similar threads

Zonky
Why is there no option for your own custom themes
Replies
14
Views
80
Zonky
Zonky
Lateral
Suggest custom events for future Shroomger games.
Replies
0
Views
10
Lateral
Lateral
木制的尼尔森
what should I make in the TABS custom unit creator
Replies
4
Views
35
Dagonet
Dagonet
Barry
  • Featured
Added Custom Title Colors
Replies
4
Views
173
_73
_73
JerkOffYonathan
Is Hammer editor a ARYAN BEAST for not letting my custom texture work
Replies
2
Views
148
木制的尼尔森
木制的尼尔森

Members online

Total: 466 (members: 26, guests: 440)

Latest posts

Back
Top Bottom