Theming and jquery (ui)
Permalink
Hi.
I'm creating a theme (in a package) and that theme is using jquery and jquery ui. I'm using the ui tabs in a (fancybox) popup.
I included the (ui)jquery (not the latest ui due to the widget changes). It all works well when displaung the page. The problems start when I log in to change some page properties.
The dashboard (C5) uses it's own (ui)jquery and the custom one on the site is not working very well together :(
Is the a clean/simple way to use your own jquery-ui and theme in the frontend without messing up the C5 core when you are logged in (and actually using the dashboard)?
Maybe I should add an css class to the pages content and then add that to the custom ui-css?
S.
I'm creating a theme (in a package) and that theme is using jquery and jquery ui. I'm using the ui tabs in a (fancybox) popup.
I included the (ui)jquery (not the latest ui due to the widget changes). It all works well when displaung the page. The problems start when I log in to change some page properties.
The dashboard (C5) uses it's own (ui)jquery and the custom one on the site is not working very well together :(
Is the a clean/simple way to use your own jquery-ui and theme in the frontend without messing up the C5 core when you are logged in (and actually using the dashboard)?
Maybe I should add an css class to the pages content and then add that to the custom ui-css?
S.
Another idea is to load your jquery_ui css when viewing the page, but not when in edit mode. That is the way I am coding my blocks.
For example:
For example:
if(!$c->isEditMode()){ $this->addHeaderItem($html->css('jquery_ui_site.css'),CONTROLLER_NAME) ) }
Hi, just saw your suggestion about loading the jquery css only when viewing the page, but cannot work out how or where to place the code exactly .... any chance you could help please ? Many thanks
When you use the UI theme roller, there is an option to localise the theme, so you can for example get theme roller to prefix all styles with #page-content. Look under 'advanced theme settings' on the theme roller download page.
That way, you can have 2 lots of ui css coexisting. The C5 styles for C5 dialogues and the dashboard, and your own styles for your front end widgets.
That way, you can have 2 lots of ui css coexisting. The C5 styles for C5 dialogues and the dashboard, and your own styles for your front end widgets.
Hi JohntheFish
I tried that as you suggested but is doesn't work all the way. I see "some" changes in the style but not all. I'm using the datepicker and it looks fine on the page but when logged in it gets much wider and has a shadow, which it doesn't have when your logged out. I set an id on an wrapping div around the datepicker as follows:
Am I missing something essential?
Thanks
Mr Lindau
I tried that as you suggested but is doesn't work all the way. I see "some" changes in the style but not all. I'm using the datepicker and it looks fine on the page but when logged in it gets much wider and has a shadow, which it doesn't have when your logged out. I set an id on an wrapping div around the datepicker as follows:
<div id="myCalender"> <div id="datepicker"></div> </div>
Am I missing something essential?
Thanks
Mr Lindau
First, I would visually check the css you have generated to make sure every css rule begins #myCalendar.
That probably won't be the solution, but it is an easy check to make first.
What I suspect is happening is that the c5 css rules define some styles that are not defined in the theme roller generated css you have, and are hence being added when logged in.
You will need to flip between logged in and not logged in and use the developer console to identify which style rules c5 is adding, then add by hand some rules more appropriate to your theme to your own css, always with the #myCalendar selector in order to make sure you both override the c5 styling and do not spill out from your theme.
That probably won't be the solution, but it is an easy check to make first.
What I suspect is happening is that the c5 css rules define some styles that are not defined in the theme roller generated css you have, and are hence being added when logged in.
You will need to flip between logged in and not logged in and use the developer console to identify which style rules c5 is adding, then add by hand some rules more appropriate to your theme to your own css, always with the #myCalendar selector in order to make sure you both override the c5 styling and do not spill out from your theme.
I checked all the css and the #myCalender was present everywhere.
Gone through the jquery.ui.css now and added some additional css to the themerolled, and it works. How ever I cant get the icons to show the right kind. I'm talking about the small arrows on the left and right side of the month header. Do they come from another css then jquery.ui.css cause no matter what line I disabled in firebug nothing happened to the icons.
Gone through the jquery.ui.css now and added some additional css to the themerolled, and it works. How ever I cant get the icons to show the right kind. I'm talking about the small arrows on the left and right side of the month header. Do they come from another css then jquery.ui.css cause no matter what line I disabled in firebug nothing happened to the icons.
Never mind I found it =)
Thanks for your help.
I just put !important on that particular image position and now it works.
Thanks for your help.
I just put !important on that particular image position and now it works.
Now in your theme's <head>, add this line ABOVE the call to "Loader::element('header_required')":
There are ways to optimize this by not having such a huge jquery.ui.js file -- you could comb through the built-in C5 one and read the comments above each section in there to see which components C5 needs, and then only include those (and your own requirements) in your jquery ui download. Or you could make two files -- one for logged-in users that has all the c5 stuff and your own, and then another one for logged-out users that only has your own (and then use some php code in your theme head to load one or the other but not both). But try the above method first to see if it works.
Good luck.