Icon list re-sized and simplified but with the same looks - easily? - Support

Tagged: icon list, list, resize

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
October 27, 2013 at 7:34 pm #181249

Jerremy-W
Participant

Hello people,

I want to edit the current “Icon List’ element to a more simplified version.
Basically just: List Item Title and List Item Icon, but at an appropriate size. The fond should just be as big as the other regular P elements, or maybe 1-2 pixels bigger. The problem is that I need to have the List Item Icons to be re-sized to a more appropriate size to really have a list like a normal plain list (maybe a little bigger line height so that the icon pictures within the icon are still visible). I hope I’m clear enough?

Some help or directions would be nice and hopefully very helpful.

All the best.

October 28, 2013 at 2:21 am #181339

Ismael
Moderator

Hi Jerremy-W!

Please post a screenshot of the mock up of the icon list that you want. You can use imgur, dropbox, mediafire to post the screenshot here.

Regards,
Ismael

October 28, 2013 at 5:37 am #181397

websitegurus
Participant

I agree with Jerremy-W.

It would be great to have two default sizes to choose from with the Icon List size. Small and Large. Or, maybe three sizes (small, med, large). With large being the current CSS settings. Right now if you have any more than 5 (or so) bullet point items on a list, the Icon List becomes rather dominating on the page. It will almost fill an entire screen height. The option is to spread it among more columns, but that starts to clutter and remove white space and is less of an option if you have a sidebar in the page.

I was going to dive into the CSS to see about resizing everything. It’s on my to do list, but if you know of a hack in the CSS to share that will resize the round Icons and the connected dotted line, this would be great. I would think scaling EM sizes might be a rather easy task, but just haven’t investigated where the CSS is buried.

I won’t hijack Jerremy’s thread, but I thought I would chime in with a thumbs up if this is what he’s asking for.

October 28, 2013 at 11:50 am #181526

Jerremy-W
Participant

Websitegurus exactly mentioned what I mean. So basically it would be good to have it possible for all the icons.
Do you still need a screenshot Ismael?

October 29, 2013 at 8:08 am #181936
Dude
Participant
Hey!

You can re-size the icons with this css code
```
.avia-icon-list .iconlist_icon {
height: 32px;
width: 32px;
line-height: 32px;
font-size: 20px;
}
```
Basically you need to set the same height, width and the line-height value and then you can try different font size values and stick with the value which gives you the best result.

Best regards,
Peter
October 30, 2013 at 7:51 pm #182544
websitegurus
Participant
Well, that’s a start. But not completely there. So, I decided to dive in myself. To make the entire .avia-icon-list-container take up less content area requires substantially more CSS involving edits to the children H4, P, line-heights, margins and various other things. It’s a matter of taste and you will have to fiddle with several things to make it work for your site. I offer some code snippets and comments to aid you in doing what you want, along with before and after screen captures to see what the results will look like. I am not completely sold on what I made here and think it can be tweaked more, but it should give you the nuts and bolts to get the job done for your site. Please note that .page-id-734 class relates to my installation here. Your mileage may vary. You may want to change things globally, or perhaps you can make a Class wrapper to selectively control specific Icon Lists within the Icon List page editor. Enable the custom CSS Class settings in your functions.php file in your child theme for the latter. Search this site for the code block to enable that feature.

In my opinion, there should be some options on the back-end for doing this automatically as mentioned in my previous post above. If you folks at Kriesit.at want to use this code base as a baseline for improving a more automated method, I think folks will welcome it.

Cheerios and good luck.
```
.page-id-734 .avia-icon-list LI
{
   /*
   margin-top: minus top property tightens up the spacing between each topic item
   margin-left: minus left property shifts the entire icon list container back to the left due to the margin-left settings in .iconlist_icon that recentered the dotted lines
   */
	margin: -20px 0 0 -17px;
}
.page-id-734 .avia-icon-list .iconlist_icon
{
	height: 40px;
	width: 40px;
	font-size: 22px;
	line-height: 40px;
   /*
   margin-left:  Important to do here -  recenters the dotted line
   margin-right: gives space right of the circle for adjacent text
   */
	margin: 0 30px 0 13px;
}
.page-id-734 .avia-icon-list-container .iconlist_content
{
	font-size: 12px;
	/*
  line-height: tightens up paragrapgh content under the item heading
  */
	line-height: 17px;
}
.page-id-734 .avia-icon-list-container H4
{
	/*
  Resizes the Item Heading
  */
	font-size: 13px;
}
```
Author

Posts