Theme development: how to and without having to log out and log in?

[jerry1970]

Is there a doc to tell me how to create a new theme?

I tried copying a theme and change the namespace and class name but that didn't work: the list of themes didn't recognize it.

Then I tried to copy the _custom folder but was wondering whether to extend on the WebTreesTheme or another theme. Hard to make a choice since I don't know what the results are going to be. Creating a new theme by copying _custom and renaming it, that's the same as copying, for example, fab and change everything I want to change?

When trying to test the theme, I had to log out and log in every time. I don't want to set the main theme for all users to the theme I am testing...

Thanks! Jerry

[fisharebest]

Is there a doc to tell me how to create a new theme?

The custom theme template is supposed to be used as a starting point.

Then I tried to copy the _custom folder

That's the correct thing to do.

wondering whether to extend on the WebTreesTheme or another theme.

Extend the theme that is most like the one you want to achieve. i.e. icons on menus, etc.

When trying to test the theme, I had to log out and log in every time. I don't want to set the main theme for all users to the theme I am testing...

Not sure what you are saying here. Why did you need to log out and log in?

Remember that you can set the default theme at site/tree/user level, and you can also disable the ability for users to change themes.

[jerry1970]

Thanks for the reply!

Regarding logging out and in: I have a theme for the site. When working on a theme, I don't want my users to see the changes until I am finished, so I have to enable themes for users and set my own theme to the one I am working on. So the site is set to theme fab and my user's theme is set to myTheme. When myTheme is finished, I want to set the site theme to myTheme and disabled user themes again. That's the way to go, right?

When I change some CSS in myTheme and want to see the changes, I have to log out and back in before WebTrees shows the new CSS. Is that how it is supposed to work? Or can I see the changes by just pressing Ctrl-F5?

[wkitty42]

you should be able to just refresh your browser and pick it right up...

[jerry1970]

I tried four things but in all cases I have to log out and in again to see the changes.

1. no user themes possible, change website theme to pre-installed theme
2. no user themes possible, change website theme to my custom theme
3. user themes possible, change user theme to pre-installed theme
4. user themes possible, change user theme to my custom theme

The theme I had set when I logged in was kept until I logged out and in.

I am missing something, just don't know what yet. ;)

[jerry1970]

Some extra information: in all cases mentioned in my previous post, I first had the tree (gedcom) theme to F.A.B., and then changed it to <standard theme>, but still the same results.

[jerry1970]

And now it's broken completely. Of course, there is an error in my theme.

Changing the value of the wt_site_setting record for setting_name = THEME_DIR to something else does not work! I tried fab, webtrees, WebTrees and even an empty value, but the index keeps giving a 500.

I removed my custom theme folder and only then WT took the default theme. I checked the wt_site_setting table and the value was not set. Then I checked the control panel and the select box was set on the first item (clouds in this case). I set it to webtrees and then setting_value was set to webtrees. How come that didn't work when I set setting_value to webtrees manually?

[jerry1970]

I think the documentation for creating a theme could be expanded. This is from the custom theme file:

 * Since theme folders beginning with an underscore are reserved for special
 * use, you should copy this entire folder ("themes/_custom") to a new name.
 * For example, "themes/custom". You should also rename the class.

That bit is clear, except the "you should also rename the class" part. Could you give a clear example of what the class and file name should look like? I assume the autoloader requires some conventions.

 * In this example, we are extending the webtrees theme, but you could
 * also extend any of the core themes, or even the base theme.

What is the class name of the base theme? I checked the FAB theme and it doesn't extend anything.

 * Only the first two functions are required: themeId() and themeName().
 * The rest are just examples, and should be removed in actual themes.

Why should they be removed? What if I need an external CSS to be loaded, for example of a front-end framework?

What are the other requirements for a theme? Which files should be located where? Should there be a css-1.7.8 folder with a file style.css in it? Does that work with the next WT version?

Maybe you could show an example of a complete custome theme? Complete as in all files are there, the contents can be empty of course.

Thanks!

[wooc]

jerry1970, for the discussion about themes go to the forum. https://www.webtrees.net/index.php/en/forum In the add-ons area are some custom themes. Try them.

[fisharebest]

That bit is clear, except the "you should also rename the class" part. Could you give a clear example of what the class and file name should look like?

The class name is up to you. Call it anything. The folder/theme name cannot begin with an underscore.

I assume the autoloader requires some conventions.

The example theme doesn't use autoloading. The class is defined in the file.

Why should they be removed?

Because they are just examples of how to extend/change core functions.

What are the other requirements for a theme?

None.

Which files should be located where? Should there be a css-1.7.8 folder with a file style.css in it?

Some people write themes to add/remove headers or menu items. Therefore there is no requirement to have a CSS file. If you want to change styling, then of course, you do!

The css folder name makes no difference. It is just a version number to cope with browser caching issues when you upgrade your theme. Use a date or an incrementing number. It is up to you.

Maybe you could show an example of a complete custome theme?

The example custom theme IS complete - all you need to do is rename it, as themes beginning with an underscore are reserved for internal use.

I cannot anticipate everything that everyone will want to do, and write it for them. There are plenty of custom themes available that you can use for inspiration.

The best place for discussion and advice is the forum. Lots of people (including theme developers) contribute to the fourm. Very few of them follow this issues tracker.