Wedge

Public area => The Pub => Off-topic => Topic started by: Arantor on March 12th, 2012, 03:13 AM

Title: Another WIP
Post by: Arantor on March 12th, 2012, 03:13 AM

I've been very restless today with everything going on, so much so that I couldn't concentrate on doing proper work for a friend like I was meant to (sorry, you know who you are, and I didn't trust myself to touch your stuff when I'm in this mood, but I'll deal with that in the morning)

So I figured I'd pass the evening on something that might cheer me up a little and that I could happily vent some spleen by swearing at it when it didn't work properly.

Some of you may remember that I had a subscription for BlocWeb and that I was a big fan of some of his themes - one that I always liked was BlueLight. It's a pretty minimal theme, lots of nice gradients, and I figured I might give something like it a shot for Wedge.

And here's the result. It's still heavily WIP, based on Wine, but tweaking the menu is what's taken me over an hour to get to this point (and even then it's still not done)... but it is done entirely in CSS :D

Works great on current Chrome beta and Firefox stable, IE9 is a mixed bag a bit, but it's WIP and I don't care about IE much. It's more about seeing what I can do with CSS because it's not my favourite tool and I don't see myself as a designer much.

Title: Re: Another WIP
Post by: Asgard on March 12th, 2012, 03:21 AM

Looking nice Arantor.

I'm looking forward to both playing with the default themes and seeing what I can come up with given what you guys have been saying about how the theme system will work.

Are you finding the results easier or harder to come by in Wedge vs. SMF?

Title: Re: Another WIP
Post by: Arantor on March 12th, 2012, 03:28 AM

I was going to hit the sack but I'm still here so I'll answer >_>

I was never much of a themer for SMF, and whenever I did it, I'd invariably use images in a rather clumsy fashion. My credo has always been to make it work, not make it pretty. So this is more experimental for me, in a lot of ways.

If I were just trying to tweak an existing theme to recolour it, the workload is about the same, before you'd end up changing image colours, this time it's chasing down CSS, and one of the things that's been pissing me off tonight is overriding the hover colours in the main menu (something that I don't anticipate being done very often but I'd like to do it to prove it's doable and without too much work if possible)

Also, centering the main menu is a surprisingly common request over on sm.org, so being able to do that conveniently is a useful trick. As it happens, that seems to be much much easier in Wedge.

All I did to centre the menu was simply add:

Code: [Select]

#main_menu
float: none
text-align: center

Whereas in SMF, it requires juggling a lot more than just the main menu itself, as per http://custom.simplemachines.org/mods/index.php?mod=2553 (in our case, the menu is JavaScript driven, and it uses the placement of the parent element to figure out where to put the menu, which solves a great many problems)

Title: Re: Another WIP
Post by: Asgard on March 12th, 2012, 03:33 AM

Are Wedge themes expected to provide their own .css to override the existing or edit the existing as needed?

This has probably been answered elsewhere, but there's a lot of posts here...

Title: Re: Another WIP
Post by: live627 on March 12th, 2012, 04:24 AM

It depends. Themes can choose whether to replace existing files or add to them. Actually, I think the former method replaces ALL styles unconditionally. Correct me if I'm wrong, Nao.

Posted: March 12th, 2012, 04:21 AM

Quote

and one of the things that's been pissing me off tonight is overriding the hover colours in the main menu (something that I don't anticipate being done very often but I'd like to do it to prove it's doable and without too much work if possible)

Been doing that in my skin as well and it's... interesting. :^^;:

Title: Re: Another WIP
Post by: spoogs on March 12th, 2012, 07:58 AM

Looks nice Pete. as a user of BlueLight I must admit I like what I'm seeing.

Title: Re: Another WIP
Post by: Arantor on March 12th, 2012, 09:06 AM

Quote

It depends. Themes can choose whether to replace existing files or add to them. Actually, I think the former method replaces ALL styles unconditionally. Correct me if I'm wrong, Nao.

That's correct, a theme can inherit everything from the style hierarchy or it can inherit nothing.

That's something to note: a skin can have subskins and the subskins' styles will be inherited too. The default style, for example, is called Weaving, and Wine is a subskin of that, and this theme is a subskin of Wine, so it inherits all the previous styles then applies its own changes on top. Now THAT's a cascading style sheet :D

Title: Re: Another WIP
Post by: Arantor on March 12th, 2012, 05:17 PM

I couldn't concentrate on what I was trying to do this afternoon, after getting stressed out this morning due to stupid banks. So I worked on this a bit more.

Title: Re: Another WIP
Post by: Arantor on March 12th, 2012, 05:58 PM

Interestingly I found a style issue to contend with. I'm not classing it as a bug because I don't think it is, but I don't think it can be fixed without changing the core, though I'll see if I can fix it higher up the food chain in the CSS otherwise.

Specifically, in the thread view, the lock/pin/add poll buttons have icons - that's implemented by attaching a class to the a that forms the link.

Well, in this skin, I'd styled the ul.buttonlist a elements with a gradient which is handled as a background-image, which means the a.pin, a.lock and a.poll will override and break the styling otherwise.

Hmm. I can kludge it with forcing !important on my styling and not having the icon for those buttons, but I'll see if I can't apply my styling to the li somehow.

