Views - Personalizzazioni
Inviato da Gae58 il 28 luglio, 2020 - 17:19.
Ho realizzato una views con vari campi e relazioni. Adesso vorrei personalizzarla. Per capirne il funzionamento, vorrei mettere in rosso il nome della vista.
Poi usare un colore di backgroubd diverso a seconda del valore di un campo presente nella riga visualizzata.
Es.: Nelle righe dove viene visualizzata la scritta 'E' lo sfondo del campo dev'essere blue
Inbece nelle righe dove viene visualizzata la scritta 'U' lo sfondo del campo dev'essere rosso
Però non so da dove iniziare e cosa leggere
Gaetano
Risposte
Puoi aggiungere classi ad
Puoi aggiungere classi ad ogni riga basandoti sulla sostituzione dei token, da Formato > Impostazioni > Classe riga (Row class). Se ad esempio inserisci un campo nascosto con il tipo di contenuto, riscrivendolo (Rewrite results) come {{ type__target_id }}, poi inserisci in Classe riga {{ type }} avrai delle righe così composte:
<tr class="article">.....
<tr class="page">..
facilmente stilizzabili con un minimo di css tipo:
.page td { background-color: yellow }.article td { background-color: green }
uhmmm, non mi è molto chiaro
uhmmm, non mi è molto chiaro ma inizio a pensarci
grazie
Importa questa vista e prova
Importa questa vista e prova (admin/config/development/configuration/single/import - configuration type = View)
uuid: 5c459df9-5d58-417b-b2d5-b6da953fabb9langcode: en
status: true
dependencies:
config:
- core.entity_view_mode.node.teaser
- system.menu.main
module:
- node
- user
id: evidenzia_per_tipo_di_contenuto
label: 'evidenzia per tipo di contenuto'
module: views
description: ''
tag: ''
base_table: node_field_data
base_field: nid
display:
default:
display_plugin: default
id: default
display_title: Master
position: 0
display_options:
access:
type: perm
options:
perm: 'access content'
cache:
type: tag
options: { }
query:
type: views_query
options:
disable_sql_rewrite: false
distinct: false
replica: false
query_comment: ''
query_tags: { }
exposed_form:
type: basic
options:
submit_button: Apply
reset_button: false
reset_button_label: Reset
exposed_sorts_label: 'Sort by'
expose_sort_order: true
sort_asc_label: Asc
sort_desc_label: Desc
pager:
type: full
options:
items_per_page: 50
offset: 0
id: 0
total_pages: null
tags:
previous: ‹‹
next: ››
first: '« First'
last: 'Last »'
expose:
items_per_page: false
items_per_page_label: 'Items per page'
items_per_page_options: '5, 10, 25, 50'
items_per_page_options_all: false
items_per_page_options_all_label: '- All -'
offset: false
offset_label: Offset
quantity: 9
style:
type: table
options:
grouping: { }
row_class: '{{ type_1 }}'
default_row_class: true
override: true
sticky: false
caption: ''
summary: ''
description: ''
columns:
title: title
type: type
type_1: type_1
info:
title:
sortable: false
default_sort_order: asc
align: ''
separator: ''
empty_column: false
responsive: ''
type:
sortable: false
default_sort_order: asc
align: ''
separator: ''
empty_column: false
responsive: ''
type_1:
sortable: false
default_sort_order: asc
align: ''
separator: ''
empty_column: false
responsive: ''
default: '-1'
empty_table: false
row:
type: 'entity:node'
options:
view_mode: teaser
fields:
title:
id: title
table: node_field_data
field: title
relationship: none
group_type: group
admin_label: ''
label: Title
exclude: false
alter:
alter_text: false
text: ''
make_link: false
path: ''
absolute: false
external: false
replace_spaces: false
path_case: none
trim_whitespace: false
alt: ''
rel: ''
link_class: ''
prefix: ''
suffix: ''
target: ''
nl2br: false
max_length: 0
word_boundary: false
ellipsis: false
more_link: false
more_link_text: ''
more_link_path: ''
strip_tags: false
trim: false
preserve_tags: ''
html: false
element_type: ''
element_class: ''
element_label_type: ''
element_label_class: ''
element_label_colon: true
element_wrapper_type: ''
element_wrapper_class: ''
element_default_classes: true
empty: ''
hide_empty: false
empty_zero: false
hide_alter_empty: true
click_sort_column: value
type: string
settings:
link_to_entity: true
group_column: value
group_columns: { }
group_rows: true
delta_limit: 0
delta_offset: 0
delta_reversed: false
delta_first_last: false
multi_type: separator
separator: ', '
field_api_classes: false
entity_type: node
entity_field: title
plugin_id: field
type:
id: type
table: node_field_data
field: type
relationship: none
group_type: group
admin_label: ''
label: 'Content type'
exclude: false
alter:
alter_text: false
text: ''
make_link: false
path: ''
absolute: false
external: false
replace_spaces: false
path_case: none
trim_whitespace: false
alt: ''
rel: ''
link_class: ''
prefix: ''
suffix: ''
target: ''
nl2br: false
max_length: 0
word_boundary: true
ellipsis: true
more_link: false
more_link_text: ''
more_link_path: ''
strip_tags: false
trim: false
preserve_tags: ''
html: false
element_type: ''
element_class: ''
element_label_type: ''
element_label_class: ''
element_label_colon: true
element_wrapper_type: ''
element_wrapper_class: ''
element_default_classes: true
empty: ''
hide_empty: false
empty_zero: false
hide_alter_empty: true
click_sort_column: target_id
type: entity_reference_label
settings:
link: true
group_column: target_id
group_columns: { }
group_rows: true
delta_limit: 0
delta_offset: 0
delta_reversed: false
delta_first_last: false
multi_type: separator
separator: ', '
field_api_classes: false
entity_type: node
entity_field: type
plugin_id: field
type_1:
id: type_1
table: node_field_data
field: type
relationship: none
group_type: group
admin_label: ''
label: 'Content type'
exclude: true
alter:
alter_text: true
text: '{{ type_1__target_id }}'
make_link: false
path: ''
absolute: false
external: false
replace_spaces: false
path_case: none
trim_whitespace: false
alt: ''
rel: ''
link_class: ''
prefix: ''
suffix: ''
target: ''
nl2br: false
max_length: 0
word_boundary: true
ellipsis: true
more_link: false
more_link_text: ''
more_link_path: ''
strip_tags: false
trim: false
preserve_tags: ''
html: false
element_type: ''
element_class: ''
element_label_type: ''
element_label_class: ''
element_label_colon: true
element_wrapper_type: ''
element_wrapper_class: ''
element_default_classes: true
empty: ''
hide_empty: false
empty_zero: false
hide_alter_empty: true
click_sort_column: target_id
type: entity_reference_label
settings:
link: false
group_column: target_id
group_columns: { }
group_rows: true
delta_limit: 0
delta_offset: 0
delta_reversed: false
delta_first_last: false
multi_type: separator
separator: ', '
field_api_classes: false
entity_type: node
entity_field: type
plugin_id: field
filters:
status:
value: '1'
table: node_field_data
field: status
plugin_id: boolean
entity_type: node
entity_field: status
id: status
expose:
operator: ''
operator_limit_selection: false
operator_list: { }
group: 1
type:
id: type
table: node_field_data
field: type
relationship: none
group_type: group
admin_label: ''
operator: in
value: { }
group: 1
exposed: true
expose:
operator_id: type_op
label: 'Content type'
description: ''
use_operator: false
operator: type_op
operator_limit_selection: false
operator_list: { }
identifier: type
required: false
remember: false
multiple: false
remember_roles:
authenticated: authenticated
anonymous: '0'
administrator: '0'
test: '0'
reduce: false
is_grouped: false
group_info:
label: ''
description: ''
identifier: ''
optional: true
widget: select
multiple: false
remember: false
default_group: All
default_group_multiple: { }
group_items: { }
entity_type: node
entity_field: type
plugin_id: bundle
sorts:
created:
id: created
table: node_field_data
field: created
order: DESC
entity_type: node
entity_field: created
plugin_id: date
relationship: none
group_type: group
admin_label: ''
exposed: false
expose:
label: ''
granularity: second
title: Test
header:
area:
id: area
table: views
field: area
relationship: none
group_type: group
admin_label: ''
empty: false
tokenize: false
content:
value: "<style>\r\n.article td { background: lightyellow }\r\n.page td { background: lightgreen }\r\n</style>"
format: full_html
plugin_id: text
footer: { }
empty: { }
relationships: { }
arguments: { }
display_extenders: { }
cache_metadata:
max-age: -1
contexts:
- 'languages:language_content'
- 'languages:language_interface'
- url
- url.query_args
- 'user.node_grants:view'
- user.permissions
tags: { }
page_1:
display_plugin: page
id: page_1
display_title: Page
position: 1
display_options:
display_extenders: { }
path: test
menu:
type: normal
title: Test
description: ''
expanded: false
parent: ''
weight: 0
context: '0'
menu_name: main
cache_metadata:
max-age: -1
contexts:
- 'languages:language_content'
- 'languages:language_interface'
- url
- url.query_args
- 'user.node_grants:view'
- user.permissions
tags: { }
Grande esempio Maurizio.
Grande esempio Maurizio. Semplice ma mi ha fatto capire che Drupal è veramente potente e ci si può fare di tutto. Sempre se lo si conosca appieno.
Ci lavoro, anche se ho visto che nell'iintestazione non mette il giallo.
Sicuramente perchè devo creare il CSS con questa informazione.
Mi sa che devo leggere qualcosa su come si fa
Grazie Maurizio. Sempre gentile
Tieni conto che è un esempio
Tieni conto che è un esempio veloce giusto per avere una possibile soluzione. I fogli di stile ad esempio andrebbero messo sempre messi nel tema ...
si ho letto qualcosa ma non
si ho letto qualcosa ma non mi è chiaro il meccanismo.
Per capire come funziona volevo usare i CSS all'interno della views.
Una semplice cosa, tipo cambiare il colore del title o cambiare il colore delle righe
<tr class="article">..
...
<tr class="page">..
facilmente stilizzabili con un minimo di css tipo:
.page td { background-color: yellow }
.article td { background-color: green }
Questo esempio che mi hai postato mi va bene come inizio per capire. Non ho capito però come fare.
Nel tuo esempio in impostazioni, row class hai inserito {{ type }}. Se ho capito bene è riferito alla sostiuzione tramite token del valore che deve visualizzare. Maper il cambio colore?
Ho inserito questo codice in row class span o stylespan(background-color: red;)
ma non sortisce effetto. Pensi che per quello che voglio fare sia possibile farlo così? Ho visto che c'è anche un modulo per il css ma vorrei capire come fare.
Ho visto che si dovrebbe definire il css attraverso un modulo ma in questo caso serve?
Ho visto che in avanzate c'è un rihciamo alle classi, dove si possono scrivere i nomi dei files. Penso che la carella sia themes/custom/nome file
{{ type }} genera una classe
{{ type }} genera una classe dell'elemento TR basata sul tipo di contenuto mostrato sulla riga. Avendo a questo punto una struttura tipo:
<tr class="page"><td>Titolo 1</td>
<td>Pagina base</td>
</tr>
<tr class="article">
<td>Titolo 2</td>
<td>Articolo</td>
</tr>
mettendo nell'intestazione
<style>.article td { background: red }
</style>
la seconda riga avrà sfondo rosso.
provo ma mi sa che non
provo ma mi sa che non funziona
La tua spiegazione è chiara
La tua spiegazione è chiara ma non riesco a capirne il funzionamento.
Attraverso il tuo codice il colore non compare. Ho notato che se uso il tag TD o TR il colore compare
td { background: red }naturalmente tutte le righe avranno quello sfondo. Forse devo attivare qualcosa per far uscire il colore con quelle due classi?
Scusa la domand ma .article td è riferito al C.T. articolo?
S.S. con il tuo codice
S.S. con il TR
PS.: ho visto che alcuni allegano direttamente l'immagine nel msg. Non ho cpaito come si fa
Sicuramente è una domanda
Sicuramente è una domanda banale ma te lo chiedo: hai a disposizione almeno un contenuto pubblicato di tipo pagina base o di tipo articolo? Perchè il codice evidenzia solo le righe relative a questi tipi di contenuto ... inoltre il tema potrebbe sovrascrivere le regole in qualche modo. Prova ad usare Bartik e ad assicurarti ci siano dei contenuti evidenziabili.
non s'è capito se : il campo
non s'è capito se :
il campo è lo stesso dove il valore cambia in E oppure U,oppure sono due campi diversi
i valori sono sempre quei due E oppure U
i valori cambiano,ma a cambiarli sei tu
i valori cambiano,ma a cambiarli è qualcun'altro e tu non sai quali saranno
Per Maurizio, l'avevo
Per Maurizio, l'avevo immaginato che .article era riferito al C.T. a questo punto devo sostituirlo con il nome del mio C.T. mi sa che questo è il motivo, provo
Per motodesk, ogni riga ha un campo che può essere 'E' o 'U'. La lettera viene scelta in fase di inserimento del contenuto.
Cambiato il nome macchina del C.T., e viene visualizzata la riga con colore diverso
Scusatemi forse non sono stato chiaro e ho dato per scontato alcune cose.
Non se adesso si possa inserire una if per controllare la lettera di un campo se 'E' o 'U'
Di nuovo grazie Maurizio, e scusa se non capisco subito le tue risposte
ma allora se sono sempre gli
ma allora se sono sempre gli stessi perchè non usi il tipo di campo "elenco" e il widget "caselle\pulsanti di opzione"
esempio di un mio sito:
usato per il numero di stelle e il tipo di destinazione
scegli due immagini del testo con sfondi diversi e non ti impicci col codice
Grazie per il suggerimento ma
Grazie per il suggerimento ma non sono tanto esperto.
La 'E' o la 'U' nel C.T., viene scelta da un campo Testo - elenco.
Nella Views la visualizzo come colonna attraverso una relazione.
La view è una tabella con descrizioni ed importi.
Non mi è chiaro come potrei fare quello che mi hai suggerito. Se vuoi ti invio uno S.S.
Maurizio ho fatto varie prove
Maurizio ho fatto varie prove ed adesso il tuo codice mi è + chiaro. Ho riprodotto la tua views senza copiare il tuo codice e funziona come la tua ed il risultato è lo stesso.
Ho analizzato il codice con l'ispezione e ho visto che dopo il tbody scrive una riga col <tr class=[nome della classe inserita nello style]>
Pe controllo ho scritto la views del C.T. Benzina (nome macchina "benzina".
In impostazioni - formato ho inserito il codice {{ type_1 }}Ho aggiunto un campo tipo di contenuto - nascosto. In riscrivi output inserito codice:
{{ type_1__target_id }}In Intestazione - Global text ho inserito il codice:
<style> .benzina td { background: lightyellow } benzina è il nome macchine del Conte Type </style>Ma non funziona. Ho controllato con l'ispezione ed constatato che il problema è che non inserisce la classe nel TR e non ho capito il perchè
E' possibile che se si scrive una vista indicando un content type specifico il codice da scrivere sia diverso?
Il nome del token dipende dai
Il nome del token dipende dai campi che inserisci in vista. Potrebbe non essere {{ type_1 }}. Controlla quali token hai a disposizione in "Replacement patterns" sotto le opzioni di riscrittura di ogni campo.
Maurizio ti ringrazio per la
Maurizio ti ringrazio per la costanza del tuo aiuto. Adesso ho capito come si crea una classe atraverso i token
Come già si espresse un precedente utente sei una bella persona