Topic
  • 3 replies
  • Latest Post - ‏2013-09-19T14:00:32Z by mburati
RalexRdz
RalexRdz
7 Posts

Pinned topic How to add .css file?

‏2013-05-02T14:47:29Z |

How can I add a stylesheet, a .css file, to my portlets.

I read that you can add it to a Theme builder, but I can´t find the way. 

 

Any suggestions?

 

Thanks! ^^

Ralex

  • mburati
    mburati
    2576 Posts

    Re: How to add .css file?

    ‏2013-05-02T17:12:49Z  

    You may use a Theme builder to specify a custom UI theme where you replace base html page names and/or css file names (and related UI related settings) with those customized for your app/company branding.   The css replacement there is mainly intended for the styles that correspond to classes set by the page automation builders (eg, Data Page, V&F, DSUI etc).    You can see the Theme in use for a model by looking at the Web App Design view (eg, where you also see pages, methods, etc for the curently open model in the designer), and then open that Theme XML file to see what's in it.   A theme can also import/extend another theme so you can create your own theme file that extends one of the WEF ones, and then override one of the XML entries in your theme file, OR use the THeme builder with an explicit override set for an individual stylesheet entry for one or  more builders.

    If you're "adding" a css file for your own html class use rather than trying to override one used by page automation builders, then you may do so with the StyleSheet builder.

    I hope that info helps,
    ..Mike Burati 
    http://www-10.lotus.com/ldd/pfwiki.nsf/
    The postings on this site are my own and do not necessarily represent the positions, strategies, or opinions of IBM.

  • nchieffo
    nchieffo
    33 Posts

    Re: How to add .css file?

    ‏2013-09-19T13:31:04Z  
    • mburati
    • ‏2013-05-02T17:12:49Z

    You may use a Theme builder to specify a custom UI theme where you replace base html page names and/or css file names (and related UI related settings) with those customized for your app/company branding.   The css replacement there is mainly intended for the styles that correspond to classes set by the page automation builders (eg, Data Page, V&F, DSUI etc).    You can see the Theme in use for a model by looking at the Web App Design view (eg, where you also see pages, methods, etc for the curently open model in the designer), and then open that Theme XML file to see what's in it.   A theme can also import/extend another theme so you can create your own theme file that extends one of the WEF ones, and then override one of the XML entries in your theme file, OR use the THeme builder with an explicit override set for an individual stylesheet entry for one or  more builders.

    If you're "adding" a css file for your own html class use rather than trying to override one used by page automation builders, then you may do so with the StyleSheet builder.

    I hope that info helps,
    ..Mike Burati 
    http://www-10.lotus.com/ldd/pfwiki.nsf/
    The postings on this site are my own and do not necessarily represent the positions, strategies, or opinions of IBM.

    There are pages where the Theme builder is not applied.

    For example when you use the builder Page, and you have only simple text on it, the CSS is not loaded.

    Instead the CSS is loaded when you add a button to the page, because the theme loads CSS for buttons. is there a way to include a global css, even for simple text pages?

  • mburati
    mburati
    2576 Posts

    Re: How to add .css file?

    ‏2013-09-19T14:00:32Z  
    • nchieffo
    • ‏2013-09-19T13:31:04Z

    There are pages where the Theme builder is not applied.

    For example when you use the builder Page, and you have only simple text on it, the CSS is not loaded.

    Instead the CSS is loaded when you add a button to the page, because the theme loads CSS for buttons. is there a way to include a global css, even for simple text pages?

    As mentioned above, if you're adding css for your own html rather than trying to override one used by page automation buidlers then you may do so with the "Style Sheet builder".

    Note, the "Page" builder is mainly for rapid prototyping.   Once you're building the app and at the point you need to make it maintainable or let UX experts contribute to that HTML you should save it in an HTML file that can be versioned separately in source control, edited separately by UI developers, and imported into the model via "Imported Page".     Another option is to have your HTML that is a customized copy of a high level builder base page and use the Theme to tell the high level page automation builder to use your custom HTML page as a base page (eg, for V&F view/list or update page etc).

    I hope that info helps,
    ..Mike Burati 
    http://www-10.lotus.com/ldd/pfwiki.nsf/
    The postings on this site are my own and do not necessarily represent the positions, strategies, or opinions of IBM.