Iscriviti

Tag css

WordPress: Come nascondere la barra admin solo agli utenti 5 (1)

Oggi mi son ritrovato un bel quesito da risolvere: come nascondere la barra admin di wordpress solo agli utenti, lasciando la visibilità agli admin, editori e autori. Recentemente abbiamo già visto come personalizzare la barra admin di wordpress con colori e dimensioni differenti, ora andremo a vedere due metodi su come nasconderla o mostrarla a seconda delle necessità. Fortunatamente non è nulla di complicato e per far ciò bisogna ricorrere ad una modifica sul file fuction.php del tema, quindi come sempre, consiglio effettuate una copia di backup del vostro blog. In alternativa possiamo utilizzare un plugin per nascondere la toolbar di wordpress e mostrarla a solamente a determinati ruoli scelti, ma andiamo a vedere come. Come rimuovere la barra admin di wordpress a tutti Nelle recenti versioni di wordpress è stata introdotta la possibilità di aggiungere del “CSS aggiuntivo” partendo dalla vostra bacheca wordpress > aspetto > personalizza. In questo spazio aggiungeremo il seguente codice per nascondere la barra amministrativa a tutti, compresi gli admin e noi stessi. Oppure nel file fuction.php del tema possiamo aggiungere il seguente codice: Ma prima di modificare quest’ultimo vi consiglio di lavorare su un child theme, se non sapete come crearlo potete utilizzare il plugin “child theme configurator“. Come disabilitare la barra admin solamente agli utenti Con questo codice invece gli amministratori, editori e autori vedranno la barra admin, mentre nasconderete la barra admin ai soli utenti. Aggiungere nel file funciont.php: oppure: Plugin per nascondere la barra admin a tutti gli utenti eccetto gli amministratori Per chi non sa dove andar a mettere le mani, ho creato un plugin per disattivare la barra admin per tutti gli utenti, escluso chi può creare articoli (admin, editor, author) e come sempre, vi suggerisco di fare un backup del sito prima di attivarlo, anche se al 99% […]

Come modificare la barra admin di wordpress 5 (1)

Siete stanchi di quella monotona toolbar nera di wordpress? Bene, in questo articolo andremo a vedere come modificare la barra admin di wordpress con un po’ di css. Specialmente per chi utilizza il plugin social di buddypress, quindi ha realizzato una community dove la barra amministrativa è ben esposta a tutti gli utenti, potrebbe essere carino variarne colore e dimensione, in modo da renderla più visibile e facilmente navigabile. Abbiamo già visto in un precedente articolo come modificare la notifica di buddypress, cambiare colore e dimensione del font, oppure, come nascondere la barra admin di wordpress, di seguito andremo a vedere invece alcune modifiche tramite CSS per modificare la toolbar di wordpress. Inseriremo i seguenti codici recandoci nel backend del nostro sito in “Aspetto > Personalizza > CSS aggiuntivo” che è stato introdotto nelle recenti versioni di wordpress, oppure utilizzando il foglio di stile del child-theme se lo possedete. Come modificare colore alla barra admin wordpress #wpadminbar { background: #4285f4; } Quindi dopo “background” possiamo inserire il codice del colore preferito, per aiutarvi potete guardare >qui Come modificare l’altezza della barra admin wordpress Se volete rendere più alta la toolbar perché la ritenete troppo piccola e poco visibile potete inserire il seguente codice #wpadminbar { height: 40px; line-height: 40px; } Per rimanere centrato nella barra, sia Height che line, devono avere lo stesso parametro. Come cambiare dimensione font nella barra admin wordpress Volete invece sostituire la dimensione del testo nella toolbar? Sarà sufficiente inserire i seguenti codici: #wpadminbar { font-size: 15px; font-weight: 600; } Dove “size” rappresenta la grandezza del carattere “weight” possiamo paragonarlo al grassetto del testo. Ora conoscete le basi per modificare la vostra barra amministrativa di wordpress, se avete dubbi o domande non esitate a chiedere, buon lavoro.

Come cambiare lo sfondo giallo nei banner adsense su wordpress 5 (2)

