{"id":42972,"date":"2015-02-02T04:59:39","date_gmt":"2015-02-02T09:59:39","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=42972"},"modified":"2016-02-24T03:52:14","modified_gmt":"2016-02-24T08:52:14","slug":"wordpress-how-to-assign-and-use-the-widgets-css-classes","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-how-to-assign-and-use-the-widgets-css-classes.html","title":{"rendered":"WordPress. How to assign and use the widgets CSS classes"},"content":{"rendered":"<p>\r\n<\/p>\r\n<p>Our Support team is ready to present a new tutorial that will show you how to assign and use the widgets CSS classes in WordPress.<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=hixES4WYv90?width=1280&amp;height=720\" rel=\"prettyPhoto\">WordPress. How to assign and use the widgets CSS classes<\/a><\/p>\r\n<p>Template CSS classes are not all unique. You might need to add the specific CSS rule for 1 widget only.<\/p>\r\n<ol>\r\n<li>\r\n<p>First, navigate to <strong>Appearance > Widgets<\/strong>. Locate the needed widget. <\/p>\r\n<\/li>\r\n<li>\r\n<p>Find the <strong>Custom CSS class: <\/strong> field, add the CSS class:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/01\/wordpress_how_to_assign_use_widget_css_class_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/01\/wordpress_how_to_assign_use_widget_css_class_1-203x300.png\" alt=\"wordpress_how_to_assign_use_widget_css_class_1\" width=\"203\" height=\"300\" class=\"aligncenter size-medium wp-image-42973\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/01\/wordpress_how_to_assign_use_widget_css_class_1-203x300.png 203w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/01\/wordpress_how_to_assign_use_widget_css_class_1-101x150.png 101w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/01\/wordpress_how_to_assign_use_widget_css_class_1.png 431w\" sizes=\"(max-width: 203px) 100vw, 203px\" \/><\/a>\r\n<\/li>\r\n<li>\r\n<p>Click on <strong>Save <\/strong> when you are done.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Now, you can work on adding a CSS rule. You will need to use the <a target=\"_blank\" href=\"\/help\/developer-tools.html\">developer tools<\/a>.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Since you have a unique CSS class now, you can add the specific CSS rule for this widget only:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/01\/wordpress_how_to_assign_use_widget_css_class_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/01\/wordpress_how_to_assign_use_widget_css_class_2-300x136.png\" alt=\"wordpress_how_to_assign_use_widget_css_class_2\" width=\"300\" height=\"136\" class=\"aligncenter size-medium wp-image-42974\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/01\/wordpress_how_to_assign_use_widget_css_class_2-300x136.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/01\/wordpress_how_to_assign_use_widget_css_class_2-150x68.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/01\/wordpress_how_to_assign_use_widget_css_class_2.png 811w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=hixES4WYv90?width=1280&amp;height=720\" rel=\"prettyPhoto\">WordPress. How to assign and use the widgets CSS classes<\/a><\/p>\r\n<\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Our Support team is ready to present a new tutorial that will show you how to assign and use the widgets CSS classes in WordPress.<\/p>\n","protected":false},"author":56,"featured_media":43471,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[651,514,559,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/42972"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=42972"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/42972\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/43471"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=42972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=42972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=42972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}