---
title: "Vitextra List Filter tīmekļa daļas krāsu motīva maiņa"
description: "Kā pielāgot Vitextra List Filter tīmekļa daļu ar CSS: pogu krāsas, uzrakstu stili, saraksta vadīklas un izlīdzinājums atbilstoši jūsu SharePoint motīvam."
url: https://vitextra.com/lv/support/kb/10033
language: lv
published: 2020-03-02
modified: 2026-10-10
products:
  - "List Filter"
author: "Lidija Reising"
tags: ["SharePoint List Filter noformējums", "List Filter tīmekļa daļas pielāgošana", "Vitextra List Filter CSS", "filtra tīmekļa daļas krāsas maiņa", "SharePoint tīmekļa daļas CSS", "spfilter CSS klases", "Skriptu redaktors", "pielāgots SharePoint motīvs"]
---

# Vitextra List Filter tīmekļa daļas krāsu motīva maiņa

Kā pielāgot Vitextra List Filter tīmekļa daļu ar CSS: pogu krāsas, uzrakstu stili, saraksta vadīklas un izlīdzinājums atbilstoši jūsu SharePoint motīvam.

Šajā rakstā ir aprakstīts, kā mainīt Vitextra List Filter tīmekļa daļas krāsu shēmu un izskatu.

## Ievads

