I can not figure out how I can change what icons show up for the blocks! I have tried inputting classes in the block module, but there is code added around it so any icon shows up inside the outer box. Is there a simple way to do this? I would like to add some icons to custom blocks. Any help would be greatly appreciated!

Comments

avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Title: How do you update the icons for the blocks??? » How do you update the icons for the blocks?
Assigned: sweetback » Unassigned
florian’s picture

florian commented

Take a look at /css/block-icons-32.css to see how to put icons for blocks. You can repeat that method or use your own. I advise you to do custom modifications only in /_custom/custom-style.css

sweetback’s picture

sweetback commented

Thanks for the reply Florian! I am pretty new at Drupal, so trying to figure out how I would create a new block with a class attached to it. I tried to just add a block with a div and class attached but then it got wrapped in another div upon output of the site so it rendered on the finished page as a div with icon but within another div. How would I go about doing this in a better way? Thanks for your help!!!

florian’s picture

florian commented

You can use an existing block or you can create a new one from admin/blocks ... Then look for its id/class. For example, I have created a new block for contact (look at boaz.ro) and then I have put a png32 transparent image using the below code in custom-style.css:

#block-block-2 .block-icon {
background: transparent url(../images/contact_48.png) no-repeat;
}
sweetback’s picture

sweetback commented

that all makes sense... except, how do I know what the block div will be titled so I can hook it in the css? Do they go sequentially by how they were created? In your case, how did you know to name the css rule #block-block-2 .block-icon?

Sorry if this is a dumb question, just trying to get the hang of it, and I love your theme! Thanks so much!

florian’s picture

florian commented

Create the block and then look in the page source.... or mouse over "configuration" of the respective block and look at brower's status bar ... it looks like /admin/build/block/configure/block/2, where 2 is the block number.

Turkish Delight’s picture

Turkish Delight commented

After implementation of this theme, I moved around a few blocks. For some darn reason, my search icon in the left sidebar (though it fails to show up in any bar both in 32x32 and 48x48) failed to show up after a day or so (could've happened after cron?), which I found odd. No changes in block css or in the icon name, and no other icons are affected whatsoever. Anyone have any ideas?
Clearing cache does not seem to fix the issue.

asinnema’s picture

asinnema commented

I tried adding my own but it doesn't work somehow. I'm using the module nice-menus. Did I somehow misunderstand/typo? :)

.block-nice_menus-2 .block-icon {
	background: transparent url(../images/icons/blocks/icon_06_32.png) no-repeat;
}
acsooley’s picture

acsooley commented

How do I change the image for a views block or a pager block? I cannot seem to place the right tag to get it to work.

ludo1960’s picture

ludo1960 commented

Wondering if anybody has solved this yet as I cant get it to work either?

powery’s picture

powery commented

Try to add

#block-views-nameoftheview-block_1 .block-icon {
background: transparent url(../images/icons/blocks/icon_17_32.png) no-repeat;
}

for view block, where nameoftheview is the view name, to the _custom/custom-style.css. You can change the icon picture name.

ludo1960’s picture

ludo1960 commented

Yep that worked, many thanks....must really learn CSS one day :-)

zydu’s picture

zydu commented

Worth mentioning that it only works, when block has a title, else icon div doesn't get printed.

florian’s picture

florian commented

Just put a "space" in the block title and it will work as expected.

sweetback’s picture

sweetback commented
Status: Active » Closed (fixed)