suggestion: custom themes / templates

[DanielRuf]

I think it is a good addition to have some custom themes / templates for the phpMussel warning, for example based on Twitter Bootstrap.

I could contact some webdesigners I know to create some, so the users of phpMussel can choose between different themes / templates and phpMussel might be more appealing and looking modern.

This should be part of an additional repository (just the themes / templates). If this makes sense, I would create it and work with the designers and spread the word about phpMussel.

What do you think?

[Maikuolan]

Yeah, that would be awesome. :-)

I've always liked the idea of having custom themes and templates, but unfortunately, graphics and aesthetics has never been a forte of mine (I've always gravitated towards writing code, planning functions and the actual mechanics behind programs and scripts, but trying to deal with graphics and aesthetics can make my eyes glaze over a little sometimes), and it's something that I've always personally found very time consuming and tedious to do, and so, I don't think designing custom themes or custom templates is something that I'll ever end up personally doing myself, but, if custom themes and templates is something that you would be willing to take charge of, I'd absolutely be in full support of it. :+1:

If you're willing to do so, definitely, go for it, and let me know whatever you need me to do to help make it happen. :-)

[DanielRuf]

Great, I will plan and prepare this and let you know when there is something released, what can be actually used in production.

[Maikuolan]

Awesome. :-)

[DanielRuf]

Sorry, took a bit longer. Added a first theme (blue).

https://github.com/DanielRuf/phpMussel-themes/tree/master/blue

There are now 2 versions of the base main theme. One with the default colors (base) and one which can use a (color) theme (theme.colors.css).

Just use the theme.colors.css (will also minify this in the future) of the preferred custom theme in combination with the base_colors main theme.

If you have any ideas how this can be improved, please let me know. Should we remove the original_div and original_table themes?

Other planned themes (additional color schemes will be also created for all themes):

• [x] letterpress effect
• [x] gradients (subBlack)
• [ ] shadows
• [ ] opacity
• [ ] patterns (SubtlePatterns)
• [ ] webfonts
• [ ] icon fonts
• [ ] possibly other templates

These will be created and the different color schemes will come after this. But this should not be a problem as everyone can easily adjust the colors when the different themes are released.

Any ideas for some themes or colors, images, palettes?

[Maikuolan]

No worries, no rush. :-)