Title: Re: Another WIP
Post by: billy2 on March 12th, 2012, 10:10 PM

Looking good
 :)

Title: Re: Another WIP
Post by: Nao on March 13th, 2012, 12:00 AM

- Yes, IIRC I tried to ensure it was easier to center-align the main menu in Wedge than in SMF :P
- A couple of suggestions based on the screenshot... (1) use a rgba(255,255,255,.3) or something as the background for the sidebar, rather than a solid color. It would benefit from the gradient below it ;) (2) remove the black line below the main menu. This area needs some breathing space.

Oh, and I really should upload my Welcome.template.php update... :P

Title: Re: Another WIP
Post by: Arantor on March 13th, 2012, 12:06 AM

Quote

Yes, IIRC I tried to ensure it was easier to center-align the main menu in Wedge than in SMF

Oh, it is ridiculously easy :D

Quote

A couple of suggestions based on the screenshot... (1) use a rgba(255,255,255,.3) or something as the background for the sidebar, rather than a solid color.

I actually haven't got as far as the sidebar yet, that's still Wine's ;) But good suggestion though :)

Quote

remove the black line below the main menu. This area needs some breathing space.

That's a line attached to the linktree as opposed to anything else. When the linktree isn't empty, it has a gradient that's light at the top, dark at the bottom, and has a 1px dark border-top to contrast it.

I have two choices, either I leave the line in (and perhaps forcibly set the linktree to have height even if it's otherwise empty, which looks a bit silly, though it's what BlueLight does) or I implement browser specific code for gradients so that I can set something that isn't just a straight 0%-100% gradient (and then implement the contrasting line as part of the gradient)

Posted: March 13th, 2012, 12:03 AM

And here it is with the linktree having some content in it, for comparison.

Posted: March 13th, 2012, 12:05 AM

Specifically notice that I've also given the buttons a shadow, this isn't just some visual gimmick, it has a usability aspect to encourage 'affordance' to indicate that it's actually clickable, even if it's the 'highlighted' one.

Title: Re: Another WIP
Post by: Arantor on March 14th, 2012, 01:24 AM

OK, done some more over the last day or so with it, in between everything else.

Maybe I went a bit overboard with the shadows >_> But as you can see, I fixed the buttons issue that I was referring to (by styling the li rather than the a themselves), the rejigged code I added for the board index allows me to style it as this one.

It's not quite finished, the title needs a new colour, and I need to fix a few minor things with regards other colours (namely windowbg and windowbg2 for the board index/post display) but otherwise, I'm pretty happy with it.

Oh, and no images. I haven't properly tested it on anything other than Chrome, but that's still cool.

I also can't decide if I should commit it to the repo or not, I'm thinking not, because I don't think it's suitable to be a 'core' skin.

Title: Re: Another WIP
Post by: Asgard on March 14th, 2012, 01:27 AM

This, we wants's it! We must's has its!

Love the shadows, that is not overboard, that is exactly the correct amount of board.


edit: Though I never was super keen on that particular theme's menubar, still think of it about the same, it's fine, but it's not super fantastic.

Title: Re: Another WIP
Post by: live627 on March 14th, 2012, 01:37 AM

Would it look better if the shadowed container had no gradient?

Title: Re: Another WIP
Post by: Arantor on March 14th, 2012, 01:41 AM

I didn't find much benefit - but I've been quite careful to set the gradient as strictly downwards, following the motion of the gradient itself.

Title: Re: Another WIP
Post by: Nao on March 14th, 2012, 08:27 AM

Just when I thought I was out of overstyling, you pull me back in! :P
Gradients, shadows and rounded borders are things I can't use freely in the default skin, which is what I'm focusing right now... Thanks for reminding me that styling is fun and wecss is a powerful tool :)

Title: Re: Another WIP
Post by: billy2 on March 14th, 2012, 09:38 AM

This is getting too exciting...............

Presume language flags disappear when default language is set?

Title: Re: Another WIP
Post by: Nao on March 14th, 2012, 09:53 AM

They only disappear when there's only one language in the languages folder.
Wedge should logically ship with only the English language files, so with all flags disabled... I don't want to burden every single English website with a French version they don't give a damn about :P

Title: Re: Another WIP
Post by: billy2 on March 14th, 2012, 10:03 AM

Quote from Nao on March 14th, 2012, 09:53 AM

... I don't want to burden every single English website with a French version they don't give a damn about :P

Thats how wars start Nao !!
Be careful  :lol:

Title: Re: Another WIP
Post by: Nao on March 14th, 2012, 10:06 AM

Yeah I can always retaliate by removing the English version from Wedge.org... :lol:

Title: Re: Another WIP
Post by: billy2 on March 14th, 2012, 10:12 AM

Now its getting nasty............

Go to DEFCON 3 !!

Title: Re: Another WIP
Post by: Arantor on March 14th, 2012, 12:37 PM

Fine, remove the English language pack, I'll just replace it with British :lol:

Title: Re: Another WIP
Post by: Asgard on March 14th, 2012, 02:26 PM

I recommend English - Pirate

Arr!

Title: Re: Another WIP
Post by: Arantor on March 14th, 2012, 02:29 PM

I have thought about doing a Pirate language pack, actually. There's just an awful lot of translation to do...

And, incidentally, a Pig Latin one.