Food's forum themes - v8 pre

Fucking love it. Thx for this thread mate.

Marco wrote:
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.

Yeah I found the triangle and the circle without much trouble, in fact, as I said, I found them by chance. What took me so long was actually the three bars to the left of quick links. Those are neither an image or a textual icon, they're actually an empty element with borders.

And no, I'm using Firefox's integrated dev tools, which while good are somewhat limited. Biggest trouble I have with them is that either they can't display ::before and ::after pesudo-elements or I can't see them. They also don't appear in the DOM (obviously) so sometimes finding stuff is painful. I'll try firebug next, and if all else fails I might develop this stuff on chrome. With only 2GB of ram (some of which is corrupted) it might not be feasible though. I'll see.

It took me so long for several reasons. One is that I literally knew nothing about CSS before starting this project, apart the general syntax and doing simple stuff like changing the background / text / border color of an element. So I had to document myself on stuff like pseudo-elements and their behaviour (they don't appear in the DOM and, for some reason, changing the text-decoration of a pseudo-element doesn't work unless it is also displayed as inline-block).

Since I knew nothing about CSS, I ended up with a bunch of overqualified selectors, and for that reason I sometimes fixed something that ended up breaking something else.

Then there is the fact that icon work in several different ways. For example all the header icons are .small-icon, and thankfully those work pretty much the same.
There is also .icon-button for which every icon needed manual intervention for positioning and sizing (it also took me a while to understand why they didn't show up at first: I was using font-size: xx%, but for some reason that doesn't work; font-size xpt does though, and I have no idea why).
And there is .imageset, then there is the .subforum class that contains other icons with another behavior, then there are the icons in the compose pm page and the icon to mark a notification as read and the one to close the notification you get when you click "mark forums as read", which also needed manual tinkering to give it a background (you could see through it's open spaces otherwise).
And obviously, I also needed to chose the "right" icon, which was easy for the most part but needed some thought for some of them (like donation or tg icons).

Then there is the fact that I wanted various tables to look the same (board index tables, guide center and a coupe in the user control panel), but their box model was a bit of a mess with all the resizing I did around, so I ended up rewriting all the relative code. And since I wanted to be pixel-perfect I had to measure stuff.

Then there is the fact that sometimes the html was different from what I expected and I didn't understand, at first, why stuff didn't work. An example of this is in the guide center, where the header also has the .guidelist class, so I had to use the :not selector to apply stuff to the guidelist itself but not to the header (not hard, but I didn't understand why stuff broke, at first), or where the "version" writing on the header has a class of .version but the version in the actual body of the table has class .views.

And, probably the biggest culprit, the user control pane. There are a couple of things there that I simply cannot style. Like, there is what I started calling a "phantom border" that I can't style. Even setting this rule:

Code: Select all

* {
   border: 0px !important;
}

does not remove it. Even when that rule is the last one. And I also tried other stuff like color, background-color, width, height etc. That border won't budge. Without my style applied that border doesn't exist (I think, but I'm not 100% sure), so I guess it's an error on my part but I tried everything I could and I still couldn't style a simple border. I'll keep trying in the coming days, maybe with chrome to see if it's some kind of pseudo-element or something.

Yeah, it's not been too hard overall, but definitely time consuming.

Anyway, thanks for your offer, I'll definitely send you a pm when I'll get stuck somewhere, and also to turn this into an official theme if you so desire. I'll have another look on the forum to see if I made mistake or forgot something and then I'll release v6, so ETA is 15 minutes at most if I don't find broken stuff.

Thanks for the support guys.

And no, I'm using Firefox's integrated dev tools, which while good are somewhat limited. Biggest trouble I have with them is that either they can't display ::before and ::after pesudo-elements or I can't see them. They also don't appear in the DOM (obviously) so sometimes finding stuff is painful. I'll try firebug next, and if all else fails I might develop this stuff on chrome. With only 2GB of ram (some of which is corrupted) it might not be feasible though. I'll see.

I recommend chrome. Firebug is messy, I tried it. Overall, chrome beats firefox by a rather heavy margin in terms of development. You will see the elements console is a lot more complete and confortable, with many options to ease your work. And ::before / ::after pseudo-elements are displayed in the DOM tree.

Since I knew nothing about CSS, I ended up with a bunch of overqualified selectors, and for that reason I sometimes fixed something that ended up breaking something else.

Yep, HTML and CSS are markups that you learn as you use them. Thankfully they are very intuitive and almost any doubt regarding those is answered in stackoverflow.

Then there is the fact that sometimes the html was different from what I expected and I didn't understand, at first, why stuff didn't work. An example of this is in the guide center, where the header also has the .guidelist class, so I had to use the :not selector to apply stuff to the guidelist itself but not to the header

Not really. If you check the DOM, the guideheader's direct child is li.header, while all direct children of non-header list have the li.row class. So you just need to be more specific, eg:

Code: Select all

ul.guidelist li.header [...] { params } /* from here you can select children from the header guidelist */
ul.guidelist li.row [...] { params } /* from here you can select children from the body guidelist */

There's no need for :not selector (and it's overall not a good practice to use these).

And, probably the biggest culprit, the user control pane. There are a couple of things there that I simply cannot style. Like, there is what I started calling a "phantom border" that I can't style. Even setting this rule:

Code: Select all

* { border: 0; !important }

This doesn't necessarily have to work. If the border from the element has also an !important parameter, the * selector will always have lower priority. CSS priorities are defined by how specific your selection is. Anyways, tell me what element you're trying to style and I'll give you the selector you need.

Yeah, it's not been too hard overall, but definitely time consuming.

Yep, but once it becomes natural, it is a really useful tool, even for personal use. Javascript as well. Then you can tweak literally any site to your needs.

Thanks for the support guys.

Good job

V6 is up, I hope you enjoy it and please remember to provide feedback.

amazing, getting there!

1) some icons missing (the moderator/admin ones) - I can tell you which ones if you want or you can deduct them from the colors.css stylesheet
2) most icons are too big imo
3) don't quite like the TG one - what about coins, do they look to bad?

