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

Accessing forum information in CSS?

Discussion in 'XenForo Development Discussions' started by Jaxel, Nov 4, 2010.

  1. Jaxel

    Jaxel Well-Known Member

    In my header CSS I have the following:
    I would like to be able to do something like:
    Is something like this at all possible? I have tried it, but it doesn't work. How would I get information about the forum into the header css?
  2. Shadab

    Shadab Well-Known Member

    I don't think that's possible at all; since the css is being requested via a separate http request; rather than embedded "on page". So the css doesn't actually know anything about the location from where it's being loaded. The browser sends the request, for example,


    so, the only parameters being passed to the script are css (list of css templates to fetch), and style (style id).

    Theres one (dirty) solution I can think of: Put your CSS rules right in your forum template. This way you can access the node_id's and other data fields easily.
  3. Jaxel

    Jaxel Well-Known Member

    I just tried that... the forum information is not accessible in the header.
  4. Shadab

    Shadab Well-Known Member

    In which template (exact name) are you placing the css rules?


    I just tried and it works fine... Edit the template: forum_view
    And add this snippet near the top:
    <style type="text/css">
    #header {
    	background-image: url('dummy.php?f={$forum.node_id}');
    Now accessing a forum, with the node_id of 6, correctly requests the "dummy.php?f=6" image.

  5. Jaxel

    Jaxel Well-Known Member

    I'm talking about the template "header"... Its not feasible to do this in "forum_view" for me right now.
  6. Shadab

    Shadab Well-Known Member

    No. As explained in [post #2], it's not really possible to access the requesting node (or thread) data in any CSS template.

    Edit: You mean the "header" html template? Or, the "header.css" css template? I'm now confused because you also referred to "header css" twice in the first post. :confused:
  7. Jaxel

    Jaxel Well-Known Member

    "header" is not a css template...
  8. Mike

    Mike XenForo Developer Staff Member

    In forum_view: (from memory)
    <xen:container var="$nodeIdForCss">{$forum.node_id}</xen:container>
    {$nodeIdForCss} should be available to header now.
    Forsaken and Shadab like this.
  9. Jaxel

    Jaxel Well-Known Member

    Thanks Mike... can I ask you to clarify a bit though?

    Adding the code above, will let me use the variable $nodeIdForCss in the "header.css" template? or "header" template?

    They are two different templates and this has been a point of confusion in this thread...
  10. Mike

    Mike XenForo Developer Staff Member

    You will effectively never be able to use page specific elements in the CSS templates. Though really, you don't have to - there's nothing preventing you from embedding the CSS where you need (best practices aside).

    The CSS templates are designed to be aggressively cached.
    cclaerhout likes this.
  11. Jaxel

    Jaxel Well-Known Member

    Is there any way to do this progmatically? (did I just invent a word?)

    Basically I want to force a specific header image depending on what forum a user is on. This would be on forum view, create thread, thread view, add reply, edit reply, etc, basically any area that is within a node. I know I can do this with listener classes and extensions, but that would lead to a lot of redundant code. Basically I would need to write a function for each and every possible page, as well as having a template extension for each and every page.

    There has to be a better way.
  12. Mike

    Mike XenForo Developer Staff Member

    Look for $nodeBreadCrumbs (possibly followed by $forum) in the view params and modify the container params as needed.
  13. Jaxel

    Jaxel Well-Known Member

    How would that let me access node information in logo_block template?
  14. Mike

    Mike XenForo Developer Staff Member

    That's not in a template - you need to use an event to see what's coming out of the controller to do that manipulation.
  15. Jaxel

    Jaxel Well-Known Member

    I found that what I was trying to do is already done... in a variable called {$quickNavSelected}...

    Shame too... because I spent an hour building code listeners and template extensions to generate this automatically.
  16. cclaerhout

    cclaerhout Well-Known Member

    That's an old topic, I know, but thank you for the explanation. Just an update to say I've found a problem to embedded css in "normal" templates. If this "normal" template is loaded inside an overlay, the css rules are loading twice... and IE8 doesn't like it at all => will not display some pictures for example.

    Edit:... may be because of this:

    Edit2: confirmation, fullpath solves the problem... bloody IE
  17. HWS

    HWS Well-Known Member

    I can confirm that weird behavior. It also applies to js files (affected users cannot post any more).
    Whereas we can setup XF to use absolute URLs for js files via a config parameter, no such possibility is available for CSS files. Resulting in massive complaints from IE users with random broken design.

    I would consider this as a bug of XF worth to be updated in the next version.
    Since we don't expect a new version soon, our coders are looking into extending the code to serve css with absolute URLs instead of the current relative URLs used by xenforo.

    See also: http://xenforo.com/community/threads/cant-reply-in-some-threads.41883/
  18. CyberAP

    CyberAP Well-Known Member

    Body element already has all the required classes in it. So the solution is to write css like this:
    .node11 #header { background: red; }
  19. cclaerhout

    cclaerhout Well-Known Member

    If css are inside css templates, I don't have any problems with IE8.

    For javascript file, I have a problem to load dynamically TinyMCE with its XenForo JS configuration on IE7 and it's again a problem of fullpath.
    => the xen tag "<xen:require js" is parsing js with a relative path. If I put the full path, then TinyMCE loads on IE7 but still with a few graphic problems.

    The solution to load full path only on IE7 could be this one
    1)Install my addon: http://xenforo.com/community/resources/browser-detection-mobile-msie.1098/
    2) Do this modification:

    File: XenForo_Template_Abstract
            return preg_replace('#^js/#'XenForo_Application::$javaScriptUrl '/'$jsFiles);
    Replace with
            $option XenForo_Application::get('options');
    $visitor XenForo_Visitor::getInstance();
    $path = ($visitor->getBrowser['IEis'] == 7) ? $option->boardUrl '/' '';
    preg_replace('#^js/#'$path XenForo_Application::$javaScriptUrl '/'$jsFiles);
  20. cclaerhout

    cclaerhout Well-Known Member

    Ok, and to correct the last problems on IE7 for loading dynamically TinyMCE, the "imagePath" of the "General" Style Properties must be absolute too, then it's working.

Share This Page