Dear all,

With the current theme editor you can change a lot of features in the portal. But you cannot change everything.

If you would like to change the look and feel of non-theme editor classes, you will need to edit property files. Please note: this is an ‘expert’ mode.

You can to this by zipping and unzipping the portal theme. It takes some time to unzip and zip the files, so I made a batch file for your convenience  (and mine ofcourse 🙂 )

Downloading theme

You can download your portal theme via System Administration > Transport > Transport Themes > Export Themes > yourtheme.

Screenshot - 6-8-2013 , 14_19_38.png

My theme is called dialogtest. I store the theme in a new folder, d:\Noel\theme\dialogtest.zip.

Screenshot - 6-8-2013 , 14_24_31.png

Normally you can unzip the theme, unzip the portal and ur zipfiles and start editing. After editing you will need to watch out if you are packing the right folders. This takes some time to clean up the zip file. I have made a batch file to unzip the portal theme. After this you can edit the properties files and pack it again to upload it in the portal finally.

Changes you will need for the batch files

     1) Change the winzip location to your location

     2) Change dialogtest into your portal theme zip name.

Batch file: unpack.bat – use it to unpack all files before editing

@echo off

SET wzip=”C:\Program Files\WinZip\WINZIP32.EXE”

IF “%1″==”” GOTO Usage

echo Unpacking portal theme %1.

echo.

echo Extract Winzip %1.zip to folder %1

%wzip% -e %1.zip %1

echo Changing directory to %1

cd %1

echo Extracting ur.zip to ur folder

%wzip% -e ur.zip ur

echo Extracting portal.zip to portal folder

%wzip% -e portal.zip portal

echo Deleting ur.zip

del ur.zip

echo Deleting portal.zip

del portal.zip

Goto finished

:Usage

echo Usage: unpack.bat filename

echo Where filename is portal theme filename without extension.

echo.

echo Example: unpack.bat dialogtest

echo.

echo Winzip is set to %wzip%

echo You can change the location of winzip in this batch file.

echo.

:finished

Please note: only ur.zip and portal.zip are extracted too!

After unpacking, your folder structure should look like:

Screenshot - 6-8-2013 , 14_35_37.png

Make changes to the property files, images or whatever. Now you can zip the folders via the second batch file:

Batch file: pack.bat – use it AFTER you changed property files. Usage: pack.bat filename

NB. It renames your old theme into dialogtest_old.zip, just in case 🙂

@echo off

SET wzip=”C:\Program Files\WinZip\WINZIP32.EXE”

IF “%1″==”” GOTO Usage

echo Packing portal theme into ZIP file %1.

echo.

echo Renaming %1 to %1_old.zip

ren %1.zip %1_old.zip

echo Switching to %1

cd %1

%wzip% -m -r ur.zip ur\*.*

%wzip% -m -r portal.zip portal\*.*

%wzip% -m -r %1.zip *.*

echo moving %1.zip to ..

move %1.zip ..

cd ..

rd %1

echo Done packing, you can upload %1.zip to the portal.

Goto finished

:Usage

echo Usage: unpack.bat filename

echo Where filename is portal theme filename without extension.

echo.

echo Example: unpack.bat dialogtest

echo.

echo Winzip is set to %wzip%

echo You can change the location of winzip in this batch file.

echo.

:finished

Now your folder will look like:

Screenshot - 6-8-2013 , 14_49_21.png

Upload the dialogtest.zip into the portal:

Screenshot - 6-8-2013 , 14_48_35.png

That’s all 🙂

/*

Noël Hendrikx – SAP Portal consultant @ Peppie Portals.

Specialized in Corporate branding SAP Portal / Adobe Interactive Forms.

UI Theming blog series

Portal theming – also waited a couple of years?

How to… UI Theme Designer – Installation

How to… UI Theme Designer – Migration

How to… UI Theme Designer – Locating elements

How to… UI Theme Designer – Transportation

How to… UI Theme Designer – Make use of the Custom CSS tab in the Portal!

Other blogs:

Tired of zipping / unzipping portal theme?

Tips for the Portal Content Studio

DSM Terminator and popup blockers (or not)

My best development friend – Autoresponder FTW

/*

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Marcelo Durante

    Hi Noel,

    it’s very interesting information indeed!

    I’ve downloaded my own theme with no trouble, however after extracted all these files, I’ve found a lot of PNG, GIF, some .properties and some XML, but…I’m not able to find any CSS file… so.. BUM!, I’ve hit the wall (of course it’s not the first wall, and have for sure it won’t be the last ).

    I thought that you were talking about CSS edition… Am I wrong?

    Thanks in advance!

    Best regards,

    Marcelo

    PS1: I’m on 7.4 SP 06 using the “old” theme editor

    PS2: whithin .PROPERTIES files, I think there are some “coded” CSS, but with none idea about how to edit them… for instance, adding new rule:

    parFontColorStandard=\#58585a

    parFontFamAsterix=Verdana,Arial,Helvetica,sans-serif

    parFontFamBrcDiv=Verdana,sans-serif

    parFontFamily=Trebuchet MS

    parFontSizeCellMono=0.7em

    parFontStyleH1=normal

    parFontStyleReference=italic

    parFontStyleStandard=normal

    parFontWeightEmphasized=bold

    parFontWeightStandard=bold

    parFormLayoutRowHeight=1.55em

    (0) 
    1. Noël Hendrikx Post author

      Hi Marcelo,

      You are right, you can’t change the css files directly since they are generated when uploading to the portal. But if you change the properties files, the portal will compile them to css files.

      Bear in mind that the properties definition are not the css classes in your application. You will need to search for the definition as described in Portal theming – also waited a couple of years?

      Check out this post also:

      Unable to download CSS file to portal

      Nevertheless, why don’t you use the new UI Theme designer? Migration is not that hard, it took me one day for a customized theme with css hacks 🙂

      Cheers,

      Noel

      (0) 
      1. Marcelo Durante

        Hi Noel, you’re right.

        I did some tryouts with new UI Theme Designer, but sadly I found a lot of issues. Nevertheless, our DEV was upgraded with SP6, so.. I’ll give UI Theme a new chance 🙂

        Thanks for sharing!

        Best regards,

        Marcelo

        (0) 
  2. Donny Xu

    Hi Noel,


    Nice tools. Really save a lot of time. Thank you.


    By the way, I’m not sure if you experienced this. Maybe just an issue in my system.

    When I use theme editor to save a change, the version number (I mean the fifth number of ur theme version) is increasing. (1, 2, 3… ). It’s good. But once I use the theme transport to upload a theme zip file, no matter what value I put int metaData.properties, the version number is always been reset to 1.


    Cheers,

    Donny

    (0) 
    1. Noël Hendrikx Post author

      Hi Donny,

      I did experience this as well. The portal resets the custom version number indeed. I don’t know why, but I think to make sure version numbers are in the same line of the ur version numbers for webdynpro java and backend (abap).

      Cheers,

      Noël

      (0) 
  3. Saar Dagan

    Hi Noel,

    Very nice, the only thing is if you could set the file name in a variable and not hard coded.

    Still, very good job.

    BR,

    Saar

    (0) 
    1. Noël Hendrikx Post author

      Hi Saar,

      This is untested, but I changed the batch file commands as well to make extraction / zipping easier.

      Good old dos commands 🙂

      Noël

      (0) 

Leave a Reply