Food's forum themes - v8 pre

[Food]

ED: Found another place to improve: ucp.php?i=ucp_notifications&mode=notification_options

Thanks, I somehow completely missed that page. This is fixed now, and so is the color of the "friends" header in the friends list.
I'm still trying to round borders on that table, it's somehow harder than expected. Oh well, I'll see.

you should probably try to do some photoshop action to adapt icons and then batch process all forum icons

Yeah, that would probably be the best thing, but I have no photoshop experience nor photoshop installed. I'll see what I can do with my alternatives. To be fair, I was thinking about redesigning them from scratch, but I've got an idea just now. If I make a scalar font rather than icons they could be themed... Like the icons in the upper right corner with facebook, youtube, twitch, and moddb links. I'm willing to bet those are actually "letters" of an icon font.

links are probably too hard to recognize

You mean like this? Because they're pretty recognizable here, with a red underline and a red background when hovered over.
Or like the one Will posted? In this case yeah, they've got a different css class that I didn't know about, I'm fixing it now.

[Will]

Okay cool. Can't wait for the next release!

[Marco]

You can do this with font awesome (which is included in the forum already - you don't need to import this).
It has a similar set of icons than the ones used here.

Notifications
Private messages
Quick links
Board index

If you wanted to change for example Board Index icon, you could do it like:

Code: Select all

li.icon-home {
    position: relative;
    background-image: none;
}

li.icon-home:before {
    position: absolute;
    font-family: FontAwesome;
    top: 0px;
    left: 0px;
    font-size: 130%;
    color: red;
    content: '\f015';
}


Try it

[Food]

V5 is out.

• Fixed: notification options table in user control panel
• Fixed: important announcements in user control panel
• Fixed: notification manager in user control panel
• Changed: links are now red + underlined instead of white + underlined to make them more visible
• Added: styling of the members-only content tag*.

Hidden Content

This board requires you to be registered and logged-in to view hidden content.

Edit:

You can do this with font awesome (which is included in the forum already - you don't need to import this).
It has a similar set of icons than the ones used here.

Notifications
Private messages
Quick links
Board index

If you wanted to change for example Board Index icon, you could do it like:

Code: Select all

li.icon-home {
    position: relative;
    background-image: none;
}

li.icon-home:before {
    position: absolute;
    font-family: FontAwesome;
    top: 0px;
    left: 0px;
    font-size: 130%;
    color: red;
    content: '\f015';
}


Hell yeah! This is great, thank you! This will save me a lot of work. V6 will feature new icons then. I'll start working on it later I guess, right now I'll update the first post and go play some tf2.

Edit 2: Looks like I didn't consider quote chains or nested content of any type. This will be fixed in v6 as well.

[Marco]

No problem.

You can find the list of the icons in:
styles/medianxl/theme/colours.css (line 715)

I assume left/top values would be the same for all instances, so you could add those to .small-icon:before to avoid repeating code.

[Food]

I lied. V5b is out, it reverts the changes I made to borders. I don't know how much will take me to finish up v6, and since I strongly believe usability to be paramount those changes are too important to leave hanging.

[Naabaanit]

The text showing positive and negative votes given and received is black along with the background

I'm not complaining, though, just feedback, great work!

[Food]

Thanks for the feedback, can you provide a screenshot or tell me where to find this text?

Anyway, I've been working almost non-stop on this for the last two days, pausing only to eat, sleep, play a bit of tf2 in one instance and some random 5 - 10 minutes breaks. Adding icons is more time consuming than I expected.

So, v6 is near and will be the biggest release yet in both time spent on it and lines of css (consider this: v5b had 511 lines of css, the not yet fiished v6 has 1183. That is 230% the size, altough I'm pretty sure there are redundant things and i could reduce the number of lines of code by a good chunk, but I'm not going to do that right now).

Major v6 features will be:

• Icons. Lots of them (also removed an useless one, I'll think about removing others as well if needed)
• Even more standardized design. Main forum "tables", user control panel's "manage notifications" table, user control panel's "usergroups" table and guide center table now look the same.[note] (I'm even counting exact pixels because sometimes I'm too perfectionist)
• Vertically centered many things (not as easy as it sounds) which makes the forum look much better. Vertically recentered content has been also vertically resized to neatly fit its container.

Those may not look like much but they take a lot of time.

A little bit of trivia: replacing quick link's "icon" took me more than 45 minutes of digging around, during which I also discovered where the symbols to the left and right of your username (top right of navbar, I'm talking about the circle and the down-arrow) are defined, which is cool because I replaced them.
Well, I was looking around for an icon, an image or something. I went as far looking at almost every image defined in the code to find it. Guess what, It's not an image. It's an empty element with a double top border and a single bottom border. Finding that was frustrating.

Admittedly, it's mostly my fault because there were a lot of hints to the fact that the icon was not in fact an image, but well, I really didn't expect borders.

[spoil=note]Not exactly the same, there is a subtle difference that I won't tell you. Also user control panel's "edit notification options" table still looks different. The redesign of that table will come in a future version I hope.[/spoil]

[kiki22vu]

thx for this, cool stuff rly

[Marco]

A little bit of trivia: replacing quick link's "icon" took me more than 45 minutes of digging around, during which I also discovered where the symbols to the left and right of your username (top right of navbar, I'm talking about the circle and the down-arrow) are defined, which is cool because I replaced them.
Well, I was looking around for an icon, an image or something. I went as far looking at almost every image defined in the code to find it. Guess what, It's not an image. It's an empty element with a double top border and a single bottom border. Finding that was frustrating.

Hm, I checked this, are you talking about the triangle? Because it's not a CSS shape, it's just a html symbol inserted with ::after selector:

Code: Select all

.header-avatar span:after {
    content: '\25BC';
    display: inline-block;
    font-size: 9px;
    float: right;
    padding-left: 2px;
    opacity: 0.7;
}

Btw are you using chrome's inspect element to find the things you want? Trying to figure out why it took you so long. If you navigate through the DOM then you should eventually find whatever you're looking for without much trouble. Understanding it can take longer, sure, but finding it shouldn't be a problem. Also in the future you can just PM me or write in skype and I can save you time.