Please do not post a support request without first reading and following the advice in https://retropie.org.uk/forum/topic/3/read-this-first

Modular Theme Template (Proof of Concept)



  • Hi,
    I don't want to offend any one of the Theme Makers out there, but personally i had a hard time to find a single Theme that i liked.
    In the end i ended up mixing different parts of various Themes. Since the code is pretty simple to understand, it was not hard to do. Some days ago i was trying out the new Variable Support by @jdrassa and I had the idea to build a Modular Theme.
    Since I'm not very creative, i took the three available versions (normal, nometa, centered) of the Carbon Theme and mixed them together. And since nometa and centered also come with color variants, I decided to implement those as well.

    I ended up with a Theme that has a config.xml where it's possible to change the Layout, Colors and Carousel by un-/commenting lines. With that it was possible for me to switch between different looks for Carbon in seconds.
    alt text
    Then i got deeper into the variables stuff and added ways to globally change fonts and complete logo sets.

    The point of this post is that i wish that more themes would make use of the <include> tag, so that users can change parts easier. My template is not (yet! Because i focused on carousel and not the whole systemview) set up for this, but i think that systemview and basic/detailed/video shout be separated. With that method the chance of breaking Themes would be very slim.
    Of course i don't want to enforce it, because i can understand that some Creators don't want people to change things or what ever.
    I'm curious if Theme Makers would make use of it and how it can be used best.

    Anyways, for those who are interessted. Here is the GitHub Repo.
    But beware that it's not a theme that is supposed to be used. It just has some very basic layout and carousel variants, and a preset orange background with blue elements (the included _colorset/default.xml is just black on white).

    Because this uses variables instead of single system/theme.xml, I think it is not possible to use custom texts for each system (like the Switch Theme does. Although in that case it probably would work by using the system.fullname variable.) Even tho I have not tried that, I think it would be possible to use variables and separate system folders and still have a way to block the folder content if a layout doesn't want to use it.



  • @ectoone: I like the idea of modular stuff in themes. I did something similar in my IO Theme where I created Small, Medium and Large templates for use with different size screens. It was marginally successful, but still pretty simple. I didn't go too far with it.

    I also created 2 different Custom Carousels for the BaseVid Theme in the ES Toolkit, although I didn't use the <include> tag for them (they were just sitting in basevid.xml). Also, that whole theme is pretty simple because it's supposed to be used as a base for people to learn how themes work, and build on it.



  • @mattrixk I see, i mean there are some themes that either have different color themes (like Carbon NoMeta) or things you mentioned. But most of them require renaming or editing complex files.
    Since I'm using a config.xml it seems less confusing (at least to me) and you can change complete layouts with a small edit.
    What I'm actually hoping for is that one of our talented script developers, can create some sort of interface where you can pick elements and create your own look.



  • One idea I have had in the back of my head for a while now is a theme options concept. The idea being that a theme could define options that would then be configurable within ES. The configured option values would then be exposed to the theme as variables.



  • @jdrassa So things like the background could be changeable in the ES menu?



  • @lilbud It is just an idea at this point, I haven't actually attempted to implement any of this, but yes.



  • I updated the repo with a restructured version that i figured out while trying to make some themes modular that @lilbud has created.
    Now a theme is split into THEMENAME-carousel.xml(Systemview) and THEMENAME-main.xml(Basic-/Detailed-/Videoview).
    All theme assets are in their own folder (inside the _assetsfolder named assets-THEMENAME, Logos can be changed globally (if a theme supports it) by creating a logo-LOGOSETNAME within the _assetsfolder. The included examples also make use of an colorscheme.xml inside the theme assets folder, so it is possible to change colors. Due to some restrictions, i have not found a way yet to change colors from the config.xml in a way that i like.
    The config.xml is used to change what modules you want to use.

    In the next few days I'm going to try to create more detailed designs, just to see where the limit of variables is. Although i already know that some things won't work or are to complicated to set up compared to a normal theme.

    Maybe @jdrassa can be convinced to loosen some of the restrictions i came across. ;) Especially when he adds the option to change elements from the ES menu, but no hurry.

    Edit: Had to remove the colorscheme.xmlfor now. Need to find a better way to enable colorsets. Using variables would require to create a new one for each color in each view file. Otherwise, since they are set globally, the colorset from the systemview would also be used in the mainview.
    I must check if my old code will not do that, where i had completely moved all color tags into a separate file; but ,if i remember correctly, there was also a limitation where at least one element couldn't be split up and i had to use variables.


Log in to reply
 

Contributions to the project are always appreciated, so if you would like to support us with a donation you can do so here.

Hosting provided by Mythic-Beasts. See the Hosting Information page for more information.