{"id":5979,"date":"2015-08-11T12:00:38","date_gmt":"2015-08-11T10:00:38","guid":{"rendered":"http:\/\/www.lemonskin.net\/io\/?p=5979"},"modified":"2026-03-13T21:49:02","modified_gmt":"2026-03-13T20:49:02","slug":"libreria-elementi-del-sito","status":"publish","type":"post","link":"https:\/\/www.lemonskin.net\/io\/5979\/","title":{"rendered":"IO.SDK"},"content":{"rendered":"\n<p>Questo articolo \u00e8 di carattere tecnico, serve a me per ricordarmi la struttura del codice degli elementi utilizzati nel sito.<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"1\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-1\">1<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-1\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"1\">SDK sta per Software Development Kit.<\/span><br> Ignoralo pure, oppure fatti un bel <em>trip<\/em> gratuito e molto colorato. :)<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading indice\" id=\"indice\">Indice dei contenuti<\/h2>\n\n\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#stili\">Classi e stili<\/a><\/li>\n\n\n\n<li><a href=\"#codici_html\">\u2605 Codici HTML utili<\/a><\/li>\n\n\n\n<li><a href=\"#cassetti\">Cassetti espandibili<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#cassetto_info\">Info<\/a><\/li>\n\n\n\n<li><a href=\"#cassetto_q-a\">Q&amp;A<\/a><\/li>\n\n\n\n<li><a href=\"#cassetto_aggiornamento\">Aggiornamento<\/a><\/li>\n\n\n\n<li><a href=\"#cassetto_importante\">Importante<\/a><\/li>\n\n\n\n<li><a href=\"#cassetto_alert\">Alert<\/a><\/li>\n\n\n\n<li><a href=\"#cassetto_antiquato\">Articolo antiquato<\/a><\/li>\n\n\n\n<li><a href=\"#cassetto_aggiornato\">Articolo aggiornato<\/a><\/li>\n\n\n\n<li><a href=\"#cassetto_colorato\">Cassetti colorati<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#nota\">Note<\/a><\/li>\n\n\n\n<li><a href=\"#CopiaClip\">CopiaClip()<\/a><\/li>\n\n\n\n<li><a href=\"#mostraNotifica\">mostraNotifica()<\/a><\/li>\n\n\n\n<li><a href=\"#lettore-multimediale\">Lettore multimediale<\/a><\/li>\n\n\n\n<li><a href=\"#file_multimediali\">Appoggio file multimediali<\/a> <span class=\"light\">[MEDIA]<\/span><\/li>\n\n\n\n<li><a href=\"#indice-contenuti-manuale\">Indice dei contenuti manuale<\/a><\/li>\n\n\n\n<li><a href=\"#recensioni\">Gestione recensioni<\/a> <span class=\"light\">(in lettura, in pausa, ecc.)<\/span><\/li>\n\n\n\n<li><a href=\"#link_colorbox\">Collegare un link a JQuery Colorbox<\/a><\/li>\n\n\n\n<li><a href=\"#footnote\">Footnote<\/a><\/li>\n\n\n\n<li><a href=\"#linee_guida\">Linee guida generali<\/a><\/li>\n<\/ul>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n\n\n<div class=\"wp-block-group stili_no_bordo\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"stili\">Classi e stili<\/h2>\n\n\n\n<p>Di seguito alcune classi di stili personalizzate da usare all&#8217;interno degli articoli.<\/p>\n\n\n\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>a_capo<\/summary>\n<p>Viene usata prevalentemente nel testo preformattato <span class=\"col_tag\">&lt;<span class=\"col_cmd\">pre<\/span>&gt;<\/span> per forzare il <em>word wrap<\/em>, perch\u00e9 di default non va automaticamente a capo.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted codice\">Questo \u00e8 un testo preformattato senza la classe <em class=\"par\">a_capo<\/em>. Il testo continua su un'unica riga, a meno che non sia stato inserito un invio a capo.<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted a_capo codice\">Questo \u00e8 un testo preformattato con la classe <em class=\"par\">a_capo<\/em>. Il testo va a capo automaticamente quando raggiunge il limite delle dimensioni della pagina.<\/pre>\n\n\n\n<details class=\"wp-block-details info is-layout-flow wp-block-details-is-layout-flow\"><summary>Nota<\/summary>\n<p>Questo non vale per tutti i browser. I pi\u00f9 stupidi \u2014 Safari per esempio \u2014 forzano sempre automaticamente il word wrap, spezzando codice che magari nelle intenzioni di chi lo ha pubblicato doveva apparire su un&#8217;unica riga.<\/p>\n<\/details>\n<\/details>\n\n\n\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>antiquato<\/summary>\n<p>Vedi <a href=\"#cassetti\">cassetti espandibili<\/a>.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>appendi_lista<\/summary>\n<p>Classe da utilizzare per &#8220;avvicinare&#8221; una nuova lista a una precedente, in modo che tutte le voci appaiano uniformi. Pu\u00f2 essere utile nel caso fosse necessario creare una divisone (ad esempio col &#8220;leggi tutto&#8221;), oppure per assegnare una differente visibilit\u00e0 a una delle due (farla apparire soltanto agli amministratori, ecc).<\/p>\n\n\n\n<p>Va applicata unicamente alla seconda lista (e ad altre eventualmente successive).<\/p>\n\n\n\n<details class=\"wp-block-details info is-layout-flow wp-block-details-is-layout-flow\"><summary>Nota<\/summary>\n<p>Non sempre \u00e8 necessaria. Per esempio all&#8217;interno dei cassettini le voci di due liste differenti sono allineate correttamente; quindi usalo quando necessario (nell&#8217;indice a inizio articolo, per esempio).<\/p>\n<\/details>\n\n\n\n<p><strong>Esempio di liste normali<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Questa \u00e8 la prima voce della prima lista<\/li>\n\n\n\n<li>Questa \u00e8 la seconda voce della prima lista<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Questa \u00e8 la prima voce della seconda lista<\/li>\n\n\n\n<li>Questa \u00e8 la seconda voce della seconda lista <\/li>\n<\/ul>\n\n\n\n<p><strong>Esempio con la classe <em class=\"col_par\">appendi_lista<\/em><\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Questa \u00e8 la prima voce della prima lista<\/li>\n\n\n\n<li>Questa \u00e8 la seconda voce della prima lista<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Questa \u00e8 la prima voce della seconda lista<\/li>\n\n\n\n<li>Questa \u00e8 la seconda voce della seconda lista <\/li>\n<\/ul>\n<\/details>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>blinking_cursor<\/summary>\n<p><em class=\"col_par\">blinking_cursor<\/em> riduce la distanza verticale della piccola immagine col medesimo nome che utilizzo come cursore lampeggiante quando voglio inserire una sorta di testo da computer anni &#8217;80. \u00c8 necessario assegnarla (unicamente) al paragrafo che precede il cursore (in questo caso &#8220;OK&#8221;).<\/p>\n\n\n\n<p><strong>Esempio<\/strong>:<\/p>\n\n\n\n<p>?SYNTAX ERROR<br>OK<\/p>\n\n\n\n<figure class=\"wp-block-image size-full blinking_cursor\"><img loading=\"lazy\" decoding=\"async\" width=\"13\" height=\"16\" src=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2023\/10\/blinking-cursor.gif\" alt=\"\" class=\"wp-image-41452\"\/><\/figure>\n<\/details>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>censura\/ evanescente<\/summary>\n<p><em class=\"col_par\">censura<\/em> permette di <span class=\"censura\">censurare<\/span> parole o frasi in modo che diventino evidenti soltanto <span class=\"censura\">passandoci sopra il mouse<\/span>.<\/p>\n\n\n\n<p><em class=\"col_par\">evanescente<\/em> fa la stessa identica cosa, ma preferisco tenere separate le parolacce da <span class=\"evanescente\">altre tipologie di scritte<\/span>.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>centoxcento \/ centopercento<\/summary>\n<p><em class=\"col_par\">centoxcento<\/em> o <em class=\"col_par\">centopercento<\/em> permettono di massimizzare la larghezza di un elemento al 100%.<\/p>\n<\/details>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>centro \/ centrato<\/summary>\n<p><em class=\"col_par\">centrato<\/em> permette di centrare velocemente un testo.<\/p>\n\n\n\n<p class=\"centrato\"><span style=\"color:#ff6900\" class=\"color\">come in questo caso.<\/span><\/p>\n<\/details>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>compact<\/summary>\n<p><em class=\"col_par\">compact<\/em> va usato solo nei blocchi di tipo TAB per ridurre lo spazio tra le linguette.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs has-layout-horizontal-center\" data-active-tab=\"0\"><ul class=\"wp-block-getwid-tabs__nav-links\"><\/ul>\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">1<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>Questo \u00e8 un blocco TAB standard.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">2<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">3<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">4<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">5<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">6<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">7<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">8<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">9<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">10<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs compact has-layout-horizontal-center\" data-active-tab=\"0\"><ul class=\"wp-block-getwid-tabs__nav-links\"><\/ul>\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">1<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>Questo \u00e8 un blocco TAB con classe <em class=\"col_par\">compact<\/em>.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">2<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">3<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">4<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">5<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">6<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">7<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">8<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">9<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">10<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<p>-vuoto-<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>L&#8217;avevo utilizzato in una precedente versione della mia <a rel=\"noreferrer noopener\" href=\"https:\/\/www.lemonskin.net\/io\/20265\/\" data-type=\"post\" data-id=\"20265\" target=\"_blank\">Tolkien-libreria<\/a>.<\/p>\n<\/details>\n<\/div><\/div>\n\n\n\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>crisp \/ nocrisp \/ nc<\/summary>\n<p>Da quando ho preso l&#8217;Apple <a href=\"https:\/\/www.lemonskin.net\/io\/49976\/\" data-type=\"post\" data-id=\"49976\" target=\"_blank\" rel=\"noreferrer noopener\">Studio Display<\/a> ho dovuto rendere le immagini del sito pi\u00f9 contrastate, altrimenti venivano automaticamente <em>stretch<\/em>-ate e, di conseguenza, ammorbidite. Adesso sui display con altissimo DPI (quelli Retina) tale contrasto viene applicato automaticamente.<\/p>\n\n\n\n<p>Ci potrebbero essere, tuttavia, casi in cui magari preferisco lasciarle pi\u00f9 morbide, oppure renderle forzatamente pi\u00f9 nitide; in questi caso posso avvalermi delle classi <em class=\"col_par\">crisp<\/em> e <em class=\"col_par\">nocrisp<\/em> (o anche  <em class=\"col_par\">nc<\/em>, che \u00e8 semplicemente una forma abbreviata di  <em class=\"col_par\">nocrisp<\/em>, cos\u00ec la ricordo meglio).<\/p>\n\n\n\n<p>Esempio:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image crisp\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"128\" height=\"128\" src=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2015\/08\/Arcobalenino.png\" alt=\"\" class=\"wp-image-50206\" srcset=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2015\/08\/Arcobalenino.png 128w, https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2015\/08\/Arcobalenino-120x120.png 120w\" sizes=\"auto, (max-width: 128px) 100vw, 128px\" \/><figcaption class=\"wp-element-caption\"><em class=\"col_par\">crisp<\/em><\/figcaption><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image nc\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"128\" height=\"128\" src=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2015\/08\/Arcobalenino.png\" alt=\"\" class=\"wp-image-50206\" srcset=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2015\/08\/Arcobalenino.png 128w, https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2015\/08\/Arcobalenino-120x120.png 120w\" sizes=\"auto, (max-width: 128px) 100vw, 128px\" \/><figcaption class=\"wp-element-caption\"><em class=\"col_par\">nocrisp \/ nc<\/em><\/figcaption><\/figure>\n<\/div><\/div>\n<\/div>\n<\/details>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>dead_link<\/summary>\n<p><em class=\"col_par\">dead_link<\/em> viene utilizzato quando un sito linkato all&#8217;interno di un articolo non \u00e8 pi\u00f9 raggiungibile.<\/p>\n\n\n\n<p><strong>Esempio<\/strong>:<\/p>\n\n\n\n<p>Questo <span class=\"dead_link\">sito web<\/span> non esiste pi\u00f9.<\/p>\n<\/details>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>dialogo<\/summary>\n<p><em class=\"col_par\">dialogo<\/em> consente di trasformare una comune lista in una sorta di dialogo tra personaggi:<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"2\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-2\">2<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-2\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"2\">Questo perch\u00e9 l&#8217;intelligentissimo html prevede di utilizzare delle immagini in sostituzione dei bullet ma non dei semplici caratteri alfanumerici; cos\u00ec ho rimediato con il CSS.<\/span><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Questa \u00e8 una semplice lista di tre elementi<\/li>\n\n\n\n<li>In effetti appare proprio<\/li>\n\n\n\n<li>Come una normalissima lista<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list dialogo\">\n<li>Io invece sono una lista<\/li>\n\n\n\n<li>formattata con la classe <em class=\"col_par\">dialogo<\/em><\/li>\n\n\n\n<li>Non sono molto pi\u00f9 figa?<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/www.lemonskin.net\/io\/21550\/\" data-type=\"post\" data-id=\"21550\" target=\"_blank\" rel=\"noreferrer noopener\">Qui c&#8217;\u00e8 un esempio<\/a>.<\/p>\n<\/details>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>glitch<\/summary>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"glitch\" data-text=\"* DANGER *\">* DANGER *<\/div>\n\n\n\n<p>Un simpatico effetto di testo fuori sincronia che per\u00f2, oltre alla classe, ha bisogno anche del parametro <span class=\"col_par\">data-text<\/span> valorizzato (solitamente con lo stesso contenuto di testo, ma non obbligatoriamente).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"sintassi\">Sintassi<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted codice\"><span class=\"tag\">&lt;<span class=\"cmd\">div<\/span> <span class=\"par\">class=<\/span>\"<span class=\"val\">glitch<\/span>\" <span class=\"par\">data-text=<\/span>\"<span class=\"val\">TESTO<\/span>\"&gt;<span class=\"val\">TESTO<\/span>&lt;<span class=\"cmd\">\/div<\/span>&gt;<\/span><\/pre>\n<\/details>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>indent \/ noindent<\/summary>\n<p class=\"indent\"><em class=\"col_par\">indent<\/em> crea una indentazione di 25 pixel nella prima riga di un paragrafo. Quando si vuole che tutti i paragrafi di un articolo siano indentati, come nel caso dell&#8217;articolo sul primo capitolo della Compagnia dell&#8217;Anello, \u00e8 pi\u00f9 veloce inserire <em>.entry-content { text-indent: 25px; }<\/em> nel campo <span class=\"col_val\">Extra CSS<\/span>.<\/p>\n\n\n\n<p><em class=\"col_par\">noindent<\/em> rimuove l&#8217;indentazione, specialmente nel caso in cui sia stata impostata nel campo <span class=\"col_val\">Extra CSS<\/span>.<\/p>\n<\/details>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>indice \/ nascondi \/ nascosto<\/summary>\n<p><em class=\"col_par\">indice<\/em> \u00e8 utilizzata per nascondere gli indici degli articoli molto lunghi dalla <em>home page<\/em>, dalla <em>ricerca<\/em> o dagli <em>archivi<\/em>. Compariranno soltanto all&#8217;interno degli articoli.<\/p>\n\n\n\n<p><em class=\"col_par\">nascondi<\/em> fa l&#8217;esatto contrario: mostra qualcosa in <em>home page<\/em>, <em>ricerca<\/em> o <em>archivi<\/em> ma non all&#8217;interno degli articoli. Per esempio se \u00e8 necessario inserire messaggi particolari (come nel caso di alcune pagine dinamiche).<\/p>\n\n\n\n<p><em class=\"col_par\">nascosto<\/em> nasconde un elemento ovunque.<\/p>\n<\/details>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>light \/ verylight<\/summary>\n<p>La classe <em class=\"col_par\">light<\/em> inserisce <span class=\"light\">una trasparenza del 50%<\/span> a un elemento.<\/p>\n\n\n\n<p>La classe <em class=\"col_par\">verylight<\/em> inserisce <span class=\"verylight\">una trasparenza del 15%<\/span> a un elemento.<\/p>\n<\/details>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>lista_figa \/ lista_figa_separatore<\/summary>\n<p>Rende esteticamente accattivante una lista numerata.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ol class=\"wp-block-list lista_figa\">\n<li>Ciao, io sono una lista&#8230;<\/li>\n\n\n\n<li>&#8230; nella quale ogni voce&#8230;<\/li>\n\n\n\n<li>&#8230; ha un numerino colorato.<\/li>\n<\/ol>\n\n\n\n<p>Utilizzando il tag <em class=\"col_par\">indentlista_figa_separatore<\/em> \u00e8 possibile formattarla con dei piccoli separatori visivi:<\/p>\n\n\n\n<ol class=\"wp-block-list lista_figa_separatore\">\n<li>Ciao, io sono una lista&#8230;<\/li>\n\n\n\n<li>&#8230; nella quale ogni voce&#8230;<\/li>\n\n\n\n<li>&#8230; ha un numerino colorato.<\/li>\n<\/ol>\n<\/details>\n\n\n\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>lista_larga<\/summary>\n<p>Separa in modo evidente gli elementi di una lista.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Questa \u00e8 una lista standard.<\/li>\n\n\n\n<li>Tutte le voci sono vicine.<\/li>\n\n\n\n<li>Ideale per un indice.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list lista_larga\">\n<li>Questa invece \u00e8 una lista con classe <em class=\"col_par\">lista_larga<\/em>.<\/li>\n\n\n\n<li>Le voci sono molto pi\u00f9 distanti. \u00c8 ideale quando il testo contenuto \u00e8 molto lungo, e questo crea dei paragrafi.<\/li>\n\n\n\n<li>In questo modo tutto \u00e8 pi\u00f9 pulito.<\/li>\n<\/ul>\n<\/details>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>maiuscoletto<\/summary>\n<p><span class=\"maiuscoletto\">Formatta il Testo in Maiuscoletto<\/span>.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>margine_ridotto<\/summary>\n<p>Riduce di 15px il margine superiore di un elemento. Lo utilizzo principalmente sui titoli interni dei cassetti delle recensioni (come &#8220;ulteriori record&#8221; o &#8220;obiettivi degni di nota&#8221;).<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>mistero<\/summary>\n<p>Aggiungi la classe <em class=\"col_par\">mistero<\/em> a un qualsiasi paragrafo vuoto (mettici almeno uno spazio, perch\u00e9 nei cassettini i paragrafi vuoti vengono nascosti) per creare un terrificante ammonimento di Nosferatu:<\/p>\n\n\n\n<p class=\"mistero\">&nbsp;<\/p>\n<\/details>\n<\/div><\/div>\n\n\n\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>noborder \/ nobordo<\/summary>\n<p>Per eliminare eventuali bordi a un elemento, inserisci la classe <em class=\"col_par\">noborder<\/em> o <em class=\"col_par\">nobordo<\/em>.<\/p>\n\n\n\n<p>Magari occorre aggiungere qualche tag all&#8217;interno di style.css, nella sezione &#8220;stili&#8221;.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>nopadding<\/summary>\n<p>Finora ho utilizzato questa classe prevalentemente per l&#8217;elemento TAB. Rimuove il padding e i bordi sinistro e destro all&#8217;interno del DIV, in modo che le immagini possano mantenere la dimensione standard di 666\/730 pixel<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"3\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-3\">3<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-3\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"3\">Misure da rivedere, visto che con l&#8217;abbandono di Collapse-O-Magic e l&#8217;adozione di &lt;details&gt;&lt;summary&gt; ho guadagnato pi\u00f9 spazio all&#8217;interno dei cassetti.<\/span> (cos\u00ec non si sputtana il watermark), e non sono costretto a modificarle.<\/p>\n\n\n\n<p>Esempio di TAB normale:<\/p>\n\n\n\n<div class=\"wp-block-getwid-tabs has-layout-horizontal-center\" data-active-tab=\"0\"><ul class=\"wp-block-getwid-tabs__nav-links\"><\/ul>\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">1<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"666\" height=\"400\" src=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2022\/09\/nopadding-esempio-1.jpg\" alt=\"\" class=\"wp-image-30905\" srcset=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2022\/09\/nopadding-esempio-1.jpg 666w, https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2022\/09\/nopadding-esempio-1-300x180.jpg 300w\" sizes=\"auto, (max-width: 666px) 100vw, 666px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">2<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"666\" height=\"400\" src=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2022\/09\/nopadding-esempio-2.jpg\" alt=\"\" class=\"wp-image-30906\" srcset=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2022\/09\/nopadding-esempio-2.jpg 666w, https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2022\/09\/nopadding-esempio-2-300x180.jpg 300w\" sizes=\"auto, (max-width: 666px) 100vw, 666px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>Esempio di TAB con classe <em class=\"col_par\">nopadding<\/em>:<\/p>\n\n\n\n<div class=\"wp-block-getwid-tabs nopadding has-layout-horizontal-center\" data-active-tab=\"0\"><ul class=\"wp-block-getwid-tabs__nav-links\"><\/ul>\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">1<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"666\" height=\"400\" src=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2022\/09\/nopadding-esempio-1.jpg\" alt=\"\" class=\"wp-image-30905\" srcset=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2022\/09\/nopadding-esempio-1.jpg 666w, https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2022\/09\/nopadding-esempio-1-300x180.jpg 300w\" sizes=\"auto, (max-width: 666px) 100vw, 666px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-getwid-tabs__nav-link\"><span class=\"wp-block-getwid-tabs__title-wrapper\"><a href=\"#\"><span class=\"wp-block-getwid-tabs__title\">2<\/span><\/a><\/span><\/div><div class=\"wp-block-getwid-tabs__tab-content-wrapper\"><div class=\"wp-block-getwid-tabs__tab-content\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"666\" height=\"400\" src=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2022\/09\/nopadding-esempio-2.jpg\" alt=\"\" class=\"wp-image-30906\" srcset=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2022\/09\/nopadding-esempio-2.jpg 666w, https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2022\/09\/nopadding-esempio-2-300x180.jpg 300w\" sizes=\"auto, (max-width: 666px) 100vw, 666px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n<\/details>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>piccolo \/ medio \/ grande<\/summary>\n<p>Generalmente \u00e8 meglio utilizzare la formattazione del testo di Gutenberg ma, in caso di esigenze particolari possono sono disponibili queste classi:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><span class=\"piccolo\">piccolo<\/span><\/td><td><span class=\"light\">0.8em<\/span><\/td><\/tr><tr><td><span class=\"medio\">medio<\/span><\/td><td><span class=\"light\">1.2em<\/span><\/td><\/tr><tr><td><span class=\"grande\">grande<\/span><\/td><td><span class=\"light\">1.5em<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n<\/details>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>segreto<\/summary>\n<p>La classe <em class=\"col_par\">segreto<\/em> serve a nascondere un link all&#8217;interno del testo. Non viene mostrato sottolineato e il suo colore \u00e8 molto vicino a quello del testo normale. \u00c8 \u00e8 possibile identificarlo osservando il cambiamento del cursore quando il mouse gli passa sopra.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"sintassi\">Sintassi:<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted codice\"><span class=\"tag\">&lt;<span class=\"cmd\">span<\/span> <span class=\"par\">class=<\/span>\"<span class=\"val\">segreto<\/span>\"&gt;<span class=\"val\">LINK<\/span>&lt;<span class=\"cmd\">\/span<\/span>&gt;<\/span><\/pre>\n\n\n\n<p class=\"segreto\">Questo \u00e8 un <span class=\"segreto\"><a href=\"javascript:alert('Ciao!');\">esempio di un link<\/a><\/span> nascosto.<\/p>\n<\/details>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details col_par sticky is-layout-flow wp-block-details-is-layout-flow\"><summary>sticky<\/summary>\n<p>La classe <em class=\"col_par\">sticky<\/em> permette di bloccare un elemento in cima alla pagina quando si scrolla in basso. Inserendola all&#8217;interno di un contenitore, per esempio un <span class=\"tag\">&lt;<\/span><span class=\"cmd\">div<\/span><span class=\"tag\">&gt;<\/span>, questa rimarr\u00e0 confinata all&#8217;interno.<\/p>\n\n\n\n<p>Per un discorso troppo complesso da spiegare qui (ma nella riga ~2211 di style.css dovresti trovare il codice) \u00e8 necessario aggiungere la classe <em class=\"col_par\">sticky<\/em> anche al blocco [details] nel caso tu lo voglia utilizzare al suo interno (come in questo esempio).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"esempio\">Esempio:<\/h4>\n\n\n<div class=\"wp-block-image sticky\">\n<figure class=\"aligncenter size-full advgb-dyn-fb0cc74e\"><img loading=\"lazy\" decoding=\"async\" width=\"26\" height=\"36\" src=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2015\/04\/relativity_spok.png\" alt=\"\" class=\"wp-image-4913\"\/><figcaption class=\"wp-element-caption\">Ciao!<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Da questo momento Spok rimarr\u00e0 in cima alla pagina fino al termine del cassettino.<\/p>\n\n\n\n<div style=\"height:350px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/details>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details col_par sticky is-layout-flow wp-block-details-is-layout-flow\"><summary>tab_intestazione<\/summary>\n<p>La classe <span class=\"par\">tab_intestazione<\/span> abbinata a <span class=\"par\">sticky<\/span> consente di avere l&#8217;intestazione di una colonna fluttuante:<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-table sticky tab_intestazione\"><table><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Nuova traduzione<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Vecchia traduzione<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table tab_intestazione\"><table><tbody><tr><td class=\"has-text-align-left\" data-align=\"left\">&#8220;Dori era un bravo tipo.&#8221;<\/td><td class=\"has-text-align-left\" data-align=\"left\">&#8220;Dori era un buon diavolo.&#8221;<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">&#8220;Serviti pure un\u2019altra volta, ce n\u2019\u00e8 quanto ne vuoi e anche di pi\u00f9!&#8221;<\/td><td class=\"has-text-align-left\" data-align=\"left\">&#8220;Serviti ancora, ce n\u2019\u00e8 in abbondanza e d\u2019avanzo!&#8221;<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">&#8220;L\u00ec faceva un freddo cane&#8230;&#8221;<\/td><td class=\"has-text-align-left\" data-align=\"left\">&#8220;Lass\u00f9 il freddo stava diventando pi\u00f9 intenso&#8230;&#8221;<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">&#8220;[Gollum] stava pagaiando come un pazzo&#8230;&#8221;<\/td><td class=\"has-text-align-left\" data-align=\"left\">&#8220;[Gollum] stava remando furiosamente&#8230;&#8221;<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">&#8220;Sebbene si sentissero molto sollevati, erano anche malmostosi per quello spavento inutile.&#8221;<\/td><td class=\"has-text-align-left\" data-align=\"left\">&#8220;Sebbene fossero molto sollevati, si mostrarono un po\u2019 seccati di essere stati spaventati per niente.&#8221;<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">&#8220;\u2026 non riesco a stare dietro alla lingua di questi uccelli\u2026&#8221;<\/td><td class=\"has-text-align-left\" data-align=\"left\">&#8220;\u2026 non riesco a comprendere il linguaggio di questi uccelli\u2026&#8221;<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">[Il vecchio Carc] &#8220;\u2026 e aveva la testa pelata.&#8221;<br><\/td><td class=\"has-text-align-left\" data-align=\"left\">&#8220;\u2026 e la cima della sua testa era calva.&#8221;<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">&#8220;Ci credo, ma sono inchiodato qui fino a mezzanotte.&#8221;<br><\/td><td class=\"has-text-align-left\" data-align=\"left\">&#8220;Vorrei ben dire! Ma io sono costretto a stare qui fino a mezzanotte.&#8221;<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">&#8220;La mia opinione non cambia nel giro di qualche alzata e calata del sole.&#8221;<\/td><td class=\"has-text-align-left\" data-align=\"left\">&#8220;Io non cambio parere coll\u2019alba e il tramonto di pochi soli.&#8221;<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div><\/div>\n\n\n\n<p>\u00c8 necessario creare due blocchi di colonne separate e applicare la classe <span class=\"par\">tab_intestazione<\/span> a entrambi (per mantenere le dimensioni al 100% con le colonne al 50%), e la classe <span class=\"par\">sticky<\/span> alla sola intestazione. inoltre i due blocchi di colonne vanno raggruppati, altrimenti l&#8217;intestazione si estende fino in fondo all&#8217;articolo.<\/p>\n\n\n\n<p>Nel dubbio guarda l&#8217;articolo <a href=\"https:\/\/www.lemonskin.net\/io\/45761\/#qualche-confronto-ecd22498-ef78-45d9-8c2b-57a1b704df2c\" target=\"_blank\" rel=\"noreferrer noopener\">La nuova traduzione dello Hobbit<\/a>.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details col_par is-layout-flow wp-block-details-is-layout-flow\"><summary>zoom<\/summary>\n<p>La classe <span class=\"par\">zoom<\/span> consente di applicare un simpatico effetto zoom sulle immagini (generalmente associate a un link):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full zoom\"><img loading=\"lazy\" decoding=\"async\" width=\"26\" height=\"36\" src=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2015\/04\/relativity_spok.png\" alt=\"\" class=\"wp-image-4913\"\/><figcaption class=\"wp-element-caption\">Ciao!<\/figcaption><\/figure>\n<\/details>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Classi Tabelle<\/summary>\n<p>Di default il testo all&#8217;interno delle tabelle \u00e8 allineato a sinistra ma \u00e8 possibile assegnare una di queste classi speciali al campo &#8220;Avanzate&#8221; &gt; &#8220;Classe\/i CSS aggiuntiva\/e&#8221; per modificare questo comportamento:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table style=\"width:100%;\"><tbody><tr><td><span class=\"col_par\">tabella_sx<\/span><\/td><td class=\"tabella_sx\">Allineamento a sx (default)<\/td><\/tr><tr><td><span class=\"col_par\">tabella_c<\/span><\/td><td class=\"tabella_c\">Allineamento al centro<\/td><\/tr><tr><td><span class=\"col_par\">tabella_dx<\/span><\/td><td class=\"tabella_dx\">Allineamento a destra<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/details>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Classi di colore per formattazione codice CSS\/HTML<\/summary>\n<p>Ci sono quattro classi di colore per formattare il codice CSS o HTML mostrato in questo SDK, ma possono essere impiegate ovunque.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><span class=\"col_tag\">col_tag<\/span><\/td><td>Evidenzia la punteggiatura.<\/td><\/tr><tr><td><span class=\"col_cmd\">col_cmd<\/span><\/td><td>Evidenzia i comandi.<\/td><\/tr><tr><td><span class=\"col_par\">col_par<\/span><\/td><td>Evidenzia i parametri o, in corsivo, le classi.<\/td><\/tr><tr><td><span class=\"col_val\">col_val<\/span><\/td><td>Evidenzia i valori.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"esempio\">esempio<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted codice\"><span class=\"tag\">&lt;<\/span><span class=\"cmd\">img<\/span> <span class=\"par\">src=<\/span><span class=\"tag\">\"<\/span><span class=\"val\">pippo.png<\/span><span class=\"tag\">\"<\/span> <span class=\"par\">title=<\/span><span class=\"tag\">\"<\/span><span class=\"val\">Questo \u00e8 un esempio<\/span><span class=\"tag\">\"<\/span><span class=\"tag\">&gt;<\/span><\/pre>\n\n\n\n<p>Quando utilizzate all&#8217;interno di un blocco di testo preformattato, si pu\u00f2 assegnare la classe <em class=\"col_par\">codice<\/em> al <span class=\"col_tag\">&lt;<span class=\"col_cmd\">pre<\/span>&gt;<\/span> e usare nomi di classe semplificati: <em class=\"col_tag\">tag<\/em>, <em class=\"col_cmd\">cmd<\/em>, <em class=\"col_par\">par<\/em>, <em class=\"col_val\">val<\/em>.<\/p>\n<\/details>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"#indice\">Torna al menu<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"codici_html\">\u2605 Codici HTML utili<\/h2>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Simboli<\/summary>\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td>\u2318<\/td><td>\u2325&nbsp;&nbsp;&nbsp;\u2303<\/td><\/tr><tr><td>\u2606<\/td><td>&amp;star;<\/td><\/tr><tr><td>\u2605<\/td><td>&amp;starf;<\/td><\/tr><tr><td><strong>\u2019<\/strong><\/td><td>&amp;#8217; <sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"4\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-4\">4<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-4\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"4\">Questo apostrofo \u00e8 da utilizzare all&#8217;interno di stringhe HTML contenute tra virgolette singole, come ad esempio i nomi di libri e videogiochi all&#8217;interno dei tag \n<em>expand<\/em>.<\/span><\/td><\/tr><tr><td><strong>\u00ab<\/strong><\/td><td>&amp;laquo;<\/td><\/tr><tr><td><strong>\u00bb<\/strong><\/td><td>&amp;raquo;<\/td><\/tr><tr><td>\u2190<\/td><td>&amp;larr;<\/td><\/tr><tr><td>\u2192<\/td><td>&amp;rarr;<\/td><\/tr><tr><td>\u2191<\/td><td>&amp;uarr;<\/td><\/tr><tr><td>\u2193<\/td><td>&amp;darr;<\/td><\/tr><tr><td>&#x2196;<\/td><td>&amp;noArr;<\/td><\/tr><tr><td>&#x2197;<\/td><td>&amp;neArr;<\/td><\/tr><tr><td>&#x2199;<\/td><td>&amp;soArr;<\/td><\/tr><tr><td>&#x2198;<\/td><td>&amp;seArr;<\/td><\/tr><tr><td>&#x2194;<\/td><td>&amp;harr;<\/td><\/tr><tr><td>\u21b5<\/td><td>&amp;crarr;<\/td><\/tr><tr><td>&#x25aa;<\/td><td>&amp;#9642;<\/td><\/tr><tr><td>\u2022<\/td><td>&amp;bull;<\/td><\/tr><tr><td>\u00bd<\/td><td>&amp;frac12;<\/td><\/tr><tr><td>\u00b9<\/td><td>&amp;sup1;<\/td><\/tr><tr><td>\u00b2<\/td><td>&amp;sup2;<\/td><\/tr><tr><td>\u00b3<\/td><td>&amp;sup3;<\/td><\/tr><tr><td>\u00a9<\/td><td>&amp;copy;<\/td><\/tr><tr><td>\u00ae<\/td><td>&amp;reg;<\/td><\/tr><tr><td>&#x2122;<\/td><td>&amp;#8482;<\/td><\/tr><tr><td>\u20ac<\/td><td>&amp;euro;<\/td><\/tr><tr><td>\u00b1 <\/td><td>&amp;plusmn; <\/td><\/tr><tr><td>&#x2665;<\/td><td>&amp;hearts;<\/td><\/tr><tr><td>&#x2666;<\/td><td>&amp;diams;<\/td><\/tr><tr><td>&#x2663;<\/td><td>&amp;clubs;<\/td><\/tr><tr><td>&#x2660;<\/td><td>&amp;spades;<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Punteggiatura<\/summary>\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td>\u2019<\/td><td>&amp;rsquo;<\/td><td><span class=\"light\">per quando l\u2019apice normale da fastidio ai DB<\/span><\/td><\/tr><tr><td>\u201c<\/td><td>&amp;ldquo;<\/td><td><\/td><\/tr><tr><td>\u201d<\/td><td>&amp;rdquo;<\/td><td><span class=\"light\">\u201cvirgolette finali alte\u201d<\/span><\/td><\/tr><tr><td>\u201e <\/td><td>&amp;bdquo;<\/td><td><span class=\"light\">\u201cvirgolette finali basse\u201e<\/span><\/td><\/tr><tr><td>\u00ab<\/td><td>&amp;laquo;<\/td><td><\/td><\/tr><tr><td>\u00bb<\/td><td>&amp;raquo;<\/td><td><\/td><\/tr><tr><td>&lt;<\/td><td>&amp;lt;<\/td><td><\/td><\/tr><tr><td>&gt;<\/td><td>&amp;gt;<\/td><td><\/td><\/tr><tr><td>[<\/td><td>&amp;#91;<\/td><td><\/td><\/tr><tr><td>]<\/td><td>&amp;#93;<\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Simboli senza codice <em>(fai copia e incolla)<\/em><\/summary>\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td>\u21e7<\/td><td>\u2055<\/td><td>\u266a<\/td><td>\u266b<\/td><td>\u266c<\/td><td>\u2b51<\/td><td>\u2b52<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td>\u2780<\/td><td>\u2781<\/td><td>\u2782<\/td><td>\u2783<\/td><td>\u2784<\/td><td>\u2785<\/td><td>\u2786<\/td><td>\u2787<\/td><td>\u2788<\/td><td>\u2789<\/td><\/tr><tr><td>\u278a<\/td><td>\u278b<\/td><td>\u278c<\/td><td>\u278d<\/td><td>\u278e<\/td><td>\u278f<\/td><td>\u2790<\/td><td>\u2791<\/td><td>\u2792<\/td><td>\u2793<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/details>\n\n\n\n<p><a href=\"https:\/\/symbl.cc\/it\/\" target=\"_blank\" rel=\"noreferrer noopener\">Codici HTML standard<\/a>.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/unicode-explorer.com\/lists\" target=\"_blank\">Simboli Unicode<\/a>.<\/p>\n\n\n\n<p><a href=\"https:\/\/fontawesome.com\/icons\" target=\"_blank\" rel=\"noreferrer noopener\">Awesome fonts<\/a>.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" aria-label=\"Altri simboli geometrici utili (apre in una nuova scheda)\" href=\"https:\/\/www.w3schools.com\/charsets\/ref_utf_geometric.asp\" target=\"_blank\">Altri simboli geometrici utili<\/a>.<\/p>\n\n\n\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"#indice\">Torna al menu<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"cassetti\">Cassetti espandibili<\/h2>\n\n\n\n<p>Quando \u00e8 necessario inserire un cassetto espandibile, puoi utilizzare il blocco <em>Dettagli<\/em> di Gutenberg:<\/p>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Ciao, io sono un cassetto espandibile<\/summary>\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Come me (aprimi)&#8230;<\/summary>\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\" open><summary>Alcuni cassetti possono apparire automaticamente aperti<\/summary>\n<p>Chiudi, che tira aria! :)<\/p>\n<\/details>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>\u2026 e me<\/summary>\n<p>All&#8217;interno di un cassetto espandibile si pu\u00f2 inserire qualsiasi blocco di Guternberg. Io, per esempio, sono un paragrafo.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Al mio interno si possono inserire altri cassetti<\/summary>\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>E cos\u00ec via&#8230;<\/summary>\n<p>Ciao bella gioia!<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>&#8230; l&#8217;uno dentro l&#8217;altro&#8230;<\/summary>\n<p>Ciao cipollino!<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>&#8230; all&#8217;infinito<\/summary>\n<p>Ciao ciao!<\/p>\n<\/details>\n<\/details>\n<\/details>\n\n\n\n<p>Non \u00e8 necessario configurare niente, semplicemente scegliere il titolo e se deve apparire aperto o no. Possono essere assegnate eventuali classi.<\/p>\n\n\n\n<details class=\"wp-block-details info is-layout-flow wp-block-details-is-layout-flow\"><summary>Gestione manuale (codice HTML)<\/summary>\n<p>Se \u00e8 necessario formattare in modo particolare il titolo (come nelle pagine dei <em>Libri<\/em> e dei <em>Videogiochi<\/em>, \u00e8 necessario creare il blocco in HTML, nel seguente modo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;details id=\"<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">eventuale ID<\/mark>\"&gt;\n&lt;summary&gt;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">titolo con eventuali tag HTML<\/mark>&lt;\/summary&gt;\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">Contenuto del cassetto<\/mark>\n&lt;\/details&gt;<\/pre>\n\n\n\n<p>\u00c8 inoltre possibile separare le righe prima e dopo <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">Contenuto del cassetto<\/mark> in modo da poter continuare a utilizzare i blocchi di Gutenberg come contenuto:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;details id=\"<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">eventuale ID<\/mark>\"&gt;\n&lt;summary&gt;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">titolo con eventuali tag HTML<\/mark>&lt;\/summary&gt;<\/pre>\n\n\n\n<p class=\"has-text-align-center\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">Blocchi di Gutenberg<\/mark><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;\/details&gt;<\/pre>\n\n\n\n<p>Nel caso sia necessario un secondo campo allineato a destra, si pu\u00f2 ricorrere a uno span con classe <span class=\"col_par\">dx<\/span> (o <span class=\"col_par\">destra<\/span>, o <span class=\"col_par\">alignright)<\/span>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;details&gt;\n&lt;summary&gt;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">Titolo<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;span class=\"dx\"&gt;<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">Scritta a destra<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;\/span&gt;<\/mark>&lt;\/summary&gt;\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">Contenuto del cassetto<\/mark>\n&lt;\/details&gt;<\/pre>\n\n\n\n<p>Questo \u00e8 il risultato:<\/p>\n\n\n<details>\n<summary>Titolo<span class=\"dx\">Scritta a destra<\/span><\/summary>\n<p><span class=\"has-inline-color has-vivid-cyan-blue-color\">Contenuto del cassetto<\/span><br \/>\n<\/details>\n\n\n\n<p>Per inserire una nota all&#8217;interno di un cassetto manuale (per esempio nelle recensioni di libri e videogiochi), puoi usare il seguente formato:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">&lt;!-- wp:details {\"summary\":\"Nota\",\"className\":\"info\"} --&gt;<\/mark>\n&lt;details class=\"wp-block-details info\"&gt;&lt;summary&gt;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">Nota<\/mark>&lt;\/summary&gt;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">&lt;!-- wp:paragraph --&gt;<\/mark>\n&lt;p&gt;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">TESTO<\/mark>&lt;\/p&gt;\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">&lt;!-- \/wp:paragraph --&gt;&lt;\/details&gt;\n&lt;!-- \/wp:details --&gt;<\/mark><\/pre>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cassetto_info\">Info<\/h3>\n\n\n\n<p>Utilizza la classe <span class=\"col_par\">info<\/span> per realizzare un cassettino (solitamente chiuso) contenente informazioni utili.<\/p>\n\n\n\n<p>La classe <span class=\"col_par\">informazioni<\/span> fa la stessa identica cosa; ma, siccome sono stato cos\u00ec furbo di usare una classe <span class=\"col_par\">info<\/span> (che fa un&#8217;altra cosa) anche all&#8217;interno delle recensioni di libri e videogiochi, per evitare conflitti in quel caso dovr\u00f2 avvalermi di questa.<\/p>\n\n\n\n<details class=\"wp-block-details info is-layout-flow wp-block-details-is-layout-flow\"><summary>Istruzioni per la navigazione<\/summary>\n<p>All&#8217;interno di questo cassetto si potranno trovare informazioni utili e tutorial.<\/p>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cassetto_q-a\">Domande e risposte<\/h3>\n\n\n\n<p>Utilizza la classe <span class=\"col_par\">domanda<\/span> per realizzare un cassettino (solitamente chiuso) contenente domande e risposte.<\/p>\n\n\n\n<details class=\"wp-block-details domanda is-layout-flow wp-block-details-is-layout-flow\"><summary>Qual \u00e8 il colmo di un pittore?<\/summary>\n<p>Avere quadri che non contano e conti che non quadrano.<\/p>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cassetto_aggiornamento\">Aggiornamento<\/h3>\n\n\n\n<p>Gli aggiornamenti all&#8217;interno del sito vanno inseriti con un cassetto espandibile aperto con classe <span class=\"col_par\">aggiornamento<\/span>, e con la seguente formattazione del titolo:<\/p>\n\n\n\n<details class=\"wp-block-details aggiornamento is-layout-flow wp-block-details-is-layout-flow\" open><summary>Aggiornamento: 15 aprile 2023<\/summary>\n<p>Contenuto della nota, che pu\u00f2 avere al suo interno blocchi di testo ed essere aperta o chiusa, a seconda dell&#8217;esigenza.<\/p>\n<\/details>\n\n\n\n<p>\u00c8 sempre buona norma precederlo con un blocco di tipo <em>Ancora<\/em> chiamato &#8220;aggiornamento&#8221;. Nel caso ce ne sia pi\u00f9 di uno, denominare i successivi con &#8220;aggiornamento-2&#8221;, &#8220;aggiornamento-3&#8221; e cos\u00ec via.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cassetto_importante\">Importante<\/h3>\n\n\n\n<p>Il cassettino con classe <span class=\"col_par\">importante<\/span> \u00e8 caratterizzato da una tonalit\u00e0 dorata, e come simbolo ha una stellina piena:<\/p>\n\n\n\n<details class=\"wp-block-details importante is-layout-flow wp-block-details-is-layout-flow\" open><summary>Importante!<\/summary>\n<p>Contenuto della nota, che pu\u00f2 avere al suo interno blocchi di testo ed essere aperta o chiusa, a seconda dell&#8217;esigenza.<\/p>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cassetto_alert\">Alert<\/h3>\n\n\n\n<p>Utilizza la classe <span class=\"col_par\">alert<\/span> per realizzare un cassettino (solitamente chiuso) contenente comunicazioni importanti.<\/p>\n\n\n\n<details class=\"wp-block-details alert is-layout-flow wp-block-details-is-layout-flow\"><summary>Attenzione spoiler<\/summary>\n<p>Questa sezione potrebbe contenere informazioni di estrema importanza, come warning o spoiler.<\/p>\n<\/details>\n\n\n\n<div class=\"wp-block-group simulazione_antiquato\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading correzione_top_margin\" id=\"cassetto_antiquato\">Articolo antiquato<\/h3>\n\n\n\n<p>Ci sono articoli che col tempo sono diventati inutili, oppure sono stati sostituiti da altri pi\u00f9 recenti. Se non li ho eliminati \u00e8 perch\u00e9 contengono ancora informazioni degne di nota.<\/p>\n\n\n\n<p>Per marchiare un post come &#8220;antiquato&#8221; \u00e8 sufficiente inserire un cassetto (aperto) con classe <span class=\"col_par\">antiquato<\/span>:<\/p>\n\n\n\n<details class=\"wp-block-details antiquato is-layout-flow wp-block-details-is-layout-flow\" open><summary>Articolo antiquato<\/summary>\n<p>Questo articolo \u00e8 superato. Molto probabilmente \u00e8 stato sostituito da uno pi\u00f9 recente o completamente abbandonato perch\u00e9 non pi\u00f9 valido. Ho deciso di tenerlo perch\u00e9 contiene informazioni che ritengo comunque interessanti.<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"5\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-5\">5<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-5\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"5\"><a rel=\"noreferrer noopener\" href=\"https:\/\/www.lemonskin.net\/io\/39817\/\" target=\"_blank\">Maggiori informazioni sugli articoli antiquati<\/a>.<\/span><\/p>\n<\/details>\n\n\n\n<p class=\"test_antiquato\">Verr\u00e0 inoltre creato un bordino tratteggiato intorno all&#8217;intero articolo, come mostrato da questo paragrafo.<\/p>\n\n\n\n<details class=\"wp-block-details info is-layout-flow wp-block-details-is-layout-flow\"><summary>Nota<\/summary>\n<p>Per realizzare questo effetto, senza dover impazzire modificando mezzo WordPress, ho utilizzato una funzione CSS nuovissima: <strong>:has<\/strong><br>Potrebbe non funzionare su browser meno recenti o in versione mobile.<\/p>\n\n\n\n<p>Se per qualsiasi motivo non si vuole che il bordino appaia nell&#8217;articolo, \u00e8 sufficiente aggiungere:<\/p>\n\n\n\n<p>primary:has(details.antiquato) { outline: 0; }<\/p>\n\n\n\n<p>Nel campo Extra CSS del post.<\/p>\n<\/details>\n<\/div><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group simulazione_aggiornato\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading correzione_top_margin\" id=\"cassetto_aggiornato\">Articolo aggiornato<\/h3>\n\n\n\n<p>Quando un articolo \u00e8 ancora valido, ma ce n&#8217;\u00e8 uno pi\u00f9 aggiornato (per esempio la seconda edizione di un libro o di una mappa), puoi utilizzare questo tag.<\/p>\n\n\n\n<p>Per marchiare un post come &#8220;aggiornato&#8221; \u00e8 sufficiente inserire un cassetto (aperto) con classe <span class=\"col_par\">aggiornato<\/span>:<\/p>\n\n\n\n<details class=\"wp-block-details aggiornato is-layout-flow wp-block-details-is-layout-flow\" open><summary>Articolo aggiornato<\/summary>\n<p>C&#8217;\u00e8&nbsp;<a href=\"#cassetto_aggiornato\">una nuova edizione<\/a>&nbsp;di questo libro. Il presente articolo rimane comunque interessante da leggere, perch\u00e9 contiene interessanti informazioni su come e perch\u00e9 \u00e8 stato realizzato. :).<\/p>\n<\/details>\n\n\n\n<p class=\"test_antiquato\">Verr\u00e0 inoltre creato un bordino solido intorno all&#8217;intero articolo, come mostrato da questo paragrafo.<\/p>\n\n\n\n<details class=\"wp-block-details info is-layout-flow wp-block-details-is-layout-flow\"><summary>Nota<\/summary>\n<p>Per realizzare questo effetto, senza dover impazzire modificando mezzo WordPress, ho utilizzato una funzione CSS nuovissima: <strong>:has<\/strong><br>Potrebbe non funzionare su browser meno recenti o in versione mobile.<\/p>\n\n\n\n<p>Se per qualsiasi motivo non si vuole che il bordino appaia nell&#8217;articolo, \u00e8 sufficiente aggiungere:<\/p>\n\n\n\n<p>primary:has(details.antiquato) { outline: 0; }<\/p>\n\n\n\n<p>Nel campo Extra CSS del post.<\/p>\n<\/details>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cassetto_colorato\">Cassetti colorati<\/h3>\n\n\n\n<p>Aggiungendo le classi <span class=\"col_par\">rossa<\/span>\/<span class=\"col_par\">rosso<\/span>, <span class=\"col_par\">gialla<\/span>\/<span class=\"col_par\">giallo<\/span>, <span class=\"col_par\">verde<\/span>, <span class=\"col_par\">blu<\/span>, \u00e8 possibile colorare i cassetti.<\/p>\n\n\n\n<p><strong>Nota:<\/strong> I cassetti standard e quelli colorati hanno un bordino di 2 pixel. Quelli speciali (importante, aggiornato, alert, ecc.) ne hanno uno di 3 pixel.<\/p>\n\n\n\n<details class=\"wp-block-details rossa is-layout-flow wp-block-details-is-layout-flow\" open><summary>Titolo cassetto rosso<\/summary>\n<p>Testo del contenuto con classe <em>rossa<\/em> o <em>rosso<\/em>. <a href=\"#null\">Link rosso<\/a>.<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"6\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-6\">6<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-6\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"6\">Commento rosso. <a href=\"#null\">Link interno<\/a>.<\/span><\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details gialla is-layout-flow wp-block-details-is-layout-flow\" open><summary>Titolo cassetto giallo<\/summary>\n<p>Testo del contenuto con classe <em>gialla<\/em> o <em>giallo<\/em>. <a href=\"#null\">Link giallo<\/a>.<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"7\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-7\">7<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-7\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"7\">Commento giallo. <a href=\"#null\">Link interno<\/a>.<\/span><\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details verde is-layout-flow wp-block-details-is-layout-flow\" open><summary>Titolo cassetto verde<\/summary>\n<p>Testo del contenuto con classe <em>verde<\/em>. <a href=\"#null\">Link verde<\/a>.<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"8\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-8\">8<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-8\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"8\">Commento verde. <a href=\"#null\">Link interno<\/a>.<\/span><\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details blu is-layout-flow wp-block-details-is-layout-flow\" open><summary>Titolo cassetto blu<\/summary>\n<p>Testo del contenuto con classe <em>blu<\/em>. <a href=\"#null\">Link blu<\/a>.<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"9\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-9\">9<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-9\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"9\"> Commento blu. <a href=\"#null\">Link interno<\/a>.<\/span><\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details info is-layout-flow wp-block-details-is-layout-flow\"><summary>Nota<\/summary>\n<p>Nel caso in cui devi inserire un cassetto normale dentro uno speciale, utilizza la classe <span class=\"col_par\">forza<\/span>, in modo che mantenga tutti i suoi colori originali <span class=\"light\">(mi ero rotto il <span class=\"censura\">cazzo<\/span> col CSS e non avevo voglia di impazzire per rendere tutto automatico&#8230; e poi quante volte avr\u00f2 bisogno di effettuare questa combinazione?)<\/span>.<\/p>\n<\/details>\n\n\n\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"#indice\">Torna al menu<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"nota\">Note<\/h2>\n\n\n\n<details class=\"wp-block-details info is-layout-flow wp-block-details-is-layout-flow\"><summary>Nota<\/summary>\n<p>Le note sono molto limitate perch\u00e9 possono essere composte da un solo paragrafo.<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"10\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-10\">10<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-10\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"10\">A meno di non fare qualche porcata coi &lt;br&gt; nel codice HTML (ma \u00e8 meglio di no).<\/span> Per questo motivo, nel caso di testo pi\u00f9 complesso, \u00e8 meglio utilizzare i <a href=\"#cassetti\">cassetti espandibili<\/a>. Le lascio comunque perch\u00e9 non si sa mai; ma nel dubbio con i cassetti non si sbaglia mai.<\/p>\n<\/details>\n\n\n\n<p>Per trasformare un paragrafo in una nota (che di default \u00e8 marroncina) \u00e8 sufficiente utilizzare la classe <em class=\"col_par\">nota<\/em>.<\/p>\n\n\n\n<p class=\"nota\">Ciao, io sono una nota. <a href=\"#null\">Questo \u00e8 un link<\/a>.<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"11\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-11\">11<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-11\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"11\">Contenuto della nota. <a href=\"#null\">Link interno<\/a>.<\/span><\/p>\n\n\n\n<p>Ma aggiungendo anche la classe <span class=\"col_par\">grigia<\/span>\/<span class=\"col_par\">grigio<\/span>, <span class=\"col_par\">rossa<\/span>\/<span class=\"col_par\">rosso<\/span>, <span class=\"col_par\">gialla<\/span>\/<span class=\"col_par\">giallo<\/span>, <span class=\"col_par\">verde<\/span>, <span class=\"col_par\">blu<\/span> (mantenendo comunque <span class=\"col_par\">nota<\/span> e separandole con uno spazio), \u00e8 possibile colorarla:<\/p>\n\n\n\n<p class=\"nota rossa\">Testo del contenuto con classe <em>rossa<\/em> o <em>rosso<\/em>. <a href=\"#null\">Link rosso<\/a>.<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"12\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-12\">12<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-12\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"12\"> Nota rossa. <a href=\"#null\">Link interno<\/a>.<\/span><\/p>\n\n\n\n<p class=\"nota giallo\">Testo del contenuto con classe <em>gialla<\/em> o <em>giallo<\/em>. <a href=\"#null\">Link giallo<\/a>.<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"13\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-13\">13<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-13\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"13\">Nota gialla. <a href=\"#null\">Link interno<\/a>.<\/span><\/p>\n\n\n\n<p class=\"nota verde\">Testo del contenuto con classe <em>verde<\/em>. <a href=\"#null\">Link verde<\/a>.<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"14\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-14\">14<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-14\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"14\">Nota verde. <a href=\"#null\">Link interno<\/a>.<\/span><\/p>\n\n\n\n<p class=\"nota blu\">Testo del contenuto con classe <em>blu<\/em>. <a href=\"#null\">Link blu<\/a>.<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"15\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-15\">15<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-15\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"15\">Nota blu. <a href=\"#null\">Link interno<\/a>.<\/span><\/p>\n\n\n\n<p class=\"nota grigio\">Testo del contenuto con classe <em>grigia<\/em> o <em>grigio<\/em>. <a href=\"#null\">Link grigio<\/a>.<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"16\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-16\">16<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-16\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"16\">Nota grigia. <a href=\"#null\">Link interno<\/a>.<\/span><\/p>\n\n\n\n<p>Il colore dei link contenuti si adatter\u00e0 automaticamente.<\/p>\n\n\n\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"#indice\">Torna al menu<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"CopiaClip\">CopiaClip()<\/h2>\n\n\n\n<p>Utilizzando questo piccolo codice HTML \u00e8 possibile formattare un campo di testo in modo che, quando lo si clicca, il suo contenuto venga copiato nella clipboard:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted codice a_capo\"><span class=\"tag\">&lt;<\/span><span class=\"cmd\">span<\/span> <span class=\"par\">onClick=<\/span><span class=\"tag\">\"<\/span><span class=\"val\">CopiaClip(this);<\/span><span class=\"tag\">\"<\/span> <span class=\"par\">class=<\/span><span class=\"tag\">\"<\/span><span class=\"val\">bottone_codice<\/span><span class=\"tag\">\"<\/span> <span class=\"par\">title=<\/span><span class=\"tag\">\"<\/span><span class=\"val\">Clicca per copiare nella clipboard.<\/span><span class=\"tag\">\"<\/span><span class=\"tag\">&gt;<\/span>TESTO<span class=\"tag\">&lt;<\/span><span class=\"cmd\">\/span<\/span><span class=\"tag\">&gt;<\/span>\n<\/pre>\n\n\n\n<p>La classe <span class=\"par\">bottone_codice<\/span> \u00e8 facoltativa, ma consente di formattare il testo in modo che sembri un bottoncino. Alla funzione \u00e8 anche associata una piacevole notifichetta che apparir\u00e0 per confermare l&#8217;operazione.<\/p>\n\n\n\n<p>La funzione accetta numerosi parametri:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted codice a_capo\"><span class=\"val\">CopiaClip<\/span><span class=\"par\">(<\/span><span class=\"cmd\">[testo clipboard]<\/span><span class=\"tag\">,<\/span><span class=\"cmd\">[messaggio notifica]<\/span><span class=\"tag\">,<\/span><span class=\"cmd\">[posizione]<\/span><span class=\"tag\">,<\/span><span class=\"cmd\">[colore]<\/span><span class=\"tag\">,<\/span><span class=\"cmd\">[durata]<\/span><span class=\"tag\">,<\/span><span class=\"cmd\">[trasparenza]<\/span><span class=\"par\">)<\/span><span class=\"tag\">;<\/span>\n<\/pre>\n\n\n\n<p><span class=\"cmd\">[testo clipboard]<\/span> \u00e8 l&#8217;unico obbligatorio e contiene il testo da copiare in memoria. Con solo questo parametro valorizzato, la notifica mostrer\u00e0 la scritta &#8220;Copiato: &#8221; seguito dal medesimo testo.<\/p>\n\n\n\n<p><span class=\"cmd\">[messaggio notifica]<\/span> consente di personalizzare il testo della notifica, differenziandolo da quello copiato. se viene passato con &#8216;-&#8216; (segno <em>meno<\/em>) non sar\u00e0 visualizzata alcuna notifica.<\/p>\n\n\n\n<p><span class=\"cmd\">[posizione]<\/span> determina il punto sullo schermo dove la notifica apparir\u00e0: 1 alto a sinistra, 2 in alto al centro, 3 in alto a destra, 4 in basso a sinistra, 5 in basso al centro (valore predefinito), 6 in basso a destra e 0 al centro dello schermo.<\/p>\n\n\n\n<p><span class=\"cmd\">[colore]<\/span> passandogli un codice di colore (per esempio &#8216;#fc0&#8217;, oppure &#8216;red&#8217;) potremo colorare lo sfondo della notifica a nostro piacimento. Il valore predefinito \u00e8 &#8216;#333&#8217;.<\/p>\n\n\n\n<p><span class=\"cmd\">[durata]<\/span> stabilisce la durata della notifica, espressa in millisecondi. Un valore di 1500 (che \u00e8 quello di default) indica un secondo e mezzo.<\/p>\n\n\n\n<p><span class=\"cmd\">[trasparenza]<\/span> indica la trasparenza dello sfondo della notifica, in un range che va da 0 (invisibile) a 1 (100%). Il valore predefinito \u00e8 90%.<\/p>\n\n\n\n<p><strong>Esempio:<\/strong> Prova a <span onclick=\"CopiaClip('Tre utili consigli da seguire sempre nella vita:\\n\\n- Non contraddire mai una donna. Se sbagli, \u00e8 colpa tua. Se hai ragione, \u00e8 colpa tua.\\n\\n- Quando ti osservano fingi sempre di sapere cosa stai facendo. Funziona quasi sempre.\\n\\n- Non mangiare la neve gialla. Mai. In nessuna occasione. Fidati.','Bravo! :)',2,'#2196F3');\" class=\"bottone_codice\" title=\"Clicca per copiare nella clipboard.\">cliccare qui<\/span>, poi controlla la clipboard.<\/p>\n\n\n\n<p>Trovi un&#8217;infinit\u00e0 di esempi <a href=\"https:\/\/www.lemonskin.net\/io\/48741\/\" target=\"_blank\" rel=\"noreferrer noopener\">in questo articolo<\/a>.<\/p>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Testare la funzione <em>ora<\/em> nella console<\/summary>\n<p>Digita <a onclick=\"CopiaClip('oraLetteraria(new Date(new Date().setHours(12, 6)))','Funzione copiata');\" href=\"javascript:void(0);\">questo comando<\/a> nella console del browser impostando l&#8217;ora desiderata.<\/p>\n<\/details>\n\n\n\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"#indice\">Torna al menu<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"mostraNotifica\">mostraNotifica()<\/h2>\n\n\n\n<p>la funzione <span class=\"val\">mostraNotifica()<\/span> consente di visualizzare un piccolo <a onclick=\"mostraNotifica('Ciao, io sono un messaggio non invasivo. :)',2,'#f176ca',3500,2);\" href=\"javascript:void(0);\">messaggio<\/a> non invasivo. Accetta numerosi parametri:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted codice a_capo\"><span class=\"val\">mostraNotifica<\/span><span class=\"par\">(<\/span><span class=\"cmd\">[messaggio]<\/span><span class=\"tag\">,<\/span><span class=\"cmd\">[posizione]<\/span><span class=\"tag\">,<\/span><span class=\"cmd\">[colore]<\/span><span class=\"tag\">,<\/span><span class=\"cmd\">[durata]<\/span><span class=\"tag\">,<\/span><span class=\"cmd\">[trasparenza]<\/span><span class=\"par\">)<\/span><span class=\"tag\">;<\/span>\n<\/pre>\n\n\n\n<p><span class=\"cmd\">[messaggio]<\/span> rappresenta il testo che verr\u00e0 mostrato all&#8217;interno della notifica. \u00c8 l&#8217;unico parametro obbligatorio.<\/p>\n\n\n\n<p><span class=\"cmd\">[posizione]<\/span> determina il punto sullo schermo dove la notifica apparir\u00e0: 1 in alto a sinistra, 2 in alto al centro, 3 in alto a destra, 4 in basso a sinistra, 5 in basso al centro (valore predefinito), 6 in basso a destra e 0 al centro dello schermo. Nei due angoli in basso la notifica apparir\u00e0 poco sopra i bottoncini, per non coprirli.<\/p>\n\n\n\n<p><span class=\"cmd\">[colore]<\/span> passandogli un codice di colore (per esempio &#8216;#fc0&#8217;, oppure &#8216;red&#8217;) potremo colorare lo sfondo della notifica a nostro piacimento. Il valore predefinito \u00e8 &#8216;#333&#8217;.<\/p>\n\n\n\n<p><span class=\"cmd\">[durata]<\/span> stabilisce la durata della notifica, espressa in millisecondi. Un valore di 1500 (che \u00e8 quello di default) indica un secondo e mezzo.<\/p>\n\n\n\n<p><span class=\"cmd\">[trasparenza]<\/span> indica la trasparenza dello sfondo della notifica, in un range che va da 0 (invisibile) a 1 (100%). Il valore predefinito \u00e8 90%.<\/p>\n\n\n\n<p>Come puoi vedere ha sostanzialmente gli stessi parametri di <a href=\"#CopiaClip\">CopiaClip()<\/a>, perch\u00e9 di fatto \u00e8 richiamata automaticamente da quella funzione, che gli passa tutto il necessario per lo stile di visualizzazione (<span class=\"val\">CopiaClip()<\/span> in realt\u00e0 necessiterebbe unicamente del testo da copiare nella clipboard).<\/p>\n\n\n\n<p>Trovi un&#8217;infinit\u00e0 di esempi <a href=\"https:\/\/www.lemonskin.net\/io\/48741\/\" target=\"_blank\" rel=\"noreferrer noopener\">in questo articolo<\/a>.<\/p>\n\n\n\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"#indice\">Torna al menu<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"lettore-multimediale\">Lettore multimediale<\/h2>\n\n\n\n<p>Per inserire un lettore multimediale minimo WP mette a disposizione il blocco &#8220;audio&#8221;. Sfortunatamente \u00e8 poco configurabile e, per esempio, non si pu\u00f2 disattivare l&#8217;opzione per il download (potrebbe causare qualche grana di carattere legale).<\/p>\n\n\n\n<p>\u00c8 pertanto preferibile inserire il seguente HTML personalizzato:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted codice a_capo\"><span class=\"tag\">&lt;!-- player multimediale --&gt;<\/span>\n<span class=\"tag\">&lt;<\/span><span class=\"cmd\">figure<\/span> <span class=\"par\">class=<\/span><span class=\"tag\">\"<\/span><span class=\"val\">wp-block-audio<\/span><span class=\"tag\">\"<\/span><span class=\"tag\">&gt;<\/span><span class=\"tag\">&lt;<\/span><span class=\"cmd\">audio<\/span> <span class=\"par\">autoplay<\/span> <span class=\"par\">src=<\/span><span class=\"tag\">\"<\/span><span class=\"val\">URL_FILE<\/span><span class=\"tag\">\"<\/span> <span class=\"par\">controls<\/span> <span class=\"par\">controlslist=<\/span><span class=\"tag\">\"<\/span><span class=\"val\">nodownload<\/span><span class=\"tag\">\"<\/span><span class=\"tag\">&gt;<\/span><span class=\"tag\">&lt;<\/span><span class=\"cmd\">\/audio<\/span><span class=\"tag\">&gt;<\/span><span class=\"tag\">&lt;<\/span><span class=\"cmd\">figcaption<\/span><span class=\"tag\">&gt;<\/span><span class=\"val\">ARTISTA_E_NOME_BRANO<\/span><span class=\"tag\">&lt;<\/span><span class=\"cmd\">\/figcaption<\/span><span class=\"tag\">&gt;<\/span><span class=\"tag\">&lt;<\/span><span class=\"cmd\">\/figure<\/span><span class=\"tag\">&gt;<\/span>\n<\/pre>\n\n\n\n<p>Se vuoi evitare l&#8217;autostart, rimuovi il parametro <span class=\"par\">autoplay<\/span>.<\/p>\n\n\n\n<p><strong>Esempio<\/strong>:<\/p>\n\n\n\n<!-- player multimediale -->\n<figure class=\"wp-block-audio\"><audio src=\"https:\/\/www.lemonskin.net\/io\/wp-content\/uploads\/2014\/12\/Silent-night.mp3\" controls=\"\" controlslist=\"nodownload\"><\/audio><figcaption>Kelly Clarkson \u2013 Silent night<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"#indice\">Torna al menu<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"file_multimediali\">Appoggio file multimediali [MEDIA]<\/h2>\n\n\n\n<p>Quando inserisci file multimediali da linkare al sito, oppure materiale temporaneo di appoggio, l&#8217;URL da linkare esternamente \u00e8<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><span style=\"color:#0693e3\" class=\"color\">https:\/\/www.lemonskin.net\/io\/[MEDIA]\/<\/span><span style=\"color:#cf2e2e\" class=\"color\">[cartella]<\/span><span style=\"color:#0693e3\" class=\"color\">\/<\/span><span style=\"color:#00d084\" class=\"color\">[file]<\/span><\/p>\n\n\n\n<p><span style=\"color:#cf2e2e\" class=\"color\">[cartella]<\/span> pu\u00f2 essere [files], [immagini], video<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"17\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-17\">17<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-17\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"17\">S\u00ec perch\u00e9, per qualche strano <span class=\"censura\">cazzo<\/span> di motivo, non si possono usare le parentesi quadre con questo termine che sembrerebbe di sistema.<\/span>, ecc&#8230;<\/p>\n\n\n\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"#indice\">Torna al menu<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"indice-contenuti-manuale\">Indice dei contenuti manuale<\/h2>\n\n\n\n<p>Solitamente, per inserire all&#8217;interno di un articolo un indice dei contenuti, \u00e8 sufficiente utilizzare l&#8217;apposito blocco di WordPress (chiamato Publishpress). Per\u00f2, siccome questo include automaticamente tutti i titoli, anche quelli minori come gli H3 degli aggiornamenti (che il pi\u00f9 delle volte vanno ignorati), a volte \u00e8 necessario crearne uno manuale.<\/p>\n\n\n\n<p>Inserisci un titolo H2 denominato &#8220;Indice&#8221; e un semplice elenco (una lista, insomma) e aggiungi gli <em>anchor<\/em> delle sezioni a mano.<\/p>\n\n\n\n<p>Infine assegna a entrambi i blocchi la classe <em class=\"col_par\">indice<\/em>, in modo che non appaiano nella home (o nelle ricerche).<\/p>\n\n\n\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"#indice\">Torna al menu<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"recensioni\">Gestione recensioni<\/h2>\n\n\n\n<p>Le recensioni possono avere quattro stati: <em>nascoste<\/em>, <em>in lettura<\/em> (o <em>in gioco<\/em>), <em>in pausa<\/em> e <em>attive<\/em>. \u00c8 sufficiente assegnare rispettivamente le classi <span class=\"col_par\">OFF<\/span>, <span class=\"col_par\">lettura<\/span>\/<span class=\"col_par\">in_gioco<\/span> e <span class=\"col_par\">pausa<\/span> per impostarle. Quelle attive non necessitano di alcuna classe aggiuntiva.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Recensione normale<\/h3>\n\n\n\n<!-- 1. Esempio -->\n<details class=\"recensione\">\n<summary><span class=\"num\">1.<\/span>Questo \u00e8 un esempio<span class=\"dx star4\"><\/span><\/summary>\n<div class=\"info\">\n<div class=\"autore\">Proverbio Cinese<\/div>\n<div class=\"data\">20-12-1972<\/div><\/div>\n<blockquote>In tre occasioni l&#8217;uomo rivela la sua natura: quando la sua mente cede all&#8217;ira, quando il suo corpo \u00e8 piegato dal vino e quando deve mettere mano alla borsa.<\/blockquote>\n<div class=\"giudizio\">\n<p>Ci vogliono venti anni a una donna per fare del proprio figlio un uomo, e venti minuti a un&#8217;altra donna per farne un idiota. \u2013 Charles Dickens<\/p>\n<\/div><!-- giudizio --><\/details>\n\n\n\n<pre class=\"wp-block-preformatted\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">&lt;details class=\"recensione\"&gt; ...<\/mark><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">In lettura \/ in gioco<\/h3>\n\n\n\n<!-- 1. Esempio -->\n<details class=\"recensione lettura\">\n<summary><span class=\"num\">1.<\/span>Questo \u00e8 un esempio di libro<span class=\"dx star4\"><\/span><\/summary>\n<div class=\"info\">\n<div class=\"autore\">Seneca<\/div>\n<div class=\"data\"><\/div><\/div>\n<blockquote>Continua ci\u00f2 che hai cominciato e forse arriverai alla cima, o almeno arriverai in alto ad un punto che tu solo comprenderai non essere la cima.<\/blockquote>\n<div class=\"giudizio\"><\/div><!-- giudizio --><\/details>\n\n\n\n<!-- 2. Esempio -->\n<details class=\"recensione in_gioco\">\n<summary><span class=\"num\">2.<\/span>Questo \u00e8 un esempio di videogioco<span class=\"dx star3\"><\/span><\/summary>\n<div class=\"info\">\n<div class=\"autore\">ID Software<\/div>\n<div class=\"data\"><\/div><\/div>\n<div class=\"giudizio\"><\/div><!-- giudizio --><\/details>\n\n\n\n<p>Con la classe <span class=\"col_par\">lettura<\/span>\/<span class=\"col_par\">in_gioco<\/span> vengono nascoste la data di fine lettura\/gioco (ovviamente) e il giudizio. Se c&#8217;\u00e8 una citazione, verr\u00e0 mostrata.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">&lt;details class=\"recensione <\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">lettura<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">\"&gt; ...<\/mark><br><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">&lt;details class=\"recensione <\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">in_gioco<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">\"&gt; ...<\/mark><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">In pausa<\/h3>\n\n\n\n<!-- 3. Esempio -->\n<details class=\"recensione pausa\">\n<summary><span class=\"num\">3.<\/span>Questo \u00e8 un esempio<span class=\"dx star4\"><\/span><\/summary>\n<div class=\"info\">\n<div class=\"autore\">Steve Jobs<\/div>\n<div class=\"data\"><\/div><\/div>\n<blockquote>Quasi tutto \u2014 le aspettative degli altri, l&#8217;orgoglio, la paura di imbarazzo o di un fallimento \u2014 semplicemente svanisce di fronte all&#8217;idea della morte, lasciando soltanto ci\u00f2 che \u00e8 davvero importante. Ricordarsi che dobbiamo morire \u00e8 il modo migliore per evitare la trappola di pensare di avere qualcosa da perdere. Siete gi\u00e0 nudi, non c&#8217;\u00e8 alcuna ragione per non seguire il vostro cuore. \u2013 Steve Jobs<\/p><\/blockquote>\n<div class=\"giudizio\"><!-- giudizio --><\/details>\n\n\n\n<p>Anche con la classe lettura vengono nascoste la data di fine lettura e il giudizio. Se c&#8217;\u00e8 una citazione, verr\u00e0 mostrata.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">&lt;details class=\"recensione <\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">pausa<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">\"&gt; ...<\/mark><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Nascosta<\/h3>\n\n\n\n<p>Quando una recensione \u00e8 nascosta, naturalmente non sar\u00e0 visibile.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">&lt;details class=\"recensione <\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">OFF<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">\"&gt; ...<\/mark><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Riletto \/ Rigiocato \/ Platinato<\/h2>\n\n\n\n<p>Per inserire l&#8217;iconcina <em>Riletto<\/em> \/ <em>Rigiocato<\/em> \/ <em>Platinato<\/em> nelle recensioni di libri e videogiochi, valorizza lo &lt;span&gt; del titolo con le seguenti classi:<\/p>\n\n\n\n<p><span class=\"col_par\">r<\/span> = <span class=\"riletto\"><em>Riletto<\/em> \/<em> Rigiocato<\/em><\/span><\/p>\n\n\n\n<p><span class=\"col_par\">p<\/span> = <span class=\"platinato\"><em>Platinato<\/em> \/<em> Rigiocato<\/em><\/span><\/p>\n\n\n\n<p><span class=\"col_par\">rp<\/span> o <span class=\"col_par\">pr<\/span> = <span class=\"riletto-platinato\"><em>Riletto<\/em> \/ <em>Rigiocato<\/em> e <em>Platinato<\/em><\/span><\/p>\n\n\n\n<p>Passando il mouse sopra l&#8217;icona apparir\u00e0 la relativa spiegazione. Puoi vederlo nella pagina dei <a href=\"https:\/\/www.lemonskin.net\/io\/i-libri-che-ho-letto\/\" target=\"_blank\" rel=\"noreferrer noopener\">libri che ho letto<\/a> e dei <a href=\"https:\/\/www.lemonskin.net\/io\/i-videogiochi-a-cui-ho-giocato\/\" target=\"_blank\" rel=\"noreferrer noopener\">videogiochi a cui ho giocato<\/a>.<\/p>\n\n\n\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"#indice\">Torna al menu<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"link_colorbox\">Collegare un link a JQuery Colorbox<\/h2>\n\n\n\n<p>La classe <em class=\"col_par\">colorbox-link-<strong>x<\/strong><\/em>, dove <strong class=\"col_par\">x<\/strong> \u00e8 necessariamente un numero, trasforma automaticamente il link in una finestra Jquery Colorbox.<br>\nSe si vogliono creare gruppi di immagini basta assegnare lo stesso numero.<\/p>\n\n\n\n<p>Aggiungendo un valore nel tag <span class=\"col_par\">title<\/span> di <span class=\"col_tag\">&lt;a&gt;<\/span> \u00e8 possibile  aggiungere una didascalia al box che si apre, ma poi apparir\u00e0 anche  quando si sposta il mouse sopra il link.<\/p>\n\n\n\n<p>Se, al contrario, <strong><span style=\"text-decoration: underline;\">non si vuole<\/span><\/strong> che un link a una immagine venga  automaticamente inglobato in una finestrella colorbox (per esempio  se si vuole aprirla in un nuovo tab perch\u00e9 di dimensioni troppo grandi), \u00e8 sufficiente aggiungere la classe <em class=\"col_par\">colorbox-off<\/em> al tag <span class=\"col_tag\">&lt;img&gt;<\/span> e, naturalmente includere in <span class=\"col_tag\">&lt;a&gt;<\/span> il parametro:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span class=\"col_par\">target=<\/span><span class=\"col_tag\">\"<span class=\"col_val\">_blank<\/span>\"<\/span><\/pre>\n\n\n\n<p>Il trucchetto funziona pure con i <a href=\"http:\/\/www.youtube.com\/embed\/9ytei6bu7kQ?rel=0&amp;wmode=transparent&amp;vq=hd720&amp;autoplay=1\" class=\"colorbox-link-1\">video<\/a><sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"18\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-18\">18<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-18\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"18\">Ogni tanto va anche coi siti web, ma \u00e8 molto <em>picky<\/em> a riguardo, per cui eviterei.<\/span> ma, nel caso di Youtube, \u00e8 necessario rispettare il seguente formato:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted codice a_capo\"><span class=\"tag\">&lt;<span class=\"cmd\">a<\/span> <span class=\"par\">href=<\/span>\"<span class=\"val\">http:\/\/www.youtube.com\/embed\/<span class=\"cmd\">CODICE<\/span>?rel=0&amp;wmode=transparent&amp;vq=hd720&amp;autoplay=1<\/span>\" <span class=\"par\">class=<\/span>\"<span class=\"val\">colorbox-link-1<\/span>\"&gt;<\/span>video<span class=\"tag\">&lt;<span class=\"cmd\">\/a<\/span>&gt;<\/span><\/pre>\n\n\n\n<p>Dove <span class=\"col_cmd\">CODICE<\/span> identifica il video.<br>Altri formati, come ad esempio quello che si copia e incolla  direttamente dal sito di Youtube, non funzionano, perch\u00e9 \u00e8 necessario  che il video sia <em>embedded<\/em>.<\/p>\n\n\n\n<p>Il parametro <span class=\"col_par\">rel=0<\/span> evita che alla fine della visione vengano mostrati i video suggeriti mentre <span class=\"col_par\">wmode<\/span> dovrebbe scongiurare un po&#8217; di conflitti tra <em>Flash<\/em> e lo <em>z-index<\/em> degli elementi nella pagina.<\/p>\n\n\n\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"#indice\">Torna al menu<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"footnote\">Footnote<\/h2>\n\n\n\n<p>Per inserire delle note nel testo<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"19\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-19\">19<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-19\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"19\">Come questa.<\/span> puoi utilizzare il bottone F<span style=\"color:blue;\">\u00b3<\/span> nella barra dei blocchi. Questo inserisce un tag <span class=\"col_tag\">&lt;<span class=\"col_cmd\">mfn<\/span>&gt; &#8230; &lt;<span class=\"col_cmd\">\/mfn<\/span>&gt;<\/span>.<\/p>\n\n\n\n<p>In alternativa anche  <span class=\"col_tag\">[<span class=\"col_cmd\">footnote<\/span>] \u2026 [<span class=\"col_cmd\">\/footnote<\/span>]<\/span> va bene, ma Gutenberg \u00e8 un po&#8217; schizzinoso coi shortcode, per cui \u00e8 preferibile il primo sistema.<\/p>\n\n\n\n<p>Per coerenza generale utilizza sempre i  <span class=\"col_cmd\">footnote<\/span> dopo la parola interessata, senza alcuno spazio.<br>Se \u00e8 a conclusione di una frase, inseriscilo sempre dopo il punto.<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"20\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-20\">20<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-20\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"20\">In questo modo.<\/span><br>Se invece c&#8217;\u00e8 una virgola<sup class=\"modern-footnotes-footnote modern-footnotes-footnote--expands-on-desktop \" data-mfn=\"21\" data-mfn-post-scope=\"000000000000073b0000000000000000_5979\"><a href=\"javascript:void(0)\"  role=\"button\" aria-pressed=\"false\" aria-describedby=\"mfn-content-000000000000073b0000000000000000_5979-21\">21<\/a><\/sup><span id=\"mfn-content-000000000000073b0000000000000000_5979-21\" role=\"tooltip\" class=\"modern-footnotes-footnote__note\" tabindex=\"0\" data-mfn=\"21\">Inseriscimi qui.<\/span>, mettilo prima.<br><\/p>\n\n\n\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"#indice\">Torna al menu<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"linee_guida\">Linee guida generali<\/h2>\n\n\n\n<p class=\"has-drop-cap\">Il capolettera va messo generalmente nel primo paragrafo.<br>Se sta male allora meglio non metterlo. Se sta male nel primo ma bene nel secondo allora mettilo l\u00ec.<br>Non si dovrebbe, ma questo blog \u00e8 mio e faccio come mi pare. :)<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<p>Se hai bisogno di una funzione (javascript) che copi nella clipboard il contenuto di un campo, utilizza <em>CopiaClip()<\/em>.<\/p>\n\n\n\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"#indice\">Torna al menu<\/a><\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Questo articolo \u00e8 di carattere tecnico, serve a me per ricordarmi la struttura del codice degli elementi utilizzati nel sito. Ignoralo pure, oppure fatti un bel trip gratuito e molto colorato. :)<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_stopmodifiedupdate":false,"_modified_date":"","advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[111219,111239],"class_list":["post-5979","post","type-post","status-publish","format-standard","hentry","category-sito-web","tag-faq","tag-look-del-sito"],"acf":[],"author_meta":{"display_name":"lock","author_link":"https:\/\/www.lemonskin.net\/io\/author\/lock\/"},"featured_img":null,"jetpack_featured_media_url":"","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/www.lemonskin.net\/io\/category\/sito-web\/\" class=\"advgb-post-tax-term\">sito web<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">sito web<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/www.lemonskin.net\/io\/category\/sito-web\/\" class=\"advgb-post-tax-term\">f.a.q.<\/a>","<a href=\"https:\/\/www.lemonskin.net\/io\/category\/sito-web\/\" class=\"advgb-post-tax-term\">look del sito<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">f.a.q.<\/span>","<span class=\"advgb-post-tax-term\">look del sito<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Pubblicato 11 anni fa","modified":"Aggiornato 4 settimane fa"},"absolute_dates":{"created":"Pubblicato il 11 Agosto 2015","modified":"Aggiornato il 13 Marzo 2026"},"absolute_dates_time":{"created":"Pubblicato il 11 Agosto 2015 12:00","modified":"Aggiornato il 13 Marzo 2026 21:49"},"featured_img_caption":"","series_order":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/posts\/5979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/comments?post=5979"}],"version-history":[{"count":10,"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/posts\/5979\/revisions"}],"predecessor-version":[{"id":51260,"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/posts\/5979\/revisions\/51260"}],"wp:attachment":[{"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/media?parent=5979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/categories?post=5979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lemonskin.net\/io\/wp-json\/wp\/v2\/tags?post=5979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}