Themes exploring

Destry · 2018-02-23 16:52:22

Our test jester stumbles into court.

Installs 4.7dev
Goes to Presentation > Themes
Clicks “Create new theme” button.
Fills in some data… Wonders what “Theme website” means… Leaves it blank. Saves the rest.
Looks around Themes panel some more…
Clicks the 2, 6, and 1 links under Pages, Forms, Style columns. Nice context. Goes back to Themes panel list.
Scans around Themes panel some more.
Looks at options in the “With selected” drop-down menu. Wonders what “Override” means. Ignores it for the time being.
Actively searching Themes panel now for some sign of how to make the new theme the active one. Don’t see anything. Light bulb moment: maybe it’s in Admin settings…
Looks through Admin panels. Sees nothing that would suggest setting the new theme as active for the site. Wonders how to do it.

Bloke · 2018-02-23 18:50:08

Hint: go to the Sections panel. See the theme/page/style columns? Click a Section to edit it and choose the relevant theme/page/style. Or use mulit-edit to make a theme live en-masse.

Bonus: if your new theme and existing theme share page and stylesheet names, when you switch to the new theme from the page/form/style panels and view the site, you’ll “preview” the content with the currently active theme that you’re editing. No other users are affected. Sadly, if you rename your pages/styles though so they differ from one theme to the next, the preview feature won’t work entirely successfully. Difficult to fix that as it’s ingrained in Txp.

Bloke · 2018-02-23 18:52:00

In other words, it’s the same flow as now. To change Page or Stylesheet in a Section, you alter the Section’s assets. Same now, there’s just one more “level” to it: a Page and Stylesheet belong to a Theme. So you need to pick that first when you alter a Section’s assigned templates.

philwareham · 2018-02-23 18:52:20

Yes we probably need some additional pophelp items, which will be done before or during beta phase. As will proper documentation of how the themes feature works.

In the meantime, you assign themes via sections as you would a page or style. Themes aren’t tied to a website specifically, you can have multiple themes in the same site if you wish.

Bloke · 2018-02-23 18:58:03

Yes, documentation… :-)

Oh, and in answer to the other points in the OP:

Theme website is the theme author’s website. If filled in, will link the author name to the given site (which may be the theme page itself so you can download updates or whatever).
Override should have some pophelp alongside it. Essentially, it blats content. So if you import from disk, your DB Pages/Forms/Styles are emptied and reloaded to match what’s on disk. Vice versa in the other direction. Otherwise, it’ll “merge”: only overwrite any that have the same name, but leave any unused assets lying around. And if you choose delete, then it not only removes the DB theme assets, but also removes all Page/Forms/Styles from the disk. Use with care!

EDIT: if you don’t care about disk copies, just ignore all that stuff and edit things inside Txp. Business as usual, just with an additional layer to Pages, Forms and Styles: they belong to a Theme so you can group them and thus choose which Sections get which “look and feel”.

Last edited by Bloke (2018-02-23 19:00:02)

Destry · 2018-02-23 21:14:14

Okay, thanks. I’m starting to see. For some reason I was imagining a theme-switcher button, or whatever. But the flexibility of this is great. The work you’ve put into is tremendous, I’m sure, and around the family time too. /* bows low */

What I would like to do eventually is have a front-end offer to users a color flip between night, day, and maybe a third sepia or sparkly rainbow unicorn land, or retro 90’s. I guess one could build a theme-switcher kind of thing?

Destry · 2018-02-23 21:45:35

Hmm… I don’t think this has anything to do with the one test theme I just created, but for some reason I just get a blank page on the front-end of 4.7dev. I can see, log into, and use the backend just fine, however.

gaekwad · 2018-02-23 22:26:43

Destry wrote #309394:

Hmm… I don’t think this has anything to do with the one test theme I just created, but for some reason I just get a blank page on the front-end of 4.7dev. I can see, log into, and use the backend just fine, however.

Check /textpattern/index.php?event=skin – do you see four-point-seven or zero or both?

jakob · 2018-02-23 22:48:46

It sounds like you chose a blank them during installation, rather than a starter theme. Could that be the reason why you’re not seeing much.

What I would like to do eventually is have a front-end offer to users a color flip between night, day, and maybe a third sepia or sparkly rainbow unicorn land, or retro 90’s. I guess one could build a theme-switcher kind of thing?