Use of dat.gui sounds interesting (as mentioned at https://github.com/DanielRuf/phpMussel-themes/issues/1).

Maybe we could make a light-on-dark and dark-on-light theme or something similar (like how phpBB and several other forum systems have variations on "subSilver" and things like that)? Seems to be quite popular. Not sure how easy it would be though; Design has never really been my forte. ^.^

Something for the to-do list: At some point, we may need to document how people are to correctly use these themes, too; Like where to put the CSS file/data, for example (because phpMussel output is sent directly from the requested page and doesn't utilise any redirects or similar, the browser shouldn't ever be aware of the phpMussel directory itself, and so, we may need to supply instructions as to how to link the CSS and that sort of thing).

I haven't tested the theme yet, but I'll do that later today.

[DanielRuf]

Use of dat.gui sounds interesting (as mentioned at DanielRuf/phpMussel-themes#1). Used it in the past (some years ago), it is very good for live demos and changing values.

Maybe we could make a light-on-dark and dark-on-light theme or something similar (like how phpBB and several other forum systems have variations on "subSilver" and things like that)? Seems to be quite popular. Not sure how easy it would be though; Design has never really been my forte. ^.^ This should be no problem. I will start planning them and take a look at the phpBB themes.

Something for the to-do list: At some point, we may need to document how people are to correctly use these themes, too; Like where to put the CSS file/data, for example (because phpMussel output is sent directly from the requested page and doesn't utilise any redirects or similar, the browser shouldn't ever be aware of the phpMussel directory itself, and so, we may need to supply instructions as to how to link the CSS and that sort of thing). Right, I will prepare a readme file for this and try to make it easier but also decrease duplicated code which is not really necessary (like the same template file).

Best option is to place the CSS files above the vault directory and reference them in the template.html file with the full http://.../*.css path.

This can be further improved when using something like a css_url variable in phpmussel.inc (under foo="bar").

phpmussel.ini: css_url="http://localhost/phpmussel/"

template.html:

<link rel="stylesheet" href="{css_url}/theme.min.css" />
<link rel="stylesheet" href="{css_url}/theme.colors.css" />

This makes it very easy to customize.

When we have this variable and the new base template in the master branch, people just have to set the css_url value and upload the CSS files to the right directory in their public webspace.

Alternatively they can insert it directly into the template using also a variable like css_code and the full code (<style>CSS code</style>) in one string as value.

Or we include the full CSS code without the colors into the template file and define some basic variables for the colors in the phpmussel.ini file, but this (setting a single CSS value) might not be so flexible compared to a full CSS file or CSS string. But we couldconvert the CSS selectors to variables and the CSS rules for each of them can be set in the phpmussel.ini file with a CSS string.

What do you think?

[DanielRuf]

Can you point me to the right phpBB style that you mean (dark version)? https://www.phpbb.com/customise/db/style/prosilver_special_edition/demo/3.1

[Maikuolan]

There's always been subSilver (the standard "dark-on-light"), of course, but, back with phpBB2, there was a style/theme called (at least, I think it was called, from memory) subBlack (the "light-on-dark"), which was basically a reverse of the standard subSilver:

Although it's not entirely the same, the "AnimeZone" style/theme on the demo page you've linked above seems quite similar, I think.

[DanielRuf]

There's always been subSilver (the standard "dark-on-light"), of course, but, back with phpBB2, there was a style/theme called (at least, I think it was called, from memory) subBlack, which was basically a reverse of the standard subSilver:

Although it's not entirely the same, the "AnimeZone" style/theme on the demo page you've linked above seems quite similar, I think.

Found a demo which I can use for retrieving the color values for the CSS: http://www.phpbbhacks.com/phpbb2/subblack/demo/

[DanielRuf]

Some first subBlack theme: https://github.com/DanielRuf/phpMussel-themes/tree/master/subBlack

What do you think about https://github.com/Maikuolan/phpMussel/issues/22#issuecomment-121214871

Should I add the different possibilities to some readme (how to install custom themes)? So users know them and can choose one of them or use multiple (like they want). In my opinion we should stay flexible and not force one specific solution.

[Maikuolan]

What do you think about #22 (comment)

Best option is to place the CSS files above the vault directory and reference them in the template.html file with the full http://.../*.css path.

This can be further improved when using something like a css_url variable in phpmussel.inc (under foo="bar").

phpmussel.ini: css_url="http://localhost/phpmussel/"

template.html:

<link rel="stylesheet" href="{css_url}theme.min.css" />
<link rel="stylesheet" href="{css_url}theme.colors.css" />

This makes it very easy to customize.

When we have this variable and the new base template in the master branch, people just have to set the css_url value and upload the CSS files to the right directory in their public webspace.

Alternatively they can insert it directly into the template using also a variable like css_code and the full code (<style>CSS code</style>) in one string as value.

Or we include the full CSS code without the colors into the template file and define some basic variables for the colors in the phpmussel.ini file, but this (setting a single CSS value) might not be so flexible compared to a full CSS file or CSS string. But we couldconvert the CSS selectors to variables and the CSS rules for each of them can be set in the phpmussel.ini file with a CSS string.

What do you think?

I like the idea of placing the CSS files above the vault directory and then referencing them using a css_url variable. Of course, anything within or below the vault directory needs to be publicly inaccessible to maintain the security of phpMussel (so, CSS files wouldn't work in there), but, referencing to files above the vault directory should work okay.

I agree, I think that's probably the best option, although, as is, I'd still be slightly concerned about compatibility between different implementations of phpMussel (such as for multiple domains/websites using the same installation/configuration).

BTW, sorry for the delayed reply; Meant to get to this a bit earlier but got caught up with other things.

I think putting CSS values directly into the phpmussel.ini file might potentially seem unnecessarily complicated for some people, and also, like you've suggested, it could reduce flexibility; I definitely think flexibility should be important with things like custom themes/templates/etc, because if we lose flexibility, we somewhat lose the purpose of allowing custom themes and templates (in that, if it isn't flexible enough for what's wanted, users might eventually need to re-code things anyhow in order to achieve what they want, which would make a system for custom themes somewhat redundant), so, I don't think we should put CSS values directly into the phpmussel.ini file; Generally, the more flexible, the better.

Putting the CSS values directly into the template file instead of into CSS files would probably be safer for compatibility (as is the way the template.html is currently structured), because, if we did it that way, users wouldn't need to worry about a css_url or anything like that, and the phpMussel installation could work across multiple websites and wouldn't need to be pigeonholed to a particular location in order for the CSS values to be retrieved, but, of course, doing it this way, from a modern webdesign perspective, is frowned upon by many webdesigners, and isn't usually considered ideal.

I know that it's considered common practise in webdesign to keep all CSS in CSS files, to not put CSS directly into HTML files, and to then reference CSS files as they're needed by whatever files are needing them, and also, I think it looks cleaner that way; I also know that for many people, dumping everything into singular files can be significantly easier sometimes, and many people prefer lazy solutions; Ideally, I'd like things to be done in a way that most people would consider to be -correct-, which in this context, would be to stick to the common practise of keeping all CSS in CSS files and etc (my apologies to those that prefer lazy solutions :P), but then, there's the aforementioned concern about compatibility, too.

Maybe what we could do (somewhat as a compromise between correct and clean versus lazy and more compatible), is have one default template that phpMussel can use if the user forgets to set the css_url variable, and that default template can (as it is currently) have all its CSS values defined internally, and have a different default template to use for when the user has something set to the css_url variable, and that different default template can use the first method you'd suggested (of placing CSS files above the vault directory and referencing to them with a css_url variable)?

Also, should we maybe have different HTML template files too, as well as the CSS files? Or just stick to the defaults?

Anyhow, let me know what you think about this.

Should I add the different possibilities to some readme (how to install custom themes)? So users know them and can choose one of them or use multiple (like they want). In my opinion we should stay flexible and not force one specific solution.

Yeah, documentation/readmes are always good, and I agree, we should stay flexible. :-)

[DanielRuf]

Maybe what we could do (somewhat as a compromise between correct and clean versus lazy and more compatible), is have one default template that phpMussel can use if the user forgets to set the css_url variable, and that default template can (as it is currently) have all its CSS values defined internally, and have a different default template to use for when the user has something set to the css_url variable, and that different default template can use the first method you'd suggested (of placing CSS files above the vault directory and referencing to them with a css_url variable)?

Right, in my opinion this provides the greatest flexibility and if they change nothing, they have to worry about nothing. If they use themes, they would get the instructions from the readme, how to install them properly. I will prepare some documentation and see if I can improve the structure of the themes.

Also, should we maybe have different HTML template files too, as well as the CSS files? Or just stick to the defaults?

At the moment there are only themes. I see no need for different templates. Do you? The base_colors theme is the current base for the blue and subBlack themes and is required. The template.html of base_colors (and also base) is the same for all themes.

[Maikuolan]

Right, in my opinion this provides the greatest flexibility and if they change nothing, they have to worry about nothing. If they use themes, they would get the instructions from the readme, how to install them properly. I will prepare some documentation and see if I can improve the structure of the themes.

Sounds good. :-)

At the moment there are only themes. I see no need for different templates. Do you?

Hm, not particularly. If we can handle everything using CSS, I think it'll be okay with just the default template(/s). If we wanted to, maybe some more tag names could be added, to allow for a greater range of CSS possibilities, but, it should be okay, I think.

[DanielRuf]

Hm, not particularly. If we can handle everything using CSS, I think it'll be okay with just the default template(/s). If we wanted to, maybe some more tag names could be added, to allow for a greater range of CSS possibilities, but, it should be okay, I think.

Exactly.

[Maikuolan]

Aside from the README information and implementation of some specific theme ideas, I think we've done everything mentioned in this issue thus far.

Should be okay to close, or should we keep this open to track implementation?

[DanielRuf]

You are right. Further things regarding the themes will be tracked in the separate repo.

We can close this issue here.