Se utilizzate AdSense sul vostro wordpress, vi sarà capitato che alcuni temi mostrino uno sfondo giallo sugli annunci, o meglio, nella relativa trasparenza dei banner c’è di default questo colore che graficamente può rovinare esteticamente il nostro blog. Di seguito andremo a vedere come eliminare questo colore e per modificarlo ci serviremo di un child theme (come creare un child theme) oppure modificato il CSS dal modulo aggiuntivo, che di recente è stato introdotto nel core di wordpress (v.4.7.0); lo troverete sotto Aspetto > Personalizza > Css aggiuntivo. Andiamo subito a vedere come eliminare il giallo nelle trasparenze AdSense, inserendo alcune righe di codice. Come cambiare lo sfondo giallo nei banner AdSense Se vogliamo sostituire lo sfondo con un colore a piacere dobbiamo incorporare questo codice nel CSS sostituendo il giallo (#fff486) con un colore a piacere, esempio il bianco (#ffffff) ins { background: #ffffff !important; } Oppure se volete renderlo completamente trasparente, magari perché avete i banner in diverse posizioni con sfondi differenti, andiamo ad aggiungere questo codice: ins { background: rgba(255,255,0,0) !important; } Spero che questa guida vi sia stata d’aiuto per eliminare o modificare i banner adsense gialli dal vostro blog wordpress. Buon lavoro 😀

Inserire uno sfondo in una pagina wordpress 4.7 (3)

Se state cercando un modo per inserire uno sfondo in una pagina di wordpress, in questo articolo andremo a vedere in particolare, come con poche righe di CSS nel nostro foglio di stile, sarà possibile modificare ogni singola pagina del nostro blog wordpress con uno sfondo diverso, e tutto senza utilizzare plugin. Di base, ogni tema wordpress ha la funzione nel pannello di personalizzazione di poter caricare uno sfondo unico per tutto il portale; ma se volessimo avere diverse immagini per ogni pagina in modo da renderla unica? Vediamo subito come fare. Come cercare ID pagina wordpress Come prima cosa dobbiamo scegliere degli sfondi e caricarli nella galleria media, oppure in un cartella desiderata via FTP, successivamente dovremo recuperare l’ID della pagina in cui vogliamo inserire il nostro sfondo. Possiamo recuperarla velocemente navigando in  pagine > tutte le pagine e nella lista che apparirà dovremo passare il mouse sul nome della pagina desiderata senza cliccarci, e subito in basso a sinistra della nostra finestra browser verrà mostrato il link indicativo con il suo ID. (vedi immagine) Come inserire uno sfondo differente in ogni pagina wordpress Per personalizzare una pagina wordpress, abbiamo bisogno di metter mano al foglio di stile del tema, che è possibile raggiungere dal nostro pannello admin > Aspetto > Editor. O ancora meglio, quando si tratta di aggiungere o modificare il css di un tema, consiglio sempre di creare un child theme. Scopri come creare un child del tuo tema. Codice per inserire uno sfondo in una pagina wordpress Una volta trovato “style.css” andremo ad aggiungere il seguente codice: body.page-id-100  { background-image:url('http://www.youfriend.it/miosfondo.jpg'); background-repeat:no-repeat; background-attachment:fixed; } Come potete vedere è semplicissimo, basterà sostituire il numero che indicia l’id della vostra pagina e l’indirizzo in cui risiede la vostra immagine caricata, e in questo modo potrete inserire uno sfondo […]

Come eliminare il campo Sito web dai commenti wordpress 5 (2)

In questo articolo andremo a vedere come eliminare il campo sito web dai commenti wordpress, o meglio, quella casella da riempire durante la compilazione di un commento ad un articolo, dove bisogna inserire un sito internet o un link di riferimento. Come purtroppo – e sottolineo purtroppo – alcuni di voi già sapranno, spesso viene utilizzata per spammare; in diffuso uso da parte dei bot che compilano il form dei commenti automaticamente e poi inseriscono un link verso il sito programmato. Se è al momento state riscontrate questo problema o non siete interessati a mantenere questo box, eliminare il campo sito web dai commenti wordpress è semplicissimo, anzi, ci sono due metodi che vi mostrerò qui di seguito. Prima però voglio consigliarvi di installare, se non l’avete ancora fatto, il plugin di Akismet, che si occuperà di proteggere i vostri commenti dallo spam. Come rimuovere il campo sito web dai commenti wordpress Il primo modo consiste nell’ inserire un codice php nella file Fuction.php, che è raggiungibile tramite Ftp, oppure direttamente dal pannello admin > Aspetto > editor > Fuction.php. Sarebbe ancora meglio utilizzare un plugin per codici snippets o creare un child theme. Ad ogni modo, per non ritrovarti in spiacevoli situazioni, fai un backup del file da ricaricare, nel caso vada storto qualcosa. Ricordati di inserire il tag di chiusura del codice ?> ) Come nascondere il campo web site su wordpress con CSS Il secondo metodo non è dei migliori, ma comunque anch’esso serve a togliere il campo website dai commenti wordpress. Dal backend del sito, dirigeti sul menu aspetto > personalizza > CSS aggiuntivo e inserite questo codice: Conclusione Bene! Ora conosci ben 2 metodi su come eliminare il campo “website” dai commenti wordpress e tenere al sicuro il tuo blog dallo spam. Buon lavoro. Conosci […]

Come creare un pulsante che cambia colore o immagine al passaggio del mouse 4.5 (2)

Oggi vi guiderò nella creazione di un bottone o pulsante web che cambia colore o immagine al passaggio del mouse sopra. Con questo metodo potrete sbizzarrirvi nel creare pulsanti graficamente originali, e quando il mouse ci passerà sopra, muteranno forma o colore a seconda dello stile che gli avete assegnato. Potrebbe esservi utile anche nel caso voleste realizzare dei banner pubblicitari o delle gif, o comunque qualsiasi tipo, forma o figura, che abbia un animazione differente quando il mouse passa sopra l’immagine. Come prima cosa bisogna creare 2 tipi ti pulsanti dalla grafica diversa, per fare ciò utilizzate un qualsiasi tipo di programma di grafica, io mi farò supportare dal fidato Photoshop, poi sarà sufficiente inserire il codice nella parte in cui vorrete visualizzare il pulsante, sostituendo le immagini (URL) di esempio con le vostre. Vediamo subito come! Creare pulsante che cambia al passaggio del mouse Create ed assegnate due nomi differenti ai vostri pulsanti, in questo caso li chiameremo pulsante “youfriend button1″ e il secondo ” youfriend button2″. base button1: cambio button2: Ora bisognerà creare ed inserire, dove lo si desidera, lo script codice che ci permetterà di avere l‘effetto di un pulsante che cambia colore al passaggio del mouse, in più inseriremo un link verso una pagina scelta. codice esempio: Una volta modificato il codice, ecco come si presenterà il vostro pulsante html nella pagina in cui è stato inserito. Il tutorial per creare dei pulsanti che cambiano al passaggio del mouse finisce qui, Buon lavoro!

CSS Background: proprietà css di sfondo 5 (1)

Avete creato un sito ed ora volete aggiungere uno sfondo tramite css? Ecco tutti gli esempi di background position e proprietà per impostare un‘immagine di sfondo nel CSS del vostro template. La proprietà css background permette di personalizzare lo sfondo d’un elemento con la scelta di un colore di sfondo (background-color) o di un’immagine (background-image). Questa immagine potrà allora essere duplicata o no (background-repeat), posizionata (background-position) e resa scrollabile con il corpo della pagina (background-attachment). Di seguito vedremo quindi come inserire uno sfondo con CSS e tutte le possibilità di inserimento, utile talvolta anche per wordpress! 1. background-image La proprietà css background-image permette di aggiungere un’immagine di sfondo in format jpg, gif, png… background-image: url(); Con il valore url() un’immagine di sfondo è aggiunta all’elemento.Di default, l’immagine è duplicata sia orizzontalmente che verticalmente. Esempio: background-image: url(star.jpg); background-image: none; Il valore none è il valore di default, nessuna immagine di sfondo è aggiunta. 2. background-repeat La proprietà css background-repeat permette di duplicare o no l’immagine di sfondo sia orizzontalmente che verticalmente. background-repeat: repeat; Il valore repeat è il valore di default. L’immagine è duplicata sia orizzontalmente che verticalmente. Esempio: background-image: url(star.jpg);background-repeat: repeat;o in breve…background: url(star.jpg) repeat; NB: lo stesso risultato che quando abbiamo semplicemente aggiunto l’immagine di sfondo conbackground-image: url(star.jpg); senza specificare un valore al background-repeat. background-repeat: repeat-x; Con il valore repeat-x, l’immagine di sfondo è duplicata orizzontalmente. Esempio: background-image: url(star.jpg);background-repeat: repeat-x;o in breve…background: url(star.jpg) repeat-x; background-repeat: repeat-y; Con il valore repeat-y, l’immagine di sfondo è duplicata verticalmente. Esempio: background-image: url(star.jpg);background-repeat: repeat-y;o in breve…background: url(star.jpg) repeat-y; background-repeat: no-repeat; Con il valore no-repeat, l’immagine di sfondo non è duplicata e una unica istanza dell’immagine è visualizzata. Di default, l’immagine è posizionata in alto a sinistra. Esempio: background-image: url(star.jpg);background-repeat: no-repeat;o in breve…background: url(star.jpg) no-repeat; 3. background-position La proprietà css background-position permette di posizionare […]