How to change color of a tab set (button link) and the size of it?

  • 1
  • Question
  • Updated 3 years ago

The button link that appear in a sub tab set: how can I (declaratively preferred);

1) Change the color of the sub tab button link

2) Change the size?

If it can't be done declaratively, can someone provide the code?

Photo of Tracy Oden

Tracy Oden

  • 704 Points 500 badge 2x thumb
  • unsure

Posted 3 years ago

  • 1
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
This page uses standard metadata.  Just create a new page, call it PatBoyTestPage, and use the XML.  Check out the Notes & Attachments tab set.  Is this what you are trying to accomplish?

<skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true" tabtooverride="Account">   <models>
      <model id="AccountWithOpportunities" limit="100" query="true" createrowifnonefound="false" sobject="Account">
         <fields>
            <field id="Name"/>
            <field id="AccountNumber"/>
            <field id="Industry"/>
            <field id="Id"/>
            <field id="ParentId"/>
            <field id="Parent.Name"/>
            <field id="Type"/>
            <field id="Sic"/>
            <field id="Description"/>
            <field id="TickerSymbol"/>
            <field id="Site"/>
            <field id="AnnualRevenue"/>
            <field id="Ownership"/>
            <field id="NumberOfEmployees"/>
            <field id="BillingState"/>
            <field id="Fax"/>
            <field id="Website"/>
            <field id="Phone"/>
            <field id="BillingAddress"/>
            <field id="ShippingAddress"/>
            <field id="Rating"/>
            <field id="OwnerId"/>
            <field id="Owner.Name"/>
            <field id="CreatedDate"/>
         </fields>
         <conditions>
            <condition type="join" value="" field="Id" operator="in" enclosevalueinquotes="true" joinobject="Opportunity" joinfield="AccountId"/>
         </conditions>
         <actions/>
      </model>
      <model id="Opportunities" limit="" query="false" createrowifnonefound="false" sobject="Opportunity" doclone="" type="">
         <fields>
            <field id="Name"/>
            <field id="StageName"/>
            <field id="IsWon"/>
            <field id="CloseDate"/>
            <field id="IsClosed"/>
         </fields>
         <conditions>
            <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="AccountId" state="filterableoff" inactive="true" name="AccountId"/>
         </conditions>
         <actions/>
      </model>
      <model id="Notes" limit="20" query="true" createrowifnonefound="false" sobject="Note">
         <fields>
            <field id="Body"/>
            <field id="Title"/>
            <field id="LastModifiedById"/>
            <field id="LastModifiedBy.Name"/>
            <field id="LastModifiedDate"/>
            <field id="CreatedById"/>
            <field id="CreatedBy.Name"/>
            <field id="OwnerId"/>
            <field id="Owner.Name"/>
            <field id="ParentId"/>
            <field id="Parent.Name"/>
         </fields>
         <conditions>
            <condition type="modelmerge" value="" field="ParentId" operator="=" model="AccountWithOpportunities" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="deactivate"/>
         </conditions>
         <actions/>
      </model>
      <model id="Attachments" limit="20" query="true" createrowifnonefound="false" sobject="Attachment">
         <fields>
            <field id="CreatedById"/>
            <field id="CreatedBy.Name"/>
            <field id="CreatedDate"/>
            <field id="Id"/>
            <field id="LastModifiedById"/>
            <field id="LastModifiedBy.Name"/>
            <field id="LastModifiedDate"/>
            <field id="ParentId"/>
            <field id="Parent.Name"/>
            <field id="Name"/>
            <field id="ContentType"/>
            <field id="BodyLength"/>
            <field id="Description"/>
         </fields>
         <conditions>
            <condition type="modelmerge" value="" field="ParentId" operator="=" model="AccountWithOpportunities" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="deactivate"/>
         </conditions>
         <actions/>
      </model>
   </models>
   <components>
      <pagetitle model="AccountWithOpportunities">
         <maintitle>
            <template>{{Model.labelPlural}}</template>
         </maintitle>
         <subtitle>Having Opportunities</subtitle>
         <actions>
            <action type="savecancel">
               <models>
                  <model>Opportunities</model>
               </models>
            </action>
         </actions>
      </pagetitle>
      <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="AccountWithOpportunities" mode="read">
         <fields>
            <field id="Name" allowordering="true"/>
            <field id="AccountNumber" valuehalign="" type=""/>
            <field id="Industry" valuehalign="" type=""/>
         </fields>
         <rowactions>
            <action type="edit"/>
            <action type="delete"/>
            <action type="drawer" label="View Details" icon="fa-chevron-right" openicon="fa-chevron-down">
               <drawer title="Drawer Area" width="90%" closehandle="true">
                  <components>
                     <tabset rememberlastusertab="true" defertabrendering="true" renderas="">
                        <tabs>
                           <tab name="Overview" icon="fa-list">
                              <components>
                                 <basicfieldeditor showheader="true" showsavecancel="true" model="AccountWithOpportunities" buttonposition="" mode="read" layout="">
                                    <columns>
                                       <column width="33.3%">
                                          <sections>
                                             <section title="General Info" collapsible="no">
                                                <fields>
                                                   <field id="ParentId"/>
                                                   <field id="AccountNumber"/>
                                                   <field id="Type"/>
                                                   <field id="Industry"/>
                                                   <field id="Sic"/>
                                                </fields>
                                             </section>
                                             <section title="Description" collapsible="no">
                                                <fields>
                                                   <field id="Description" valuehalign="" type="">
                                                      <label> </label>
                                                   </field>
                                                </fields>
                                             </section>
                                             <section title="Additional Information" collapsible="no">
                                                <fields>
                                                   <field id="TickerSymbol"/>
                                                   <field id="Site"/>
                                                   <field id="AnnualRevenue"/>
                                                   <field id="Ownership"/>
                                                   <field id="NumberOfEmployees"/>
                                                </fields>
                                             </section>
                                          </sections>
                                       </column>
                                       <column width="33.3%">
                                          <sections>
                                             <section title="Contact" collapsible="no">
                                                <fields>
                                                   <field id="Phone" valuehalign="" type="">
                                                      <label>Primary Phone</label>
                                                   </field>
                                                   <field id="BillingState"/>
                                                   <field id="Fax"/>
                                                   <field id="Website"/>
                                                </fields>
                                             </section>
                                             <section title="Address" collapsible="no">
                                                <fields>
                                                   <field type="COMBO" valuehalign="" editmodebehavior="autopopup">
                                                      <label>Billing Address</label>
                                                      <template>{{BillingStreet}} &lt;br&gt; {{BillingCity}}{{#BillingCity}},{{/BillingCity}} {{BillingState}} &lt;br&gt; {{BillingCountry}} &lt;br&gt; {{BillingPostalCode}} 
                                    </template>
                                                   </field>
                                                   <field type="COMBO" valuehalign="" editmodebehavior="autopopup">
                                                      <label>Shipping Address</label>
                                                      <template>{{ShippingStreet}} &lt;br&gt; {{ShippingCity}}{{#ShippingCity}},{{/ShippingCity}} {{ShippingState}} &lt;br&gt; {{ShippingCountry}} &lt;br&gt; {{ShippingPostalCode}}
                                    </template>
                                                   </field>
                                                </fields>
                                             </section>
                                          </sections>
                                       </column>
                                       <column width="33.3%">
                                          <sections>
                                             <section title="Internal Information" collapsible="no">
                                                <fields>
                                                   <field id="Rating"/>
                                                </fields>
                                             </section>
                                             <section title="System Information" collapsible="no">
                                                <fields>
                                                   <field id="OwnerId"/>
                                                   <field id="CreatedDate"/>
                                                   <field type="COMBO" valuehalign="" editmodebehavior="autopopup">
                                                      <label>Last Modified</label>
                                                      <template>By: {{LastModifiedById}} on {{LastModifiedDate}}</template>
                                                   </field>
                                                </fields>
                                             </section>
                                          </sections>
                                       </column>
                                    </columns>
                                 </basicfieldeditor>
                              </components>
                           </tab>
                           <tab name="Oppportunities" loadlazypanels="true" icon="fa-money">
                              <components>
                                 <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Opportunities" buttonposition="" mode="read">
                                    <fields>
                                       <field id="Name"/>
                                       <field id="StageName"/>
                                       <field id="IsWon"/>
                                       <field id="IsClosed"/>
                                       <field id="CloseDate" valuehalign="" type=""/>
                                    </fields>
                                    <rowactions>
                                       <action type="edit"/>
                                       <action type="delete"/>
                                    </rowactions>
                                    <massactions usefirstitemasdefault="true">
                                       <action type="massupdate"/>
                                       <action type="massdelete"/>
                                    </massactions>
                                    <views>
                                       <view type="standard"/>
                                    </views>
                                 </skootable>
                              </components>
                           </tab>
                           <tab name="Notes &amp; Attachments" loadlazypanels="true" icon="sk-icon-notes-and-attachments">
                              <components>
                                 <tabset rememberlastusertab="true" defertabrendering="true" renderas="" uniqueid="" cssclass="subtabset">
                                    <tabs>
                                       <tab name="Notes" icon="sk-icon-note">
                                          <components>
                                             <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Notes" buttonposition="" mode="read">
                                                <fields>
                                                   <field id="Title" valuehalign="" type=""/>
                                                   <field id="Body"/>
                                                   <field type="COMBO" valuehalign="">
                                                      <label>Last Modified</label>
                                                      <template>{{LastModifiedDate}} by {{LastModifiedById}}</template>
                                                   </field>
                                                   <field type="COMBO" valuehalign="">
                                                      <label>Created</label>
                                                      <template>{{CreatedDate}} by {{CreatedBy.Name}}</template>
                                                   </field>
                                                </fields>
                                                <rowactions>
                                                   <action type="edit"/>
                                                   <action type="delete"/>
                                                </rowactions>
                                                <massactions usefirstitemasdefault="true">
                                                   <action type="massupdate"/>
                                                   <action type="massdelete"/>
                                                </massactions>
                                                <views>
                                                   <view type="standard"/>
                                                </views>
                                             </skootable>
                                          </components>
                                       </tab>
                                       <tab name="Attachments" loadlazypanels="true" icon="sk-icon-attachments">
                                          <components>
                                             <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Attachments" buttonposition="" mode="read">
                                                <fields>
                                                   <field id="Name"/>
                                                   <field id="ContentType" valuehalign="" type=""/>
                                                   <field id="BodyLength" valuehalign="" type="">
                                                      <label>Size (bytes)</label>
                                                   </field>
                                                   <field id="Description" valuehalign="" type="" maxdisplaycharacters="100"/>
                                                   <field type="COMBO" valuehalign="">
                                                      <label>Last Modified</label>
                                                      <template>{{LastModifiedDate}} by {{LastModifiedById}}</template>
                                                   </field>
                                                   <field type="COMBO" valuehalign="">
                                                      <label>Created</label>
                                                      <template>{{CreatedDate}} by {{CreatedById}}</template>
                                                   </field>
                                                </fields>
                                                <rowactions>
                                                   <action type="edit"/>
                                                   <action type="delete"/>
                                                   <action type="redirect" label="View Attachment" icon="sk-icon-file-view" window="blank" url="/servlet/servlet.FileDownload?file={{{Id}}}"/>
                                                </rowactions>
                                                <massactions usefirstitemasdefault="true">
                                                   <action type="massupdate"/>
                                                   <action type="massdelete"/>
                                                </massactions>
                                                <views>
                                                   <view type="standard"/>
                                                </views>
                                                <actions defaultlabel="Global Actions" defaulticon="sk-icon-magic" usefirstitemasdefault="true">
                                                   <action type="redirect" label="Attach New Files" icon="sk-icon-upload" window="self" url="/p/attach/NoteAttach?pid={{$Param.id}}&amp;parentname={{$Model.AccountData.data.0.Name}}&amp;retURL=%2F{{$Param.id}}"/>
                                                </actions>
                                             </skootable>
                                          </components>
                                       </tab>
                                    </tabs>
                                 </tabset>
                              </components>
                           </tab>
                        </tabs>
                     </tabset>
                  </components>
                  <beforeload>
                     <action type="blockUI" message="Retrieving information..."/>
                     <action type="setCondition" model="Opportunities" condition="AccountId" value="{{Id}}"/>
                     <action type="requeryModel" model="Opportunities" behavior="loadmore">
                        <onerroractions>
                           <action type="blockUI" message="There was an error" timeout="3000"/>
                        </onerroractions>
                     </action>
                     <action type="unblockUI"/>
                  </beforeload>
               </drawer>
            </action>
         </rowactions>
         <massactions usefirstitemasdefault="true">
            <action type="massupdate"/>
            <action type="massdelete"/>
         </massactions>
         <views>
            <view type="standard"/>
         </views>
      </skootable>
   </components>
   <resources>
      <labels/>
      <css>
         <cssitem location="inline" name="subtabsetcss" cachelocation="false">.subtabset .nx-template {
              font-weight: 700;
              font-size: 12pt;
              color: chartreuse;
            }</cssitem>
         </css>
         <javascript/>
      </resources>
   </skuidpage>
Photo of Tracy Oden

Tracy Oden

  • 704 Points 500 badge 2x thumb

Hi,

I created the new page using the code you provided (see screenshot), but I do not see a tab for attachments (see screenshot) to see the example you reference.


Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Click View Details.
Photo of Tracy Oden

Tracy Oden

  • 704 Points 500 badge 2x thumb

I have been playing with the example you gave. I made some color changes etc., Now, there is one more thing you may be able to help me with. How do I remove the blue color as depicted behind the Notes Sub tab (see screenshot)?


Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
I am no CSS expert; just played around with the CSS in the Dev Tools.  

Replace the subtabsetcss with this body:


.subtabset .nx-template {  font-weight: 700;
  font-size: 12pt;
  color: chartreuse;
}
.subtabset .ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active {
    background-color: pink;
}
.subtabset .ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active.ui-state-hover {
    background-color: salmon;
}

Enjoy!
Photo of Tracy Oden

Tracy Oden

  • 704 Points 500 badge 2x thumb
You are so helpful. Thanks you so much. I am able to see what I need to do.
Photo of Tracy Oden

Tracy Oden

  • 704 Points 500 badge 2x thumb
Thank you! It worked great. I should be able to go from here. Thanks, again.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thanks Irvin.  Appreciate your help for Tracy here!  
(We are very proud of our community - and grateful for all you give back to the Skuid family!)