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 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.
Let’s get into it.
1- From your Drupal web page localize the block that you want to modify
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 10.
3- Click the arrow tool on top left of the developer menu bar
4- Once the tool is active point and click at the element on the web page that you want to inspect
5- The equivalent code from the element on the web page is now highlighted on the developer editor. Expand the div if necessary and look for the block id then copy it and save it for later.
6- Open Filezilla or your chosen FTP program then navigate to your theme from the themes folder on the root directory of your website
7- Select your theme, double click to its folder and access the CSS file inside the theme folder, (../themes/your-theme-name/style.css)
8- Download the CSS file to your machine
9- Open the CSS file with your code editor and scroll down at the very bottom
10- Â Add your styling
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.
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.
Digital Designer, blog writer and also a tech enthusiast.
He loves to write content for blogs, podcasts, design websites, logos, brochures, banners and anything that sends a message to an audience.
You can contact Daniele at the link below:
