News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Output template filename to class (for use in css)

Started by Moskis, April 22, 2011, 11:48:43 AM

Previous topic - Next topic
Print
Go Down Pages1
User actions

Moskis

April 22, 2011, 11:48:43 AM Last Edit: April 22, 2011, 11:51:51 AM by Moskis
Hi,

I have been searching online, in the wiki and in the code and i can't seem to find a way to echo the current template name in a class.

The point is i want to add a class with the template name to my main wrapper div, which is in index.template.php. To clarify, if i'm in the forum index for example, since it'd be using BoardIndex.template.php, i'd want to output "boardindex". It's ok if i can get a variable with the full filename though, so i can sanitize it and then print it.

I've tried $context['template'] and everything i have been able to think about, but nothing works. The closest i have gotten to work is $context['page_title_html_safe'] which doesn't help me at all anyway.

Isn't there a way to get this done?

Sorry for my english by the way, and thanks for any replies.

Edit: In case is necessary to know, i'm editing the default curve theme in a smf 2.0 rc5 installation

Moskis

#1
May 03, 2011, 11:21:32 PM
Buming to see if anyone can help, i'm still wondering about this and would be nice to edit index.template instead of every template to achieve it.

To sum it up i'd like to have something like <body id="boardindex">,<body id="messageindex">,<body id="display">,<body id="post">, etc. depending on the current template

Antechinus

#2
May 03, 2011, 11:45:14 PM
You'd want to change the id by using the current action rather than the template name as such. Something like <div id=" ' . ['current_action'] . ' ">

That probably wont work because a/ I haven't tested it and b/ I'm only the css/markup guy anyway so Sources code isn't my strongest point, but the idea is sound. Somebody will know for sure. This should be in Coding Discussion anyway. I'll move it.

Antechinus

#3
May 03, 2011, 11:49:20 PM
Actually this works for admin but displays a blank class for the board index. Needs some tweaking.

Code Select
class=" ' , $context['current_action'] , ' "

You could just add a conditional to output a default name if no action was selected.

Moskis

#4
May 04, 2011, 12:37:57 AM
Thanks for your reply.

I did try with actions, but the problem is they don't seem to always match with templates, so for example i don't see actions at all either in board index, forum index or in topic pages. That's why i've been trying to find a work around but with no luck.

A key in $context that specifically displays the template and is accessible from index.template.php would be perfect, which could look like

Code Select
'<body class="', $context['current_template'], '">'

But in case there's some other variable somewhere with this, i wanted to ask and see if anyone knows.

I think this should be even added to the core alogn with more semantic clasess since it can make it very easy to style sections specifically. I work a lot with WordPress and my body tag will usually look something like this:

Code Select
<body class="single-post postid-1359 logged-in windows firefox ff4">

I'd add a feature request for it but i don't think i have permission to post in there.

Even though that example may be a bit overkill i'm sure you'll agree it can be very helpful in many situations. :)

Antechinus

#5
May 04, 2011, 12:52:54 AM
Should be able to do it on the basis of the template name, but offhand I don't know how to do that. I could probably figure it out with enough swearing, but by the time I do that somebody else will probably have given you the answer. Anyway, I have a smartphone theme to code. Best of luck. :)

bloc

#6
May 04, 2011, 05:52:42 AM
I can't remember exactly where it is, in the $settings variable perhaps or even in $context - but write a "<pre>' , print_r($settings) , '</pre>" right before the </body> tag for example - that will show you what you have available to use.

Not at my computer now, but I *think* maybe $context['subtemplate'] would help you.(as said, not sure about the name, so do check)

Antechinus

#7
May 04, 2011, 07:46:15 AM
According to Sinan:

Quote from: [SiNaN
You would unfortunately need a little change in Sources to do that:

Sources/Load.php

Code (Find) Select
loadTemplate('Compat');

Code (Replace) Select
loadTemplate('Compat');

if ($template_name != 'index')
$context['loaded_templates'][] = $template_name;

Themes/theme/index.template.php

Code (Find) Select
<body>';

Code (Replace) Select
<body class="', implode(' ', $context['loaded_templates']), '">';

So I'd be trying that. :)

bloc

#8
May 04, 2011, 09:16:58 AM
Theres one obstacle about that..if you just use whatever templates are loaded, you could also get additonal ones => multiple CSS names. I would rather hunt down the current subtempalte name, since it will ever be just one of that, but perhaps several templates loaded.

Even worse if you have mods adding their own templates too lol. For example, most portals add a block template in every section.

EDIT: perhaps "subtempalte" is the wrong name,what I mean is whatever name is used for that section. "Boardindex" or "PM" or "Memberlist" etc. I know it exists because I have hunted it down in the past, though i can't remember where its located atm.

Moskis

#9
May 04, 2011, 11:38:11 AM
Hi,

Thanks a lot for the feedback.

I've printed $settings & $context, the latter containing a ton of stuff :P but nothing about the current template file..

The other day while trying this i did try to use $context['sub_template'] and several other possible ones i saw in this list: http://wiki.simplemachines.org/smf/$context#sub_template

I think sub_template would be the one but is not loaded or available for use from within index.template.php, although i'm not sure.

Sinan's approach did work though, i haven't tested it yet in all sections but it seems to print the bloody template name which is what i want. now i can even combine it with actions for more specificity, like this:

Code Select
<body class="', implode(' ', $context['loaded_templates']), empty($context['current_action']) ? ' no-action' : ' action-', $context['current_action'], '">

As Bloc pointed out, on some sections several classes appear, like GenericControls, GenericList, etc, but at the moment i don't think those will cause any problems..

Thanks again for the help!

Antechinus

#10
May 04, 2011, 05:52:39 PM
Good. Extra classes shouldn't do any harm if they aren't called elsewhere in the css. From memory I can't recall any template name anywhere in the CSS, but that's easy enough to check.

[SiNaN]

#11
May 05, 2011, 11:24:13 AM
sub_templates will not be useful in this case because there are a lot of them named as template_main(). There's $settings['current_include_filename'] but it won't be reliable because it's used by language file includes as well. Using the the templates that are loaded would be the best choice. There's nothing wrong with having multiple classes but you could exclude generic stuff like I did for index template and use a prefix to prevent clashes with other classes.

However, if I were to do this with my theme, I would do this:

index.template.php

Code (Find) Select
// Show right to left and the character set for ease of translating.

Code (Replace) Select
$classes = array();
if (!empty($context['current_action']))
$classes[] = 'action_' . $context['current_action'];
elseif (!empty($context['current_topic']))
$classes[] = 'action_topic';
elseif (!empty($context['current_board']))
$classes[] = 'action_board';
if (!empty($context['menu_data_' . $context['max_menu_id']]['current_area']))
$classes[] = 'area_' . $context['menu_data_' . $context['max_menu_id']]['current_area'];
if (!empty($context['current_subaction']))
$classes[] = 'subaction_' . $context['current_subaction'];
if (empty($classes))
$classes[] = 'action_index';

// Show right to left and the character set for ease of translating.

Code (Find) Select
<body>';

Code (Replace) Select
<body class="', implode(' ', $classes), '">';

Then using multiple class selectors, I can target a specific area by requiring a set of classes:

Code Select
/* Profile > Buddies/Ignore List > Edit Ignore List */
.action_profile.subaction_ignore.area_lists
{
background: #FF0000;
}
/* Admin > Posts and Topics > Censored Words */
.action_admin.area_postsettings.subaction_censor
{
background: #00FF00;
}
Former SMF Core Developer | My Mods | SimplePortal

bloc

#12
May 05, 2011, 11:55:10 AM
Ah..yes. I would just use $context['current_action'] then actually.

If its empty, just check $_GET['topic'] or $_GET['board'], which gives "display" and "messageindex", and if all 3 empty: "boardindex". That would give a unique name for the sections. Can all be done inside the theme too.

Moskis

#13
May 05, 2011, 12:06:20 PM
Hi,

Thank you very much [SiNaN].

I've taken a look at this method and it really works well, very tidy and detailed, so i'll stick with this one.

Also Bloc you're right, that should work too, but with the code [SiNaN] posted you even get subpages added as a class which results in something like this:

Code Select
<body class="action_profile area_statistics">

And again thanks to everyone that replied, this is very helpful both to style my theme and to learn about SMF.
Print
Go Up Pages1
User actions
Advertisement: