Come aggiungere dei bordi personalizzati agli oggetti con il linguaggio HTML e CSS
Il bordo è una caratteristica presente in molti oggetti presenti nei post. Basta pensare alle immagini e alle tabelle ma l'attributo "border" è massicciamente presente anche nel codice dei template per specificare lo stile di widget, sidebar, linee, post, header e chi ne ha più ne metta. Insieme a questo tag vengono associati anche il colore che dovrà assumere e la sua forma.
I colori si sa che sono determinati dal codice HEX o RGB e si tratta di sei cifre esadecimali (HEX) o di una terna di numeri da 0 a 255 (RGB). La forma del bordo è invece data da tutta una serie di attributi che vi voglio presentare in forma grafica. Per inserire gli attributi di un bordo in una pagina HTML dobbiamo usare il tag style="border: groove #003366; 4px;"
Gli attributi in rosso determinano lo stile dei bordi: groove, double, ridge, dotted, inset, outset e solid. I codici in blu indicano il colore (#003366;) mentre 4px e la dimensione del bordo. Se volete modificare stile o dimensione dei bordi del vostro modello, andate su Design > Modifica HTML e cercate "border" mediante Ctrl+F. Effettuate le modifiche e salvate il modello. Ricordo che per eliminare un bordo basta inserire 0px come dimensione oppure si può usare l'espressione border:none;.
grazie :)
RispondiEliminaè possibile modificare i template predefiniti di blogger aggiungendo un doppio bordo sfumato, come nel mio template attuale? graficamente mi piace il mio blog così come è ora, ma è un po' lento da caricare e mi piacerebbe cercare di ricrearlo con i template di blogger...
RispondiElimina@filokalos
RispondiEliminaSe trovi il codice nel modello puoi personalizzarlo con gli stili elencati.
Comunque le sfumature in genere sono immagini tipo texture e non è HTML
Ciao Ernesto,
RispondiEliminaio ho inserito diversi widget degli ultimi articoli per etichetta, e per creare loro una cornice ho utilizzato le spiegazioni di questo articolo. Ho anche inserito dei margini affinchè il testo non risultasse troppo attaccato alla cornice, e fin qui tutto bene. Mi sono però accorta di una cosa: la grandezza delle cornici si allunga e si accorcia a seconda della lunghezza del titolo dei post, e questo fa sì che alcune cornici siano più vicine al bordo del blog, altre meno, altre ancora sono appiccicate tra di loro. Insomma, l'effetto estetico non è dei migliori.
Sai se c'è modo di inserire un altro tipo di cornice cui si possano dare delle dimensioni fisse, che non varino con il variare della lunghezza del titolo?
Grazie
@Dieta ...
RispondiEliminaTi rispondo con il cellulare e non ti posso dare link ma basta che all'interno di style="...." ci metta l'altezza e la larghezza cioè width:200px; e heigh:30px;
dentro border, non style border: ... width:200px ...
RispondiEliminaheight non heigh mannaggia alle tastiere dei cellulari
RispondiEliminaSai qual è il problema?
RispondiEliminaChe io il bordo l'ho inserito nel widget degli articoli per etichetta, poi però a seconda dell'etichetta ho creato dei riquadri di misura differente; quindi ad esempio la finestra degli ultimi articoli sulla dieta ha all'interno 3 post, quella delle news ne ha solo 1. Perciò non posso dare un'unica misura fissa per tutte le etichette. Pensi che posso inserire le misure dell'altezza e della larghezza della finestra all'interno del codice html di ogni gadget per etichetta creato? In tal caso, dove devo inserire la stringa?
@Dieta ...
EliminaLa vedo come una cosa oltremodo difficile perché alcuni gadget hanno un codice altri no. In alcuni è possibile inserire dei bordi, in altri no ...
Va beh,
Eliminaproverò a vedere cosa riesco a combinare, ma se le cose diventano troppo complicate chiudo un occhio e lascio tutto così com'è.
Grazie, Ernesto :)
Ti facio una domanda :per fare sfondo bianco e non avere nesun bordo come si pui fare con i novi modeli di blogger ?
RispondiElimina@blogulromanilor
EliminaSegui le indicazioni di questo post
http://www.ideepercomputeredinternet.com/2012/07/eliminare-bordi-immagini-blogger.html
Ciao Ernesto, ho un piccolo problema: quando provo ad inserire una pubblicità tramite il widget html/javascript mi compare automaticamente una cornice verde esterna, simile a quella che avevo inserito ad un widget che ho rimosso. Mi viene il dubbio che io l'avessi inserita nel posto sbagliato, e che sia rimasta come impostazione per ogni widget html che vado ad inserire. Solo che non riesco a trovarla nel codice e ad eliminarla... So solo che è una cornice verde di tipo solid. Riesci forse ad aiutarmi?
RispondiEliminaGrazie.
@DietaEDintorni
EliminaTu hai nel modello questo codice
#HTML16 {
border: 2px solid #80FF80;
padding: 10px 20px 10px 10px;
}
che forse avevi inserito precedentemente come hai detto. Adesso non ti serve a nulla e puoi eliminarlo tutto (compresa la parentesi graffa finale)
Grazie, ti adoro! La cornice maledetta se n'è andata ^^
EliminaPurtroppo non ci sono soluzioni miracolistiche. Devi cercare di modificare elemento per elemento usando appunto Firebug o il tool Ispeziona Elemento di Chrome
RispondiEliminahttp://www.ideepercomputeredinternet.com/2013/05/selettori-css-chrome-firefox.html
@#
Ciao,scusa se ti disturbo ma sto cercando di inserire nei titoli dei widget una cornice ma con il bordo stondato e non mi ricordo come si fà. Puoi mica aiutarmi?ti ringrazio in anticipo!
RispondiEliminaNon si può spiegare in un commento. Salvo il commento per poi farci un post nei prossimi giorni.
Elimina@#
Capisco,ti ringrazio molto!gentilissimo come sempre
Elimina