XF 2.1 Forum icon rework

[Joe Kuhn]

I'm in Figma and I've got this worked out to replace the standard Forum icons



I got the balloon CSV from https://iconify.design/icon-sets/?query=bubbles. The trick was, when I pasted the bubbles into my Frame, they didn't appear at all. Turns out the Width and Height were set to zeros. Made them both 300 so I could see the bubbles and move them around. Then I added a bit of the default font for C#, Tahoma, in a text object and slid it over to the back bubble.

Next I need to get this FoxPro png into that first bubble:

File:Foxpro-icon.png - Wikimedia Commons

commons.wikimedia.org

Tried converting the png to CSV and got a black and white version with some other garbage.

Next I tried, in Figma, to do a File/PlaceImage referencing the png file via the url. The image filled the box containing the first bubble rather than filling the bubble. I could not find a way to shrink the Fox image.



Thoughts?

 

[Joe Kuhn]

Here is a rough idea. I'm sure there are better ways to implement it. Calling all creative ppl to this thread!

Hey, how'd you get that same Fox icon? Ha!

It really should be an arrow pointing up because the C# development environment is awesome and the FoxPro one is old and out of date, that's for sure.

 

[l3ta]

Hey, how'd you get that same Fox icon? Ha!

It really should be an arrow pointing up because the C# development environment is awesome and the FoxPro one is old and out of date, that's for sure.

Even better!

 

[Joe Kuhn]

But first I tried flipping the colors, enlarging to 48 pixels and adding inner shadow. It's looking pretty good except for the margins of the forum titles.



My signature has the link:

 

[Joe Kuhn]

Played around with the fox, arrows and "C#". The arrows don't look like much at this size:



Here's a fair comparison at their normal size:



Also watched the video in the thread on how to change just about anything and everything:

How to change almost anything quickly and easily...

Hey guys, I've been selling a lot of posts asking about how to change the spacing of x or the color of y, so I thought I would make a brief screencast that illustrates my process of finding out where/how to change something I want to change within a style... This will work for almost anything...

xenforo.com

Then I discovered I need to change the width of the icon to 56 px from 46 rather than change the left margin of the Title. That gives me the space I'm after at the red circle. This was in node_list.less where I've been working. Done.

 

[Joe Kuhn]

Learned that the CSS width can be set to a number wider than the actual icon width to create some space. I was thinking I'd have to move the title on the right over by changing it's left margin. Not so, particularly in the mobile version where there is more than one item up against the icon. Better to change the icon width to get the space for anything that ends up bordering it.

 

[Joe Kuhn]

Laptop final version:



I don't mind giving up some horizontal white space for clearer icons. The whole page fits on my laptop screen with a little bit of scrolling. Mobil version is functional with one thumb scroll.



After one thumb scroll:



And credit given to original icon author.

 

[Joe Kuhn]

Also found this nice outline icon on-line as a png file. There are so many possibilities.

 

[Joe Kuhn]

Darkened up the backgrounds for better contrast and flipped the fox by just dragging the left side of the box past the right side. Hah.

 

[Joe Kuhn]

Maybe a little too dark behind the fox.

 

[Max Taxable]

Maybe a little too dark behind the fox.

It pops, the way you have it IMO.