Topic
  • 13 replies
  • Latest Post - ‏2013-04-04T18:06:25Z by scottsd
VeljkoC
VeljkoC
82 Posts

Pinned topic Change the CSS layout of some application (change the colors in app)

‏2013-04-01T11:04:20Z |
Hello,

I created my new application for Incident.
My customer does not want tivoli09 template but they want different colors (on example for Section header etc.)

Is this possible - what css or jsp files needs to be change?

Thank you

Best regards
Updated on 2013-04-04T18:06:25Z at 2013-04-04T18:06:25Z by scottsd
  • VeljkoC
    VeljkoC
    82 Posts

    Re: Change the CSS layout of some application (change the colors in app)

    ‏2013-04-01T13:08:11Z  
    I succeed to change colors of fields labels and backgrouds. You can see it in attachment. It can be done over the presentation xml.
    But I can not change the color of section header(it is always grey). Also can not change he color of button (label and background),although I tried with similar labelcss and cssclass.

    You can see it in attachment.

    I will appreciate help for coloring section and button.

    Thank you
  • scottsd
    scottsd
    121 Posts

    Re: Change the CSS layout of some application (change the colors in app)

    ‏2013-04-01T13:52:39Z  
    • VeljkoC
    • ‏2013-04-01T13:08:11Z
    I succeed to change colors of fields labels and backgrouds. You can see it in attachment. It can be done over the presentation xml.
    But I can not change the color of section header(it is always grey). Also can not change he color of button (label and background),although I tried with similar labelcss and cssclass.

    You can see it in attachment.

    I will appreciate help for coloring section and button.

    Thank you
    Hi VeljkoC,

    The secret here is that some of those widgets have background images in their CSS in this earlier skin (usually to indicate different states, etc). You'll need to blank out the background image css attribute to get your background color to show.

    In future skins we don't rely on these background images as much, so you shouldn't have this issue.

    Here's a related forum post where we give more explicit help:
    http://www.ibm.com/developerworks/forums/thread.jspa?messageID=14927893

    Thanks,
    Scott
  • VeljkoC
    VeljkoC
    82 Posts

    Re: Change the CSS layout of some application (change the colors in app)

    ‏2013-04-03T08:32:02Z  
    • scottsd
    • ‏2013-04-01T13:52:39Z
    Hi VeljkoC,

    The secret here is that some of those widgets have background images in their CSS in this earlier skin (usually to indicate different states, etc). You'll need to blank out the background image css attribute to get your background color to show.

    In future skins we don't rely on these background images as much, so you shouldn't have this issue.

    Here's a related forum post where we give more explicit help:
    http://www.ibm.com/developerworks/forums/thread.jspa?messageID=14927893

    Thanks,
    Scott
    Hello,

    thank you once again for your time and help.

    I tried your solution but it won't work for me. I am using SmartCloud 7.5.

    I added in extended.css file:

    .telenor_bgorange
    {
    background-image:none !important;
    background-color:#FFA500 !important;
    }

    I copied that file to webclient/css and to webclient/skins/tivoli09/css.

    XML definition:

    <textbox dataattribute="reportedphone" id="3_1" lookup="personphone" labelcss="txtdarkgreen" *cssclass="telenor_bgorange"*/>

    Bit with this it displays me blank background. You can see it in new attachment for the field Phone.
    If I put some default value:
    <textbox dataattribute="reportedphone" id="3_1" lookup="personphone" labelcss="txtdarkgreen" *cssclass="bgblue"*/> than color of background for that field is changed.

    How to determine where is the problem? (I am asking this because I want to change color of User Information background but it also does not work).

    Thank you for help
  • VeljkoC
    VeljkoC
    82 Posts

    Re: Change the CSS layout of some application (change the colors in app)

    ‏2013-04-03T08:42:34Z  
    • VeljkoC
    • ‏2013-04-03T08:32:02Z
    Hello,

    thank you once again for your time and help.

    I tried your solution but it won't work for me. I am using SmartCloud 7.5.

    I added in extended.css file:

    .telenor_bgorange
    {
    background-image:none !important;
    background-color:#FFA500 !important;
    }

    I copied that file to webclient/css and to webclient/skins/tivoli09/css.

    XML definition:

    <textbox dataattribute="reportedphone" id="3_1" lookup="personphone" labelcss="txtdarkgreen" *cssclass="telenor_bgorange"*/>

    Bit with this it displays me blank background. You can see it in new attachment for the field Phone.
    If I put some default value:
    <textbox dataattribute="reportedphone" id="3_1" lookup="personphone" labelcss="txtdarkgreen" *cssclass="bgblue"*/> than color of background for that field is changed.

    How to determine where is the problem? (I am asking this because I want to change color of User Information background but it also does not work).

    Thank you for help
    please ignore * in cssclass="telenor_bgorange". I tried to bold it.
    In xml it is in right format: cssclass="telenor_bgorange"
  • VeljkoC
    VeljkoC
    82 Posts

    Re: Change the CSS layout of some application (change the colors in app)

    ‏2013-04-03T09:01:39Z  
    • VeljkoC
    • ‏2013-04-03T08:42:34Z
    please ignore * in cssclass="telenor_bgorange". I tried to bold it.
    In xml it is in right format: cssclass="telenor_bgorange"
    Also Scott I am using Tivoli's process automation engine 7.5.0.2 Build 20120219-2030 DB Build V7502-25.

    I saw that you mention that in Tpae 7.5 the approach should be quite easier?

    But it won't work for me.

    Thank you
  • scottsd
    scottsd
    121 Posts

    Re: Change the CSS layout of some application (change the colors in app)

    ‏2013-04-03T13:53:08Z  
    • VeljkoC
    • ‏2013-04-03T09:01:39Z
    Also Scott I am using Tivoli's process automation engine 7.5.0.2 Build 20120219-2030 DB Build V7502-25.

    I saw that you mention that in Tpae 7.5 the approach should be quite easier?

    But it won't work for me.

    Thank you
    If you want to globally reskin all sections you shouldn't do the override of the individual fields, instead you should override the parent css itself.

    You can tell which css is in play using the firebug addon for Firefox, and highlighting the element you're trying to override. I have attached a screenshot of the Firebug panel from the highlighted User Information Section, you can see on the right it identifies the class (.hb) which has the background-image setting and the css file (maximo.css) that is being used.

    So basically you can change the maximo.css to reskin. However your changes will not be preserved on upgrade, you should backup your modified maximo.css and remerge it after upgrades.

    Take a look at this post:
    https://www.ibm.com/developerworks/mydeveloperworks/wikis/home?lang=en#/wiki/IBM%20Maximo%20Asset%20Management/page/Customizing%20Headers%20with%20corporate%20colors%20and%20logo
  • VeljkoC
    VeljkoC
    82 Posts

    Re: Change the CSS layout of some application (change the colors in app)

    ‏2013-04-03T14:41:22Z  
    • scottsd
    • ‏2013-04-03T13:53:08Z
    If you want to globally reskin all sections you shouldn't do the override of the individual fields, instead you should override the parent css itself.

    You can tell which css is in play using the firebug addon for Firefox, and highlighting the element you're trying to override. I have attached a screenshot of the Firebug panel from the highlighted User Information Section, you can see on the right it identifies the class (.hb) which has the background-image setting and the css file (maximo.css) that is being used.

    So basically you can change the maximo.css to reskin. However your changes will not be preserved on upgrade, you should backup your modified maximo.css and remerge it after upgrades.

    Take a look at this post:
    https://www.ibm.com/developerworks/mydeveloperworks/wikis/home?lang=en#/wiki/IBM%20Maximo%20Asset%20Management/page/Customizing%20Headers%20with%20corporate%20colors%20and%20logo
    Thank you for link.
    But for now my customer does not want global skin they just want in ONE app to have "look and feel"
    of some previous app so I am trying to set colors like in that app.
    I am only not succeeding to set colors on section definitions,tabs and buttons.
    Everything else is OK.

    Good news-now works custom extended.css! It looks like app server needs to be restarted after redeployment.
    You can see my new attachment equivalent with your scott_bgorange definition.

    But still Section is not colored.

    Here is the definition:
    <section id="main_grid2" label="User Information" labelcss="bgyellow" *cssclass*="telenor_bgorange">
    <sectionrow id="main_grid2_row1">
    <sectioncol id="main_grid2_row1_col1">
    <section id="main_grid2_row1_col1_1">
    <textbox applink="person" dataattribute="reportedbyid" id="_1" lookup="person" >
    <textbox dataattribute="reportedphone" id="main_grid2a_col3_1" lookup="personphone" labelcss="txtdarkgreen" *cssclass*="telenor_bgorange"/>

    </section>
    ..........

    Can you tell me how just and this section to override from grey to your custom orange color??

    Thank you
  • scottsd
    scottsd
    121 Posts

    Re: Change the CSS layout of some application (change the colors in app)

    ‏2013-04-03T15:01:09Z  
    • scottsd
    • ‏2013-04-03T13:53:08Z
    If you want to globally reskin all sections you shouldn't do the override of the individual fields, instead you should override the parent css itself.

    You can tell which css is in play using the firebug addon for Firefox, and highlighting the element you're trying to override. I have attached a screenshot of the Firebug panel from the highlighted User Information Section, you can see on the right it identifies the class (.hb) which has the background-image setting and the css file (maximo.css) that is being used.

    So basically you can change the maximo.css to reskin. However your changes will not be preserved on upgrade, you should backup your modified maximo.css and remerge it after upgrades.

    Take a look at this post:
    https://www.ibm.com/developerworks/mydeveloperworks/wikis/home?lang=en#/wiki/IBM%20Maximo%20Asset%20Management/page/Customizing%20Headers%20with%20corporate%20colors%20and%20logo
    If you look at the control-registry.xml you can see some of the other properties for the section control that you can override.

    I believe the correct property for the section is the headercss property. However, this doesn't look ideal as there's still a part of the section that doesn't look to be overridable (see my screenshot). That part of the section looks like it inherits these classes from maximo.css:

    .h_l {
    background-image: url("../images/table_toolbar_lcap.gif");
    background-position: left top;
    background-repeat: no-repeat;
    border-bottom: 1px solid #AAAAAA;
    height: 30px;
    padding-left: 5px;
    }

    and

    .h_r {
    background-image: url("../images/table_toolbar_rcap.gif");
    background-position: right top;
    background-repeat: no-repeat;
    border-bottom: 1px solid #AAAAAA;
    height: 30px;
    padding-right: 5px;
    }

    (Hopefully you've figured out how to use Firebug by now to figure that out by highlighting and selecting the information and looking at the Style tab). For those two classes I guess you'll need to override in the main maximo.css (I can't find a property on the section object that overrides those)

    The pushbutton is not overridable as it is the "browser" rendered pushbutton.

    I would be remiss if I didn't point out that major style changes are available now in SCCD 7.5.1 with the Tivoli13 skin. Is it possible to convince your customer simply to upgrade?

    Scott
  • VeljkoC
    VeljkoC
    82 Posts

    Re: Change the CSS layout of some application (change the colors in app)

    ‏2013-04-03T15:36:27Z  
    • scottsd
    • ‏2013-04-03T15:01:09Z
    If you look at the control-registry.xml you can see some of the other properties for the section control that you can override.

    I believe the correct property for the section is the headercss property. However, this doesn't look ideal as there's still a part of the section that doesn't look to be overridable (see my screenshot). That part of the section looks like it inherits these classes from maximo.css:

    .h_l {
    background-image: url("../images/table_toolbar_lcap.gif");
    background-position: left top;
    background-repeat: no-repeat;
    border-bottom: 1px solid #AAAAAA;
    height: 30px;
    padding-left: 5px;
    }

    and

    .h_r {
    background-image: url("../images/table_toolbar_rcap.gif");
    background-position: right top;
    background-repeat: no-repeat;
    border-bottom: 1px solid #AAAAAA;
    height: 30px;
    padding-right: 5px;
    }

    (Hopefully you've figured out how to use Firebug by now to figure that out by highlighting and selecting the information and looking at the Style tab). For those two classes I guess you'll need to override in the main maximo.css (I can't find a property on the section object that overrides those)

    The pushbutton is not overridable as it is the "browser" rendered pushbutton.

    I would be remiss if I didn't point out that major style changes are available now in SCCD 7.5.1 with the Tivoli13 skin. Is it possible to convince your customer simply to upgrade?

    Scott
    Maybe we can convince them for upgrade.

    In 7.5.1 Tivoli13 is by default set or Tivoli09?
    What are the advantages of using Tivoli13 - will it be easier to change color of Section and Tab?

    I saw in Firebug style for User Information Section is:

    .hb {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-image: url("../images/table_toolbar_bkg.gif");
    background-repeat: repeat-x;
    border-color: -moz-use-text-color -moz-use-text-color #AAAAAA;
    border-image: none;
    border-style: none none solid;
    border-width: 0 0 1px;
    cursor: default;
    padding: 0 2px 0 0;
    }

    I saw that you change color to white for Section background.

    Two questions:
    do I have to just remove background-image: url(../images/table_toolbar_bkg.gif); from hb definition in maximo.css file and background of my Section will be orange (I set it in xml) or I should set background color to orange in this maximo.css file? (in that case what is the correct definition).
    Also will this change in maximo.css file reflect on all Sections in all applications(because I want only in this application to have different color for Sections)

    Thank you an really sorry for your time
  • VeljkoC
    VeljkoC
    82 Posts

    Re: Change the CSS layout of some application (change the colors in app)

    ‏2013-04-03T16:42:12Z  
    • VeljkoC
    • ‏2013-04-03T15:36:27Z
    Maybe we can convince them for upgrade.

    In 7.5.1 Tivoli13 is by default set or Tivoli09?
    What are the advantages of using Tivoli13 - will it be easier to change color of Section and Tab?

    I saw in Firebug style for User Information Section is:

    .hb {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-image: url("../images/table_toolbar_bkg.gif");
    background-repeat: repeat-x;
    border-color: -moz-use-text-color -moz-use-text-color #AAAAAA;
    border-image: none;
    border-style: none none solid;
    border-width: 0 0 1px;
    cursor: default;
    padding: 0 2px 0 0;
    }

    I saw that you change color to white for Section background.

    Two questions:
    do I have to just remove background-image: url(../images/table_toolbar_bkg.gif); from hb definition in maximo.css file and background of my Section will be orange (I set it in xml) or I should set background color to orange in this maximo.css file? (in that case what is the correct definition).
    Also will this change in maximo.css file reflect on all Sections in all applications(because I want only in this application to have different color for Sections)

    Thank you an really sorry for your time
    Scott you are genius. Generally question is answered.

    Yes I succeeded to change and color of sections only now question is that now all my sections in all applications are no longer grey. Is it possible to this be applicable only in this one application I created or not?

    And also if you can give me few information about Tivoli13

    Thank you for help
  • scottsd
    scottsd
    121 Posts

    Re: Change the CSS layout of some application (change the colors in app)

    ‏2013-04-03T16:52:45Z  
    • VeljkoC
    • ‏2013-04-03T16:42:12Z
    Scott you are genius. Generally question is answered.

    Yes I succeeded to change and color of sections only now question is that now all my sections in all applications are no longer grey. Is it possible to this be applicable only in this one application I created or not?

    And also if you can give me few information about Tivoli13

    Thank you for help
    I think you slightly misunderstood my recommendation.

    I'm recommending you blank the two left and right cap images in the maximo.css file.

    ../images/table_toolbar_lcap.gif

    (either override the maximo.css to remove the background-image property entirely for those two classes, or better make the background images white (since that will preserve the spacing)

    and then use the headercss="yourclass" in the section to change the section title color for just that application.

    What'll happen is these left and right border gifs will be blanked out to white in all applications (but it'll be a subtle change that most people won't notice in the other applications, and ironically we do this anyway in the new Tivoli13 skin). Then you'll override the section title bar background color for just one application using that headercss property in your application's presentation xml.

    Does that work for you?
  • VeljkoC
    VeljkoC
    82 Posts

    Re: Change the CSS layout of some application (change the colors in app)

    ‏2013-04-03T20:56:25Z  
    • scottsd
    • ‏2013-04-03T16:52:45Z
    I think you slightly misunderstood my recommendation.

    I'm recommending you blank the two left and right cap images in the maximo.css file.

    ../images/table_toolbar_lcap.gif

    (either override the maximo.css to remove the background-image property entirely for those two classes, or better make the background images white (since that will preserve the spacing)

    and then use the headercss="yourclass" in the section to change the section title color for just that application.

    What'll happen is these left and right border gifs will be blanked out to white in all applications (but it'll be a subtle change that most people won't notice in the other applications, and ironically we do this anyway in the new Tivoli13 skin). Then you'll override the section title bar background color for just one application using that headercss property in your application's presentation xml.

    Does that work for you?
    This works perfectly thank you. headercss solved it.

    And really the last question - is it possible to color and background of table (body and details? )
    I did:

    <table label="Multiple Assets,Locations and CIs" headercss="telenor_bgorange" cssclass="telenor_bgorange">
    <tablebody displayrowsperpage="5"....headercss="telenor_bgorange" cssclass="telenor_bgorange">

    <tabledetails id="main_asset_table_1"..headercss="telenor_bgorange" cssclass="telenor_bgorange">

    I tried this and situation is like in the attachment(only the head is colored with orange).
    If you don't know for Tables it is not so important I do not want to take you any more time.
    Your advices was very connstructive and helpfull.
    All the best!
  • scottsd
    scottsd
    121 Posts

    Re: Change the CSS layout of some application (change the colors in app)

    ‏2013-04-04T18:06:25Z  
    • VeljkoC
    • ‏2013-04-03T20:56:25Z
    This works perfectly thank you. headercss solved it.

    And really the last question - is it possible to color and background of table (body and details? )
    I did:

    <table label="Multiple Assets,Locations and CIs" headercss="telenor_bgorange" cssclass="telenor_bgorange">
    <tablebody displayrowsperpage="5"....headercss="telenor_bgorange" cssclass="telenor_bgorange">

    <tabledetails id="main_asset_table_1"..headercss="telenor_bgorange" cssclass="telenor_bgorange">

    I tried this and situation is like in the attachment(only the head is colored with orange).
    If you don't know for Tables it is not so important I do not want to take you any more time.
    Your advices was very connstructive and helpfull.
    All the best!
    I'm afraid there are just too many spacers in the table and table details for you to replace all the colors successfully.

    One note though, I was able to get the button color to override successfully with the labelcss and textcss property.

    Here are some of the things that I tried to override in the table, but there are always some fields still colored differently. Screenshot attached with my results:

    <table headercss="telenor_bgorange" cssclass="telenor_bgorange" labelcss="telenor_bgorange" textcss="telenor_bgorange" beanclass="psdi.webclient.beans.common.MultiAssetLocCIBean" id="main_multiassetlocci_table" label="Multiple Assets,Locations and CIs" relationship="MULTIASSETLOCCI">
    <tablebody displayrowsperpage="5" filterable="true" id="main__multiassetlocci_table_tablebody">
    <tablecol cssclass="telenor_bgorange" filterable="false" id="main__multiassetlocci_table_tablebody_0" mxevent="toggledetailstate" mxevent_desc="Show Detail" sortable="false" type="event"/>
    <tablecol cssclass="telenor_bgorange" applink="asset,ipc" dataattribute="assetnum" id="main__multiassetlocci_table_tablebody_1" lookup="usercust" menutype="assetmain"/>
    <tablecol cssclass="telenor_bgorange" applink="location,ipc" dataattribute="Location" id="main__multiassetlocci_table_tablebody_2" lookup="locusercust" menutype="locations"/>
    <tablecol cssclass="telenor_bgorange" applink="ci" dataattribute="cinum" id="main__multiassetlocci_table_tablebody_3" lookup="ci" menutype="multici"/>
    <tablecol cssclass="telenor_bgorange" dataattribute="targetdesc" id="main__multiassetlocci_table_tablebody_4"/>
    <tablecol cssclass="telenor_bgorange" dataattribute="sequence" id="main__multiassetlocci_table_tablebody_5"/>
    <tablecol cssclass="telenor_bgorange" dataattribute="progress" id="main__multiassetlocci_table_tablebody_6"/>
    <tablecol cssclass="telenor_bgorange" dataattribute="siteid" id="main_multiassetlocci_table_tablebody_8" lookup="site"/>
    <tablecol cssclass="telenor_bgorange" filterable="false" id="main__multiassetlocci_table_tablebody_7" mxevent="toggledeleterow" mxevent_desc="Mark Row for Delete" mxevent_icon="btn_garbage.gif" sortable="false" type="event"/>
    </tablebody>
    <tabledetails id="main_asset_table_1" cssclass="telenor_bgorange" labelcss="telenor_bgorange" textcss="telenor_bgorange">
    <section id="main_asset_table_1_grid11" label="Details">