If you want that switchable on the front-end, you’re probably best doing that with css and js (e.g. to set a class on the head/body element and then do different colour cascades in css) or a variable you pass via the url (e.g. to load a different colour-scheme css file). The theme capabilities and switching are more like layout variants or collections of layout-variants.

Destry · 2018-02-23 23:19:14

gaekwad wrote #309397:

Check /textpattern/index.php?event=skin – do you see four-point-seven or zero or both?

Well, I’m not sure what you mean exactly. It puts me in the Themes panel where I can see the default theme and the test theme I had created.

However, it just so happens I created the test theme as version “0.0”. I just deleted the test theme and the front-end came back. I guess we better tell people not to use version 0. heh.

jakob wrote #309400:

It sounds like you chose a blank them during installation…

All I did was install 4.7dev Txp, then the usual diagnostics/preferences jig, then created that test theme.

Where is this blank theme you speak of? Or rather, how does one select it. That was my original motive for this thread, couldn’t really figure out a ‘theme selection’ mechanism. I’ll have to play around a bit before I know what I’m talking about.

If you want that switchable on the front-end, you’re probably best doing that with css and js (e.g. to set a class on the head/body element and then do different colour cascades in css)

That’s what I thought. Thanks. It won’t be high priority, but I’ve come to like the night/day switching as my eyes get worse. Or as I recently discovered, using Night Shift on a light on dark theme (e.g. Mastodon) creates a sweet vanilla/chocolate kind of thing, which actually looks nice.

Bloke · 2018-02-24 00:33:48

Destry wrote #309394:

for some reason I just get a blank page on the front-end of 4.7dev.

You did put some actual, like, code into your default Page template inside your blank theme, right? ‘Cos without that, well, you’ll see nothing!

btw, the behaviour you witnessed has nothing to do with the 0.0 version number. What you see on the Themes panel depends how you started:

Install from scratch: you’ll either see four-point-seven, or zero, or your own theme (if you added any to the themes directory prior to installation) depending on which you chose during installation.
Upgrade: one theme called default which is the name given to whatever your current site templates are. Everyone’s theme on upgrade will be called default because we have to call it something. We strongly suggest renaming the theme to something swanky so you know it’s yours if you decide to export or share it. Use your three-letter prefix in the name, if you have one, otherwise just make up something unique.

After you created your blank theme and clicked one of the numbers to jump to the pages/forms/style panels, that theme becomes your “working theme”. As you jump between Page/Style/Form panels you’ll notice the theme sticks with you. So if you then go and view the front page of your site, Txp will try to show you a preview of what your new theme will look like with the current content. Great for testing a tweaked theme in a live environment before making it live for everyone else (by assigning it to a Section or two).

In your case, if the Page template of your theme was totally empty, when you view the site you’ll see… nothing.

If you type “Wion rules!” in the default Page for that template, save it and refresh your front page, you’ll see that on the screen. Go nuts. Put HTML and tags in this theme’s Page template as normal.

If you switch to the original theme on the Pages panel and refresh your front page, you’ll see the original theme.

So what happened when you deleted the ‘0.0’ theme was Txp just switched you back to the original theme (by virtue of it being the only one in the site), so when you viewed your front page everything was back to normal.

It takes a couple of goes to get it in your head. The key things to remember are:

Theme previews are only for you while you are logged in. Whichever theme you select from any of the Theme dropdowns becomes your “working theme” and that’s what Txp tries to show you when you view your front-of-house. Nobody else is affected (which you can prove by viewing the site from a different browser where you’re not logged in, or from a private browsing session).
Txp can only offer a preview if the name of your Page+Style assigned to the Section you are viewing on the front side is identical to that of the working theme. Otherwise, it’ll 404, which is a shame but there’s nothing sensible we can do about that.

To illustrate the last point. If you have this setup:

Theme: Wion assigned to Section: default with Page: default and Style: default.
Theme: Night with Page: default and Style: default.

then you can freely switch from theme to theme and Txp will seamlessly render your front page in the Wion theme or the Night theme, depending on which one you are currently working on in the admin side.

If, however, you started donkeying around by renaming assets:

Theme: Night with Page: sleepy-time and Style: dusk.

then when you view the front page while you are working on the Night theme, Txp will do this:

