Styling the standard popup editor

Styling the standard popup editor

  
I was asked to style the popup editor (I may call it modal dialog sometimes) in a very specific way, for a project that I was working on. Since the styling proved to be a bit trickier than I expected, I'll share the process in case it is useful to someone else.

The goal was to go from this (default London theme with colors customized):



To this:



I have attached an oml with the finished product. Below is the step by step process.

I’m starting based on LondonFixed so I created a new theme, NewTheme, where I already overloaded some basic styles for buttons:
 

Also, my popup is starting out with this layout:


From now on, the work is to overload the popup styles to achieve the final result.
It’s important that these overloads are done in the NewTheme css and not in the ModalDialog css, because this latter one isn’t available when the popup is loading and won’t apply.


So let’s take this step by step:
01 - There is some padding applied to the dialog’s contents, and that’s coming from the MainPopup in the London Theme. I could create a new layout for this popup without this padding but it’s simpler to just overload this class.


02 - I started by tackling the drop shadow style. First I had to identify where this style is getting defined, and by inspecting the popup I could see it’s defined inline on a <div> with class os-internal-Popup.


Let’s try to define the box-shadow in that class, and mark it as important so as to override the inline style:


Yup, we’re getting there. The new box shadow shows up and the content padding is gone:


03 – Styling the title section. Like before, let’s identify where the current style is getting set and work from there.
This one is nice and clean, there is nothing inline, and here’s the background and border:


We want to keep the cursor, so let’s just work on the rest. Looks like the right thing to do is to overload .os-internal-ui-dialog-titlebar, so let’s try that. Get rid of the gray background and change the border color:


04 - We can anticipate already that the white title text won’t be visible once we get rid of the background so let’s work on that. Inspecting the element we find class os-internal-ui-dialog-title on the <span> element, which sounds perfect.


There’s some positioning css going on there that looks fishy but for now let’s just solve the problem at hand and work on the font style:


What does it look like now?


Well, it worked, but the title bar is too narrow now, and the cross is gone (it’s white).
 
05 – Change the cross image – As before, find the css that is setting it and change it. Inspecting the now-hidden cross we find:


For this I just added the new cross image to my espace and overloaded the class:




06 – Increase the height of the title bar. Sounds simple enough. We’re already overloading the title bar class so let’s just add some padding around the text:



What does it look like now?



It worked, but now the close cross is wrongly positioned, and what’s worse, the drop shadow is not going all the way to the bottom.

07 - Let’s focus on the simple fix for now, the close cross. We had seen before (step 05) that it was being absolutely positioned relatively to the top right corner of the title box, so let’s keep it that way and just change the coordinates:


08 – Now, the bigger problem of the drop shadow. Remember from step 02 that the drop shadow is applied to a div with class os-internal-Popup. If we inspect the element again, we can see that its height is being set inline  as 163px:


However, the total height of the popup is 193px. The difference of 30px is the padding we added to the title box in step 06.
To fix this, I went back to class os-internal-Popup and forced it to inherit the height from its children. This overrides the inline height and fixes the issue.



This is what it looks like after these fixes:



Not too shabby. In fact, it looks like we’re done.
However, when the popup was loading I noticed the loading spinner wasn’t showing up properly:



09 - The problem was caused by my height overload in the previous step, so I’ll fix that simply, by setting a min-height on the container:



This fixes the issue:




And the work is done.
 
10 - For extra credit, I also changed the title text positioning so that it lines up on the left of the title box padding and is vertically centered:


11 – Also for extra credit, you could change the style of the overlay, the gray area behind the popup that blocks the screen:



The final look, with a cool (or maybe not :) red overlay:



So that's it. I hope this is useful to someone.

Cheers,
Daniel
is it fully responsive as bootstrap modal ...?