I want to know your experiences with theming Serenity.

[MarcusOy]

EDIT: I posted an outline of what I did down below in the comments to achieve the result listed in this parent post.

Hi there,

I'm not sure if this is the right place to put this, but I would like to open this issue in order to gather your experiences with theming Serenity. Currently, I'm having a go at it right now using Sleek Dashboard. Here is a preview:

I was also thinking of making a video or a series of videos explaining the process of theming Serenity based on certain conditions (if template is using SCSS or LESS, etc) in order to make that information more available for this community.

I won't link my YouTube just yet because I've done nothing to warrant self-promotion here, but I would consider myself as a decent video editor with a lot of experience (Premiere Pro, After Effects, and the rest of the Adobe Suite).

I am also a full time student, so I can't make any guarantees, however, with enough information from my learning experiences as well as some of yours, hopefully we can make this a reality. I really fell in love with how Serenity works when my dad showed me this framework and I really feel like giving back.

Best Regards, Marcus

[kilroyFR]

I have personnally customized 2 themes very easily with Serenity (but mainly i have started from existing themes and changed colors, etc in css). I did not know about the Sleek Dashboard tool until today. Thanks for sharing. May be could be useful to integrate new boostrap theme in serenity.

But anyway, i have only one question : what does sleek dashboard offers that we don't have yet in adminLTE/Serenity ?

Do you plan to share how to integrate ? (even if so far current admin LTE template match my requirements).

EDIT :jsut checked. I love the Chart Widgets of this framework. Some nice displays

[brunobola]

@MarcusOy and @kilroyFR you guys could write a tutorial or wiki for others to replicate your work, helping the community ;)

[juliermefelix]

Dear, It would be very good to record the videos and the wiki, I have also worked on changing themes, and I say that is not a very easy thing. If I already have video recorded about this I am interested in watching.

[JohnRanger]

HI @MarcusOy ,

that is absolutely a very good idea to put up some videos and then to link them. I think we all appreciate contributing work here. That's how many side problems finds a solution.

If you do them, please put them into the wiki (I mean: Give them a proper wiki entry and then put the link(s) to the youtube video(s) in that wiki entry) :-)

With kind regards,

John

[markdvz]

KilRoy or anyone have any interest in sharing themes? I'm pretty basic with CSS but made this theme a couple of years ago, it has some decent comments about what to change. It still needs lots of work, but interesting to see how you can mix it up.

[juliermefelix]

I have also worked trying to implement our themes, I found difficulty with the theme is in BS4.

Theme update. # 4393

@MarcusOy If possible please help me implement this Sleek Dashboard theme. Describe the steps required to change the theme.

Thank you

[MarcusOy]

@juliermefelix I'd like to make a more comprehensive tutorial on the topic, but it really boils down to this:

1. Analyze the source theme. For sleek, I just went ahead and opened the index.html and looked for the sidebar and header elements in the DOM.
2. Realize how the layout system works within MVC. Each layout element are in cshtml format and are usually seperated into their own files (_Layout.cshtml is the root layout file, LeftNavigation.cshtml is the sidebar items, _LayoutHead.cshtml is for scripts/styles, etc.) Almost all pages when logged in uses _Layout.cshtml defaultly as its main layout. We can also see within this file where the actual content of the page will be displayed (@RenderBody()).
3. Compare similarities between the current AdminLTE theme and the theme you're trying to swap to (Sleek). You'll see the reoccurring structures, such as the menu items in the side bar.
4. Copy all dependencies into the project, such as scripts and styles, then copy their paths into the respective bundle files (CssBundles.json and ScriptBundles.json), maybe even make a new section just for Sleek dependencies for easy differentiation. You'll be able to see what dependencies your theme will use by just checking the header tag or wherever for script and style tags.
5. Add a @Html.ScriptBundle("SectionName") and @Html.ScriptBundle("SectionName") to _LayoutHead.cshtml. This will load scripts and styles needed for Sleek.
6. Extract the DOM needed for the sidebar and header and place it into _Layout.cshtml.
7. If you open up LeftNavigation.cshtml, this layout is being passed all the Serenity menu items through its model, then it is generating html code for each menu tree/item via a Razor C# function. This took the longest to figure out since there are many differences here. This will be a long tutorial for sure just for this step here.
8. Replace all the placeholders (logos, user accounts, etc) with either your content or data coming from Serenity classes (such as the currently logged in user via Serenity.Authorization)

