Not planned Make extra.css the last css file to load so it works

V

vord

Member
Extra.css is the template where we put style modifications to save altering other templates.

Ideally css generated from the extra.css template would be served AFTER the templates we are trying to alter. Currently there is another css file served after extra.css which overwrites the values.

In the code below extra.css will not influence forum node styles

Code: 
<link rel="css.php?css=xenforo,form,public&amp;style=1&amp;dir=LTR&amp;d=1382720690" /><link rel="css.php?css=login_bar,node_category,node_forum,node_list,sidebar_share_page&amp;style=1&amp;dir=LTR&amp;d=1382720690" />
 
Upvote 0
This suggestion has been closed. Votes are no longer accepted.
Would adding a further css file to allow us to modify the other bits be possible? I've half a feeling the software allows us to do this already. Will look.
 
To make it properly last would require another CSS request which we'd rather not do. The issue is always resolvable by using increased specificity in your selectors (perhaps by just including "html" or "body" at/near the beginning).
 
All I am trying to do is up the text size very slightly. html or body css doesn't carry through because you've defined text size in pixels.

It's a disappointingly huge hurdle to jump in order to use this fabulous software.

Would LOVE to be able to do that in body like CSS can often do.
 
I think I can't do that in xenforo to increase text size by 10% What have I missed?

This is what I have written in extra.css. It allows me to put 110% into the body css and change everything.
Clearly it won't work on the forum nodes. How do you suggest I can fix without using !important on everything?

Your css looks like it is already defined on the highest hierarchy possible so I need to go after.

HTML: 
/* 10px */
.DismissParent .DismissCtrl,
.previewTooltip blockquote,
.ctrlUnit > dt dfn,
.ctrlUnit > dt .error,
.ctrlUnit > dd .helpLink
{
font-size: 0.625em
}
/* 10pt */
.messageText
{
font-size: 0.813em
}
/* 11px */
.xenTooltip,
.sectionFooter,
.tabs,
.Menu,
.Menu .menuHeader .muted,
.formPopup .controlsWrapper,
.formPopup .advSearchLink,
.xenOverlay .formOverlay .subHeading,
#StackAlerts .stackAlertContent,
.alerts .timeRow,
.dataTable tr.dataRow th,
.dataTable .dataRow .dataOptions a.secondaryContent,
.memberListItem .extra,
.memberListItem .userInfo,
.PageNav,
.previewTooltip .posterDate,
.blockLinksList,
.formValidationInlineError,
.button.smallButton,
.xenForm .ctrlUnit > dt.explain,
.ctrlUnit.sectionLink dt,
.ctrlUnit > dd .explain,
.ctrlUnit > dd > * > li .hint,
#calroot,
.calweek a,
ul.autoCompleteList,
.bbCodeEditorContainer a,
#alerts li.alertItem,
.footer .pageContent,
.footerLegal .pageContent,
.breadcrumb,
.navTabs,
.navTabs .navTab.selected .tabLinks a,
#QuickSearchPlaceholder,
.sidebar,
.sidebar .userList .username,
.pageNavLinkGroup,
a.callToAction span,
.userBanner,
secondaryContent blockLinksList,
#SignupButton .inner,
#loginBar .lostPassword,
#loginBar .lostPasswordLogin,
#loginBar .rememberPassword,
#loginBar #loginBarHandle,
.nodeList .categoryStrip .nodeDescription,
#loginBar .lostPassword,
#loginBar .lostPasswordLogin,
#loginBar .rememberPassword
{
font-size: 0.688em
}

/* 11pt */
.heading,
.xenForm .formHeader,
.larger.textHeading,
.xenForm .sectionHeader,
.dataTable caption,
.button.spinBoxButton,
#caltitle,
.sidebar .visitorPanel .username,
.sidebar .avatarList .username,
.topside a:link, .topside a:visited, .topside a:hover,
.nodeList .categoryStrip .nodeTitle
{
font-size: 0.875em
}

/* 12px */
.subHeading,
.larger.textHeading,
.xenForm .sectionHeader,
.button,
.node .nodeDescription,
.node .nodeDescription,
.node .nodeStats,
.node .nodeExtraNote,
.node .subForumList li .nodeTitle,
.nodeList .categoryStrip,
.subForumsMenu .node .nodeTitle
{
font-size: 0.75em
}

/* 12pt */
.topCtrl h2,
.xenOverlay .errorOverlay .heading,
.xenOverlay .formOverlay .heading,
.sidebar .section .primaryContent  h3,
.sidebar .section .secondaryContent h3,
.profilePage .mast .section.infoBlock h3,
.sidebar .section .primaryContent  h3 a,
.sidebar .section .secondaryContent h3 a,
#SignupButton .inner
{
font-size: 1em
}

/* 13px */
.memberListItem h3.username,
.textCtrl,
.node .nodeText .nodeTitle,
.node .nodeLastPost
{
font-size: 0.813em
}

/* 15pt */
.Menu .menuHeader h3
{
font-size: 1.25em
}
/* 16px */
.Responsive .textCtrl
{
font-size: 1em
}


/* 18px */
.textCtrl.titleCtrl,
.textCtrl.titleCtrl input,
#visitorInfo .username,
#navigation .menuIcon,
#navigation .menuIcon:before,
#loginBar .textCtrl[type=text]
{
font-size: 1.125em
}

/* 10pt */
.xenOverlay.timedMessage .content
{
font-size: 1.5em
}

/* 20px */
#calnext, #calprev,
.discussionListItem .prefix,
.searchResult .prefix
{
font-size: 1.25em
}
 
Just to add to this, I only managed to get this to work properly by having my CSS template name begin with the letter 'z'. The reason seems to be that XenForo includes newly-created CSS template files in alphabetical order along with its own default ones.

So if your CSS file was called, say, myforum.css and you looked at the source code of the rendered page, you'd see something like this:

<link rel="stylesheet" href="css.php?css=attachment_editor,bb_code,editor_ui,likes_summary,message,message_user_info,moderator_bar,myforum,panel_scroller,quick_reply,thread_view&amp;style=2&amp;dir=LTR&amp;d=1383843711" />

…which, from my experimenting at least, means that your new styles don't get to override the styles in templates that come after it (quick_reply, thread_view) - unless, as someone mentioned earlier, you resort to specificity or !important.

(All of this is assuming I'm attaching my CSS templates correctly in PAGE_CONTAINER)
HTML: 
    <!--XenForo_Require:CSS-->
    <xen:require css="zstyle.css" />
 
Chris Deeming said:
You make that sound like a bad thing. Specificity is the correct way to handle overriding CSS rather than manipulating the order in which CSS is evaluated.
Click to expand...
And you make it sound like it's easy. Most people do not understand CSS, especially not that you can use specificity or !important to override declarations.
 
I never said it was easy. I was just saying that adjusting the specificity is the correct way.

If getting the CSS right is a problem, then maybe we can help.
 
I'm not convinced specificity is the best method - it's less efficient (if adding redundant parents to selector) and more verbose (redundancy or !important)
 
For the record, I fully understand and utilize specificity. Obviously specificity is not a bad thing. But neither is there anything 'incorrect' about using order of specification to override earlier styles in certain situations, such as when we wish to leave the default CSS templates untouched and simply offer our own overrides in our own custom template. There's nothing incorrect about that - it's simply an organisational choice and it saves having to add greater specificity to each and every custom selector.

It's not uncommon for custom CSS to be bolted on to the end of default CSS and to override in this way.

ETA: Your point about redundant parents Luke is a good one.
 
Back
Top Bottom