No CSS stuff in Vanilla core files, please ;)

Doc SoLo

I started customizing Vanilla a few days ago. I need to completely rework it's theme and style because I want to base it on a specific extisting XHTML/CSS-Framework. I was surprised to find "hardcoded" CSS-classes in Vanilla's sources given that it's promoted as highly extensible and customizable. It starts with the inclusion of "vanilla.css" in init_vanilla.php. There seems to be no easy way that each theme can have its own set of CSS'. Next I found this in Vanilla.Control.Menu.php:

function TabClass($CurrentTab, $ComparisonTab) { return ($CurrentTab == $ComparisonTab) ? ' class="TabOn"' : ''; }

This "TabOn" has to be renamed to "current" for my framework. But I don't want to hack around in core files and rewriting this and that function seems to be less than optimal to me.

So I suggest to put each and every single bit of CSS into the themes folder. You never know, what somebody wants to do and what his reason might be to rename CSS-classes and the like.

I have to state that I'm not a php-coder and possibly lacking knowledge to fully understand the concepts behind Vanilla. In this case I would be thankfull if somebody could clear these things up a little for me.

Ciao,

Doc SoLo

Minisweeper

Well each theme can have its own css - if you look you'll find that vanilla.css is within the style folder of the vanilla theme folder. Make one of those for your own theme (as per the documentation) and that's where it'l look for the css I believe. As for class names being set in core files - I think it'd be pretty difficult to avoid stuff like that. The vanilla theming engine isnt entirely flawless but it does the job pretty well and you're one of the first to complain. Is there any particular reason you must use different class names? I suppose the easiest way to get round this would be to copy the TabClass function into the menu.php theme file and edit it in there so it gave you the class name you wanted. I'm not sure if that's the right way, though.

Dinoboff

Vanilla is very flexible.
Try to add this extension:
<?php /* Extension Name: TabOnName Extension Url: http://lussumo.com/community/discussion/3388/no-css-stuff-in-vanilla-core-files-please-/ Description: Allow to change in your theme the class name of the active tab Version: 0.1 Author: Dinoboff Author Url: dinoboff at hotmail dot com */ if (in_array($Context->SelfUrl, array("categories.php", "comments.php", "extension.php", "index.php", "post.php", "search.php", "settings.php"))) { require($Configuration['LIBRARY_PATH'] . '/Vanilla/Vanilla.Control.Menu.php'); class menuWithoutCSS extends menu { function TabClass($CurrentTab, $ComparisonTab, $ClassName = 'TabOn') { return ($CurrentTab == $ComparisonTab) ? ' class="' . $ClassName . '"' : ''; } } $Context->ObjectFactory->SetReference("menu", "MenuWithoutCSS"); } ?>

Minisweeper

Purely out of interest here, dinoboff, is that if statement necessary if you want it on every page?

Dinoboff

not for people.php ?

placenamehere

classes are not CSS.. they're html attributes often with semantic value... CSS can reference element by them, but it can reference elements in lots of ways.

now, to get back around to your issue of your existing framework needing particular markup in place in order to function properly. Without being real familiar with the code I'd suggest that that particular function could be made more intelligent by accepting on and off strings for overriding the default class values, and that would be one way of solving the issue with HTML in core files...

But that still doesn't solve your immediate issue... but you can just get around that in the short term by ignoring the function all together and testing CurrentTab inline right in the template code.

Dinoboff

well... if ($Context->SelfUrl != "people.php") {
;-)

placenamehere

I'd suggest that that particular function could be made more intelligent by accepting on and off strings for overriding the default class values

like Dinoboff posted.. though I'd suggest if this changed in the core that you could also pass it an off string... just to be complete... so you can do a class="different" flipping to class="different on" for example

Dinoboff

Forgot to say that will the extension on, you can edit menu.php in your new template that way (line 22):
echo '<li'.$this->TabClass($this->CurrentTab, $Tab['Value'], 'current').'><a href="'.$Tab['Url'].'" '.$Tab['Attributes'].'>'.$Tab['Text'].'</a></li>';

Doc, if you find other little css annoyance like this, Mark might be able to fix them before Monday and the release of Vanilla 1.0.1

Doc SoLo

