{"id":189,"date":"2021-07-23T00:33:35","date_gmt":"2021-07-22T22:33:35","guid":{"rendered":"https:\/\/alessandromasciadri.com\/?p=189"},"modified":"2022-01-31T21:48:57","modified_gmt":"2022-01-31T20:48:57","slug":"cambiare-stile-al-widget-categorie-di-akihiro","status":"publish","type":"post","link":"https:\/\/alessandromasciadri.com\/cambiare-stile-al-widget-categorie-di-elementor\/","title":{"rendered":"Cambiare stile al widget Categorie di Elementor"},"content":{"rendered":"\t\t<div data-akihiro-type=\"ama-post\" data-akihiro-id=\"189\" class=\"akihiro akihiro-189\" data-akihiro-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"akihiro-section akihiro-top-section akihiro-element akihiro-element-60c93cd8 akihiro-section-boxed akihiro-section-height-default akihiro-section-height-default\" data-id=\"60c93cd8\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"akihiro-container akihiro-column-gap-default\">\n\t\t\t\t\t<div class=\"akihiro-column akihiro-col-100 akihiro-top-column akihiro-element akihiro-element-63a56908\" data-id=\"63a56908\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"akihiro-widget-wrap akihiro-element-populated\">\n\t\t\t\t\t\t<div class=\"akihiro-element akihiro-element-161121b akihiro-widget akihiro-widget-text-editor\" data-id=\"161121b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>I widget nativi di <a href=\"https:\/\/wordpress.org\/\">WordPress<\/a> messi a disposizione nel visual builder <a href=\"https:\/\/elementor.com\/\">Elementor<\/a> sono solitamente molto scarni dal punto di vista grafico e le possibilit\u00e0 di uso dell&#8217;editor visuale per impostare uno stile non sono previste. Non resta quindi che gestire il tutto con un po&#8217; di JavaScript e CSS.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-870acfe akihiro-widget akihiro-widget-heading\" data-id=\"870acfe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t<h2 class=\"akihiro-heading-title akihiro-size-default\">Rimuovere le parentesi con JavaScript<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-39854e1 akihiro-widget akihiro-widget-text-editor\" data-id=\"39854e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Con questo script rimuoviamo le parentesi dal contatore degli articoli che appartengono ad ogni categoria.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-474597b akihiro-widget akihiro-widget-code-highlight\" data-id=\"474597b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><script>\r\n    \/* Recuperiamo tutte le voci di categoria dal DOM della pagina *\/\r\n    let list = document.getElementsByClassName(\"cat-item\");\r\n\r\n    \/* Per ogni elemento categoria creiamo un nuovo tag <a> che abbia lo stesso attributo href e contemporaneamente rimuoviamo le parentesi dal contatore degli articoli *\/\r\n    for(var i=0; i<list.length; i++) {\r\n        var liElement = list[i];\r\n        var str = liElement.innerText;\r\n        \r\n        var oldA = list[i].firstChild;\r\n        var newA = document.createElement(\"a\");\r\n        liElement.innerText = \"\";\r\n        liElement.appendChild(newA);\r\n        newA.href = oldA.href;\r\n        newA.innerText = str.substring(0, str.length-3).replace(\/\\n\/g, '');\r\n        liElement.innerHTML += \" \" + str.substring(str.length-2, str.length-1);\r\n    }\r\n<\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-cf95829 akihiro-widget akihiro-widget-heading\" data-id=\"cf95829\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t<h2 class=\"akihiro-heading-title akihiro-size-default\">Aggiungere un nuovo stile alle categorie<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-910a9f9 akihiro-widget akihiro-widget-text-editor\" data-id=\"910a9f9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ora non resta che aggiungere un po&#8217; di stile con del CSS.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-0f2622a akihiro-widget akihiro-widget-code-highlight\" data-id=\"0f2622a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>#category-block > div > h5 {\r\n    text-transform: uppercase;\r\n    font-weight: bold;\r\n    color: #454D64;\r\n    font-size: 1.4em;\r\n    margin-bottom: 0.4em;\r\n    margin-top: 0;\r\n}\r\n\r\n#category-block > div > ul {\r\n    padding-left: 0;\r\n}\r\n\r\n.cat-item {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    padding: 1% 0;\r\n    color: #505050;\r\n    font-weight: 500;\r\n}\r\n\r\n.cat-item > a {\r\n    color: #505050;\r\n    font-weight: 500;\r\n}\r\n\r\n@media screen and (max-device-width:480px) {\r\n    #category-block > div > h5 {\r\n        text-align: center;\r\n    }\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>I widget nativi di WordPress messi a disposizione nel visual builder Elementor sono solitamente molto scarni dal punto di vista grafico e le possibilit\u00e0 di uso dell&#8217;editor visuale per impostare uno stile non sono previste. Non resta quindi che gestire il tutto con un po&#8217; di JavaScript e CSS. Rimuovere le parentesi con JavaScript Con [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[10],"class_list":["post-189","post","type-post","status-publish","format-standard","hentry","category-programmazione","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/comments?post=189"}],"version-history":[{"count":6,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts\/189\/revisions"}],"predecessor-version":[{"id":357,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts\/189\/revisions\/357"}],"wp:attachment":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/media?parent=189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/categories?post=189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/tags?post=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}