Come personalizzare la Pagina risultati di ricerca
Autore: Luca A.
Visite 1702,
Followers 4,
Condiviso 0
Salve a tutti,
volevo sapere come devo fare per modificare Dimensione, Colore e Stile del testo dei numeri di pagina presente nei risultati di ricerca (vedi allegato).
Ho provato anche ad utilizzare il comando "Ispeziona codice" per individuare la stringa da poter modificare, ma mi sono perso per strada.
Inoltre volevo sapere dove inserire la riga di codice.
Grazie per qualsiasi info
Postato il
Metti un link
Autore
Un link? Dove?
Premetto che la pagina che mostra i risultati di ricerca non è accessibile da poterla modificare normalmente, ma solo lato codice.
E qui mi perdo perchè, come ho spiegato all'inizio, non so dove andare ad agire per fare le modifiche che mi servono.
Metti qui un link del sito per fare prove
Autore
Ops, scusa, non avevo capito!
Premetto che il sito è in fase sperimentale, comunque prova a cercare la parola "LEONE", visto che abbiamo diversi articoli a riguardo e pertanto in fondo alla pagina si vedono diversi numeri di pagina.
https://www.lonardituttoperilgiardino.com/
Autore
Il sito si trova su server Linux e il tempo di Ricerca/Risposta è sotto i 10 secondi.
Non male se prima, quando era su server Windows, ci metteva 10 minuti
Prova così
<style>
.elemento {
color: red !important;
}
</style>
da inserire al passo 2--->avanzate--->Statistiche,SEO e Codice--->Codice--->Prima della chiusura del Tag Head
Vediamo se ti cambia il numero di pagina corrente in rosso e dopo andiamo avanti.
.elemento potrebbe non funzionare prova anche #elemento o solo elemento
@Patrizia
In realtà il selettore "elemento" (generico) lo vedi solo dagli "strumenti di sviluppo" e indica, se presenti, gli stili inline.
Il selettore dei numeri di pagina è questo:
...!... io non ho il Programma...!... ... pertanto controlla tu se trovi l'Alias della Pagina di Ricerca in basso al Passo_3 tra le Pagine Speciali, ...e nel caso ci fosse, puoi aprire il pannello delle Proprietà di questa pagina, ed incollare il codice nella sezione Esperto | /HEAD ... (3^) opzione
... oppure, visto che penso che quella pagina dei risultati di ricerca abbia selettori propri, presumo che il codice se inserito al Passo_1 | Esperto | /HEAD ... (3^) opzione, non possa interferire con le altre pagine del Progetto...
...
... non resta che a te provare uno dei due casi indicati prima, con un rapito copia/incolla di questo codice, e che poi ti potrai personalizzare, relativamente alle tua richiesta sui numeri:
<style>
.searchPageContainer > div:nth-child(3) {color: yellow; font-size:26px; font-weight:bold}
.searchPageContainer > div:nth-child(3) a {color: red; text-decoration: none}
</style>
.
Grazie @lemonsong immaginavo che non andasse bene e non ero riuscita ad individuare il selettore
Figurati, ho indugiato a postare non conoscendo il tuo grado di suscettibilità. C'era un tempo in cui sarei partito in 4a, senza pensarci un attimo
Autore
Problema risolto!
In pratica, ho utilizzato il codice (completo) di KolAsim, che mi ha permesso di impostare, oltre alla dimensione del carattere, anche i due colori differenti fra il numero di pagina selezionata e quelle non selezionate.
In futuro vedrò se mantenere le impostazioni suggerite (dimensioni e colori del carattere), ma se intanto volete vedere il risultato finale, potete cliccare sul link qui sotto e provare a cercare, per esempio, la parola LEONE nel campo di ricerca.
www.lonardituttoperilgiardino.com
Vi ringrazio infinitamente tutti per la vostra disponibilità e gentilezza e per le vostre possibili proposte risolutive.
... OK ... funziona bene... ... e da quel che vedo penso che hai usato l'Alias come avevo presunto...
... puoi personalizzare colori e misure a tuo piacere...
... per esempio puoi anche assegnare un .font maggiore al numero evidenziato, ed anche uno sfondo contrastato in nero che incornici i numeri...
.
Autore
Come faccio ad inserire la cornice di sfondo?
... nella prima istruzione aggiungi:
;width:250px;background-color:black;margin:auto;border-radius: 15px;
... in pratica, così:
<style>
.searchPageContainer > div:nth-child(3) {color: yellow; font-size:26px; font-weight:bold;width:250px;background-color:black;margin:auto;border-radius: 15px;}
.searchPageContainer > div:nth-child(3) a {color: red; text-decoration: none}
</style>
.
Autore
Grazi mille KolAsim, gentilissimo come sempre!
Autore
E' sorto un altro problemino relativo sempre alla numerazione nelle pagine di ricerca.
In pratica, se le pagine mostrate sono parecchie e la dimensioni dei caratteri è più grande dello standard (come nel mio caso), succede quello raffigurato nel file allegato.
Quindi, se possible, avrei bisogno gentilmente di un "codicillo" per far si che i numeri abbiano intanto un allineamento al centro della pagina e che in proporzione ne vengano mostrati contemporaneamente un numero max da rimanere comunque all'inteno della larghezza della pagina (frecce di direzione incluse).
Grazie in anticipo!
P.S.: Per far apparire un numero così alto di pagine nel risultato di ricerca, scrivete: Cristo in resina
Il sito è questo:
www.lonardituttoperilgiardino.com
... puoi colorare tutta la barra, oppure, e forse ancora meglio, prova con queste opzioni per un risultato così:
... ... ... ...
Autore
Ma la tua soluzione, KolAsim, si riferisce alla finestra del Blog, mentre nel mio caso mi riferisco alla finestra dei risultati del motore di ricerca interno.
...togli il corretto...
di modo che se vogliono, possono intervenire anche altri utenti...
(e poi il corretto, andrebbe messo alla risposta che ti risolve... quando sarà risolto...)
...... è vero! ...il blog!
... allora, come detto prima, ... "... puoi colorare tutta la barra" ... che a quanto vedo adesso mi pare che hai già fatto..
.
Autore
Hai ragione Claudio,
in verità avevo messo il "Corretto" perchè l'ultima soluzione di KolAsim (anzi, la penultima) era quella definitiva, solo che il problema è sorto dopo.
KolAsim, il mio problema non era la barra colorata di sfondo, che come vedi ho fatto in modo che si allarghi in automatico in base alla larghezza della finestra, ma la disposizione dei numeri di pagina, che se sono tanti escono addirittura a destra dello schermo e in fondo alla pagina appare la Barra di scorrimento orizzontale.
Quello che mi interesserebbe è che, se i numeri di pagina sono tanti, ne apparissero solo un tot senza uscire dallo schermo, ed eventualmente si aggiungessero le classiche "Freccette" di caricamento delle pagine successive.
Inoltre, ho notato che se le pagine sono molte, non si aggiungono mantenendo l'allineamento al centro pagina, ma si aggiungono dal centro verso destra fino ad uscire dallo schermo (e in questo caso appare la Barra di scorrimento in fondo alla pagina).
... appresso, prima di /HEAD, aggiungi:
<script>
$( document ).ready(function() {
$( ".searchPageContainer > div:nth-child(3) a" ).after( "<span style='font-size:0px'> </span>" )
});
</script>
...
... dovrebbe andarti a capo...
.
Autore
KolAsim, ho provato ad inserire il codice (spero) nella posizione che mi hai indicato, ma il problema è rimasto e le numerazioni troppo lunghe non vanno a capo.
Per capire meglio quello che succede si dovrebbero fare queste prove:
1) Nel campo di ricerca inserire la parola "Cristo in resina" e appariranno migliaia di pagine come risultato.
2) Nella prima pagina dei risultati si vedranno solamente 10 numeri di pagina, ma cliccando sul numero 10 si aggiungeranno altre pagine fino alla pagina 19.
3) Se si guarda il sito su computer desktop, bisogna ridurre un pò la dimensione della pagina per capire quello che succede, mentre se si guarda su cellulare si nota subito.
Il sito è sempre questo:
www.lonardituttoperilgiardino.com
... no! ...
... si spera che funzioni, in teoria sì, ...ma, ...a seguito del codice <STYLE> devi inserire il codice <SCRIPT> per intero compreso dei tag così come proposto per poter valutare...
<style>***</style>
<script>***</script>
... avvisa quando avrai corretto...
.
Autore
Grandissimo KolAsim, adesso funziona perfettamente!
Non finirò mai di ringraziarti abbastanza per tutte le volte che sei venuto in mio aiuto e soprattutto per la tua immensa pazienza!
Grazie ancora!
Autore
Adesso posso finalmente chiudere questo post con un bel "Corretto"
bene
però il "corretto" va messo per correttezza alla risposta che ti ha risolto...
sia per ringraziare l'utente che ti ha aiutato sia per agevolare chi avrà un problema come il tuo ti trovare subito la risposta corretta...
grazie
... visto ... OK ...
.