Service Portal Approval Widget Hover Change COlor

[alex_tan]

Hi All,

Would like to check how do i change the color of Approve (Green) and Reject (Red) when mouse is hover over.

Thank you in advance for your help.

[Josh Virelli · Accepted solution]

Hi Alex,

This can be done through CSS with the :hover state.

The Reject button is using the bootstrap btn-default class and Approve is using the btn-primary, so we have to overwrite their :hover styles by declaring this in the CSS of the My Approvals widget (I'm using the hex colors for the Bootstrap red and green for the background colors, and slightly darker variants for the border colors so it looks like it belongs 😄 )

.btn-default:hover {
background-color: #d9534f;
border-color: #B24441;
}

btn-primary:hover {
background-color: #5cb85c;
border-color: #4C974C;
}

Let me know if that works! If it does please mark my answer as correct/helpful

Thanks

Josh

[alex_tan]

Hi Josh,

Both button is showing the same color, did i miss out something?

.btn-default:hover {
background-color: #008000;
border-color: #B24441;
}

btn-primary:hover {
background-color: #5cb85c;
border-color: #4C974C;
}

Thanks again for your help.

[Josh Virelli]

Hi Alex,

That's not the same widget you showed above in your question. Those both have the btn-default class (they are both white buttons). I would recommend you add an ID or Class to the HTML of those buttons and then use that to identify each in your HTML. Without actually seeing your code, there should be two <button> or <a> tags in there, not sure which is being used but look for the btn-default class. Something like this:

<button class="btn-default">Approve</button>
OR
<a class="btn-default">Reject</a>

Add id's so we know which is which

<button class="btn-default" id="btn-approve">Approve</button>
OR
<a class="btn-default" id="btn-reject">Reject</button>

and then edit your CSS to use the ID as a selector

#btn-reject:hover {
background-color: red;
border-color: red;
}

#btn-approve:hover {
background-color: green;
border-color: green;
}

[alex_tan]

Hi Josh,

I would like to keep changes to a minimum, these are the codes i am using, can you advice what to change?