Thanks for your comments and the posted code. Some background information: The framework I'm talking about is called YAML. Unfortunatly it's website is only available in german language, but perhaps you can get it's idea out of this diagram: http://www.yaml.de/artikel/css/zentrales_stylesheet.html It basically consists of a set of linked XHTML and CSS files which are highly tweaked in terms of browser compatibility and standards compliance. They are frequently updated to solve browser issues and so on. If you properly use this framework all you have to do on these updates is to overwrite the framework's CSS with the new versions and maybe update the Master-XHTML of your site a bit. Now my intention was to build a website and a forum based on this framework, so I could use the same CSS for both. That's why the classes must have specific names. I took a quick look at vanilla's themes files and started to put the YAML-specific XHTML-markup in when I stumbled across the mentioned problems. I don't know yet how many more functions contain hardcoded markup. In my opinion it's not a convenient way to develop an extension in parallel to a theme just to be able to have custom CSS classes. Remember: I'm not changing any functionality, just optics. So there should be a way to have custom named CSS files included within themes and, not most (which is the case now), but ALL markup should be contained within the theme files. Ciao, Doc SoLo

Minisweeper

Dinoboff - surely if your class is just extending the existing menu class (that's what it does, right? I'm an oop noob) it will only be effective on pages where the menu class is being used anyway? So you dont need to tell it not to happen on pages which the menu class isnt used on cause it wont anyway? I'm just trying to get to grips with this stuff...

pbear

@Doc SoLo
I think this is the perfect opportunity where you would create not just a new style, but a new YAML compliant theme. This would mean going in and changing the theme files' code directly (make a copy of the files you need to alter and put them in the first level of your theme (not style) directory), but it would be self-contained and not affect the "core" operation of Vanilla. Yeah, you have to check for changes with new Vanilla releases, but so does every Vanilla add-on.

Doc SoLo

@Dinoboff: Oops, I guess I'm a little late then for 1.0.1. But if I keep it up with this project I'll post my findings here. @Minisweeper: Yes, every theme can have it's own CSS. You can even put custom ones in by adding their links as plaintext in /themes/theme_name/head.php. But "vanilla.css" and "vanilla.print.css" are always included. You can't switch this off by means of /themes. If you want to include the main CSS of your website you probably don't want to call it "vanilla.css". Ciao, Doc SoLo

Doc SoLo

@pbear: That's exactly what I started to do. And so far I had to leave "theme-space" for two things: #1 Switch off the inclusion of vanilla.css and vanilla.print.css. #2 Change the class of the active menu tab from "TabOn" to "current". I don't know how much more to come. Ciao, Doc SoLo

Dinoboff

for the TabOn issue, a simple request to Mark should be enought.
For the inclusion of vanilla.css and vanilla.print.css, what is the problem? Couldn't you empty them?

@Mini: You are probably right, but I am too vanilla and php noob to be sure.

Mark

I changed the method:

function TabClass($CurrentTab, $ComparisonTab, $CssClass = '') { if ($CssClass == '') $CssClass = 'TabOn'; return ($CurrentTab == $ComparisonTab) ? ' class="'.$CssClass.'"' : ''; }

So now you can use your own class name and it will just default to TabOn. If you find anything else like this, feel free to report it and it will be changed. Rome wasn't built in a day.

Doc SoLo

Looks like you wouldn't need more than two days. ;) Thanks for the quick solution. #1 remains. Is it possible to completely control the inclusion of CSS-files within themes? Ciao, Doc SoLo

pbear

Could you edit vanilla.css to be but one line that is an @import link to your standard CSS file?

I'd hate to try and "zero out" a CSS doc as big as vanilla.css.

Doc SoLo

There are many ways to deal with this. One can do an @import in vanilla.css as you mentioned. But this way you get a useless HTTP-Request which isn't exactly good webdesign. One can just rename his mylittlesite_base.css to vanilla.css. But you probably don't want to call your homepage's CSS "vanilla.css" if you like to use one file for both. The last option is to comment out the CSS inclusion in init_vanilla.php which isn't that hard to do even on every update. I surely find a solution for now. But I feel that none of these options is a way how this should be treated in Vanilla. That's why I ask Mark to think about this issue. Maybe he has other reasons why he wants to include CSS within Vanilla core files. Extensions may include their specific CSS anyway. I don't know how to do this right. My idea was to allow complete control over CSS inclusion within theme-space. Ciao, Doc SoLo

WallPhone

I think this is a noble goal. It brings vanilla closer to complete separation between presentation (the theme) and the back end logic.

bugsmi0

I agree with the no CSS in the core files and/or extension files if it can be avoided,ideally when an extension is added it would automatically add the CSS to the style sheet.

I'm noticing some CSS height issues that is interfering with layout, could be the overuse of floating I see in Vanila, I also try to avoid floating if I can as well unless really necessary. To float every freaken thing in the stylesheet is just abuse lol