Marco wrote:1) some icons missing (the moderator/admin ones) - I can tell you which ones if you want or you can deduct them from the colors.css stylesheet

It would probably work if they have .small-icon class, all other types of icon would need manual positioning.

Marco wrote:2) most icons are too big imo

Do they look like in the screenshots or are they bigger? Just making sure it's not a text / font related issue since the icons are now text (don't really know how font sizing works). Anyway I could reduce their size, but they look bad at sizes similar to the old ones sadly. I also would like them a little smaller.

Marco wrote:3) don't quite like the TG one - what about coins, do they look to bad?

Yeah, I was unsure about it myself. They don't look bad, but they look out of place. Maybe I could use an .svg icon from here if you like one of them. Or I could try to make one in inkscape, a simple circle with "TG" written inside?

New version is out. As always, please provide feedback if you encounter styling bugs.

Also, there is a note for forum staff at the top of the first post, if you are forum staff please read it.

Finally, there are some known usability bugs on firefox (mainly nested content like code inside quotes doesn't have borders), I'm working on it. Right now, the theme is most suited for webkit / blink browsers.

this theme is so sick. I'm even considering to put the theme picking right when you register so it doesn't get unnoticed.

This is the main thread for my unofficial forum themes. It has been requested many times but Marco and other admins have other priorities right now, with all the stuff that's going on. So I decided to whip up a quick something.

To clarify: it's not that I have other priorities. The theme looks really good. But since new pages and content is being added, I'd rather wait until all forum features are implemented and then implement sub styles. What's missing is the portal (almost done and btw. it looks AMAZING with your theme), TG lottery / shop and item BBCodes. Also there is a lot of inline CSS in some of the new content which needs to be moved to the external css files.

Admin / mod forum functions, ranging from icons to whole missing backgrounds, may not be correctly styled, especially so with v7.

I'll give you access to one of the private forums so you can see the whole thing. Missing are:

missing icons: http://i.imgur.com/bg7DbFQ.png ACP | MCP
missing icon: http://i.imgur.com/fkHaIib.png
missing icons: http://i.imgur.com/TFZqmWC.png Delete | Warn | Info

Well done Food, really great job. I'm a bit ashamed to admit that I actually got used to the white theme (even after disliking it initially) and prefer it to yours in terms of readability and lines basically, but you really did a great service to all the users who prefer the darker tones.

My only real criticism so far is that some parts are lacking some sort of separation (see bottom of index page where who is online thingies are -- its kind of weird to distinguish sections). But suddenly things like search box look fantastic compared to this theme. Maybe I'll take some of those ideas or maybe I can just give food access to all CSS / html so he has full freedom and liberty to create any amount of themes. But we'll see. Priority atm is to improve theme further and make it compatible with all browsers (which is a sad reality but it has to be done).