<div class="panel panel-{{::options.color}} b" ng-if="data.showApprovals">
  <div class="panel-heading">
    <h2 class="h4 panel-title"><fa ng-if="::options.glyph.length" name="{{::options.glyph}}" class="m-r-sm" />${My Approvals}
      <label ng-if="data.pagination.showPagination && (data.pagination.from <= data.pagination.to)" class="pull-right text-info"><span ng-if="data.pagination.from != data.pagination.to">{{data.pagination.from}} ${to_lower}</span> {{data.pagination.to}} of {{data.pagination.of}}</label></h2>
  </div>
  <div class="panel-body" ng-class="{'padder-b-none': data.approvals.length != 0}">
    <div ng-if="data.approvals.length == 0 && data.pagination.of == 0">
      ${You have no pending approvals}
    </div>
    <div ng-if="data.approvals.length == 0 && data.pagination.of != 0">
      ${Loading approvals...}
    </div>
    <div ng-repeat="approval in data.approvals" class="sp-approval m-b-xl">
      <div class="row">
        <div ng-class="contentColClass">
          <div ng-if="approval.task.number || approval.task.short_description">
            <a ng-href="?id=approval&table=sysapproval_approver&sys_id={{::approval.sys_id}}" title="{{data.ViewApprovalPageMsg}}">
              <span ng-if="approval.task.number">{{::approval.task.number}}</span>
              <span ng-if="approval.task.number && approval.task.short_description"> - </span>
              <span ng-if="approval.task.short_description">{{::approval.task.short_description}}</span>
            </a>
          </div>
          <div ng-if="approval.task.opened_by"><label>${Requestor}</label> {{::approval.task.opened_by}}</div>
          <div ng-if="approval.task.approver"><label>${Approver}</label> {{::approval.task.approver}}</div>
          <div ng-if="approval.task.start_date"><label>${Start}</label> {{::approval.task.start_date}}</div>
          <div ng-if="approval.task.end_date"><label>${End}</label> {{::approval.task.end_date}}</div>
          <div ng-if="approval.task.quantity"><label>${Quantity}</label> {{::approval.task.quantity}}</div>
          <div ng-if="approval.task.price"><label>${Price}</label> {{::approval.task.price}}
            <span ng-if="approval.task.recurring_price"><label>${Recurring price}</label> {{::approval.task.recurring_price}} {{::approval.task.recurring_frequency}}</span>
          </div>
          <div ng-if="approval.items.length == 1">
            <div ng-repeat="item in approval.items">
              <div ng-if="item.variables.length > 0" ng-init="variable_toggle=false">
                <a href="javascript:void(0)" ng-click="variable_toggle = !variable_toggle">
                  <span class="glyphicon"
                        ng-class="{'glyphicon-chevron-down': !variable_toggle, 'glyphicon-chevron-up': variable_toggle}">
                  </span>
                  ${Options}
                </a>
                <div ng-repeat="variable in item.variables" ng-if="variable_toggle">
                  <label class="text-muted">{{::variable.label}}</label>
                  <div>{{::variable.display_value}}</div>
                </div>
              </div>
            </div>
          </div>

          <div ng-if="approval.variables.length > 0" ng-init="variable_toggle=false">
            <a href="javascript:void(0)" ng-click="variable_toggle = !variable_toggle">
              <span class="glyphicon"
                    ng-class="{'glyphicon-chevron-down': !variable_toggle, 'glyphicon-chevron-up': variable_toggle}">
              </span>
              ${Options}
            </a>
            <div ng-repeat="variable in approval.variables" ng-if="variable_toggle">
              <label>{{::variable.label}}</label>
              <div>{{::variable.display_value}}</div>
            </div>
          </div>
        </div>

        <div ng-if="!options.portal" class="col-sm-3">
          
          
          <button name="approve" ng-if="approval.state == 'requested'" class="btn btn-default btn-block" style="border-width:1px;" ng-click="approve(approval.sys_id, approval.requireEsigApproval);">${Approve}</button>
          <button name="reject" ng-if="approval.state == 'requested'" class="btn btn-default btn-block" ng-click="reject(approval.sys_id);">${Reject}</button>
          <button ng-if="approval.state == 'approved'" class="btn btn-success btn-block">{{approval.stateLabel}}</button>
          <button ng-if="approval.state == 'rejected'" class="btn btn-danger btn-block">{{approval.stateLabel}}</button>
          <button ng-if="approval.state != 'requested'" class="btn btn-default btn-block" style="visibility:hidden">{{approval.stateLabel}}</button>
        </div>
        <div ng-if="options.portal && approval.state == 'requested'" class="col-xs-6">
          <button name="reject" class="btn btn-danger btn-block" ng-click="reject(approval.sys_id, approval.requireEsigApproval);">${Reject}</button>
        </div>
        <div ng-if="options.portal && approval.state == 'requested'" class="col-xs-6">
          <button name="approve" class="btn btn-success btn-block" ng-click="approve(approval.sys_id, approval.requireEsigApproval);">${Approve}</button>
        </div>
        <div ng-if="options.portal && approval.state != 'requested'" class="col-xs-12">
          <button ng-if="approval.state == 'approved'" class="btn btn-success btn-block">{{approval.stateLabel}}</button>
          <button ng-if="approval.state == 'rejected'" class="btn btn-danger btn-block">{{approval.stateLabel}}</button>
        </div>
      </div>
    </div> <!-- body -->

  </div>
  <div class="panel-footer clearfix" ng-if="data.pagination.showPagination">
    <a id="previous-btn" href="javascript:void(0)" ng-click="previousPage()" ng-show="data.pagination.hasPrevious" class="pull-left btn btn-sm btn-default" aria-label="${Pagination button Previous}">
      <i class="fa fa-arrow-left m-r-sm" aria-hidden="true"></i>${Previous}</a>
    <a id="next_btn" href="javascript:void(0)" ng-click="nextPage()" ng-show="data.pagination.hasNext" class="pull-right btn btn-sm btn-default " aria-label="${Pagination button Next}">
      ${Next}<i class="fa fa-arrow-right m-r-sm col-md-offset-3" aria-hidden="true"></i></a>
  </div>
</div>

Thanks for your help again!