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)

Textpattern CMS

Textpattern CMS support forum

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