Theme colour settings

[ehren.]

Hello,

After continued use with the theme system, I figured I'd post some of my feedback here.

---

The 4.x theme system currently has 58 colour theme settings, which may seem great for customization at first, but it can quickly become a burden when trying to create a consistent colour scheme since so many colours need adjusting. An ideal theme system would include maybe 4-5 primary and secondary colours with different shades. Those colour settings would then be used throughout the suite by all elements, instead of having individual settings for the most basic elements (when's the last time someone modified the Rating "hover" star value for example)?

I understand this feedback will not be implemented into 4.1 or 4.2 due to the extensive nature, however a simplified theme system would make customization infinitely more efficient compared to the current system since you'd be able to adjust the entire colour scheme by modifying only a few values.

---

Secondly, countless areas of the css code fail to utilize the theme settings. The introduction of the leader boards is a perfect example of this. Upon upgrading to .17, I realised the hex colours were hard-coded into the css, which means it's necessary to modify the css if you want to adjust the leader boards. This means that every dark theme is not naturally compatible with the leader boards due to code like this (from leaderboards.css):

.cPastLeaders_title span {
	background: #fff;
	/* ... */
}

.cPastLeaders_cell {
	background: #f5f5f5;
	/* ... */
}

 

---

 

If there ever comes a time where the theme system undergoes a redesign, I'd be very interested in offering assistance to make sure it's the best on the market.

 

[TAMAN]

totally agree, there are countless areas sharing same background or color value without haven settings, why not make some other global settings like rest area dark area background area and so on... im pretty sure it will cover %70 of the colors

[Rikki]

I agree - there's a lot of default theme settings now, and editing them is becoming quite a task.

My ultimate desire would be to move the theme system to Sass or Less, but this really is a massive undertaking at this point - I'm not even sure 4.2 would be a suitably large release for such a change. Instead, I think what we could do is implement some new template plugins along the lines of the {hextorgb} one we added a while back - utilities that know how to work with colors. We'd have {darken}, {lighten} and so forth and use these throughout the CSS with a handful of key theme settings to provide the basic color scheme.

Also related to this, I think the theme setting screen can be better designed for the purpose it serves. It worked well when we had a fairly manageable list of theme settings, but that's now grown and could be presented better within the AdminCP.

Thanks for the feedback - let us know if you have any other suggestions  

[Jed Rosenzweig]

+1 for preprocessors in the future!

[DesignzShop]

There's some css like pagination areas that can be shared within the css and the other areas mentioned could of had other css rules currently existing applied.

I myself personally do not agree with minimal css especially in this 4 series. My take on it is if your a theme coder instead of a theme graphics designer you want less css. Sorry, I'm a graphics designer first and color is my thing unlike many other themes I see out there... I let IPB handle the function'code. I love how IPB works right now and would not agree with the general consensus in this post.

Also to add, about every single part of IPB almost to the front can have a image added to it through css for the ultimate control over a theme. Please do not remove that depth or ability.

[ehren.]

The same issue has appeared in 4.1.18 with the two factor authentication. A customer sent this to me yesterday:

A white background was hard-coded into #elTwoFactorAuthentication > div. Using {theme="area_background_reset"} instead of #fff is a far more elegant solution.

For future updates like this, please make use of the existing colour palette. There's no point having so many theme settings if they're ignored completely. Hex codes shouldn't even exist in the css at all to be entirely honest.