{"id":30,"date":"2022-09-14T21:38:51","date_gmt":"2022-09-14T19:38:51","guid":{"rendered":"https:\/\/intranet.projektninja.com\/?p=30"},"modified":"2024-06-15T18:24:00","modified_gmt":"2024-06-15T16:24:00","slug":"uwidocznienie-grup","status":"publish","type":"post","link":"https:\/\/projektninja.com\/devblog\/ulatwienia-wp\/uwidocznienie-grup\/","title":{"rendered":"Ulepszony Edytor WordPress: Uwypuklenie Grup i Sekcji w edytorze wizualnym"},"content":{"rendered":"\n<p>Par\u0119 styli bo editor-style.css, kt\u00f3re modyfikuj\u0105 wygl\u0105d edytora wizualnego w WordPress&#8217;ie dla wygody dzia\u0142ania, w szczeg\u00f3lno\u015bci z sekcjami i grupami. <\/p>\n\n\n\n<p>{ Twoj projekt }\\wp-content\\themes\\twentyseventeen\\assets\\css\\editor-style.css <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Rozszerza panel edytora (nie wiedzie\u0107 dlaczego taki w\u0105ski)<\/li>\n\n\n\n<li>Uwidocznia Grupy &#8220;div&#8221; i &#8220;section&#8221;<\/li>\n\n\n\n<li>Element\u00f3w Header i Footer<\/li>\n\n\n\n<li>Oznacza nag\u0142\u00f3wnik h1, h2, h3, h4<\/li>\n\n\n\n<li>Oznaczenie paragraf\u00f3w<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/projektninja.com\/devblog\/wp-content\/uploads\/editor-style-1024x435.jpg\" alt=\"\" class=\"wp-image-33\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* #############################################################################################################################################\n###############################################            MOJE STYLE EDYTORSKIE SAJAN           ###############################################\n############################################################################################################################################# *\/ \n\n\n\/*--------------------------------------------------------------- ELEMENT HEADER --------------------------------------------------*\/\n\n\/* Oznaczenie grup &lt;header> *\/\n.block-editor-block-list__layout header::before{\n    content: 'HEADER'!important;\n    background: #0aed00!important;\n    \n    color: #fff!important;\n    position: absolute!important;\n    top: 0px!important;\n    left: 0px!important;\n    border-radius: 0 0 9px 0px!important;\n    \n    font-size: 11px!important;\n    font-family: 'Ubuntu Mono', sans-serif!important;\n    letter-spacing: 0.5px!important;\n    padding: 0px 4px 0px 3px!important;\n    \n    width: unset!important;\n    height: unset!important;\n}\n\n.block-editor-block-list__layout header {\n    border: dashed 3px #0aed00;\n    padding: 24px 8px 8px 8px!important;\n}\n\n\/*--------------------------------------------------------------- ELEMENT FOOTER --------------------------------------------------*\/\n\n\/* Oznaczenie grup &lt;footer> *\/\n.block-editor-block-list__layout footer::before {\n    \n    content: 'FOOTER'!important;\n    background-color: #0aed00!important;\n    \n    color: #fff!important;\n    position: absolute!important;\n    top: 0px!important;\n    left: 0px!important;\n    border-radius: 0 0 9px 0px!important;\n    \n    font-size: 11px!important;\n    font-family: 'Ubuntu Mono', sans-serif!important;\n    letter-spacing: 0.5px!important;\n    padding: 0px 4px 0px 3px!important;\n    \n    width: unset!important;\n    height: unset!important;\n}\n.block-editor-block-list__layout footer {\n    border: dashed 3px #0aed00;\n    padding: 24px 8px 8px 8px!important;\n}\n\n\/*--------------------------------------------------------------- GRUPY SECTION --------------------------------------------------*\/\n\n.block-editor-block-list__layout section.wp-block-group {\n    border: dotted 5px #00900f;\n    padding: 24px 8px 8px 8px!important;\n    margin-top: 10px;\n    margin-bottom: 10px;\n}\n\n.block-editor-block-list__layout section.wp-block-group::before {\n    content: 'sekcja';\n    font-size: 12px;\n    font-weight: bold;\n    background-color: #00900f;\n    padding: 5px;\n    color: #fff;\n    position: relative;\n    top: -17px;\n    left: -15px;\n    border-radius: 0 0 12px 0px;\n}\n\n\/*--------------------------------------------------------------- GRUPY DIV --------------------------------------------------*\/\n.block-editor-block-list__layout div.wp-block-group {\n    border: dashed 3px #f58787;\n    padding: 24px 8px 8px 8px!important;\n    margin-top: 10px!important;\n    margin-bottom: 10px!important;\n}\n.block-editor-block-list__layout div.wp-block-group::before {\n    content: 'DIV'!important;\n    background-color: #f58787!important;\n    \n    color: #fff!important;\n    position: absolute!important;\n    top: 0px!important;\n    left: 0px!important;\n    border-radius: 0 0 9px 0px!important;\n    \n    font-size: 11px!important;\n    font-family: 'Ubuntu Mono', sans-serif!important;\n    letter-spacing: 0.5px!important;\n    padding: 0px 4px 0px 3px!important;\n    \n    width: unset!important;\n    height: unset!important;\n}\n\n\n\/*--------------------------------------------------------------- PARAGRAFY --------------------------------------------------*\/\n\n.block-editor-block-list__layout p {\n    border: dashed 1px;\n    padding: 24px 8px 8px 8px!important;\n}\n\n.block-editor-block-list__layout p::before {\n    content: 'P'!important;\n    background-color: #000!important;\n    \n    color: #fff!important;\n    position: absolute!important;\n    top: 0px!important;\n    left: 0px!important;\n    border-radius: 0 0 9px 0px!important;\n    \n    font-size: 11px!important;\n    font-family: 'Ubuntu Mono', sans-serif!important;\n    letter-spacing: 0.5px!important;\n    padding: 0px 4px 0px 3px!important;\n    \n    width: unset!important;\n    height: unset!important;\n}\n\n\n\/* Rozszerzenie panelu edytora *\/\n.block-editor-block-list__layout .wp-block {max-width: unset;}\n\/* Oznaczenie nag\u0142\u00f3wk\u00f3w *\/\n.block-editor-block-list__layout h1:before{content: 'H1';}\n.block-editor-block-list__layout h2:before{content: 'H2';}\n.block-editor-block-list__layout h3:before{content: 'H3';}\n.block-editor-block-list__layout h4:before{content: 'H4';}\n.block-editor-block-list__layout h1:before, h2:before, h3before, h4:before {\n    font-weight: bold;\n    font-family: monospace;\n    font-size: 10px;\n    background-color: #255093;\n    padding: 4px;\n    color: #fff;\n    border-radius: 18px;\n    position: relative;\n    top: -18px;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\/* lista ostatnich wpis\u00f3w *\/\nul.wp-block-latest-posts__list{\n    max-width: var(--wp--style--global--content-size);\n    margin: auto;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    margin-top:30px;\n}\n\n\nul.wp-block-latest-posts__list li{\n    width: 294px;\n    overflow: hidden;\n    background: #2b2a2a;\n    margin: 3px;\n    padding: 5px 9px;\n    font-size: 13px;\n    height: 27px;\n    border-radius: 9px;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    \n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\nul.wp-block-latest-posts__list li a{\n color: #fff;   \n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Przydatne linki:<\/h2>\n\n\n\n<p><a href=\"https:\/\/codex.wordpress.org\/Editor_Style\">https:\/\/codex.wordpress.org\/Editor_Style<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zmodyfikuj wygl\u0105d edytora wizualnego w WordPress, aby lepiej zarz\u0105dza\u0107 grupami i sekcjami. Przyk\u0142adowe style w pliku editor-style.css.<\/p>\n","protected":false},"author":1,"featured_media":678,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[269],"tags":[25,19,20,273,272,10,270,271,21,13],"class_list":["post-30","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ulatwienia-wp","tag-css","tag-editor-style","tag-editor-style-css","tag-edytor-wizualny","tag-grupy","tag-must-have","tag-naglowki","tag-sekcje","tag-snippets","tag-wordpress"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":4,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/30\/revisions"}],"predecessor-version":[{"id":679,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/30\/revisions\/679"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media\/678"}],"wp:attachment":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media?parent=30"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/categories?post=30"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/tags?post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}