{"id":13,"date":"2017-01-18T00:00:00","date_gmt":"2017-01-17T18:30:00","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/docs\/?p=13"},"modified":"2024-02-16T16:20:24","modified_gmt":"2024-02-16T10:50:24","slug":"adding-custom-css-code","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/adding-custom-css-code\/","title":{"rendered":"\u00bfC\u00f3mo a\u00f1adir c\u00f3digo CSS personalizado sin editar los archivos del tema?"},"content":{"rendered":"<p>En el mundo de la personalizaci\u00f3n de WordPress, a\u00f1adir una pizca de CSS personalizado puede mejorar el aspecto de tu sitio web. Pero, \u00bfqui\u00e9n quiere meterse directamente con los archivos del tema? <\/p>\n\n\n\n<p>\u00a0En este art\u00edculo, le mostraremos c\u00f3mo agregar CSS personalizado a su sitio de WordPress sin editar ning\u00fan archivo de tema.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">En el Personalizador<\/h3>\n\n\n\n<p>Desde WordPress 4.7, ahora puedes a\u00f1adir CSS personalizado directamente dentro del Personalizador que puedes encontrar en <strong>Personalizar \u2192 CSS adicional<\/strong>. Esto es superf\u00e1cil y podr\u00e1s ver tus cambios con una vista previa en vivo al instante.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-06-06-at-7.25.55-PM-1024x601.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"601\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-06-06-at-7.25.55-PM-1024x601.png\" alt=\"Adding Additional CSS\" class=\"wp-image-21167\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-06-06-at-7.25.55-PM-1024x601.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-06-06-at-7.25.55-PM-1024x601-300x176.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-06-06-at-7.25.55-PM-1024x601-768x451.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Debe tenerse en cuenta que el CSS a\u00f1adido en esta \u00e1rea es espec\u00edfico del tema, por lo que si usted <a href=\"https:\/\/git-staging.wpastra.com\/es\/guides-and-tutorials\/wordpress-change-theme\/\" target=\"_blank\" rel=\"noreferrer noopener\">cambiar de tema<\/a>perder\u00e1s tu CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Uso de un plugin externo<\/h3>\n\n\n\n<p>Puede utilizar el plugin externo como\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/simple-custom-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS personalizado sencillo<\/a> para a\u00f1adir CSS personalizado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Uso de un tema hijo<\/h3>\n\n\n\n<p>Si te sientes c\u00f3modo con el c\u00f3digo, los temas hijo te permiten a\u00f1adir CSS directamente a la hoja de estilos de tu tema.<\/p>\n\n\n\n<p>Si a\u00fan no tiene uno, puede consultar este enlace <a href=\"https:\/\/git-staging.wpastra.com\/es\/guides-and-tutorials\/wordpress-create-child-theme\/\">documento <\/a>para crear un tema hijo para su tema principal. Esto garantiza la seguridad de la personalizaci\u00f3n y la compatibilidad con las actualizaciones de temas.<\/p>\n\n\n\n<p>Si ya est\u00e1s utilizando un tema hijo, puedes utilizar el archivo style.css para a\u00f1adir tu CSS personalizado. Lea <a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/how-to-edit-style-css-in-child-theme\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u00bfC\u00f3mo editar style.css en el tema hijo?<\/a><\/p>\n\n\n\n<p>Esperamos que este documento le haya sido \u00fatil. No dude en dejarnos un comentario a continuaci\u00f3n si tiene alguna duda.<\/p>","protected":false},"excerpt":{"rendered":"<p>In the world of WordPress customization, adding a dash of custom CSS can elevate your website\u2019s look and feel. But who wants to mess with theme files directly? \u00a0In this article, we will show you how to add custom CSS to your WordPress site without editing any theme files. In Customizer Since WordPress 4.7, you [\u2026]<\/p>","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"docs_category":[2113],"docs_tag":[],"class_list":{"0":"post-13","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-custom-css"},"spectra_custom_meta":{"_wp_old_slug":["adding-css|adding-css","adding-css|adding-css"],"_wp_page_template":["default"],"_edit_lock":["1708395960:89"],"wpil_sync_report3":["1"],"wpil_links_inbound_internal_count":["2"],"wpil_links_inbound_internal_count_data":["a:2:{i:0;a:9:{s:3:\"url\";s:60:\"https:\/\/git-staging.wpastra.com\/docs\/adding-custom-css-code\/\";s:8:\"url_real\";s:60:\"https:\/\/git-staging.wpastra.com\/docs\/adding-custom-css-code\/\";s:4:\"host\";s:11:\"wpastra.com\";s:9:\"host_real\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:7:\"post_id\";s:5:\"23510\";s:6:\"anchor\";s:17:\"as explained here\";s:15:\"added_by_plugin\";b:0;s:10:\"post_title\";s:37:\"How to Highlight a Certain Menu Item?\";}i:1;a:9:{s:3:\"url\";s:60:\"https:\/\/git-staging.wpastra.com\/docs\/adding-custom-css-code\/\";s:8:\"url_real\";s:60:\"https:\/\/git-staging.wpastra.com\/docs\/adding-custom-css-code\/\";s:4:\"host\";s:11:\"wpastra.com\";s:9:\"host_real\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:7:\"post_id\";s:5:\"23522\";s:6:\"anchor\";s:29:\"how you can add custom CSS?\u00a0\";s:15:\"added_by_plugin\";b:0;s:10:\"post_title\";s:30:\"How to Design Bullets & Lists?\";}}"],"wpil_links_outbound_internal_count":["2"],"wpil_links_outbound_internal_count_data":["a:2:{i:0;a:9:{s:3:\"url\";s:108:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-06-06-at-7.25.55-PM-1024x601.png\";s:8:\"url_real\";s:108:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-06-06-at-7.25.55-PM-1024x601.png\";s:4:\"host\";s:11:\"wpastra.com\";s:9:\"host_real\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:7:\"post_id\";i:0;s:6:\"anchor\";s:151:\"<img src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-06-06-at-7.25.55-PM-1024x601.png\" alt=\"\" class=\"wp-image-21167\"\/>\";s:15:\"added_by_plugin\";b:0;s:10:\"post_title\";s:0:\"\";}i:1;a:9:{s:3:\"url\";s:74:\"https:\/\/git-staging.wpastra.com\/docs\/how-to-edit-style-css-in-child-theme\/\";s:8:\"url_real\";s:74:\"https:\/\/git-staging.wpastra.com\/docs\/how-to-edit-style-css-in-child-theme\/\";s:4:\"host\";s:11:\"wpastra.com\";s:9:\"host_real\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:7:\"post_id\";i:0;s:6:\"anchor\";s:41:\"How to edit style.css in the child theme?\";s:15:\"added_by_plugin\";b:0;s:10:\"post_title\";s:0:\"\";}}"],"wpil_links_outbound_external_count":["1"],"wpil_links_outbound_external_count_data":["a:1:{i:0;a:9:{s:3:\"url\";s:48:\"https:\/\/wordpress.org\/plugins\/simple-custom-css\/\";s:8:\"url_real\";s:48:\"https:\/\/wordpress.org\/plugins\/simple-custom-css\/\";s:4:\"host\";s:13:\"wordpress.org\";s:9:\"host_real\";s:13:\"wordpress.org\";s:8:\"internal\";b:0;s:7:\"post_id\";i:0;s:6:\"anchor\";s:17:\"Simple Custom CSS\";s:15:\"added_by_plugin\";b:0;s:10:\"post_title\";s:0:\"\";}}"],"wpil_sync_report2_time":["2019-09-05T12:02:12+00:00"],"_edit_last":["89"],"onesignal_meta_box_present":["1"],"onesignal_send_notification":[""],"site-sidebar-layout":["default"],"site-content-layout":["default"],"theme-transparent-header-meta":["default"],"_yoast_wpseo_content_score":["90"],"_ppc_meta_key":["a:11:{s:20:\"ppc_key5d92f85d42273\";s:60:\"Images &amp; Names Correctly. Title &amp; Alt Tags are Given\";s:8:\"ppc_key4\";s:15:\"Formatting Done\";s:8:\"ppc_key2\";s:23:\"Featured Image Assigned\";s:8:\"ppc_key3\";s:17:\"Category Selected\";s:8:\"ppc_key5\";s:15:\"Title is Catchy\";s:8:\"ppc_key6\";s:22:\"Social Images Assigned\";s:8:\"ppc_key7\";s:8:\"Done SEO\";s:8:\"ppc_key8\";s:28:\"Spelling and Grammar Checked\";s:20:\"ppc_key5ddf5ba19a347\";s:9:\"TOC Added\";s:20:\"ppc_key5ddf5b93dc6a6\";s:21:\"Affiliate Links Added\";s:20:\"ppc_key5ddf5c326920c\";s:59:\"Headings are in title-case and have appropriate heading tag\";}"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"_yoast_wpseo_title":["How to Add Custom CSS Code Without Editing Theme Files?"],"_ht_kb_post_views_count":["18"],"_ht_kb_usefulness":["0"],"_ht_article_order_103":["13"],"wp_last_modified_info":["August 19, 2022 @ 7:27 PM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"views":["9824"],"helpful":["3"],"unhelpful":["21"],"redirects":["9"],"_lmt_disableupdate":["no"],"_wplmi_last_modified":["2022-08-19 19:27:09"],"rank_math_title":["How to Add Custom CSS Code Without Editing Theme Files?"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["1441"],"rank_math_seo_score":["18"],"rank_math_internal_links_processed":["1"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"6868d0700f347f202c0c5ed71f59d049\";s:6:\"images\";a:1:{i:0;s:108:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-06-06-at-7.25.55-PM-1024x601.png\";}}"],"_wpml_media_duplicate":["1"],"_trp_automatically_translated_slug_es_ES":["anadir-codigo-css-personalizado"],"_uag_custom_page_level_css":[""],"ast-site-content-layout":["default"],"adv-header-id-meta":[""],"stick-header-meta":[""],"astra-migrate-meta-layouts":["set"],"rank_math_primary_docs_category":["2113"],"pfd_related_docs":[""],"_uag_page_assets":["a:9:{s:3:\"css\";s:2495:\".wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 0px;column-gap: 0px;}.wp-block-uagb-container.uagb-block-debf2792{box-shadow: 0px 0px   #00000070 ;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;overflow: visible;border-color: inherit;row-gap: 0px;column-gap: 0px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:5:{i:0;s:14:\"core\/paragraph\";i:1;s:12:\"core\/heading\";i:2;s:10:\"core\/image\";i:3;s:14:\"uagb\/container\";i:4;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1776551040\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"Swapnil","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/swapnild\/"},"uagb_comment_info":0,"uagb_excerpt":"In the world of WordPress customization, adding a dash of custom CSS can elevate your website&#8217;s look and feel. But who wants to mess with theme files directly? \u00a0In this article, we will show you how to add custom CSS to your WordPress site without editing any theme files. In Customizer Since WordPress 4.7, you&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/13"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/13\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=13"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=13"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}