Jump to content
bernhard

Preview: AdminThemeUikitCustomizer

Recommended Posts

We already had some discussion about something like this in the AdminThemeBoss thread:

Did a quick try today and it looks promising:

Currently this parses the LESS on each request, so I need to implement caching of course. But I think this is the way to go for adjusting the backend to your needs and CI. Creating custom themes for that task is just not efficient!

Happy to hear your opinions. Does anybody want to take it further? I am really busy this year and that will not change soon...

  • Like 12

Share this post


Link to post
Share on other sites

@bernhard - I'd love to see something like this - this is exactly the skinning type approach that I think is needed for the PW admin. It makes so much more sense compared with creating new themes in most situations.

  • Like 2

Share this post


Link to post
Share on other sites

Yeah I agree. It's also really simple. Would not be a lot of effort to build, but I want to hear some opinions first.

  • Like 1

Share this post


Link to post
Share on other sites
43 minutes ago, bernhard said:

I want to hear some opinions first.

This is great! I know it is a lot of work but it would be really nice to have inline comments about what areas/elements the different styles target. An accompanying cheatsheet or graphic could also do the trick.

  • Like 2

Share this post


Link to post
Share on other sites

@bernhard, could you explain a bit more about what you're proposing? I'm not quite getting it.

Would this be a new module with new features - e.g. config inputfields to select theme colours, maybe a bundled PHP LESS compiler for people who don't already have a compiler or don't know how to use a compiler?

Or would it be more a tutorial for how to use the customisation features already possible in the AdminThemeUikit module?

As far as I know, you can already download and customise the LESS files used in AdminThemeUikit (a development/customisation process is outlined briefly in the module readme). And then when you've customised the LESS and compiled it to CSS you would set the path to that file using the config field in AdminThemeUikit:

2019-01-06_110000.png.2de70c7af8d63a8d9d89ea83a000a4ed.png

Or have I misunderstood what the idea is?

  • Like 1

Share this post


Link to post
Share on other sites

Woah nice! Have thought of doing this since using Less parsing on PHP in some projects, what Less parser are you using? 

I imagine something like this that lets you create an admin theme on the fly (with a UI), maybe you just want to change a couple colors, set through color pickers, save, preview and enable it. 10 min job! 

  • Like 2

Share this post


Link to post
Share on other sites
19 hours ago, Robin S said:

Would this be a new module with new features - e.g. config inputfields to select theme colours, maybe a bundled PHP LESS compiler for people who don't already have a compiler or don't know how to use a compiler?

Exactly 😉 I'm just not sure what would make the most sense. Using Inputfields would be the most comfortable, but I'm not sure if that would make sense at all. Because the question would be which options (colors) to make available via Inputfield and which not. Then I think it's better to leave everything in LESS. So one has also the benefit that it is possible to control all other aspects as well (like paddings, margins etc).

 

49 minutes ago, elabx said:

what Less parser are you using? 

https://github.com/oyejorge/less.php

 

46 minutes ago, tpr said:

Using native css variables would be nice, browser support according to caniuse is not that bad:

That would make live changes possible/easy. But I guess we would need to rewrite all the LESS files? (edit: more below)

 

@Robin S you are right, it already works if you download the theme via github, setup a parser, save the css, set PW to use the new theme, set the theme to use a custom css file. And then there is an update to the repo and you have to do everything again... That's way too much effort imho! I want to install PW, adopt the main colors to fit my clients CI, save and go.

I plan to build the less parser as a separate module, because I'm using it for a frontend module as well where I need the same features (parse less and create css, but cache the result if nothing changed).

 

New idea: What if we extracted only those LESS files and images into a folder. Similar to the existing "main css file" Inputfield we could have a "main less file". I've already done this in my current module:

2MIplvO.png

Putting this in a separate folder we could zip them and share them with the community without the need of installing a new admin theme, changing only the SKIN (I like that wording, thx @adrian ). But I guess that would be too much... for me it would already be enough to adjust the main colors.

  • Like 2

