Z PARENT.less
From TWC Wiki
Z_PARENT.less is inserted into each style's PAGE_CONTAINER and used instead of extra.less to provide css content that needs to be common to all child styles. As stated in the comments it should only be edited in the PARENT ONLY style.
Current contents:
// DO NOT ALTER THIS FILE AT CHILD SKIN LEVEL
// ^^^^ LOOK AT THE STYLE DROP DOWN ABOVE YOU ^^^^
// IF IT DOES NOT SAY "PARENT_ONLY"
// DO NOT ALTER THIS FILE!
// FOR ALTERATIONS TO INDIVIDUAL SKINS USE zzCHILD.less
// START common changes for all skins
// ***** START UNIVERSAL FORMATTING CSS FOR ALL STYLES *****
// Remove user title from postbit
.message-userTitle {
display: none;
}
//limits sig size GED 5.1.2025
.message-signature .bbWrapper
{
max-height: 150px;
overflow-y: auto;
}
//places sig at the bottom of the post - GED 5.1.2025
.message-content
{
display: flex;
flex-direction: column;
.message-signature
{
margin-top: auto;
}
}
// padding at bottom of message in threads - Mak 5.12.2025
.message-body {
padding-bottom: 15px;
}
// increase visibility of award feature button - Mak 5.12.2025
.badgeItem .featureIcon {
opacity: 1;
}
.badgeItem .featureIcon--featured {
font-size: 15px;
}
//spacing of featured badges in postbit - GED 5.26.2025
.featuredBadges {
display: flex;
flex-wrap: wrap;
grid-template-columns: repeat(auto-fit, 22px);
gap: 10px;
margin-top: 5px;
}
// fix badge max sizes - Mak 5.31.2025
.featuredBadges--message .badgeIcon {
max-width: 35px;
max-height: 35px;
}
.featuredBadges--member_tooltip .badgeIcon, .featuredBadges--member_view .badgeIcon {
max-width: 25px;
max-height: 25px;
}
// Side-bar scrolling widget fix - as per SirAdrian - Mak 5.20.2025
@media (min-width: 480px) {
.carousel-footer {
margin-top:var(--f-carousel-dots-height);
text-align: center;
}
.p-body-pageContent {
.carousel-footer {
margin-top: 0;
float: right;
}
}
}
//hr fix
.bbWrapper hr {
border-top: 1px solid @xf-textColor;
}
// add margin below top ad-box (<br> removed from _ads template due to grid issues)
.ad-box-content-above { margin-bottom: 15px; }
// fix to sidebar widgets when in 2 columns under content in responsive mode -
// moves site news down so advert and br end up at the top
@media (max-width: @xf-responsiveWide) and (min-width: 720px) {
.p-body-sidebar { display: grid; grid-template-columns: 50% 50%;}
[data-widget-key="site_news"] { grid-row: 2;}
}
// ***** END UNIVERSAL FORMATTING FOR ALL STYLES SECTION *****
// ***** START UNIVERSAL THINGS WE WANT TO HIDE SECTION *****
// competition stuff 2327 is photo contests, 2329 is writing add other nodes if needed
[data-container-key="node-2327"], [data-container-key="node-2329"] {
// hides user names
.message-signature,
.message-cell--user,
.reactionsBar-link,
.reactionSummary { display:none;}
// below this is to convert like buttons to 'vote' only and hide multiple options
.reactTooltip { display: none;}
.message-actionBar {
.actionBar-action.actionBar-action--reaction:not(.has-reaction) .reaction-text, .reaction-text {
color: transparent;
}
.reaction.reaction--imageHidden.reaction--1 i::before {
display:none;
}
.reaction-image.reaction-image--emoji.js-reaction {
display:none;
}
.actionBar-action--reaction.has-reaction.reaction--1 {
.reaction-text::after {
content:"Remove Vote";
visibility: visible;
color: @xf-textColorAttention;
font-size: 110%;
margin-right: 20px;
}
}
.reaction-text::after {
content:"Vote for this Option";
visibility: visible;
color: @xf-textColorAttention;
font-size: 110%;
margin-right: 20px;
}
} // end .message-actionBar
} // end of data container for contests
// ***** END UNIVERSAL THINGS WE WANT TO HIDE SECTION *****
// START adjustments for various screen sizes
// shunt everything over to allow scroll arrows to fit in margin on standard/wide screens
@media (min-width: 100px) { // just to avoid using max-width and getting a weird overlap with next min-wdith
.u-scrollButtons, .has-hiddenscroll .u-scrollButtons { right: 5px; } // so they're 5 from edge of screen (no padding)
}
@media (min-width: @xf-responsiveMedium ) { // 15px = -5 inside content once the page padding is back
.u-scrollButtons, .has-hiddenscroll .u-scrollButtons { right: 15px; } // so they're 5 in from of content with 10 padding and switch at 1440
}
@media (min-width: 1440px) {
.p-footer-inner,
.p-nav-inner,
.p-body-inner,
.p-header-inner,
.p-staffBar-inner,
.p-sectionLinks-inner, {
padding-right: 41px; padding-left: 41px;
}
.u-scrollButtons { right: 5px; } // so they're back to 5 in from edge and sitting in the 41px padding
.p-body-main--withSidebar .p-body-content { padding-right: 10px; }
.p-body-main--withSideNav .p-body-content { padding-left: 10px; }
}
// balance up on the left side if you've got the space and increase inner padding
@media (min-width: 1920px) {
.p-body-main--withSidebar .p-body-content { padding-right: 25px; }
.p-body-main--withSideNav .p-body-content { padding-left: 25px; }
}
.p-body-main.p-body-main--withSideNav.p-body-main--withSidebar { // pages like What's new with both side cols
@media (max-width: 1400px) {
.p-body-content {
.carousel-body.carousel-body--show2 { --xf-slidesPerPage: 1; }
}
}
// re-arrange the post list content in the zone where it's too wide and before responsive kicks in
@media (max-width: 1400px) and (min-width:@xf-responsiveWide) { // 1440 gets normal view
.structItem.structItem--thread { display:grid; grid-template-columns:52px auto 135px 32px;
.structItem-cell--meta { grid-column: 3 / -1; margin-right: 0px; margin-left: auto;}
.structItem-cell.structItem-cell--latest { grid-row: 2; grid-column: 3; margin-right: 0px; margin-left: auto; padding-top: 0px; width: 130px;}
.structItem-cell--iconEnd { grid-row: 2; grid-column: 4; padding-top: 0px;}
}
}
}
// get who posted back on mobile
@media (max-width: @xf-responsiveMedium) {
.structItem.structItem--thread { display:grid; grid-template-columns:52px auto auto 30px;
.structItem-cell--main { grid-column: 2 / -1; }
.structItem-cell--meta { grid-row: 2; grid-column: 2 ; }
.structItem-cell.structItem-cell--latest { grid-row: 2; grid-column: 3; }
.structItem-cell--iconEnd { display: block; grid-row: 2; grid-column: 4; margin-right: 0px; margin-top: -10px; width: 30px; }
.structItem-cell.structItem-cell--latest .structItem-minor { display: block; }
}
}
// END adjustments for various screen sizes
// FOOTER
.p-footer-row { display:grid; grid-template-columns:50% 50%; }
.p-footer-row::before { grid-row: 1; grid-column: 1 / -1 ; } //no idea what is meant to be in this, its set as content blank and display:table in the app.less
.p-footer-row-2nd { grid-row: 2; grid-column: 1 / -1 ;}
.p-footer-row > div { margin: 15px auto 0 auto; }
.p-footer-linkList > li { display: inline; margin-bottom: 15px; }
.p-footer-row-4th { grid-column: 1 / -1 ; margin-top: 15px; }// contact us row
.p-footer-copyright {text-align: center;}
@media (min-width: @xf-responsiveWide) {
.p-footer-row { display:grid; grid-template-columns:1fr 720px 1fr; margin-top:10px;
.p-footer-row-1st { margin-left: 0; // cookies and style chooser
.p-footer-linkList > li { float:none; display: block; } // style chooser under cookies
}
.p-footer-row-2nd { grid-row: 2; grid-column: 2 ;}
.p-footer-row-3rd { margin-right: 0; }// social media links
}
}
// end of footer stuff