Change the color of the dropdown in Service Portal Widget

[dolarepooja]

How do I change this dropdown blue color in 'My Request' widget. 

[Community Alums]

Hi @dolarepooja ,

Can you please share the HTML section of your widget?

For your request, you need to add few lines in the CSS section of your widget.

Thanks,

Prudvi

[dolarepooja]

Hi @Community Alums , Below is the HTML Code. Its similar to "My Requests" widget (my-requests-v2).

HTML:

  <div class="panel-heading" ng-show="::!data.is_associated_ticket_tab" style="padding-left: 0px;">

    <h2 style="font-size: 32px;color: #3C3D3C; font-weight: 700; line-height: 45px; /* 140.625% */text-transform: uppercase;" class="panel-title">My Tickets</h2>

    <!--   <h2 style="font-size: 32px;color: var(--True-navy-400, var(--Truenavy-400, #4A608B)); font-weight: 700; line-height: 45px; /* 140.625% */text-transform: uppercase;" class="panel-title">{{::data.messages.myRequestsTitle}}</h2> -->

  </div> 

<div class="panel panel-default b" ng-init="c.trackPage()">

  <div class="panels-container list-group">

    <div ng-show="::!data.is_associated_ticket_tab" class="list-group-item row requests-header-container" style="

    padding-top: 35px;

    padding-bottom: 35px;

">

      <div style="

       margin-right: 455px;

    padding-left: 2px;

" class="col-md-3 col-xs-12 m-b-sm fit-content">

        <div class="form-inline control-view" ng-if="c.options.show_view == 'true'">

          <label class="control-label hidden-xs wrapper-sm " id="label_view" for="view">${View}</label>

    <!--  <select ng-model="c.viewFilter" id="view" class="sc-basic-select adjust-width" ng-change="c.changeView()" style="width:80%">

            <option value="open" selected="true">{{::data.messages.openRequests}}</option>

            <option value="close">{{::data.messages.closedRequests}}</option>

          </select> -->

 <div class="custom-select-wrapper">

    <select class="custom-select" ng-model="c.viewFilter" id="view" ng-change="c.changeView()">

        <option value="open" selected="true">Open Tickets</option>

        <option value="close">Closed Tickets</option>

    </select>