Share this post


Link to post
Share on other sites

Sorry if this seems naive, but wouldn't the easiest way to re-skin parts of the admin be to simply leave the compiled default files alone and use the Cascading part of CSS? 
$config->styles->add() in admin.php has been like magic for me and has made my experimentation with custom styling much easier. 
If desired, you could generate the css based on your desired backend variables, similar to CSS variables.

 

login.png

social-example.png

  • Like 1

Share this post


Link to post
Share on other sites
8 hours ago, Chris Bennett said:

Sorry if this seems naive, but wouldn't the easiest way to re-skin parts of the admin be to simply leave the compiled default files alone and use the Cascading part of CSS? 
$config->styles->add() in admin.php has been like magic for me and has made my experimentation with custom styling much easier. 

Maybe I'm missing something, but styling via CSS would mean that you'd have to find ALL expressions relevant to your desired color change and list that in your CSS, wouldn't it? Whereas using the LESS theme you would only have to change one variable setting, as shown in my video.

  • Like 2

Share this post


Link to post
Share on other sites
5 minutes ago, bernhard said:

Maybe I'm missing something, but styling via CSS would mean that you'd have to find ALL expressions relevant to your desired color change and list that in your CSS, wouldn't it? Whereas using the LESS theme you would only have to change one variable setting, as shown in my video.

Absolutely mate, but having done a pretty deep dive into the uikit theme over the last few weeks it is - surprisingly - not as difficult as it would first seem when I started wading through 14000 or so lines of unminimized CSS to get an idea of what was going on 🙂 

Basically you can just bunch a heap of CSS overwrites together and use the single variable like your example video, which is very cool.

To be honest, there's stuff in uikit that could be bunched together more anyway, but generally speaking there's not too much difficulty targeting what you need because most of the styling is tied together pretty logically so it ends up working much like your example.

I should have said earlier, I love your idea and it is something I have kind of been working towards with my experiments. I can't help but want to play with stuff, it's just the way my brain works.

Took it a step further today prompted by this - and because any time I open my mouth I instantly want to make sure I can actually deliver on my suggestions - and can pretty comprehensively change the skin with around 25 php variables (so far) for less than 30kb in a completely uncompressed php file.

As you would imagine, it is still very much a work in progress but had a pleasant amount of forward momentum.
Naturally it wasn't from a standing start, as I have been playing around with my custom admin css for quite a few weeks now so had already "collected" a lot of the CSS I needed to target over that time.

The beautiful thing for me - now I have finally taken the plunge - is I can more easily change stuff myself with what is essentially a config section at the top of my php/css file, which could definitely draw from the backend.

Random example below plucked from the file, setting radius, backgrounds and borders (if desired) on all input items, defaulting to uikit if nothing specified. Once I have setup all the variables similar to this, I don't intend to look past the top section again 😉

.Inputfields input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not(.uk-form-blank),
.Inputfields textarea:not(.uk-form-blank),
.Inputfields select.uk-select:not(.uk-form-blank),
.cke_chrome {<?php echo $input_radius ? 'border-radius:' . $input_radius . 'em;' :''; ?>}
.cke_chrome {overflow:hidden;}
li#Inputfield_navigation_order .Inputfields.uk-grid {border-radius: .5em;}

.Inputfields input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not(.uk-form-blank),
.Inputfields textarea:not(.uk-form-blank) {
<?php echo $input_bckgndcolor ? 'background-color:' . $input_bckgndcolor . ';' :''; ?>
}
.Inputfields input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not(.uk-form-blank):focus, 
.Inputfields textarea:not(.uk-form-blank):focus {
<?php echo $input_bckgndcolor_focus ? 'background-color:' . $input_bckgndcolor_focus . ';' :''; ?>
<?php echo $input_bordercolor_focus ? 'border-color:' . $input_bordercolor_focus . ';' :''; ?>
box-shadow: 0 0 .5em rgba(0,0,0,0.2)
}

 

  • Like 2

