XF 2.1 Logo development for a new site

Joe Kuhn

Well-known member
My new site is here

I developed my own Forum icons and am liking the graphics work so much I started looking at logos.

Since my forum theme is the translation of FoxPro programs to C#, I'm thinking of developing a logo that changes from the FoxPro logo to the C# logo one small piece at a time, either in place or side by side.

If they were side by side, the C# logo would not be visible to start with. As a small block of the FoxPro logo would disappear and, a same size block of the C# logo would appear. The pieces could be randomly chosen from each of the two logos, and eventually, the FoxPro logo would be completely gone, the C# logo completely visible. Then it would start over again after a pause.

1583698653235.png 1583698678463.png

If it was one on top of the other, I'd simply replace one piece of the Fox logo with a piece from the C# logo. Small squares come to mind.

Would like to see it both ways.

How would I do this?
 
We're strictly talking styling here.
Well said. As a programmer myself, I believe I prefer the thin long one allowing for more content down the page. That's what I go for when I look things up on other sites. I entered a site today that listed programmer library entries and it went down the page with rows and rows of FoxPro statements that they've translated to C#. I referenced it in my forum immediately. Content is what I seek and I believe other programmers doing this work will as well.
 
I really like this example showing very little white space, passive white space and passive & active white space:

1584153509780.png

Then I went to my site and hey, I think it looks ok. I've got passive and active white space, don't I?

1584153390862.png
 
Last edited:
I really like this example showing very little which space, passive white space and passive & active white space:
The example is talking about aggregate white space, aka white space in text blocks. xF already has that pretty well done, native. Although that too is adjustable.

The macro white space in the header is what I'm referring to.

You have it looking fine for mobile now, that's something like 80 percent at least, of web surfing people today.
 
Give this one a shot. It should look/pop better on the darker header background. Changes: black text to white text w/ black stroke, and added drop shadows on images.

foxpro-to-c#-thin-logo-version2.png


...also add this to extra.less
CSS:
.p-header-content {
    padding: none !important;
}
 
Last edited:
I added to extra.less as suggested and wonder what that and the other suggestions above actually do.

Now this looks sharp! Ye haw:

1584195035423.webp

Mobile:

1584195302347.webp

Thanks so much for everybody's help. 🦊

Next is my avatar. I wonder if I can invert the color on it.
 
I added to extra.less as suggested and wonder what that and the other suggestions above actually do.

The original suggested css additions were to keep the logo from being shrunk down in mobile view and placed between the three bar menu icon and avatar icon, and allowing the logo to go full width on mobile screens just like you would see on large screens. The suggestion I made was to remove some padding from the logo (6px above and 6px below), basically removing about a full line of unneeded padding on the header when using that logo.
 
Every time I looked at my site I disliked the forum balloons. So I changed their fill colors from blue & grey to blue and purple. Done! (but I've said that before.) Thanks to everybody for the help.

1585100251317.webp
 
I also notice the OP has the fox and word fox. I think it can be simplified and condensed. It is HUGE. Look at the XF and FB logo. But hey what do I know?
 
Back
Top Bottom