</div>    

        </div>

      </div>

      <div class="col-md-4 col-xs-12 padding-left-large fit-content">

        <div class="input-group" style="width:100%">

          <input   style="

    padding: 23px 8px 23px 47px;

    background-image: url('req_search.png');

    background-repeat: no-repeat;

  background-size: 20px 20px;

    background-position: 15px center;

    width: 100%;

    border: 0;

    background-color: #F5F5F5;

    box-shadow: none;

    border-radius: 50px;

  " ng-model="c.filterText" ng-keypress="c.checkEnter($event)"class="form-control"  placeholder="{{data.filterMsg}}" aria-label="{{data.filterMsg}}">

         <!--   <span class="input-group-btn">

          <button class="btn btn-default align-icon" type="button" ng-click="c.search()" title="{{data.filterMsg}}" aria-label="{{data.filterMsg}}" data-toggle="tooltip" data-placement="bottom">

             <i class="fa fa-search"></i> 

            </button>

          </span> -->

        </div><!-- /input-group --->

      </div>

    </div>

    <div ng-if="c.data.request.req_list.length == 0 && !c.filterText" class="panel-body panels-container">

      ${You do not have any Tickets} 

    </div>

    <div ng-if="c.data.request.req_list.length == 0 && c.filterText" class="panel-body panels-container">

      ${Search didn't match any Tickets} 

    </div>

    <div role="table" ng-if="c.data.request.req_list.length > 0" class="table" aria-label="{{::data.messages.myRequestsTitle}}">

      <div ng-show="::!data.is_associated_ticket_tab" role="rowgroup" class="column-headers">

        <div role="row" class="list-group-item table-responsive">

          <span role="columnheader" class="col-xs-6 padder-r-none padder-l-none">${Tickets}</span>

          <span role="columnheader" class="col-xs-3 padder-r-none padder-l-none">${State}</span>

          <span role="columnheader" class="col-xs-3 padder-r-none padder-l-none">${updated_capital}</span>

        </div>

      </div>

      <ul role="rowgroup" class="padder-l-none padder-r-none">

          <li role="row" style="margin:0px;padding: 20px" class="list-group-item table-responsive" ng-repeat="item in c.data.request.req_list | limitTo: c.data.lastLimit track by item.sys_id" style="margin:0px" >

          <div role="cell" class="col-xs-6 padder-l-none padder-r-none main-column">

            <div class="primary-display">

    <!-- <a href="?id=esc_ticket&table={{::item.url.table}}&sys_id={{::item.url.sys_id}}" sn-focus="{{::item.highlight}}" aria-label="{{::item.display_field}} , {{::item.display_number}}"> {{::item.display_field}} </a> -->

          <a href="?id={{::item.url.id}}&table={{::item.url.table}}&sys_id={{::item.url.sys_id}}" sn-focus="{{::item.highlight}}" aria-label="{{::item.display_field}} , {{::item.display_number}}"> {{::item.display_field}} </a> 

            </div>

            <small class="text-muted">

              <div ng-repeat="f in item.secondary_displays" class="secondary-display">

                <span >{{::f.display_value}}</span>

              </div>

            </small>

          </div>

          <div role="cell" class="col-xs-3 padder-l-none padder-r-none state-column">

            <div class="state">

              <span> {{::item.state}}</span>

            </div>

          </div>

          <div role="cell" class="col-xs-3 padder-l-none padder-r-none updated-column">

            <div class="updated">

              <span> {{::item.updated_on}}</span>

              <!--i class="fa fa-clock-o" aria-hidden="true" title="${Updated}"></i>

              <sn-time-ago timestamp="::item.updated_on"/-->

            </div>

          </div>

        </li>

      </ul>

    </div>

  </div>

</div>

<div class="col-sm-12 pull-none" ng-if="c.data.hasMore" style="padding-bottom:15px">

  <div class="text-a-c" ng-if="c.fetching">

    <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>

    <span class="sr-only">${Loading more Tickets}</span>  

  </div>

  <button class="btn btn-default btn-show-more" ng-click="c.loadMore()"> {{::data.messages.showMoreRequests}} </button>  

</div>

[dolarepooja]

The below is te HTML Code:

  <div class="panel-heading" ng-show="::!data.is_associated_ticket_tab" style="padding-left: 0px;">

    <h2 style="font-size: 32px;color: #3C3D3C; font-weight: 700; line-height: 45px; /* 140.625% */text-transform: uppercase;" class="panel-title">My Tickets</h2>

    <!--   <h2 style="font-size: 32px;color: var(--True-navy-400, var(--Truenavy-400, #4A608B)); font-weight: 700; line-height: 45px; /* 140.625% */text-transform: uppercase;" class="panel-title">{{::data.messages.myRequestsTitle}}</h2> -->

  </div> 

<div class="panel panel-default b" ng-init="c.trackPage()">

  <div class="panels-container list-group">

    <div ng-show="::!data.is_associated_ticket_tab" class="list-group-item row requests-header-container" style="

    padding-top: 35px;

    padding-bottom: 35px;

">

      <div style="

       margin-right: 455px;

    padding-left: 2px;

" class="col-md-3 col-xs-12 m-b-sm fit-content">

        <div class="form-inline control-view" ng-if="c.options.show_view == 'true'">

          <label class="control-label hidden-xs wrapper-sm " id="label_view" for="view">${View}</label>

    <!--  <select ng-model="c.viewFilter" id="view" class="sc-basic-select adjust-width" ng-change="c.changeView()" style="width:80%">

            <option value="open" selected="true">{{::data.messages.openRequests}}</option>

            <option value="close">{{::data.messages.closedRequests}}</option>

          </select> -->

 <div class="custom-select-wrapper">

    <select class="custom-select" ng-model="c.viewFilter" id="view" ng-change="c.changeView()">

        <option value="open" selected="true">Open Tickets</option>

        <option value="close">Closed Tickets</option>

    </select>

</div>    

        </div>

      </div>

      <div class="col-md-4 col-xs-12 padding-left-large fit-content">

        <div class="input-group" style="width:100%">

          <input   style="

    padding: 23px 8px 23px 47px;

    background-image: url('req_search.png');

    background-repeat: no-repeat;

  background-size: 20px 20px;

    background-position: 15px center;

    width: 100%;

    border: 0;

    background-color: #F5F5F5;

    box-shadow: none;

    border-radius: 50px;

  " ng-model="c.filterText" ng-keypress="c.checkEnter($event)"class="form-control"  placeholder="{{data.filterMsg}}" aria-label="{{data.filterMsg}}">

         <!--   <span class="input-group-btn">

          <button class="btn btn-default align-icon" type="button" ng-click="c.search()" title="{{data.filterMsg}}" aria-label="{{data.filterMsg}}" data-toggle="tooltip" data-placement="bottom">

             <i class="fa fa-search"></i> 

            </button>

          </span> -->

        </div><!-- /input-group --->

      </div>

    </div>

    <div ng-if="c.data.request.req_list.length == 0 && !c.filterText" class="panel-body panels-container">

      ${You do not have any Tickets} 

    </div>

    <div ng-if="c.data.request.req_list.length == 0 && c.filterText" class="panel-body panels-container">

      ${Search didn't match any Tickets} 

    </div>

    <div role="table" ng-if="c.data.request.req_list.length > 0" class="table" aria-label="{{::data.messages.myRequestsTitle}}">

      <div ng-show="::!data.is_associated_ticket_tab" role="rowgroup" class="column-headers">

        <div role="row" class="list-group-item table-responsive">

          <span role="columnheader" class="col-xs-6 padder-r-none padder-l-none">${Tickets}</span>

          <span role="columnheader" class="col-xs-3 padder-r-none padder-l-none">${State}</span>

          <span role="columnheader" class="col-xs-3 padder-r-none padder-l-none">${updated_capital}</span>

        </div>

      </div>

      <ul role="rowgroup" class="padder-l-none padder-r-none">

          <li role="row" style="margin:0px;padding: 20px" class="list-group-item table-responsive" ng-repeat="item in c.data.request.req_list | limitTo: c.data.lastLimit track by item.sys_id" style="margin:0px" >

          <div role="cell" class="col-xs-6 padder-l-none padder-r-none main-column">

            <div class="primary-display">

    <!-- <a href="?id=esc_ticket&table={{::item.url.table}}&sys_id={{::item.url.sys_id}}" sn-focus="{{::item.highlight}}" aria-label="{{::item.display_field}} , {{::item.display_number}}"> {{::item.display_field}} </a> -->

          <a href="?id={{::item.url.id}}&table={{::item.url.table}}&sys_id={{::item.url.sys_id}}" sn-focus="{{::item.highlight}}" aria-label="{{::item.display_field}} , {{::item.display_number}}"> {{::item.display_field}} </a> 

            </div>

            <small class="text-muted">

              <div ng-repeat="f in item.secondary_displays" class="secondary-display">

                <span >{{::f.display_value}}</span>

              </div>

            </small>

          </div>

          <div role="cell" class="col-xs-3 padder-l-none padder-r-none state-column">

            <div class="state">

              <span> {{::item.state}}</span>

            </div>

          </div>

          <div role="cell" class="col-xs-3 padder-l-none padder-r-none updated-column">

            <div class="updated">

              <span> {{::item.updated_on}}</span>

              <!--i class="fa fa-clock-o" aria-hidden="true" title="${Updated}"></i>

              <sn-time-ago timestamp="::item.updated_on"/-->

            </div>

          </div>

        </li>

      </ul>

    </div>

  </div>

</div>

<div class="col-sm-12 pull-none" ng-if="c.data.hasMore" style="padding-bottom:15px">

  <div class="text-a-c" ng-if="c.fetching">

    <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>

    <span class="sr-only">${Loading more Tickets}</span>  

  </div>

  <button class="btn btn-default btn-show-more" ng-click="c.loadMore()"> {{::data.messages.showMoreRequests}} </button>  

</div>