Share this post


Link to post
Share on other sites

What you do is basically reverse-engineering the selectors uikit is building. When uikit updates you need to update. @bernhard goes the other way around, which is quite a bit more future-prove as configuration happens before uikit does it's thing.

  • Like 2

Share this post


Link to post
Share on other sites

Thx for sharing your learnings @Chris Bennett

I've also customized colors of the admin via CSS once, but that was a pain IMHO. Changing LESS would be a LOT more readable:

@reno-text-color: #354b60;
@reno-link-color: #ffae00;
@reno-link-hover-color: darken(@reno-link-color, 10%);
@reno-dark-background: rgb(0, 94, 202);
@reno-muted-background: #f0f3f7;
@reno-muted-text-color: #8d939e; 
@reno-muted-text-color-alternate: #6c8dae; 
@reno-primary-background: #1a0ce7;
@reno-secondary-background: #e2e9ef;
@reno-success-background: #8bccde;
@reno-success-color: @reno-text-color;
@reno-warning-background: #FFD15E;
@reno-warning-color: @reno-text-color;

Ideally we would have two skins, one skin for dark main colors (like blue, dark orange, red etc) and one for bright colors (yellow, light green etc). Then we could just choose between light.less or dark.less and modify the color to fit to our client's CI. Then change the logo and boom, we have a completely customized admin that feels like home for the client.

  • Like 1

Share this post


Link to post
Share on other sites
2 minutes ago, bernhard said:

Thx for sharing your learnings @Chris Bennett

I've also customized colors of the admin via CSS once, but that was a pain IMHO. Changing LESS would be a LOT more readable:


@reno-text-color: #354b60;
@reno-link-color: #ffae00;
@reno-link-hover-color: darken(@reno-link-color, 10%);
@reno-dark-background: rgb(0, 94, 202);
@reno-muted-background: #f0f3f7;
@reno-muted-text-color: #8d939e; 
@reno-muted-text-color-alternate: #6c8dae; 
@reno-primary-background: #1a0ce7;
@reno-secondary-background: #e2e9ef;
@reno-success-background: #8bccde;
@reno-success-color: @reno-text-color;
@reno-warning-background: #FFD15E;
@reno-warning-color: @reno-text-color;

Ideally we would have two skins, one skin for dark main colors (like blue, dark orange, red etc) and one for bright colors (yellow, light green etc). Then we could just choose between light.less or dark.less and modify the color to fit to our client's CI. Then change the logo and boom, we have a completely customized admin that feels like home for the client.

Oh, absolutely Bernhard. We're largely doing a similar thing in different ways, I'm just going old-school, no-compiler CSS override driven by php variables outputting as CSS. I have no intention of touching anything beyond the variables at the top unless I need to down the track to add something else 🙂
 

