ckeditor custom styles and control panel theme

[Alan Boshier, modificado 12 Anos atrás.]

Hi

I need to add some custom styles to those available in the Web Content editor (ckeditor). To do this I have hooked js\editor\ckeditor\ckconfig.jsp and added my new custom style as so:

CKEDITOR.addStylesSet(
		'liferayStyles',
		[
		...
		// Custom styles
		{name: 'Info Message', element: 'div', attributes: {'class': 'portlet-msg-info'}},
		{name: 'Alert Message', element: 'div', attributes: {'class': 'portlet-msg-alert'}},
		{name: 'Error Message', element: 'div', attributes: {'class': 'portlet-msg-error'}}

                {name: 'Foo bar', element: 'div', attributes: {'class': 'foo-bar'}}
		]
	);

To ensure that the drop-down in the web content editor displays the text for my new style 'Foo bar' in the style of the css class 'foo-bar' I need to ensure my class foo-bar in in scope both on "normal" pages and on the control panel.

For the former I can define a custom theme based on a standard parent liferay theme (e.g. _styled) and add the new class foo-bar to diffs\css\custom.css.

For the control panel it's not clear to me what the best way forward is. I want the "classic" liferay control_panel theme with just this added style. But using the IDE/SDK it seems like I can't define a custom theme that has a parent of control_panel. in the same way as I could do for _styled, _unstyled, _classic.

So do I need to just copy the entire contents of the control_panel theme into my theme and edit custom.css? That seems very fragile compared to the "diff against a parent theme" approach. Is there a better way?

[Florian Kissling, modificado 12 Anos atrás.]

Hi Alan,

I ran into the same problem yesterday and found your post while searching for a solution.
To make the "control_panel"-theme available as a parent in the Plugins SDK, you have to edit the "build-common-theme.xml" in the root of your Liferay Plugins SDK themes folder: If you open ${PLUGINS_SDK_HOME}/themes/build-common-theme.xml, you'll note that around line 152, the settings to merge the "_styled"-, "_unstyled"- and "classic"-themes are defined. Based on the existing code for the "classic"-theme, I added

			<elseif>
				<equals arg1="${theme.parent}" arg2="control_panel" />
				<then>
					<copy todir="docroot" overwrite="true">
						<fileset dir="${app.server.portal.dir}/html/themes/control_panel" excludes="_diffs/**,templates/**" />
					</copy>
					<copy todir="docroot/templates" overwrite="true">
						<fileset dir="${app.server.portal.dir}/html/themes/control_panel/templates" includes="*.${theme.type}" />
					</copy>
				</then>
			</elseif>

just below the <elseif>-block for the "classic"-theme.
This should make the "control_panel"-theme referenceable as a "theme.parent" in your themes "build.xml" like so:

<property name="theme.parent" value="control_panel" />

If you go ahead and create a new theme, change the "theme.parent" to "control_panel" and issue "ant build" in the theme folder root, you should end up with a folder structure similar (indeed, identical) to the original one at ${PORTAL_ROOT_HOME}/html/themes/control_panel.

So far, so good – but there's another thing to work around: If you'll inspect the "control_panel"-theme closely, you'll note that the original "custom.css", which you'd normaly use to place your CSS overrides, is not "a clean slate" as in "empty like in the other default themes". On top of that, it references the "custom_common.css" located in the "classic" theme with

@import url(../../classic/css/custom_common.css);

– a path that only makes sense for the default themes located in ${PORTAL_ROOT_HOME}/html/themes, not for the additionally deployed ones like our new "control_panel"-theme.

I personally use SASS and Compass (http://sass-lang.com/ and http://compass-style.org/) and their "partials"-feature to include the original "custom.css" and "custom_common.css" before my own styles in "_diffs/css/custom.css".
A simple way to do this without SASS/Compass would be copying the original contents of "custom.css" and "custom_common.css" into your "_diffs/css/custom.css", and place all your custom styles below.

I'm just an hour or so into this myself, so above is pretty much an outline of my "work in progress" and I haven't looked into things like paths to CSS background images for "custom_common.css" – but the resulting theme is looking quite good already, and maybe this helps finding your own way into this.

Good luck,
Flo

---

Edit: I've added a github-repository with my current version, available here: https://github.com/fk/custom-control-panel-theme

[Maarten van Heiningen, modificado 12 Anos atrás.]

Hi Alan

Alan Boshier:

For the control panel it's not clear to me what the best way forward is. I want the "classic" liferay control_panel theme with just this added style. But using the IDE/SDK it seems like I can't define a custom theme that has a parent of control_panel. in the same way as I could do for _styled, _unstyled, _classic.

You can change the theme of the control panel very easy you just need to know where to change the setting.

In the plugins sdk there is a folder for themes in there you have a flie called "build-common-theme.xml"

You just need to copy in these lines or look at my example file

			<elseif>
				<equals arg1="${theme.parent}" arg2="control_panel" />
				<then>
					<copy todir="docroot" overwrite="true">
						<fileset dir="${app.server.portal.dir}/html/themes/control_panel" excludes="_diffs/**,templates/**" />
					</copy>

					<copy todir="docroot/templates" overwrite="true">
						<fileset dir="${app.server.portal.dir}/html/themes/control_panel/templates" includes="*.${theme.type}" />
					</copy>
				</then>
			</elseif>

Now you can just create a new control panel them based on the current one in the liferay portal you have pointed to in the Liferay IDE.

In your Liferay Studio or IDE it's now a regular theme and behaves like any other theme you would like to develop.

Best Maarten

[Florian Kissling, modificado 12 Anos atrás.]

Hi Maarten,

I just came across this again by accident, and while I find it a bit confusing that you posted exactly the same solution as I did, I feel validated by your response as you're certainly the Liferay-expert among us two ;-) – plus the attached XML of course is a nice starting point for people who just want to dive in right away.

Allow me a question though: Can you validate the part of my message which starts with "So far, so good", regarding "custom.css", based on Liferay 6.0.6?

To all other people out there reading this: Liferay 6.1 finally took care of the control-panel-theme. Good stuff!
Everyone stuck at 6.0.6 maybe wants to take a look at https://github.com/fk/custom-control-panel-theme – my version of the control-panel-theme, only tested in Google Chrome tough and certainly still rough around the edges.

Best regards
Flo