Look at the Section you are currently viewing and go “Aha! You’re looking at the default Section.”
It’ll look in the database to see what Page and Style are currently assigned to this Section. “Aha! You’ve set the Page default and Stylesheet default here.”
It’ll see you’re using the Night theme and look for a correspondingly-named Page and Stylesheet in that theme, so it can offer you a preview.
In this case, it won’t find a Page called default (because you named it sleepy-time) and won’t find a Stylesheet called default (because you named it dusk) so it’ll 404 the Page and fail to load the Stylesheet.

Morals of the story:

If you want to take advantage of live theme preview, use a standard naming convention across themes wherever possible.
Otherwise, make a dummy Section name and assign the new theme to it, then go view it in any browser… just like we had to do in the pre-4.7 days.

Hope that helps.

Destry · 2018-02-24 10:00:36

Bloke wrote #309403:

You did put some actual, like, code into your default Page template inside your blank theme, right?

No, because I didn’t think Txp would would just start using it. Remember, I figured it would stay with default until you actually switched to another one. Hopefully that mental model is just mine, or a lot of people will be confused, I think.

btw, the behaviour you witnessed has nothing to do with the 0.0 version number.

Gtk.

Upgrade: one theme called default which is the name given to whatever your current site templates are. Everyone’s theme on upgrade will be called default because we have to call it something.

Ah. I did a fresh install of 4.6, then immediately decided to upgrade. So it was still a virgin site. Thus the native theme was called ‘default’, which made sense to me in that case, but it was a coincidence, not what would typically happen on an upgrade.

I think that’s where me brain went off in the woods naked.

We strongly suggest renaming the theme to something swanky so you know it’s yours if you decide to export or share it. Use your three-letter prefix in the name, if you have one, otherwise just make up something unique.

Noted.

After you created your blank theme and clicked one of the numbers to jump to the pages/forms/style panels, that theme becomes your “working theme”.

Ok. So that’s sort of the switch step then. There had to be one, and that’s where the context changes. Now I get it.

As you jump between Page/Style/Form panels you’ll notice the theme sticks with you. So if you then go and view the front page of your site, Txp will try to show you a preview of what your new theme will look like with the current content. Great for testing a tweaked theme in a live environment before making it live for everyone else (by assigning it to a Section or two).

Ah, so it’s not a hard switch, just a faux switch for the admin. (Wonders about other roles.)

If you switch to the original theme on the Pages panel and refresh your front page, you’ll see the original theme.

AH-HA! There’s the ‘hard’ switch.

It takes a couple of goes to get it in your head.

I think that’s going to be a very true statement. :)

Thanks, Bloke, I’ll spend some time with it.

The docs will really need to emphasize the concepts of how switching works, and when, under what contexts. Might even need a clever concept diagram or a custom video demo too.

And it wouldn’t hurt to have a couple popups at key places. Eg:

Themes: create new theme.
Click number under Pages column shows popup…
“Changing to [theme] preview context only. Not a hard theme switch. Select different theme in Pages panel if you want to switch theme for visitors.”

Something like that. And maybe one in the Pages panel confirming the opposite, or whatever. Waypoints for context of what’s about to happen at that action.

Anyway, thanks a lot. I’ll keep notes as I work through this.

You’ve done tremendous work! That’s for sure.

Last edited by Destry (2018-02-24 12:31:38)

Destry · 2018-02-24 10:06:55

I think I’m still not getting the switch concept, without exploring it yet, which I can’t do at the mo.

There’s an admin preview context and there’s what to do for when you want the site visitors to see a given theme. What is the latter?

Don’t answer that. I’ll reread and figure it out.

Bloke · 2018-02-24 11:50:15

Destry wrote #309405:

so it’s not a hard switch, just a faux switch to the admin. (Wonders about other roles.)

Correct. Without the preview ability, we’re not much better off than we were before. You would have to:

Create a fake Section that wasn’t part of your site flow (so it was hidden while you were in development).
Assign a Page/Style from your new Theme to it. But even if you do that, you can’t see the content because articles are assigned to a Section, which isn’t the fake Section you just created.
Decide if you’re going to a) clone articles into this fake Section so you can see them, b) use article_custom to grab them from another section (which means you can’t use pagination), or c) move articles to the fake section (which takes them off the Section they are already assigned and therefore impacts real visitors).

Not great.

So to help ease that and help you to “test” a theme that’s in development without all the upheaval, we conjured up the soft-switch preview concept. Whichever theme you (and only you) are editing, becomes your “working theme”. No matter where you switch:

from the Theme selectors on the Pages/Forms/Styles panels; or
by clicking an asset count from the columns on the Themes panel; or
by clicking a Page or Style name from the columns on the Sections panel

