Forums

jQuery UI for datepicker and dialog

Permalink
I have a problem. It's the jquery theme rolled UI.
I thought I managed to override the styles inside concrete but no such luck.

The datepicker and dialog looks good when not logged in.
But when you log in you get different arrows on the datepickers "next" & "prev" button icons. And I can't get them to change to the ones I want. I tried "!important" but no luck.

The dialog is completely overridden by the C5 jquery. Not a trace of my own style.

I have used scope for both widgets but once I log in they break anyway. I have gone through the css code and added some styles to make it whole again but some thing just don't change.

Is the jquery styles in C5 so implemented that you have to spend hours going through the code line by line just to get it to work?
I've searched the forums all day but haven't found any solution.

Is there a way to get those C5 styles to be overridden?

Thanks
Mr Lindau
 
MrLindau replied on at Permalink Reply
I finally found the css that broke the datepicker icons.

In the jquery.ui.cs located in:
concrete/css

in line 335 to 338:
.ui-datepicker .ui-datepicker-prev span{background-position:0px -32px !important;}
.ui-datepicker .ui-datepicker-next span{background-position:-16px -32px !important;}
.ui-datepicker .ui-datepicker-prev-hover span{background-position:0px -48px !important;}
.ui-datepicker .ui-datepicker-next-hover span{background-position:-16px -48px !important;}


The !important part of these lines break the datepicker from using a themerolled icon instead of the one C5 is using.

When the !important-rule was removed it worked fine.
removed in line 335 to 338:
.ui-datepicker .ui-datepicker-prev span{background-position:0px -32px;}
.ui-datepicker .ui-datepicker-next span{background-position:-16px -32px;}
.ui-datepicker .ui-datepicker-prev-hover span{background-position:0px -48px;}
.ui-datepicker .ui-datepicker-next-hover span{background-position:-16px -48px;}



If there aren't any good reason as to why they are set to !importent shouldn't they be removed to help theme with a custom themerolled css?
MrLindau replied on at Permalink Reply
To get the icons on the jquery dialog working I found a couple of rules in the jquery.ui.css that wasn't in the theme-rolled version.

in the theme-rolled there are:

.ui-dialog .ui-dialog-titlebar-close {
   style:value;
}


But in the css that ships with C5 there are a couple of more styles that overrides this one. But when I added these rules to my custom css I was able to style the close button on the dialog jquery. 

.ui-dialog .ui-dialog-titlebar-close {    style:value; }
.ui-dialog .ui-dialog-titlebar-close span { style:value; }
.ui-dialog .ui-dialog-titlebar-close:hover span{ style:value; }
.ui-dialog .ui-dialog-titlebar-close:hover,.ui-dialog .ui-dialog-titlebar-close:focus{ style:value; }


I hope this helps someone with the same problem.
MrLindau replied on at Permalink Reply
A word of warning though... if you don't use a css scope this will affect the built in dialog when logged in.

And as dialog uses <body> as parent the style will affect the whole C5 interface...so when you get tired of this you can switch of the scope-class in body once you are logged in.

Not the fanciest thing to do but I'm getting tired of this s***
If anyone has another idea, feel free to enlighten me.

<body <?php global $u; if (!$u -> isLoggedIn ()) { echo 'class="scope"';} ?>>