$font_family = ''; 	// Sets font-family. Defaults to "-apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;" if none provided, because segoe sucks :)
$html_bckgndcolor = '#1b2836'; // Background color, also used by masthead and footer if no over-rides are provided for them. Defaults to #e5e5e5 if none provided.
$html_color = ''; 	// Text color for document. Defaults to "#354b60" if none provided.
$body_bckgndcolor = '#C1C1C1'; 	// Background color of body, the area not covered by masthead, footer and possible extra space at bottom of footer. Defaults to "#eee" if none provided.
$link_color = ''; 		// Link color. Defaults to "#009cd6" if none provided.
$linkhover_color = ''; 	// Link hover color. Defaults to "#15BFFF" if none provided.
$masthead_bckgndcolor = ''; // Overrides $html_bckgndcolor for masthead background, if required
$masthead_minheight = '30'; // Minimum pixel height of masthead. Defaults to "55" if none provided. Anything much under 20 is tiny and over 73 will trigger mobile view.
$footer_bckgndcolor = ''; 	// Overrides $html_bckgndcolor for footer background, if required
$spacesave_heading = '1'; 	// Page Heading tucks beside breadcrumbs and margins altered
$currentpage_color = '#FFF'; // Sets color of current page text, Defaults to uikit default if not set.
$button_bckgndcolor = '#228B22';
$button_bckgndcolor_hover = '#176117';
$button_bckgndcolor_active = '#64ad64';
$button_radius = '.5'; 		// Sets border-radius (in rem based off root font-size) of buttons. Defaults to uikit if not set.
$input_radius = '.33'; 		// Sets border-radius (in em based off parent font-size) of inputs. Defaults to uikit if not set.
$input_bordercolor = '#e5e5e5'; // Sets border color of inputs. Defaults to uikit if not set.
$input_bckgndcolor = ''; 	// Sets bckgnd color of inputs. Defaults to uikit if not set.
$input_bckgndcolor_focus = ''; 	// Sets bckgnd color of inputs that are focused. Defaults to uikit if not set.
$input_bordercolor_focus = '#cbd7e3'; 	// Sets border color of inputs that are focused. Defaults to uikit if not set.

 

Share this post


Link to post
Share on other sites
27 minutes ago, LostKobrakai said:

What you do is basically reverse-engineering the selectors uikit is building. When uikit updates you need to update. @bernhard goes the other way around, which is quite a bit more future-prove as configuration happens before uikit does it's thing.

This is true, but would surely also be true of every uikit theme and alternative theme, everywhere, including the processwire default admin theme.
If they radically changed all the hooks then wouldn't everything need to be altered accordingly anyway? 

Personal opinion only, of course, but in this respect I quite like just unobtrusively overriding what is there, because even if every hook suddenly and dramatically changed overnight, the default would still work as expected. 

  • Like 1

Share this post


Link to post
Share on other sites

Update: I've released a preview that everybody can use to play around with and hopefully contribute to this project:

Here is the LESS theme that I used:

Spoiler

// PW Theme
@import "../../modules/AdminThemeUikit/uikit/custom/pw.less";

// color definitions
@tm-primary-color: #52227a;

