Creating theme and Deploying in liferay 7 by using Eclipse

[venky yuvan, geändert vor 7 Jahren.]

Step1:

Open your Eclipse go to File--->New --->Liferay Module Project
Give
Project name –(EX:Lr7Theme)
BuildType – Gradle-Module
Project Template name – Theme (You have to Select)


Click Finish Button. After Click Finish button in eclipse you can see your theme (Ex:Lr7Theme).
In this theme you have some basic file as shown below Screen



Step2:

Open Gradle Task and Gradle Excutions (Window -->Show view → Search For Gradle)
In gradle you can see your theme, build → First do buildTheme then build After completion of that one in your theme you can see one Folder called Build as shown below screen



Step3:

In that build folder you can see build → build theme → css → templates → Ext...
Lib folder you can see your theme war (Lr7Theme.war)



Copy that files or folders (css,Images,js,templates ) paste in to src → webapp folder. After completion of this one you can see all files and folders in your webapp folder



Step4:

Here If you want give your own css create one file (ex:mycustome.scss) in src → webapp → css here you can write your custome css.(you can use _custom.scss).After file creation you have to give the file entry in main.scss
in the last entry like below

@import "mycustom";
After That goto your mycustom. scss write your css what do want.



Step5:

After completion of writing your css. Goto gradle Task Build →first buildThme then buildcss finally build.
After completion of this one, in lib folder you can see your updated theme war file (Ex:Lr7Theme.war).As shown above Step3

Deploying Theme:
For Deploying theme you have to open localhost:8080 in browser.
After sign in Follow below steps

Open Control Panel → Apps → App Manager → Right side click Upload (if you click that dots u can get it ).



After that you will get one popup window there you have to select you theme.Then click install button.After that you can see success message and you can see console in eclipse one theme is available use





Step6:

Selecting your Theme:
For selecting your theme in browser (leftside ) Liferay → public Pages → configure



Here you can change your theme by using Change Current Theme button, you will get one popup there you can select your theme



There you can change your logo using Logo Section .



Finally click Save Button Reload your Browser then you can see your changes.

If you want change navigation bar you can change in navigation.ftl file and if you want change footer you can change portal_normal.ftl file in Src → webapp → templates

Finally Your Theme is

[David H Nebinger, geändert vor 7 Jahren.]

Thanks for sharing.









Come meet me at the 2017 LSNA!

[Leonard Scardino, geändert vor 6 Jahren.]

Why in the world is this not on the https://dev.liferay.com site? Really appreciate you laying this out.

[Mladen Bukejlovic, geändert vor 5 Jahren.]

Thank you for this step by step guide. It helps a lot!

[gvs cbe, geändert vor 4 Jahren.]

Hi,
buildtheme was successful, but while running buidcss, it shows the following error, please suggest

https://repo1.maven.org/maven2/com/liferay/com.liferay.sass.compiler.api/2.0.1/com.liferay.
sass.compiler.api-2.0.1.jar
Download https://repo1.maven.org/maven2/org/jruby/jruby-complete/9.2.7.0/jruby-complete-9.2.7.0.jar
Was passed main parameter 'sass.dir=/' but no main parameter was defined in your arg class
Usage: java -jar com.liferay.css.builder-3.0.0.jar [options]
  Options:
    --append-css-import-timestamps
      Whether to append the current timestamp to the URLs in the @import CSS
      at-rules.
      Default: true
    --base-dir
      The base directory that contains the SCSS files to compile.
      Default: src\META-INF\resources
    --compiler
      The type of Sass compiler to use. Supported values are "jni" and "ruby".
      The Ruby Sass compiler requires "com.liferay.sass.compiler.ruby.jar",
      "com.liferay.ruby.gems.jar", and "jruby-complete.jar" to be added to the
      classpath.
      Default: jni
    --dir-names
      The name of the directories, relative to base directory, which contain
      the SCSS files to compile. All sub-directories are searched for SCSS
      files as well.
      Default: [/]
    --excludes
      The SCSS file patterns to exclude from compiling.
      Default: [**/_diffs/**, **/.sass-cache*/**, **/.sass_cache_*/**, **/_sass_cache_*/**,**/_styled/**, **/_unstyled/**, **/css/aui/**, **/css/clay/**, **/tmp/**]
    --generate-source-map
      Whether to generate source maps for easier debugging.
      Default: false
    -h, --help
      Print this message.
    --import-paths
      The import directories of Sass libraries.
    --output-dir
      The name of the sub-directories where the SCSS files are compiled to.
      For each directory that contains SCSS files, a sub-directory with this
      name is created.
      Default: .sass-cache/
    --precision
      The numeric precision of numbers in Sass.
      Default: 9
    --rtl-excluded-path-regexps
      The SCSS file patterns to exclude when converting for right-to-left
      (RTL) support.
      Default: []:wars:cbdrm:buildCSS FAILEDFAILURE: Build failed with an exception.* What went wrong:
Execution failed for task ':wars:cbdrm:buildCSS'.
> Process 'command 'C:\Program Files\Java\jdk1.8\bin\java.exe'' finished with non-zero exit
value 1* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option toget more log output.BUILD FAILED

[Elvis Silva, geändert vor 4 Jahren.]

got the same error here when try to build the war since few days ago

[Elvis Silva, geändert vor 4 Jahren.]

fixed: https://superuser.com/questions/1441395/creating-themes-with-liferay-7-0/1441492#1441492

[parth kadia, geändert vor 4 Jahren.]

Thank you. It's very helpful.