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

Jaxel

Well-known member
#1
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?
 

Shadab

Well-known member
#2
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.
 

Jaxel

Well-known member
#3
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.
 

Shadab

Well-known member
#4
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.png
 

Jaxel

Well-known member
#5
I'm talking about the template "header"... Its not feasible to do this in "forum_view" for me right now.
 

Shadab

Well-known member
#6
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:
 

Mike

XenForo developer
Staff member
#8
In forum_view: (from memory)
Code:
<xen:container var="$nodeIdForCss">{$forum.node_id}</xen:container>
{$nodeIdForCss} should be available to header now.
 

Jaxel

Well-known member
#9
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...
 

Mike

XenForo developer
Staff member
#10
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.
 

Jaxel

Well-known member
#11
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.
 

Mike

XenForo developer
Staff member
#12
Look for $nodeBreadCrumbs (possibly followed by $forum) in the view params and modify the container params as needed.
 

Mike

XenForo developer
Staff member
#14
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.
 

Jaxel

Well-known member
#15
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.
 

cclaerhout

Well-known member
#16
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
 

HWS

Well-known member
#17
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/
 

CyberAP

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

cclaerhout

Well-known member
#19
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);
 

cclaerhout

Well-known member
#20
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.