Xpage tabbed panel structure for CSS

HCL Domino Domino Forum
1

Is there somewhere I can get the breakdown of a tabbed panels structure so I know where to apply CSS to certain areas? Like for example, the tabs you click on to navigate the panel. I want that little tab area to have a different background than the standard white. Also another example is the row the pager is in. I can set the background color for the pager but the row it is in is still white.

Thank you,

Robert

2

Subject: Xpage tabbed panel structure for CSS

Under your Notes folder (typical install C:\Program Files\Lotus\Notes) navigate to xsp\nsf\themes subfolder. If you open one of the themes in e.g. Notepad you’ll be able to see the structure for tabbed panels and the styleClass applied to each. You can extend or override these by creating a theme - if you create a new theme it gives the syntax for controls, but it’s effectively the same as i this theme document. If you use the style property (instead of styleClass) you’ll be able to set specific styling properties using css.

3

Subject: explain further please

Thanks for the info Paul. I looked at the webstandard theme and see this section for the tabbed panel.

<control>

	<name>TabbedPanel</name>

	<property>

		<name>styleClass</name>

		<value>xspTabbedPanelTabs</value> 

	</property>

	<property>

		<name>separatorStyleClass</name>

		<value>xspTabbedPanelContentSeparator</value> 

	</property>

	<property>

		<name>containerStyleClass</name>

		<value>xspTabbedPanelContainer</value> 

	</property>

	<property>

		<name>outerStyleClass</name>

		<value>xspTabbedPanelOuter</value> 

	</property>

</control>



<!-- Tab -->

<control>

	<name>Tab.TabbedPanel</name>

	<property>

		<name>styleClass</name>

		<value>xspTabTabbedPanel</value>

	</property>

	<property>

		<name>selectedTabStyleClass</name>

		<value>xspSelectedTab</value> 

	</property>

	<property>

		<name>unselectedTabStyleClass</name>

		<value>xspUnselectedTab</value> 

	</property>

	<property>

		<name>startTabStyleClass</name>

		<value>xspStartTab</value> 

	</property>

	<property>

		<name>middleTabStyleClass</name>

		<value>xspMiddleTab</value> 

	</property>

	<property>

		<name>endTabStyleClass</name>

		<value>xspEndTab</value> 

	</property>

</control>

Is it a requirement to extend a theme in order to do what I am trying to do rather than just add some inline style or use my own CSS file? I don’t quite get where I need to go from here in order to modify the look of the tabs.

Here is what the source looks like now after I removed all of the code I was trying to use to syle the tabs:

<xp:tabbedPanel id=“tabbedPanel1” selectedTab=“tabPanel1”

	style="font-family:Verdana,sans-serif;width:530px;">

	<xp:tabPanel label="All" id="tabPanel1">

		<xp:viewPanel rows="15" id="viewPanel2"

			viewStyle="width:500px">

			<xp:this.facets>

				<xp:pager partialRefresh="true"

					layout="Previous Group Next" xp:key="headerPager" id="pager2">

				</xp:pager>

			</xp:this.facets>

			<xp:this.data>

				<xp:dominoView var="AllNews"

					databaseName="Server/ABC!!Online\News.nsf"

					viewName="AllNews">

				</xp:dominoView>

			</xp:this.data>

			<xp:viewColumn columnName="Summary" id="viewColumn2"

				displayAs="link" openDocAsReadonly="true"

				style="color:rgb(255,204,0)">

				<xp:viewColumnHeader value="Summary"

					id="viewColumnHeader2" rendered="false">

				</xp:viewColumnHeader>

			</xp:viewColumn>

		</xp:viewPanel>

	</xp:tabPanel>

Do i need to set the style on the Tab.TabbedPanel ?

Thanks again