Jump to content

WPI v8.0.0 Themes


Recommended Posts

There is a new theme engine for v8 that is quite powerful. There are 4 types of themes: Accordion, CorporateIT, euDock, and Windows. These each have their own "core" layout code so all themes of the same type keep a consistant look and feel.

In each theme folder is a new file, wpi_theme.js. This is where you will do your customization. Not all themes have every item. If it's not in the file, it's not supported. euDock has a limited list of items, for example.

For lack of a better name for now, David theme is based on Windows' engine and utilizes almost all the options. Compare with other similar themes to see how they work. Woody theme is one of the few that uses the Logo option. David uses a background color (no image) and uses the new SidePanel.png image.

Read the ChangeLog.txt for more specific details.

If you have any new custom theme layouts, send them my way. I am always looking for new designs, especially for "corporate" network share use.

If you have any new ideas, post them here or send me your theme via email with the details.

Updated all of the themes to a new rendering engine. The html code is

no longer in the theme folder. This way all the themes will match and

function properly. All images may be replaced or removed. Many items

in the theme are still customizable. This is done via the new

wpi_theme.js in each theme folder. The type of theme is defined in the

wpi.inf file: Windows, euDock, CorporateIT, or Accordion.

The names of the images are hard coded in and can not be changed and

they must be PNG images.

The background image can either be called Wallpaper.jpg or

Wallpaper.png. Or no image and set a background color.

If Title.png exists it will be used. If does not exist, text will be

used. To have no image and no text, copy in Title.png from

/Commom/imgs/.

If TitleBG.png exists, it will be used as the background pattern. Or

set a color in wpi_theme.js.

SmallBarT.png a SmallBarB.png, if exist will be used. Erase them to not

use them. The heights can be specified in some themes.

If SidePanel.png exists, it will be used as the background for the side

panel (Begin Install, Select All, Select None, etc.). And/or a color

can be specified. The width of the side panel is also customizable.

If Logo.png exists, it will be used as a second image. It is mainly

meant for a company logo/watermark when don't want a big background.

Usually would be light colored, almost transparent. Set it's right

edge and bottom edge location.

PinkRibbon and Woody themes are examples.

If Bottom.png exists, it will be placed in the bottom bar at center.

If BottomBG.png exists, it will be used as the background pattern. Or

set a color in wpi_theme.js.

You can specify and customize text to be placed in the bottom bar in

wpi_theme.js. Can not have both image and text.

The exit button can be on left or right side, and show or not show the

text.

Not all theme types have all the customizable features. If it's not in

wpi_theme.js then it can't be modified so don't try to add anything from

other types.

Went through every css file and removed several old items that are no

longer used, and changed the names of several items.

Edited by mritter
Link to comment
Share on other sites


Hi @mritter,

I try some design for my WPI and here's screenshots that I don't want to the installer screen is resizable.. how can I do that?

1605.png

here's I don't want it to resizable; installer should always be fixed size.. is there a way?

16052.png

I looked in installer.hta and I couldn't reliaze an option like resizable.

I looked here;

<script type="text/javascript">
document.write('<HTA:APPLICATION ID="oWPI_Installer"' +
' application="yes"' +
' singleInstance="yes"' +
' applicationName="Windows Post-Install Wizard Installer"' +
' version="'+ShortVersion+'"' +
' icon="../Graphics/wpi.ico"' +
' border="yes"' +
' borderStyle="normal"' +
....
....
.....

Link to comment
Share on other sites

Zeus: I am glad you asked about the window resizing. I looked for it a while back, couldn't find anything. I just looked again and found it right away. The Installer window size is now locked.

All theme customizations are welcome. Just don't modify the Installer.hta file, do it all through your theme's wpi.css and installer.css.

Link to comment
Share on other sites

Hi again,

I made my theme.. I think it's good. But there are somethings about to say.

1- I used your old one logo. it seemed much more good with this theme that on right side..

2- I had to use an extra install background image for fully background appearance..

3- and I used an extra progress bar image.

So I don't know if you want to embed it to WPI or not because of its.. but I want to share..

I gave its name "7fresh"

Anyway, here's link to download;

http://rapidshare.com/files/388799398/7Fresh.7z

here's files;

here's extra install bg that have to put it on "WPI\Common\imgs\InstallBgs" folder and of course you should select it from options.

7freshfullbg.png

and your old one logo that should put it on "WPI\Common\imgs\InstallLogo" folder

installlogo.png

here's image for progress bar, you should put it on "WPI\Common\imgs\ProgressBars" folder, and select it.

7fresh.png

here's screenshots;

1805.png

18052.png

edit: sorry. download link is now correct for theme. I made a mistake when make .7z theme folder.

Edited by ZEUS__
Link to comment
Share on other sites

Zeus: First off, test install 20+ items so you see an issue with the image in the install_text box. It scrolls. I will have to add an extra <div>.

Second, let me do some more updating to the themes. Some things need more "automation". As in, if you have your own progress bar in the theme folder, then that one will override the one chosen in Options->Style tab.

I don't want people to have to add several files manually to the Common folder. That folder is "do not touch".

Link to comment
Share on other sites

@mritter, sorry I hadn't tested it with 20+ items, you right. it scrolled. I gave a try and now it seemed good for me. can you also try this?

on installer.css if you changed css line 81

from this:

#Install_prog{background:url('./fully_bg_trans.png') no-repeat -14px -68px;}

to this;

#Install_prog{background:url('./fully_bg_trans.png') no-repeat fixed 0px 60px;}

it worked good.

ss:

windowsxpprofessional20w.jpg

and you're totally right about automation and about "do not touch common folder".. as you said if you make some changes for theme folder to override, it will be very good.

one is progressbar,

one is install logo and

one is install bg, it will be perfect. :thumbup

I'm waiting... full background picture gives WPI a new view :)

added: screenshot

Edited by ZEUS__
Link to comment
Share on other sites

  • 3 weeks later...
  • 1 month later...

Hello everyone, I have a question ... I used the search but have not found anything useful.

I'm using version 8.0.3 of WPI, before I used the 7.7.0 installation that eventually showed the image Install_Sucess.png this in the theme folder, now with this version does not and shows a simple message "success" how can I do to use the image? Thank you.

Link to comment
Share on other sites

hu was so simple .. fool that I had slingshots directly between configuration files. ok thanks.

now another question, if I try to change the name of the folder style "skyblue" buttons disappear and appear only in writing. Why?

wpi.jpg

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...