Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Theme-specific css-styles and javascript
Before a while, I tried to correct a styling issue with one theme in my admin-side plugin abl_droploader. But it seems that there is no way to have style rules which affects only one specific theme.
I had then a really simple idea: add a class-name (which contains the name of the active theme) to the html-tag.
For example, when the html-tag looks like this:
<html class="txp-theme-hive" [other attributes]>The css can contain such rules:
.txp-theme-hive [css selector] {
/* css properties */
}Using the class-name, you can create theme specific css-rules (and JavaScript too). This may be useful for plugin and theme authors, but also for modders.
To verify this, I made a tiny admin-side plugin (abl_theme_class), which adds a class-name to the html-tag using jQuery.
The Code is as follows:
if (@txpinterface == 'admin') {
register_callback('abl_theme_class_head_end', 'admin_side', 'head_end');
}
function abl_theme_class_head_end($evt, $stp) {
global $theme;
echo '<script type="text/javascript">
(function($) {
$("html").addClass("txp-theme-' . $theme->name . '");
})(jQuery);
</script>
';
}The installable plugin:
# abl_theme_class v0.1
H4sIAAAAAAAAA5VTyW7bMBA9W19BEAYkB7FWy47pBU0boD2kQFq0BXoSaHJkMZUlQ6LtBEH+
vUNKcdoAPZQnct6b7c2QsyhmTy2bMFrxHdBFy6KUUb4pM13ADjJR8rY15hmjR2haVVfmlTAa
+pG5TZF90EXdWF+Mc13JBnhL3qMndNbwhZMdGmUsMfoXWu9ZEJxOJ39jqWOlfVFYh4hRCa1o
1F73CSdzjCElwaqIrWxs6iWYhxNbI9G1BQu9KwmUyKi0ccRu6kaaQhRLF7ZT/bgH80w6OC/5
tjXvsIMLKPe2yJjRwbKI1t/gQasSyCcElgEaaEcUtbSKpXMUJ7i4cC7IXXnYqooRe96oiPCP
TsEORwHR9P3rbU/H8w9NkHbzKgcj/y0EBvgJvDknisMoQdvnm/Q1N0/nk02aXsV5HE0iOZvP
RDiLRRgCpJtUTh3T37UdY+/096QtfqsEVC10hI93t+QYG3vgOCon3jv9sFeVhibnAshqRVwu
d6pyR+TJGTSwVS1imeBlueHil+e+ETArgMsMKule9p5ZqySY1xkZLZxnx8kPlTBSvR3BOYI3
hKO+JMNW723ybVlveEmGlrtwnAGIoibushOdmI1ZUY17ENzzI++sdO14L4m8oQ0z9KiRnY58
HNEHk9Gj2PO4G5RL/D7DeG2H5hOXmoJH3v2XAzSPeF8GXfC14yJgtuuq28is4Sf7N/DDFZFP
/lzK/kfuZGpvuLd5JEU0DadpxGHC8+mMJ/MkuRIyz+eQhwldPP8Gnzknq/sDAAA=The plugin works, but the ideal place to add the class-name would be in php-module txplib_head.php, where the html-tag is generated.
What do others think about this? Is it useful?
Offline
Re: Theme-specific css-styles and javascript
Not sure that’s a good idea. If there’s a problem in the specific theme then let the theme author know (in the case of the default admin themes that’d be me). Otherwise you’re going to be creating a support headache for yourself.
Also, check the UI documents to see if a solution already exists:
4.6 UI doc for Hive (still being built, especially the jQuery UI stuff that needs much more work)
Offline
Re: Theme-specific css-styles and javascript
I also am not sure if this would be a good addition. I would encourage developers to aim a less-custom, more native UI approach and to ultimately avoid any theme targeting if possible.
If one must know the active theme, they can get the information through the theme instance, or preferably, the preference string, but we shouldn’t endorse using that for styling or client-side scripting. Theme dependencies are an option you have, but not something you should relay on.
If there ever is an issue with a specific theme, for instance some widget or an UI pattern doesn’t work properly, that should be fixed in the themes end. Looks are the main concern for themes.
Plugins that introduce or require their own styles can be problematic. In general, plugins should aim to cross-compliance. While it doesn’t fit every situation, this could be archived by avoiding custom styling and widgets as much as possible — if the plugin’s interface fits in with rest of the system regardless the active theme, the better.
Offline
Re: Theme-specific css-styles and javascript
I thought that there must be a reason why this isn’t implemented.
Gocom wrote:
I would encourage developers to aim a less-custom, more native UI approach and to ultimately avoid any theme targeting if possible.
I Agree. In fact, I have not used this approach. I changed the styles generally, independent of the theme, because it has not much impact on the look in other themes. I saw it more as a kind of last resort when other options do not work.
Thanks for clarification. And for the links to the UI docs too. Now I need some time to study that.
Offline