Custom skin/style: portlet layout

Hi!
I am building a WebCenter app with portlets on it. The page on which they are displayed is rendered using skinning and a custom style sheet.
How can I style the outside of the portlet? Is there a way to change the rounded corner images?
Jeroen van Veldhuizen

Jeroen,
there is a WebCenter forum here on OTN that is more helpful for portlet specific questions.
WebCenter Portal
Frank
Ps.: Btw, if I remember well then you find teh WebCenter skin selectors explained in teh WebCenter developer guide

Similar Messages

Custom templates/styles/layouts

custom templates/styles/layouts that I save - no matter which folder I save them in (and change the path accordingly in DVDSP prefs)/delete prefs/repair permissions - do not appear in DVD SP 4.0.3's palettess viewer. Any suggestions? Want to drag a track inc chapter markers to menu, to create a menu, but SP then forces me to choose a template/layout, but of course the one I have made is unavailable...

Hi Chuck,
It seems you are hoping to have possible multiple layouts for specific products which unfortunately is not available at this stage. There's only 2 dedicated small product layouts and 1 large details layout.
If wanting to wrap the product item to a different template you could assign the product item to a specific catalog to have the unique template but the layout would remain consistent to what I've noted above.
Kind regards,
-Sidney

SPACES custom skin CSS Class reference ? which css styles do what?

I am creating a custom skin for spaces using the Extend Spaces custom project. I am not able to find which css class names are mapped to which elements of a page in spaces. Inspecting the code does not help since the css class names seem to be autogenerated names and don't really match any names in the example "myskin" or any others I have seen.
Does anyone know of a reference that shows which classes correspond to which elements in spaces?

http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/skin-selectors.html
This is an overview of the selectors used in ADF. I think webcenter spaces only uses these. You should be able to skin your webspace using these selectors.

Custom skin issue

Hello All,
i have created a custom skin library which works fine for ADF application but it's not working for Portlet producer Application .... does anyone know how to do it or is there any difference???
jdev 11.1.1.6.0
Thanks

Did you mention the portlet render kit in your custom skin library ?
in trinidad-skins.xml you need to define the portlet renderkit .
Say for example you need to define it like-
<?xml version="1.0" encoding="ISO-8859-1" ?>
- <skins xmlns="http://myfaces.apache.org/trinidad/skin">
- <skin-addition>
<skin-id>simple.desktop</skin-id>
<style-sheet-name>styles/custom-styles-desktop.css</style-sheet-name>
</skin-addition>
- <skin-addition>
<skin-id>default.desktop</skin-id>
<style-sheet-name>styles/custom-styles-desktop.css</style-sheet-name>
</skin-addition>
- <skin-addition>
*<skin-id>simple.portlet</skin-id>*
*<style-sheet-name>styles/custom-styles-desktop.css</style-sheet-name>* </skin-addition>
</skins>
Hope it works for you.
Apart from it,similar discussion has been going on -https://kr.forums.oracle.com/forums/thread.jspa?threadID=1554775
where it is mentioned -
Ín the portlet producer application remove the line:
<skin-family>fusion</skin-family>
from trinidad-config.xml in the web-inf folder, so it looks like this:
<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
</trinidad-config>
Specify an init-param in the portlet.xml:
<init-param>
<name>org.apache.myfaces.trinidad.skin.id</name>
<value>fusion.desktop</value>
</init-param>
Works for me, does however look like a workaround.
Regards,
Hoque

How to change the width of the whole portlet layout?

Dear all,
As we know, now the width of portlet layout has set to 100%. But there is a new requirment from my customer that the width of the whole portlet layout view must be set to 750px.
So I tried to edit the css file and I found a block:
#pt-portal-content-view
     margin-top: 0px;
     width: 100%;