[Vitextra List Filter tīmekļa daļa](https://vitextra.com/lv/products/list-filter) ļauj izveidot pielāgotu filtrēšanas paneli, lai meklētu datus SharePoint sarakstā vai dokumentu bibliotēkā. Panelis sastāv no tādām vadīklām kā pogas, saraksti un uzraksti.

Šajā rakstā ir aprakstīts, kā pielāgot filtra paneli jūsu korporatīvā portāla zīmolam vai motīvam. Katrai vadīklai, ko renderē List Filter, ir sava CSS klase, tāpēc jūs varat to mērķēt un lietot savu krāsu motīvu.

## Stilu lietošana

Lai noformētu filtra paneli, lapā jāreģistrē pielāgots CSS. Vienkāršākais veids ir pievienot **Skriptu redaktora** (Script Editor) tīmekļa daļu lapai, kurā tiek rādīts filtrs.

Atveriet lapu rediģēšanas režīmā, novietojiet kursoru tīmekļa daļu zonā, dodieties uz **IEVIETOT → Tīmekļa daļa** un kategorijā **Multivide un saturs** izvēlieties **Skriptu redaktors**:

![Skriptu redaktora tīmekļa daļas pievienošana SharePoint lapai](https://static.vitextra.com/articles/10033/add-script-editor-web-part.png)
*Skriptu redaktora tīmekļa daļas pievienošana SharePoint lapai*

Noklikšķiniet uz **Pievienot**, lai ievietotu tīmekļa daļu lapā.

Pēc tam Skriptu redaktora tīmekļa daļā noklikšķiniet uz **REDIĢĒT FRAGMENTU** (EDIT SNIPPET).

![Fragmenta rediģēšana SharePoint lapā](https://static.vitextra.com/articles/10033/script-editor-edit-snippet.png)
*Fragmenta rediģēšana SharePoint lapā*

Fragmenta dialoglodziņā ielīmējiet savus stilus un noklikšķiniet uz **Ievietot**.

![Fragmenta rediģēšana SharePoint lapā](https://static.vitextra.com/articles/10033/snippet-dialog.png)
*Fragmenta rediģēšana SharePoint lapā*

💡 **Padoms**  
Pievienojiet Skriptu redaktora tīmekļa daļu lapas apakšā, lai tā neatstātu lielu tukšu vietu izkārtojumā.

## CSS atsauces

Izmantojiet šādas CSS klases, lai mērķētu filtra paneļa vadīklas:

Elements | Klase | Vecākelements
--|--|--
Filtra panelis | .spfilter |
Rīkjosla | .spfilter-toolbar | .spfilter 
Darbību pogu panelis | .spfilter-footer | .spfilter
Filtra poga | .spfilter-button-filter | .spfilter-footer
Eksportēšanas poga | .spfilter-button-export | .spfilter-footer
Lauku konteiners | .spfilter-fields | .spfilter
Lauks | .spfilter-field | .spfilter-fields
Lauka uzraksts | .spfilter-field-label | .spfilter-field
Filtrēšanas vadīkla | .spfilter-field-input | .spfilter-field
Saraksta vadīkla | .k-dropdown-wrap | .spfilter-field-input

📝 **Piezīme**  
Nepārrakstiet saraksta vadīklas stilus tieši ar selektoru ```.k-dropdown-wrap```. Tā vietā izmantojiet konkrētāku selektoru ```.spfilter .k-dropdown-wrap```.

## Piemēri

Tālāk sniegti piemēri, kā lietot pielāgotus stilus List Filter tīmekļa daļā.

### Krāsu shēmas maiņa

Filtra tīmekļa daļā var pārrakstīt sešas krāsas:
- primārā (#0072c6)
- primārā, uzvedot kursoru (#004c84)
- primārā, aktivizējot (#00467a)
- sekundārā (#f4f4f4)
- sekundārā, uzvedot kursoru (#e2e2e2)
- sekundārā, aktivizējot (#0072c6)

Primārā krāsa tiek izmantota pogām **Filtrēt** un **Eksportēt**; sekundārā krāsa — rīkjoslas pogām **Kopīgot**, **Lauki** un **Iestatījumi**.

1. piemērs. Krāsu shēmas maiņa uz oranžu

```
<style>
/* Color of the primary buttons */
.spfilter-footer button {
  background-color: #ca5010 !important;
  border-color: #ca5010 !important;
}

.spfilter-footer button:hover {
  background-color: #da3b01 !important;
  border-color: #da3b01 !important;
}

.spfilter-footer button:active {
  background-color: #a4262c !important;
  border-color: #a4262c !important;
}

/* Color of the secondary buttons */
.spfilter-toolbar button,
.spfilter-toolbar button:hover{
  background-color: #c19c00 !important;
  border-color: #c19c00 !important;
  color: #fff !important;
}

.spfilter-toolbar button:active {
  background-color: #ca5010 !important;
  border-color: #ca5010 !important;
}
</style>
```

Rezultāts:

![SharePoint Filter tīmekļa daļa. Pielāgota krāsu shēma](https://static.vitextra.com/articles/10033/sample-1.png)
*SharePoint Filter tīmekļa daļa. Pielāgota krāsu shēma*

### Uzraksta stila maiņa

2. piemērs. Lauka uzraksta stila maiņa

```
<style>
/* Field Label Style */
.spfilter-field-label {
  font-weight: normal;
  text-transform: uppercase;
}
</style>
```

Rezultāts:

![SharePoint Filter tīmekļa daļa. Pielāgots uzraksta stils](https://static.vitextra.com/articles/10033/sample-2.png)
*SharePoint Filter tīmekļa daļa. Pielāgots uzraksta stils*

### Saraksta krāsa

3. piemērs. Saraksta vadīklas krāsas maiņa

```
<style>
/* Active List Style */
.spfilter .k-dropdown-wrap.k-state-active {
  background-color: #ca5010 !important;
  border-color: #ca5010 !important;
}

/* Selected Item Style */
.spfilter .k-list>.k-item.k-state-focused {
  background-color: #c19c00 !important;
  border-color: #c19c00 !important;
  color: #fff !important;
}
</style>
```

Rezultāts:

![SharePoint Filter tīmekļa daļa. Pielāgots saraksta stils](https://static.vitextra.com/articles/10033/sample-3.png)
*SharePoint Filter tīmekļa daļa. Pielāgots saraksta stils*

### Pogu izlīdzināšana 

4. piemērs. Pogu **Filtrēt** un **Eksportēt** pārvietošana pa labi

```
<style>
/* Buttons position */
.spfilter-footer {
  text-align: right;
}
</style>
```

Rezultāts:

![SharePoint Filter tīmekļa daļa. Pa labi izlīdzinātas pogas](https://static.vitextra.com/articles/10033/sample-4.png)
*SharePoint Filter tīmekļa daļa. Pa labi izlīdzinātas pogas*