// reno variables list
@reno-text-color: #354b60;
@reno-link-color: lighten(@tm-primary-color, 10%);
@reno-link-hover-color: darken(@reno-link-color, 10%);
@reno-dark-background: #1C2836;
@reno-muted-background: #f0f3f7;
@reno-muted-text-color: #8d939e; 
@reno-muted-text-color-alternate: #6c8dae; 
@reno-primary-background: @tm-primary-color;
@reno-secondary-background: #e2e9ef;
@reno-success-background: #8bccde;
@reno-success-color: @reno-text-color;
@reno-warning-background: #FFD15E;
@reno-warning-color: @reno-text-color;
@reno-danger-background: #bc283d;
@reno-danger-color: #fff;
@reno-alert-background: #ffd;
@reno-alert-color: @reno-text-color;
@reno-primary-headline-color: #1C2836;
@reno-secondary-headline-color: lighten(@reno-primary-headline-color, 30%);
@reno-notes-text-color: @reno-muted-text-color;
@reno-notes-background: #ffd;
@reno-masthead-background: @reno-dark-background;
@reno-masthead-link-color: rgba(255, 255, 255, 0.7); 
@reno-masthead-link-hover-color: lightblue;
@reno-masthead-link-current-color: #fff;
@reno-masthead-icon-color: #8d939e;
@reno-masthead-search-text-color: #8d939e;
@reno-masthead-search-background: transparent;
@reno-masthead-search-border-color: lighten(#253447, 10%);
@reno-masthead-search-focus-background: lighten(#253447, 5%);
@reno-masthead-search-focus-text-color: #fff;
@reno-masthead-search-focus-border-color: @reno-masthead-search-focus-background;
@reno-masthead-search-icon-color: @reno-masthead-icon-color;
@reno-button-text-color: #fff;
@reno-button-background: @reno-primary-background;
@reno-button-hover-background: @global-link-color;
@reno-button-secondary-background: @reno-muted-text-color-alternate; 
@reno-dropdown-background: #fff; 
@reno-dropdown-color: @reno-text-color;
@reno-dropdown-hover-background: #e2e9ef;
@reno-dropdown-border-color: #d9e1ea;
@reno-dropdown-border: 1px solid @reno-dropdown-border-color;
@reno-dropdown-nav-icon-color: #97aab4;
@reno-page-list-link-color: @reno-link-color;
@reno-page-list-link-open-color: lighten(@reno-link-color, 20%);
@reno-page-list-icon-color: @reno-link-color; // #a9adb5;
@reno-page-list-link-active-color: @reno-link-hover-color;
@reno-page-list-link-hover-color: @reno-link-hover-color;
@reno-page-list-action-link-color: #fff;
@reno-page-list-action-link-background-color: @reno-link-color; 
@reno-page-list-action-link-hover-color: #fff;
@reno-page-list-action-link-hover-background-color: @reno-link-hover-color;
@reno-inputfield-border: 1px solid #d9e1ea;
@reno-inputfield-input-background: #f0f3f7;
@reno-inputfield-input-border-color: #b1c3d4 #cbd7e3 #cbd7e3 #cbd7e3;
@reno-inputfield-select-background: #f0f3f7;
@reno-inputfield-select-border-color: #cbd7e3;
@reno-form-radio-checked-background: @reno-muted-text-color-alternate;
@reno-offcanvas-text-color: @reno-text-color;
@reno-offcanvas-link-color: @reno-text-color;
@reno-offcanvas-link-hover-color: @reno-link-color;
@reno-offcanvas-link-open-color: @reno-link-color;
@reno-offcanvas-background: @reno-secondary-background; 
@reno-offcanvas-search-background: #fff;
@reno-language-tab-background: transparent;
@reno-language-tab-color: @reno-text-color;
@reno-language-tab-current-background: #d2dce6;
@reno-language-tab-current-color: @reno-primary-headline-color;
@reno-language-tab-hover-background: @reno-muted-background;
@reno-language-tab-hover-color: @reno-text-color;
@reno-language-tab-empty-color: @reno-muted-text-color;
@reno-table-header-color: @reno-muted-text-color-alternate;
@reno-table-header-current-color: @reno-primary-background;

 

This is basically the reno theme file of the original AdminThemeUikit, but I introduced the "tm-primary-color" variable. In the reno theme there are several variables with similar colors and it would be nice to have those colors dynamically calculated. Maybe some of the CSS and design experts can help here? @tpr @renobird Who else?

My goal is to have a theme that we can use, where we would only have to change two or three main colors and the look&feel of the admin could fit our clients' CI. Maybe we would also have to define contrast colors for text (if the background is light, the font color needs to be dark). Maybe we could create two themes: One for light backgrounds, one for dark?

Only thing that I'm not really happy with so far, is that the AdminTheme is not listed in the modules upgrades list, because it is not yet listed in the modules directory. I guess that would be easy to change. In the video I'm using a fork of Ryan's version, because I need one method to be hookable. Please support this PR on github: https://github.com/ryancramerdesign/AdminThemeUikit/pull/77

 

PS: I'm using https://processwire.com/talk/topic/17860-preview-processwire-kickstart/ if anybody wonders 😉 

PPS: Here are the github repo links:

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

Great as always!

I don't know how we could also maintain the _*.php files. I say that because for instance, I modified a little part of the markup to implement headroom.js. Also Ryan say that it's needed to modify the data attribute on the masthead (navbar) when we want a smaller navbar (height value).

eg: https://github.com/ryancramerdesign/AdminThemeUikit/blob/master/uikit/custom/pw/pw-theme-reno.less#L124

 

A preview of the theme :

theme_preview.thumb.gif.037c03ce59862482501671460f64b14f.gif

 

Edited by flydev
screencast
  • Like 1

Share this post


Link to post
Share on other sites
53 minutes ago, flydev said:

Great as always!

Thx!

1 hour ago, flydev said:

I don't know how we could also maintain the _*.php files. I say that because for instance, I modified a little part of the markup to implement headroom.js. Also Ryan say that it's needed to modify the data attribute on the masthead (navbar) when we want a smaller navbar (height value).

I guess for little adjustments hooks would be the way to go. If it is more then it might be better to create a custom theme. The goal of my module / workflow is really just to "skin" the current backend a little to feel more familiar for my clients.

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

I played around a little and came up with this dark theme:

Spoiler

// PW Theme
@import "../../modules/AdminThemeUikit/uikit/custom/pw.less";

// ############################################
// ########## main color definitions ##########
// ############################################
@tm-primary-color: #52227a;
@tm-secondary-color: #22b7c7;
@tm-text-color: #313131;
@tm-muted: #e7e7e7;
// ############################################
// ############################################
// ############################################

// general reno variables
@reno-text-color: @tm-text-color;
@reno-link-color: lighten(@tm-primary-color, 10%);
@reno-link-hover-color: darken(@reno-link-color, 10%);

@reno-primary-background: @tm-primary-color;
@reno-secondary-background: @tm-muted;
@reno-success-background: #8bccde;
@reno-success-color: @reno-text-color;
@reno-warning-background: #FFD15E;
@reno-warning-color: @reno-text-color;
@reno-danger-background: #bc283d;
@reno-danger-color: #fff;
@reno-alert-background: @tm-muted;
@reno-alert-color: @reno-text-color;
@reno-primary-headline-color: @tm-primary-color;
@reno-secondary-headline-color: lighten(@reno-primary-headline-color, 10%);
@reno-notes-text-color: #fff;
@reno-notes-background: @tm-secondary-color;
@reno-table-header-color: @tm-text-color;
@reno-table-header-current-color: @reno-primary-background;

// masthead
@reno-dark-background: @tm-primary-color;
@reno-masthead-background: @reno-dark-background;
@reno-masthead-link-color: @tm-muted;
@reno-masthead-link-hover-color: lighten(@reno-masthead-link-color, 20%);
@reno-masthead-link-current-color: #fff;
@reno-masthead-icon-color: @reno-masthead-link-color;
@reno-masthead-search-text-color: @reno-masthead-link-hover-color;
@reno-masthead-search-background: transparent;
@reno-masthead-search-border-color: @tm-muted;
@reno-masthead-search-focus-background: lighten(@reno-dark-background, 5%);
@reno-masthead-search-focus-text-color: #fff;
@reno-masthead-search-focus-border-color: @reno-masthead-search-focus-background;
@reno-masthead-search-icon-color: @reno-masthead-icon-color; 

@reno-dropdown-background: #fff; 
@reno-dropdown-color: @reno-text-color;
@reno-dropdown-hover-background: @tm-muted;
@reno-dropdown-border-color: darken(@tm-muted, 20%);
@reno-dropdown-border: 1px solid @reno-dropdown-border-color;
@reno-dropdown-nav-icon-color: @reno-text-color;

// inputfields
@reno-muted-background: @tm-muted;
@reno-muted-text-color: darken(@reno-muted-background, 80%); 
@reno-muted-text-color-alternate: @reno-muted-text-color;
@reno-inputfield-border: 1px solid @tm-muted;
@reno-inputfield-input-background: #fff;
@reno-inputfield-input-border-color: @tm-muted;
@reno-inputfield-select-background: #fff;
@reno-inputfield-select-border-color: @tm-muted;
@reno-form-radio-checked-background: @tm-primary-color;

@reno-button-text-color: #fff;
@reno-button-background: @reno-primary-background;
@reno-button-hover-background: @global-link-color;
@reno-button-secondary-background: @tm-secondary-color;

// page list
@reno-page-list-link-color: @tm-text-color;
@reno-page-list-link-open-color: lighten(@reno-page-list-link-color, 10%);
@reno-page-list-icon-color: @reno-page-list-link-color;
@reno-page-list-link-active-color: lighten(@reno-page-list-link-color, 10%);
@reno-page-list-link-hover-color: lighten(@reno-page-list-link-color, 10%);
@reno-page-list-action-link-color: #fff;
@reno-page-list-action-link-background-color: @tm-secondary-color;
@reno-page-list-action-link-hover-color: #fff;
@reno-page-list-action-link-hover-background-color: lighten(@tm-secondary-color, 10%);

// offcanvas
@reno-offcanvas-text-color: @reno-text-color;
@reno-offcanvas-link-color: @reno-text-color;
@reno-offcanvas-link-hover-color: @reno-link-color;
@reno-offcanvas-link-open-color: @reno-link-color;
@reno-offcanvas-background: @reno-secondary-background; 
@reno-offcanvas-search-background: #fff;

// lang
@reno-language-tab-background: transparent;
@reno-language-tab-color: @reno-text-color;
@reno-language-tab-current-background: @tm-muted;
@reno-language-tab-current-color: @reno-primary-headline-color;
@reno-language-tab-hover-background: @reno-muted-background;
@reno-language-tab-hover-color: @reno-text-color;
@reno-language-tab-empty-color: @reno-muted-text-color;

// custom css adjustments
p.notes { padding: 0 5px; }
@import "custom.css";

 

All you have to change are these colors:

// ############################################
// ########## main color definitions ##########
// ############################################
@tm-primary-color: #52227a;
@tm-secondary-color: #22b7c7;
@tm-text-color: #313131;
@tm-muted: #e7e7e7;
// ############################################
// ############################################
// ############################################

All reno variable definitions could be moved into a separate file (like dark.less), but for testing it's nicer to have colorization support in my IDE.

Totally different look&feel of the admin with no effort: 🙂 

gWfN6jo.png

Also on small screens:

POeeFxK.png

7PKa6xA.png

I tried to use neutral grey colors wherever possible, so changing only the main color should be enough to get a totally different and still good looking optic:

Jky3oWq.png

XcXbMTz.png

Nice, hm? 🙂 

 

Does anybody know how to change this color? Somehow I was not able to find the correct file where this is specified...

qM36055.png

  • Like 2

Share this post


Link to post
Share on other sites
2 hours ago, bernhard said:

Does anybody know how to change this color? Somehow I was not able to find the correct file where this is specified...

 

You have to change

.gridImage:hover .gridImage__inner {
    background: ...;
}

The original file seems to be @ wire/modules/Inputfield/InputfieldImage/InputfieldImage.css

  • Like 2

Share this post


Link to post
Share on other sites
2 hours ago, bernhard said:

Thx, that didn't work somehow...

You must have edited the wrong file then 🙂. That's exactly where it is.

  • Like 2

Share this post


Link to post
Share on other sites

thx @dragan and @kongondo it worked now 🙂 I had an @import "custom.css" in my theme and this is simply wrong 😄  https://stackoverflow.com/questions/11196915/import-css-file-into-less-file

@img-bg: fade(@tm-primary-color, 30%);
.gridImage:hover .gridImage__inner { background: @img-bg !important; }
.gridImage.gridImageEditing .gridImage__inner { background: @img-bg !important; }

This is what I came up with. But this is an ugly !important override because the theme is loaded at the very beginning and the css files are loaded afterwards. In the InputfieldImage.css file there are also some other colors that seem to be not a part of any less (or I am missing something?). That's not ideal. I'll continue to work on that. I've also found out that there is this handy function:

contrast(@my-background, @dark-color, @light-color)

So it should be possible to just create one single theme file and adjust very few colors and everything else could be calculated automatically (even for light and dark colors) 🙂 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...