{"id":66,"date":"2016-06-22T08:38:59","date_gmt":"2016-06-22T08:38:59","guid":{"rendered":"https:\/\/danielepais.com\/journal\/2016\/06\/22\/how-to-modify-a-drupal-block-via-its-css\/"},"modified":"2022-02-03T14:14:54","modified_gmt":"2022-02-03T07:14:54","slug":"how-to-modify-a-drupal-block-via-its-css","status":"publish","type":"post","link":"https:\/\/danielepais.com\/journal\/how-to-modify-a-drupal-block-via-its-css\/","title":{"rendered":"How to modify a drupal block via its CSS"},"content":{"rendered":"

Looking to modify the look and feel of your blocks? In this tutorial we will see how to do just that by making changes on its CSS<\/a> file. From the CSS you can change many aspects of the blocks look and feel but for today I will show you how to resize them as that is the change I had to do at my web site.<\/p>\n

Let’s get into it.<\/p>\n

1- From your Drupal web page localize the block that you want to modify<\/strong><\/p>\n

\"The<\/p>\n

2- Press ctrl+shift+i on your keyboard and load the Developer Tools, (Chrome & Firefox), or press F12 if you are using Microsoft edge on Windows<\/a> 10.<\/strong><\/p>\n

\"Press<\/p>\n

3- Click the arrow tool on top left of the developer menu bar<\/strong><\/p>\n

\"3-<\/p>\n

4- Once the tool is active point and click at the element on the web page that you want to inspect<\/strong><\/p>\n

\"Once<\/p>\n

5- The equivalent code from the element on the web page is now highlighted on the developer editor.\u00a0Expand the div if necessary and look for the block id then copy it and save it for later.<\/strong><\/p>\n

\"5-<\/p>\n

6- Open Filezilla or your chosen FTP program then navigate to your theme from the themes<\/a> folder on the root directory of your website<\/strong><\/p>\n

\"Open<\/p>\n

7- Select your theme, double click to its folder and access the\u00a0CSS file inside the theme folder, (..\/themes\/your-theme-name\/style.css)<\/strong><\/p>\n

\"Select<\/p>\n

8- Download<\/a> the CSS file to your machine<\/strong><\/p>\n

\"Download<\/p>\n

9- Open the CSS file with your code editor and scroll down at the very bottom<\/strong><\/p>\n

\"Open<\/p>\n

10- \u00a0Add your styling<\/strong><\/p>\n

\"Add<\/p>\n

11- Save the CSS file and upload it to your website so that it overrides the old one. Now refresh your web page and…Voila….job done.<\/strong><\/p>\n

\"Blocks<\/p>\n

That’s it, by now you should see the changes live. Please remember to backup a copy of your CSS file “BEFORE” overriding, just in case that you want to revert your changes or something did not go right as you expected.<\/p>\n","protected":false},"excerpt":{"rendered":"

\"TheLooking to modify the look and feel of your blocks? In this tutorial we will see how to do just that by making changes on its CSS file. From the CSS you can change many aspects of the blocks look and feel but for today I will show you how to resize them as that is the change I had to do at my web site.<\/p>\n

Let’s get into it.<\/p>\n","protected":false},"author":1,"featured_media":6540,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"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":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","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":""}},"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[225],"tags":[188,191,187,189,190],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t