your working theme will be set to that theme: i.e. the one that is currently being edited on the admin side. Any time you view the site from that same browsing session, Textpattern will try to render the site using the working theme instead of the real one that is assigned to the Section you are viewing. Again, this is for you (and you alone). Nobody else is affected whatsoever. Only users who have the ability to administer themes (Publisher (1), Managing Editor (2), and Designer (6)) can do this, btw.

Other admin-side users in the above roles can switch their own working themes to a third, fourth, fifth, … theme if they like, and they’ll see the site previewed in whichever theme they are working on.

Regular punters, who are not logged in to the admin side, will continue to see the site with the ‘official’ theme/page/style that is assigned to the Section they are viewing. They are NOT affected by anybody else’s working theme.

The only time the theme will take effect for real, for all users, is when you assign a Theme/Page/Style combo to one or more Sections form the Sections panel. Once you commit that, the pages are live. Until then, nothing happens as far as site visitors are concerned.

The docs will really need to emphasize the concepts of how switching works, and when, under what contexts. Might even need a clever concept diagram or a custom video demo too.

As an “outsider”, feel free to grab the reins on that as you get to grips with it :-) Docs are on the to-do list so any help you can give would be a massive boon.

One thing we might need in the final release is a pophelp entry alongside the title on the Themes panel itself, like we have on the Forms panel. To give a general overview of what themes are. And what they’re not. Again, any ideas for wording there, stick it in the pophelp repo.

Cheers!

Bloke · 2018-02-24 12:22:44

An aside that hopefully won’t muddy the waters…

Before themes came along you could already assign a different Page template (which could ostensibly use a different Stylesheet too) to give the illusion that, say, your home page (default) Section was thematically different to your /blog Section, which was different from your /products Section. Textpattern already gave you this flexibility.

The introduction of themes doesn’t change this. You can still assign a different Page template and a different Stylesheet to one or more Sections. The only difference is that those Pages/Stylesheets may belong to a different collection that you’ve arbitrarily grouped under a Theme because they offer the same sort of look and feel.

It’s all really just smoke and mirrors. Textpattern already had themes, sort of, it’s just there was no structure to them. From 4.7.0, we’ve merely defined this relationship and allowed you to group Pages and Styles and Forms together under the banner of a Theme.

The primary advantage is that we can now map such a “theme” (collection of Pages, Forms and Styles) in the database to a disk-based representation. That allows simple sharing of such collections. So if you thought your CSF layout and styling would be beneficial to others, group all the assets under a single theme, give it a whizzy name, select export from multi-edit and zip up the disk copy, then make it available somewhere.

Others can download that, stick it in their /themes directory, and import it into their database – whereby, remember, it does absolutely nothing.

They can switch their admin-side working copy to it, preview it on their live site. Maybe they like one or two of the Page templates or Stylesheets and think they’d be brilliant for their /blog section. Maybe they don’t like all of them. No problem. They can pick and choose which of the Pages and Stylesheets they employ on any section of the site they like. Just go to the Sections panel, and assign the Pages/Styles there. Done. Live.

Any Page templates and Styles from your theme would remain unused. If they hated them, they could delete them, it doesn’t matter.

The point is, with the introduction of themes, everything changes and nothing changes depending on your viewpoint. If you never visit the Themes panel, you’d be hard pressed to notice any difference in Txp, bar the extra column in the Sections panel. We could have hidden that if there’s only one theme in use, but we kept it visible as a hint.

Even if you add a theme, you don’t have to use the disk thing. You could use it like I do: as a way to make iterative changes to a live site:

Duplicate your current theme.
Make changes to Pages, Forms and Styles in the new theme.
Use the preview feature to see how the changes will look.
When happy, visit the Sections panel and flip the Section assignments to use the Pages and Styles from the new theme.
Optionally delete the original theme and rename the new one to the same name as it was before, ready for the next iteration.

No need for staging servers, development servers, database syncing dances. All changes live. If you have a client who wants to see changes like this you can do the same thing. Heck, give them a suitable login if you like so they can switch to the theme and see the preview “live” for themselves, with their existing content, navigation, everything intact. When they’re happy, you visit the Sections panel and flip the Pages and Styles as normal.

Themes just give you another layer to managing and defining site structure.

Textpattern CMS

Textpattern CMS support forum

#1 2018-02-23 16:52:22