I tried to change the width to 750px, but nothing happened.
I want to know the way to change the width, thank you all!
Regards,
finall
OK,I have found the place to do it:
.portalContent          {
     display: block;
     width: 750px;
I set to 750px,then it works.:-)
But another question, how to make the content align to the center? I tried a stupid method, add margin-left:
.portalContent          {
     display: block;
     width: 750px;
     margin-left: 120px;
In 1024 X 768, it's ok, but it don't work well in 800 X 600.
When I set the all content width to 750px, I tried the three columns view, the portlet still run over the border.If there is any way to control this? thank u in advance!
Regards,
finall
Edited by finall1980 at 02/01/2007 10:09 PM

Try this:
.portalContent {
display: block;
width: 750px;
margin: auto; /* for properly-implemented browsers */
text-align: center; /* for IE 6 */
As for running over the 750px, there's nothing you can do about that other than actually narrowing the columns AND making sure that your portlet authors don't produce content that's too wide.
Chris Bucchere | bdg | [email protected] | http://www.thebdgway.com

Can Custom skin download font if not installed?

Hi
I have an ADF BC application written in JDev 10.1.3. It uses a customer skin so our various customers can implement their own look and feel. One of our customers requested the Futura font which worked fine on my PC because I have the futura font installed but when I deployed it to the custoemr the skin reverted to a different font because Futura was not installed on their PC.
Is it possible to have an ADF page download a font if it cannot find it installed?
I found this html code which is supposed to achieve that
<STYLE TYPE="text-css">
@font-face (
font-family:familyName;
font-style:normal;
font-weight:normal;
src:url("someFont.eot") )
</STYLE>
Is it possible to integrate the above code into an ADF page?
thanks
paul

Hi
Thanks for the replies.
I read the link that Frank posted and read a little bit around the subject of web fonts. It seems that this feature is not widely supported by browsers and indeed I am using FF2 and could not get John's suggestion to work. Our customer uses primarily IE and FF and it seems that this feature is not currently supported by either of those browsers. IE only allows use of the EOT font format and FF3.5 supports web fonts but is still in beta.
It doesn't look like we are going to be able to implement this feature for our customer so I might have to ask them to select a [web safe font|http://en.wikipedia.org/wiki/Web_safe_fonts]
thanks
paul

Trying to re-create our 10g custom skin in 11g

Hi Everyone:
We had a detailed custom skin and also utilized customized velocity templates that created a specific look and feel to our application in 10g. We used a header.jspx & leftside.jspx that were in the region-metadata.xml file. The JHeadstart team assisted a previous employee with setting all of this up.
We are trying to convert our applications over from 10g to 11g and think that enhancements such as the "tree" layout will replace needing a leftside.jspx page that listed the menu links along the left side instead of folders across the top. We have gone through the 11g Tutorial and read chapter 19 "Applying Custom Skins to Applications" of the "Web User Interface Developer's Guide for Oracle Application Development Framework". While working on a simple webpage to start with in our application, we registered the custom skin as specified in "Applying Custom Skins to Applications", but things look very different, and I'm trying to get a handle on how to re-apply the look and feel now that this section of our application has been converted to 11g and properly utilize the new features of 11g that weren't available in 10g. To start with, we had a custom Logo on our Application that I would like to show up on the Header of the Application in the same spot where the "Oracle JHeadstart Demo" title is displayed. I am trying to study the custom_labels.vm velocity template, but am not sure where to apply this. The logo is in the form of a .gif file.
Can someone tell me how to put our custom logo .gif file in the Header where the Oracle JHeadstart Demo title is displayed and have it generated through JHeadstart?
Starting there can hopefully open up ideas on how to apply the rest of our look and feel utilizing all of the new features of 11g, not just replicating things as they were done in 10g.
Thanks very much in advance.
Mary
UofW

Hi Steven:
Great to hear from you, I was hoping you'd reply :)
I followed your instructions, and also changed the header and footer size attributes (headerGlobalSize & footerGlobalSize) to accommodate our larger .gif Logo. So far, so good. I made these changes in the default layout velocity template - jhsPageTemplate.vm which generates the JhsPageTemplate.jspx page. Starting to work toward the look and feel our users want. However, I was hoping to use the tree layout. I want to institute these changes in the JhsTreeMenuPageTemplate.jspx, but I am unable to find the velocity template that generates the JhsTreeMenuPageTemplate.jspx.
Could you please tell me where it is?
Thanks again, and Merry Christmas to you and yours.
Mary
UofW

ViewMenuItem do not appear when applying custom skin on ViewNavigatorApplication

ViewMenuItems works fine when I don't apply skinClass fo ViewNavigatorApplication, but when I apply custom skin to ViewNavigator, ViewMenuItems doesn't appear.
Here is my main file
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                            xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.DriveSafeHomeView" applicationDPI="160"
                             initialize="applyRuntimeStyleSheet()" skinClass="skins.CustomApplicationSkin" >
    <fx:Declarations>
        
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            public function applyRuntimeStyleSheet():void {
                styleManager.loadStyleDeclarations("css/Styles.swf")
                    // skinClass="skins.CustomApplicationSkin"
        ]]>
    </fx:Script>
</s:ViewNavigatorApplication>
Code for CustomApplicationSkin.mxml is
<?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomApplicationSkin"
                xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                                   >
        <fx:Metadata>
                    <![CDATA[
                    [HostComponent("DriveSafe")]
                    ]]>
                </fx:Metadata>
        <s:states>
                    <s:State name="normal" />
                     <s:State name="disabled" />
                 </s:states>
        <s:BitmapImage width="100%" height="100%" source="@Embed('/assets/background.jpg')"/>
        <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
        <s:ViewNavigator id="navigator" width="100%" height="100%" />
</s:Skin>

If you create a new custom field you have to wait for the analytics refresh before you can use it in reporting & analytics. The frequency of the refresh differs per environment. You can put VALUEOF(LAST_REFRESH_DT) in a column formula to see when the last refresh has been performed.
Regards, Tim

Problem in register a custom skin

Dear all
i am using jdeveloper 11.1.1.3
To register a custom skin there are several steps to do :
In the Application Navigator, right-click the project and select New.
In the New Gallery, expand General and select XML.
Select XML Document from XML Schema and click OK.
In the Create XML from XML Schema - Step 1 of 2 dialog:
XML File: Enter trinidad-skins.xml.
Directory: Append \src\META-INF to the end of the Directory entry.
Select Use Registered Schemas, and click Next.
In the Create XML Schema - Step 2 of 2 dialog:
Target Namespace: Select http://myfaces.apache.org/trinidad/skin.
Root Element: Select skins.
but my target name space is empty so i can not select "http://myfaces.apache.org/trinidad/skin"
what should id do ?
Best Regards,

Hi,
As I understand to register a custom skin, you just have to create an xml file named "trinidad-skins.xml" and put it inside WEB-INF directory. To create an xml file, you should have chosen in the New Gallery the "XML>XML Document" and not "XML>XML Document from XML Schema". An of course after you created the XML file, you could modify the source.
A sample trinidad-skins.xml would be as follows:
<?xml version="1.0" encoding="ISO-8859-1"?>
    <skin>
        <id>princess.desktop</id>
        <family>princess</family>
        <extends>simple.desktop</extends>
        <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
        <style-sheet-name>skins/princess/princess.css</style-sheet-name>
    </skin>
</skins> Regards,
pino

Panel contents overlap when using borderSkin style and layout=absolute

This problem has been reported on several occasions
(http://bugs.adobe.com/jira/browse/SDK-14806)
and there are several articles that talk about this:
http://dougmccune.com/blog/2008/01/17/followup-about-flex-panel-bug/
http://dougmccune.com/blog/2008/01/12/calling-********-on-a-resolved-flex-bug/
I´m not an expert but think I found a fix/workaround for this.
frameworks\projects\framework\src\mx\containers\Panel.as
Must to be changed in the viewMetrics() method.
Line:
973- if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_3_0) 974- {
Replace by:
if ((FlexVersion.compatibilityVersion < FlexVersion.VERSION_3_0) || (getQualifiedClassName(border) != "mx.skins.halo::PanelSkin") || (getStyle("borderStyle") != "default") ) {

Hi Andres,<br /><br />I haven't tried to verify your fix, but would you be willing to fill out a contributor agreement and submit an official patch?<br /><br />Matt<br /><br /><br />On 4/25/08 12:34 PM, "Andres Serral" <[email protected]> wrote:<br /><br />A new discussion was started by Andres Serral in<br /><br />Developers --<br /> Panel contents overlap when using borderSkin style and layout=absolute<br /><br />This problem has been reported on several occasions<br />(http://bugs.adobe.com/jira/browse/SDK-14806)<br />and there are several articles that talk about this:<br />http://dougmccune.com/blog/2008/01/17/followup-about-flex-panel-bug/<br />http://dougmccune.com/blog/2008/01/12/calling-********-on-a-resolved-flex-bug/<br /><br />I´m not an expert but think I found a fix/workaround for this.<br /><br />frameworks\projects\framework\src\mx\containers\Panel.as<br />Must to be changed in the viewMetrics() method.<br /><br />Line:<br />973- if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_3_0) 974- {<br /><br />Replace by:<br /> if ((FlexVersion.compatibilityVersion < FlexVersion.VERSION_3_0) || (getQualifiedClassName(border) != "mx.skins.halo::PanelSkin") || (getStyle("borderStyle") != "default") ) {<br /><br />________________________________<br />View/reply at Panel contents overlap when using borderSkin style and layout=absolute <a href=http://www.adobeforums.com/webx?13@@.59b51731><a href=http://www.adobeforums.com/webx?13@@.59b51731><br />Replies by email are OK.<br />Use the unsubscribe <a href=http://www.adobeforums.com/webx?280@@.59b51731!folder=.3c060fa3><a href=http://www.adobeforums.com/webx?280@@.59b51731!folder=.3c060fa3> form to cancel your email subscription.

Custom css style to region

what solution can i get to style a region with a custom CSS style?
can't I force the HTML region tag (is it a TD, isn't?) to have an ID or a STYLE I choose?
(then i can insert an HTML PORTLET to write the CSS style)

Mylenium wrote:
A caption is its own HTML tag, nothing exclusive to an image.
The HTML <caption> tag can be used only inside a table. It has nothing to do with images. http://www.w3.org/TR/html401/struct/tables.html#edef-CAPTION.
To answer the original question, the way to create a caption for an image is to wrap the image and caption text in a <span> and give the span a class called floatleft or floatright.
<span class="floatleft">
<img src="../images/cape_royal.jpg" alt="Cape Royal"
width="250" height="366" />Grand Canyon at Cape Royal</span>
Then create four style rules:
.floatleft {
float:left;
margin:3px 8px 3px 0;
.floatright {
float:right;
margin:3px 0 3px 8px;
.floatleft, .floatright {
font-weight:bold;
text-align:center;
.floatleft img, .floatright img {
display: block;

Need help on creating custom skins like chrome

Hi,
I want to create my custom skin like chrome with my own play, pause and seek buttons. Can anybody point me to any documents that can help me to achieve this? Thanks in advance.
Regards,
Amit

Thats a very open ended question. We have built a sample OSMF player and a skinning solution you can take a look at. http://code.google.com/p/reops/
There are templates and a PDF that describes the capabilities and process. Also walkthrough style samples.
Otherwise the generic answer is desgn as you see fit, and implement the controls as display objects or part of the MediaContainer which could be done as custom MediaElements, then link them to the MediaPlayer or MediaPlayerSprite and call the approp API methods (play/pause/stop/seek/etc.)

Mouse events ignored in custom skin

I created a custom skin for my spinner. While I managed to get the layout this time, it seems that all mouse click events are ignored.
package ch.sahits.game.javafx.control.skin;
import java.io.InputStream;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.geometry.Dimension2D;
import javafx.scene.Group;
import javafx.scene.control.TextField;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import ch.sahits.game.javafx.control.OpenPatricianSpinner;
import ch.sahits.game.javafx.control.TextSizingUtility;
import com.sun.javafx.scene.control.skin.SkinBase;
public class OpenPatricianSpinnerSkin extends
        SkinBase<OpenPatricianSpinner, OpenPatricianSpinnerBehavior> {
    private TextSizingUtility sizing = new TextSizingUtility();
    public OpenPatricianSpinnerSkin(final OpenPatricianSpinner spinner) {
        super(spinner, new OpenPatricianSpinnerBehavior(spinner));
        Dimension2D dim4heigth = sizing.calculate(1, spinner.getFont());
        double width = 0;
        for (String word : spinner.getOptions()) {
            Dimension2D dim4width = sizing.calculate(word, spinner.getFont());
            if (dim4width.getWidth() > width) {
                width = dim4width.getWidth();
        Dimension2D dim = new Dimension2D(width, dim4heigth.getHeight());
        String firstValue = "";
        if (!spinner.getOptions().isEmpty()) {
            firstValue = spinner.getOptions().get(0);
            spinner.selectedIndexProperty().set(0);
        HBox hbox = new HBox();
        final TextField textField = new TextField(firstValue);
        textField.getStyleClass().add("openPatricianSpinner");
        textField.setMaxSize(dim.getWidth(), dim.getHeight());
        textField.setEditable(false);
        InputStream is = getClass().getResourceAsStream("SlabUp.png");
        Image img = new Image(is);
        double imgWidth = img.getWidth();
        final ImageView imgViewUp = new ImageView(img);
        is = getClass().getResourceAsStream("SlabDown.png");
        img = new Image(is);
        final ImageView imgViewDown = new ImageView(img);
        double additionalWidth = Math.max(img.getWidth(), imgWidth);
        is = getClass().getResourceAsStream("InputPlank.jpg");
        img = new Image(is,dim.getWidth()+additionalWidth, dim.getHeight(), false, true);
        final ImageView imgViewPlank = new ImageView(img);
        imgViewPlank.onMouseReleasedProperty().addListener(new ChangeListener<EventHandler<? super MouseEvent>>(){
            @Override
            public void changed(ObservableValue<? extends EventHandler<? super MouseEvent>> ov,
                    EventHandler<? super MouseEvent> oldValue,
                    EventHandler<? super MouseEvent> newValue) {
                System.out.println("Clicked on plank");
        Group textGroup = new Group(textField);
        VBox vbox = new VBox();
        vbox.getChildren().addAll(imgViewUp, imgViewDown);
        hbox.getChildren().addAll(textGroup, vbox);
        Group background = new Group(imgViewPlank,hbox);
        imgViewUp.onMouseReleasedProperty().addListener(new ChangeListener<EventHandler<? super MouseEvent>>(){
            @Override
            public void changed(ObservableValue<? extends EventHandler<? super MouseEvent>> ov,
                    EventHandler<? super MouseEvent> oldValue,
                    EventHandler<? super MouseEvent> newValue) {
                ObservableList<String> options = spinner.getOptions();
System.out.println("Clicked on slabUp");
                if (!options.isEmpty()) {
                    if (spinner.getSelectedIndex() > 0) {
                        spinner.selectedIndexProperty().subtract(1);
                        String newDisplayValue = options.get(spinner.getSelectedIndex());
                        textField.setText(newDisplayValue);
                    } else {
                        System.out.println("Selected index <= 0");
                } else {
                    System.out.println("Empty options list");
        }); // end up change listener
        imgViewDown.onMouseReleasedProperty().addListener(new ChangeListener<EventHandler<? super MouseEvent>>(){
            @Override
            public void changed(ObservableValue<? extends EventHandler<? super MouseEvent>> ov,
                    EventHandler<? super MouseEvent> oldValue,
                    EventHandler<? super MouseEvent> newValue) {
                ObservableList<String> options = spinner.getOptions();
System.out.println("Clicked on slabDown");
                if (!options.isEmpty()) {
                    if (spinner.getSelectedIndex() < options.size()) {
                        spinner.selectedIndexProperty().add(1);
                        String newDisplayValue = options.get(spinner.getSelectedIndex());
                        textField.setText(newDisplayValue);
                    } else {
                        System.out.println("Selected index >= options.length");
                } else {
                    System.out.println("Empty options list");
        }); // end up change listener
        onMouseReleasedProperty().addListener(new ChangeListener<EventHandler<? super MouseEvent>>(){
            @Override
            public void changed(ObservableValue<? extends EventHandler<? super MouseEvent>> ov,
                    EventHandler<? super MouseEvent> oldValue,
                    EventHandler<? super MouseEvent> newValue) {
                System.out.println("Clicked on Skin");
        getChildren().add(background);
I would at least expect to see the line 134 printed out. I call this spinner from a simple test application, without any event listeners added there.
Has anyone an idea what might happen here?

Hello, you don't register an event handler, you register a listener on the event handler property. So you don't listen for clicks, you listen for changing the registered click handler. You need to register the handler like this:
imgViewDown.setOnMouseReleased(new EventHandler<MouseEvent>() {
     @Override public void handle(MouseEvent event) {
          // your handler
This way you set the mouse release event handler which will be called on click. This code, by the way, would fire your listeners (the onMouseReleased property has changed).

Customizing skin

The last two days I'm busy customizing a OBIEE 11g skin. All has gone pretty well so far but I can't seem the following:
There is a thin dark blue line on the left edge and bottom of a page. I managed to edit this one for the Home screen (by editing home.css) but I cannot find for the other pages (such as dashboards etc).
Is there somebody who can tell me in which CSS file I can find this?
Thanks in advance!
Regards,
Machiel
Edited by: Machiel Treffers on Feb 18, 2011 7:36 AM

I think you are talking about the dark blue line which is actually the background of the page. Try portalcontent.css, class .PortalBodyInteractive
A good tip for customizing skins is to download the Firebug extension for Firefox. With this you can easily click a page element and see from which element it inherits the style from.
Paul
http://total-bi.com
Edited by: Paul on Feb 18, 2011 5:26 PM

HTML Page skins and content layouts

We're running Portal 10.1.4 and trying to use page skins and content layouts to override the portal-generated html to comply with our accessibility standards.
Portal still inserts some of its html, even though I attach my own html templates to the region and page.
For example: it surrounds each item in my regions with another HTML table, and throws in an iframe tag with some custom JS.
Our templates do not use tables for layout, but the html code Portal inserts in between is breaking our pages.
Any thoughts?

That's what I was afraid of too. I just took some Oracle training on Portal, and when I asked our instructor about this particular issue, he kind of dodged the question.
I'll look into the docs some more for the custom renderers.... but won't it do what HTML content layouts already do for you?
I looked at the W3C WCAG, Oracle claims Portal is AA compliant (Priority Level 1 and 2)
Priority 1:
5.1 For data tables, identify row and column headers.
5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.
I don't think Portal includes the row and column identifiers.
Priority 2:
Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version).
5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting.
I don't think the tables, when linearized, will make sense to Screen Readers, especially if the page design contains many regions. (ie nested tables) We've tried the JAWS screen reader in the past, and it red across table columns, not down. (problem when you have a 3-column layout, the reader reads the first text item in the first column, then jumps over to the first line of text in the middle content column and so on...)

Custom skin/style: portlet layout

Similar Messages

Maybe you are looking for