Forums de discussion

Having a hard time creating a 6.2 theme

Thomas Kellerer, modifié il y a 10 années.

Having a hard time creating a 6.2 theme

Expert Publications: 490 Date d'inscription: 09/06/08 Publications récentes
Hello,

I'm trying to create a them for 6.2 (based on the "classic" theme that comes with Liferay 6.2)

I'm not a CSS expert and I'm totally lost with the new SASS framework.

I have the feeling that the definitions for various elements are spread over several files and I don't understand the logic what goes into custom.css, custom_common.css and layout.css

I tried introducing a new variable for a background color of the navigation bar (as it seems the definition of that used in many, many places). So I placed a variable into the file _diffs/_aui_variables.scss

$bodyBackground:  #f0f0f0 !default;
$navbarBackground: #F0F0F0;
$navbarTextcolor: #000;

I then used the $navbarTextcolor variable all the places where it's needed in custom.css, custom_common.css.

But when I build the theme, the following error message is shown:


build-css:
     [java] Loading jar:file:/C:/Projects/Liferay/liferay-6.2/tomcat-7.0.42/webapps/ROOT/WEB-INF/lib/portal-impl.jar!/system.properties
     [java] Loading jar:file:/C:/Projects/Liferay/liferay-6.2/tomcat-7.0.42/webapps/ROOT/WEB-INF/lib/portal-impl.jar!/portal.properties
     [java] Parsed c:\Projects\Liferay\sdk-6.2\themes\test-theme/docroot/css/application.css in 15539 ms
     [java] Parsed c:\Projects\Liferay\sdk-6.2\themes\test-theme/docroot/css/aui.css in 11229 ms
     [java] Parsed c:\Projects\Liferay\sdk-6.2\themes\test-theme/docroot/css/base.css in 3110 ms
     [java] Parsed c:\Projects\Liferay\sdk-6.2\themes\test-theme/docroot/css/color_schemes/common.css in 2997 ms
     [java] Parsed c:\Projects\Liferay\sdk-6.2\themes\test-theme/docroot/css/color_schemes/dark.css in 2902 ms
     [java] Parsed c:\Projects\Liferay\sdk-6.2\themes\test-theme/docroot/css/color_schemes/green.css in 124 ms
     [java] Parsed c:\Projects\Liferay\sdk-6.2\themes\test-theme/docroot/css/color_schemes/light.css in 2710 ms
     [java] Parsed c:\Projects\Liferay\sdk-6.2\themes\test-theme/docroot/css/color_schemes/orange.css in 115 ms
     [java] Undefined variable: "$navbarTextcolor".
     [java] c:\Projects\Liferay\sdk-6.2\themes\test-theme/docroot/css/custom.css:476
...
     [java] Parsed c:\Projects\Liferay\sdk-6.2\themes\test-theme/docroot/css/custom.css in 5237 ms
     [java] Undefined variable: "$navbarTextcolor".
...
     [java] Parsed c:\Projects\Liferay\sdk-6.2\themes\test-theme/docroot/css/custom_common.css in 4368 ms
     [java] Parsed c:\Projects\Liferay\sdk-6.2\themes\test-theme/docroot/css/custom_responsive.css in 2918 ms
     [java] Parsed c:\Projects\Liferay\sdk-6.2\themes\test-theme/docroot/css/dockbar.css in 2752 ms
     [java] Parsed c:\Projects\Liferay\sdk-6.2\themes\test-theme/docroot/css/extras.css in 3068 ms
     [java] Parsed c:\Projects\Liferay\sdk-6.2\themes\test-theme/docroot/css/layout.css in 67 ms
     [java] Undefined variable: "$navbarTextcolor".
...


What am I missing here?
It seems that the $navbarBackground variable is working correctly, what isn't the $navbarTextcolor?

I'm also unsure about the difference between: _aui_custom.scss and _aui_variables.scss

And finally I'm trying to enable the SASS "debug mode" to be able to trace down CSS definitions using Firebug and FireSass but changing environment.rb apparently does not have any effect. Is there any way I can pass the --debug-info commandline parameter from within the Ant build script?

Any help is greatly appreciated
Thomas
thumbnail
Kumar Vivek, modifié il y a 10 années.

RE: Having a hard time creating a 6.2 theme

Junior Member Publications: 51 Date d'inscription: 05/09/11 Publications récentes
Hi Thomas,
Even i'm new to this theme development. May be this approach will help you out.

1) first chose the classic theme as base theme and create a theme project .
2) here in the project you will get _diff folder.(which holds all the custom changes that we want to do to the theme)
3) in the same project docroot you will see the folders(css,images,js,templates) copy all these folder and past in _diff folder
4) then compile and deploy the theme project and check that it does not throws any exceptions or errors.
5) once the theme is deployed successfully . then go to the _diff folder ,customize the code that you want and then redeploy and check.
6) if you have done a valid customization then hope that you'll achieve what you want.

Also follow the tutorials available on the liferay website for them development .

enjoy the theme development. emoticon
thumbnail
Jack Bakker, modifié il y a 9 années.

RE: Having a hard time creating a 6.2 theme

Liferay Master Publications: 978 Date d'inscription: 03/01/10 Publications récentes
Kumar Vivek:

1) first chose the classic theme as base theme and create a theme project .
2) here in the project you will get _diff folder.(which holds all the custom changes that we want to do to the theme)
3) in the same project docroot you will see the folders(css,images,js,templates) copy all these folder and past in _diff folder
4) then compile and deploy the theme project and check that it does not throws any exceptions or errors.
5) once the theme is deployed successfully . then go to the _diff folder ,customize the code that you want and then redeploy and check.
6) if you have done a valid customization then hope that you'll achieve what you want.

Yikes ! Do not do #3

Creating a custom theme with a 'classic' Parent theme can be challenging. Recommended approach is to start with '_styled'. However, I have learned a lot creating custom themes based on 'classic'. So if you feel you have to start with 'classic', as a learning experiment perhaps, change Kumar's #3 to:

3) copy folders in tomcat*/webapps/ROOT/themes/classic/_diffs into your empty *sdk*/themes/mylearning-theme/docroot/_diffs folder

--
But even then would be additional steps like updating liferay-look-and-feel.xml to reference the color schemes in classic, and other steps...

--
I fully expect someone now to come in and say "Yikes ! Do not do this" to my advice above emoticon