Worksite Web 8.1 css

Hi,
Themes are great to change styles and assign them to roles. However some workspaces might need to have their own style that does not depend on who is logged on. I have noticed that you can define a "style" in the Workspace view properties. I guess that this refers to the following lines in the options.xml:

<options debug="0" page-notification="0" auto-wildcard-search="1" checkin-mode="replace-original" quick-search-database="preffered" server-type="0" suite="7" autonomy-server="" autonomy-port="2000" language-supported="en-us" charset-supported="en-us" fileName="description" activeX="1" enable-AltRowBgColor="1" action-menu-config="0" advanced-workspace-edit="1" role-start-workspace="1" sendLinkClient="1" recent-pages-filter="0" subscription-folder-shortcut-title="{1} ({0})" current-theme="sky" version-control="0" max-rows="250" product-name="WorkSite Web" add-note-item="2" use-multibyte-encoding="0">
<portal use-iframe="1" show-current-workspace="1" disable-sidebar="0" user-controlled-sidebar="1" popup-dialog="1">
<css-classes enabled="1">
<css-class name="style1" title="Custom Style 1" targets="255" />
<css-class name="style2" title="Custom Style 2" targets="255" />
</css-classes>
</portal>

But I have no idea of how this must be used.
Would someone have an example of how tabs colour can be changed according to the style selected for the workspace?

Thanks a lot,
Olivier

Find more posts tagged with

Comments

dabird

We have a CSS guide that ships on the installation CD for WSW 8.1. The guide is a PDF file named "WorkSite CSS Customization Guide". It details exactly how to set up the <css-class> element in the options file and how to change colors, images, etc. In a nutshell, here's what you need to do:

(1) Enable css in the options file (as you have shown).
(2) Add a <css-class> element describing your custom CSS class (as you have shown).
(3) Set the "style" property in the workspace for which you want to apply your custom tab colors (as you have shown).
(4) Create your styles in the main style sheet, which is located in <WSW install>/includes/iwpl.css. By adding your custom styles to this sheet and not a theme-specific css file, your styles will be applied across the board, irrespective of a user's theme setting. NOTE: Here's where the aforementioned guide will come in handy; it has detailed pictures mapping class selectors in the CSS to the UI.

OlivierTikit

Great thanks!

OlivierTikit

I will update this post with another problem we are currently experiencing with custom styles applied to specific workspaces.
As per documentation the tag in options.xml has got a "targets" property that could be:

0-None
1-Workspace
2-Tab
4-Item
255-All

targets=255 is supposed to get the style applied to all portal content including header. Unfortunately if you use iframes (use-iframe="1" in options.xml) the style will only be applied to the content part below the header.
If iframes are not used (use-iframe="0" in options.xml) the style is correctly applied to content and header but the component layout does not seem to work correctly (column1=50% column2=50% but column1 takes almost all page width!!!).

Any other workaround to get style applied to all portal page for a couple of specific workspaces?

Thanks
Olivier

dabird

I will look into this for you. Send me a message through DevNet with screen shots of the problems. Also send me your CSS that relates to the problem areas.