1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Closed Suggestions' started by vord, Oct 25, 2013.

  1. vord

    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

    <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" />
  2. Brogan

    Brogan XenForo Moderator Staff Member

    As I understand it, for technical reasons, this isn't possible.
    Amaury likes this.
  3. vord

    vord Member

    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.
  4. MagnusB

    MagnusB Well-Known Member

  5. Mike

    Mike XenForo Developer Staff Member

    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).
  6. vord

    vord Member

    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.
  7. Mike

    Mike XenForo Developer Staff Member

  8. vord

    vord Member

    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.

    /* 10px */
    .DismissParent .DismissCtrl,
    .previewTooltip blockquote,
    .ctrlUnit > dt dfn,
    .ctrlUnit > dt .error,
    .ctrlUnit > dd .helpLink
    font-size: 0.625em
    /* 10pt */
    font-size: 0.813em
    /* 11px */
    .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,
    .previewTooltip .posterDate,
    .xenForm .ctrlUnit > dt.explain,
    .ctrlUnit.sectionLink dt,
    .ctrlUnit > dd .explain,
    .ctrlUnit > dd > * > li .hint,
    .calweek a,
    .bbCodeEditorContainer a,
    #alerts li.alertItem,
    .footer .pageContent,
    .footerLegal .pageContent,
    .navTabs .navTab.selected .tabLinks a,
    .sidebar .userList .username,
    a.callToAction span,
    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 */
    .xenForm .formHeader,
    .xenForm .sectionHeader,
    .dataTable caption,
    .sidebar .visitorPanel .username,
    .sidebar .avatarList .username,
    .topside a:link, .topside a:visited, .topside a:hover,
    .nodeList .categoryStrip .nodeTitle
    font-size: 0.875em
    /* 12px */
    .xenForm .sectionHeader,
    .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,
    .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 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
  9. Luke F

    Luke F Well-Known Member

    This is very easy to workaround - for example on my forum I've created an extra .css template and added it in page_container
    wasder and vord like this.
  10. vord

    vord Member

    Thanks Luke - I hadn't spotted that. I can copy my rubbish into my own stylesheet and link it from there. :)
  11. Tooner

    Tooner Member

    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)
        <xen:require css="zstyle.css" />
  12. Chris D

    Chris D XenForo Developer Staff Member

    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.
    Bob likes this.
  13. Forsaken

    Forsaken Well-Known Member

    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.
  14. Chris D

    Chris D XenForo Developer Staff Member

    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.
  15. Luke F

    Luke F Well-Known Member

    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)
    Xon likes this.
  16. Tooner

    Tooner Member

    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.

Share This Page