This is all I can think of at the top of my head. There are many other steps to this process, but hopefully this can give you a decent outline of what to do.

Another thing is that Sleek uses SCSS, while the current AdminLTE theme uses LESS. This will cause a lot of layout issues in my experiences, since Bootstrap is trying to calculate layout parameters for the new theme while thinking its still theming the site as AdminLTE. I know this is probably not a great idea or the proper way, and by no means am I a bootstrap wizard. What I did was replaced the current Bootstrap version (that I saw was referencing a lot of LESS files via its source map) and replaced it with the version that came with the theme (that I saw was referencing a lot of SCSS files via its map). This fixed all layout issues I was having. If someone could shed light on this that would be great.

[JohnRanger]

@markdvz ,

looks really great - your theme. It reminded me a bit of the professionality and firmness (no pun intended) of SAP GUI (but of course your theme together with Serenity looks much better:-)).

With kind regards,

John

[xareas]

anyone have any interest in sharing themes?

[juliermefelix]

@xareas I'm interested, if you want you can share this with me. thank you

[juliermefelix]

I have worked on this theme, I have difficulty changing the dialog window.

[kilroyFR]

If anyone did provide modifications to make a DARK THEME of serenity basic template, he is welcomed (i am working on it right now but gonna take some time).

[markdvz]

@kilroyFR, If you just mean the color scheme, I am pretty close to one myself. Admittedly, I am not very good at CSS, just having a little fun.

PS. @JohnRanger (Serenity veteran) thanks for the nice comments. :)

[JohnRanger]

@markdvz

your dark theme above also looks great (and is comfortable to look at. I tried it for a couple of minutes in full screen and my eyes didn't get tired) - especially the detail part. Any way that you would share it here? (e.g. in the wiki with attached files - so we can work on it too) :-)

With kind regards,

John

[markdvz]

@JohnRanger - How do I attach "in the wiki with attached files"?

[JohnRanger]

@markdvz ,

I do it like this: (1) Create a fake issue (but do not save it) (2) Attach the file (this does upload it to Github and gives you the URL) (3) Copy the URL into notepad (4) close the browser tab with the fresh - not saved - issue (the uploaded file still persists) (5) Create your wiki entry and paste the link to the uploaded file URL

:-) I know - a dirty trick - but it works for me.

Hope this helps.

With kind regards,

John

[markdvz]

@JohnRanger I was able to upload the file with a fake issue. It is pasted below, not sure about the wiki part. Sorry, have been so busy.

https://github.com/volkanceylan/Serenity/files/3601673/theme_blue_on_black.tx

A couple of notes: 1) Although I am further along than screenshot, like black dropdown buttons are so cool, there are still some little things, like when you hover or a scroll bar etc etc. Fun to work through those if I had time... also, I do not know how to replace the back button on panels as it is some type of embedded image... 2) At first, I copied entire sections of css and didn't remove the redundant stylings, which should be removed to avoid confusion. Mostly, this is just about color with maybe the exception of some tab styling. 3) As I put inside the document, I thought it would be cool to have a legend at the top so that you could just replace each color and create a whole new "pervasive" theme easily.

Lemme know thoughts?

[JohnRanger]

Hi @markdvz ,

the legend is a great idea. Also for the Wiki entry I think it would be very effort-less (5-10 mins - see below):

Create a new wiki entry

• with title: Theme: Blue on Black

• Add some intro text like this: A professional, eye-friendly theme which looks like this:

• With the fake issue trick upload one or more screenshots of the theme and put the links below your intro text - The images will be rendered automatically by the wiki engine.

• And then just put your css code directly into the wiki article - like this:

---

<3 backticks, followed with the word 'css'>

<all your CSS code>

<3 backticks> (see the following markdown for syntax highlighting: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code ) ------------------ This has the benefit that the css could easily be directly edited by other users (or you later) here. Optionally add the hint that this CSS code has to be changed in file xyz (probably the serenity.css). What do you think? :-) Regards, John

[volkanceylan]

Thanks for sharing, in the future i'm hoping to open something similar to marketplace for Serenity, where you can share/sell your Serenity themes/plugins.

[muhammedyaman]

@volkanceylan is there an ETA on this marketplace idea? @MarcusOy did you manage to accomplish sleek dashboard implementation?

[xareas]