News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Idle question about 2.0.x CSS calls

Started by Antechinus, September 24, 2019, 09:44:35 PM

Previous topic - Next topic

Arantor

And they might, right until "but it works fine on Curve" when it will become the theme's problem for any theme that isn't a pure recolour of Curve.

Antechinus

All mods work on Curve. They aren't approved in the first place if they don't work on the default theme.

Antechinus

By the way, have tested the code back here and it works nicely. Template calls for the sheets look like this:

// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
// The first call, for index.css and rtl.css, should probably be changed to call index.css and index_rtl.css for greater consistency.
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/', ($context['right_to_left']) ? 'index_rtl' : 'index', $context['theme_variant'], '.css?fin20" />';

if (in_array('admin', $removed)) {
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/', ($context['right_to_left']) ? 'admin_rtl' : 'admin', $context['theme_variant'], '.css?fin20" />';
}

if (in_array('editor', $removed)) {
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/', ($context['right_to_left']) ? 'editor_rtl' : 'editor', $context['theme_variant'], '.css?fin20" />';
}


And they all get called where they ought to be called. :)

But at the moment I'm pondering variants, so there are a stack of comments just after that lot. To whit:

// Meh. Variants. How to deal with those? For minor colour variations, with no change of layout, it makes sense to have a supplementary variant file called after the three basic files (index, admin, editor).
// Come to think of it, this may also be the best way of dealing with layout variants. One more http request, but will save a truckload of CSS duplication.
// So, calls above should likely be of the form:
// <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/', ($context['right_to_left']) ? 'index_rtl' : 'index', '.css?fin20" />';
// With something like this coming after:
// <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/', ($context['right_to_left']) ? 'variant_rtl' : 'variant', $context['theme_variant'], '.css?fin20" />';
// Only catch with that being that it will 404 if you don't have an RTL variant file for every variant, which is an unnecessary PITA for colour-only variants.
// So, would be nice to do the PHP so that if RTL variant file exists it gets called, otherwise basic (LTR) variant file does both LTR and RTL.
// Alternatively, for layout variants could use an extra RTL class or id in the one variant file, so any layout variations could have consecutive decalrations for LTR and RTL.
// This is probably fine, unless you go absolutely troppo with layout variants. Which you probably won't, since past a certain point a new theme makes more sense.


Just to confuse matters. :D It probably makes sense to go for the HTML tag for the ID, since that's the highest level and will therefore cover anything weird you might want to try. So something like this:

Code (index.template.php) Select
<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? 'id="variant_rtl" dir="rtl"' : '', '>

Then CSS can be done as (basic example):

Code (variant_whatever.css) Select

.collapse img, .help img, .toggle, .catbg>.toggle {
position: absolute;
top: 3px;
right: -5px;
margin: 0 2px;
border: 2px solid #0000;
border-radius: 50%;
}

#variant_rtl .collapse img, #variant_rtl .help img, #variant_rtl .toggle, #variant_rtl .catbg>.toggle {
right: auto;
left: -5px;
}

Antechinus

I've gone back to the conventional (boo!) idea of a partial rtl.css coming after the index.css for most of the crud. It's more backwards compatible with existing mods, and will make customising multi-lingual sites easier than using two complete files. It gives a slight performance hit in RTL mode, due to the extra HTTP request and some extra CSS, but is probably best on balance, and has no effect in LTR mode anyway.

However, I had a look in the editor and admin CSS files and they have hardly any bits that need switching for RTL. It's only a couple of dozen lines of code in each one. So I figured for these files I might as well throw the RTL tweaks in with the LTR code. That way there's no need to worry about RTL files for these areas. If you're customising something you can do the RTL code at the same time if you want to.

Works perfectly, and will make supporting layout variants in LTR and RTL as easy as supporting colour variants. :)

Looks like this:

Code (index.template.php) Select
// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? 'id="variant_rtl" dir="rtl"' : '', '>
<head>';

// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index.css?fin20" />';

if ($context['right_to_left']) {
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/rtl.css?fin20" />';
}

if (in_array('editor', $removed)) {
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/editor.css?fin20" />';
}

if (in_array('admin', $removed)) {
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/admin.css?fin20" />';
}
// For layout variants, call id="variant_rtl" from the root HTML tag, for full support in the one file.
// Example CSS: .whatever {position: relative; left: 1em;} #rtl_variant .whatever {left: auto; right: 1em;}
// Then files for all variants are called by one instance of this:
// <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index_', $context['theme_variant'], '.css?fin20" />';
// Since it's last in the cascade it will override all the others without any problems. Sorted. :)


Code (Example from admin.css) Select
#error_log .checkbox_column {
width: 34px;
padding-top: 8px;
text-align: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
border-left: 1px solid #ccc;
}
#error_log ul {
margin-right: 34px;
}
/* --- For RTL languages --- */
#variant_rtl #error_log .checkbox_column {
left: 0;
right: auto;
border-left: 0;
border-right: 1px solid #ccc;
}
#variant_rtl #error_log ul {
margin-right: 0;
margin-left: 34px;
}
/* --- Back to LTR code --- */
#error_log ul li {
line-height: 2.4rem;
padding: 4px;
overflow: hidden;
border-top: 1px dashed #ccc;
}
#error_log ul li:first-child {
border: 0;
}
#error_log span {
width: 48%;
display: inline-block;
padding: 0 4px;
}
#error_log span:first-child {
border-right: 1px dashed #ccc;
}
/* --- For RTL languages --- */
#variant_rtl #error_log span:first-child {
border-right: 0;
border-left: 1px dashed #ccc;
}
/* --- Back to LTR code --- */
#error_log ul div {
padding: 4px;
}


Antechinus

Just realised something. I don't actually need to pull html_headers apart anymore. The original point of this cunning plan was to get editor.css and admin.css (and possibly other files) supporting RTL, without getting convoluted with calling a stack of files, but I've just gone and sorted that merely by adding a conditional ID to the base HTML tag. Which means I can put all the other code back to default and it will all work anyway. Great moments in d'oh. :P

However, the code for pulling things out of html_headers will probably come in handy for something, sometime, so good to know anyway. :)

Antechinus

Done some more thinking. I am going to throw this code into the Mutant Curve beastie after all. Not that it should be needed by default, but I've been thinking about mods and I can see the ability to knock files out of $context['html_headers'] being very useful for dealing with presentation issues coming from mods.

So I'll chuck it in, and set it to just kill editor_ie.css for now, just so it has something to do occasionally. Then the code is there if it's ever wanted for anything more serious, and any extra sheets can be dropped into the array in a minute.

Having thought that far, I then started contemplating having an admin input to take a comma-separated list of any sheets you want to knock out. This would be easier for teh n00bz, but on the other hand picking apart the output from Sources is something teh n00bz are probably better off not trying anyway, so it would be safer to not offer them the temptation. On this basis I decided to KISS for people who know what they're doing, so no admin page shenanigans. :D

Advertisement: