Accessing forum information in CSS?

Jaxel

Well-known member
In my header CSS I have the following:
#header
{
@property "header";
background: @primaryMedium url('styles/header/header.php') no-repeat center top;
@property "/header";
}

I would like to be able to do something like:
#header
{
@property "header";
background: @primaryMedium url('styles/header/header.php?fid={$forum.node_id}') no-repeat center top;
@property "/header";
}

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?
 
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,

./css.php?css=xenforo,form,public&style=2​

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.
 
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.
I just tried that... the forum information is not accessible in the header.
 
I just tried that... the forum information is not accessible in the header.
In which template (exact name) are you placing the css rules?

Edit:

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

Now accessing a forum, with the node_id of 6, correctly requests the "dummy.php?f=6" image.

dummy-request.webp
 
I'm talking about the template "header"... Its not feasible to do this in "forum_view" for me right now.
 
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:
 
In forum_view: (from memory)
Code:
<xen:container var="$nodeIdForCss">{$forum.node_id}</xen:container>
{$nodeIdForCss} should be available to header now.
 
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...
 
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.
 
In forum_view: (from memory)
Code:
<xen:container var="$nodeIdForCss">{$forum.node_id}</xen:container>
{$nodeIdForCss} should be available to header now.
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.
 
Look for $nodeBreadCrumbs (possibly followed by $forum) in the view params and modify the container params as needed.
 
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.
 
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.
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.
 
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.

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:
http://harinderseera.blogspot.tw/2011/06/ie8-quirk-css-file-requested-twice-when.html

Edit2: confirmation, fullpath solves the problem... bloody IE
 
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:
http://harinderseera.blogspot.tw/2011/06/ie8-quirk-css-file-requested-twice-when.html

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/
 
Body element already has all the required classes in it. So the solution is to write css like this:
.node11 #header { background: red; }
 
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/

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
Search:
PHP:
        return preg_replace('#^js/#', XenForo_Application::$javaScriptUrl . '/', $jsFiles);
Replace with
PHP:
        $option = XenForo_Application::get('options');
        $visitor = XenForo_Visitor::getInstance();
        $path = ($visitor->getBrowser['IEis'] == 7) ? $option->boardUrl . '/' : '';
        return preg_replace('#^js/#', $path . XenForo_Application::$javaScriptUrl . '/', $jsFiles);
 
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.
 
Top Bottom