« Well Done guys
Another WIP
Let me hold a dollar? »

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Another WIP
« 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.

📎 blue_light_wedge2.png - 29.74 kB, 640x446, viewed 187 times.

When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

Asgard

  • So Many Searches, Why Have So Many Searches, One Search Is Enough
  • Posts: 56
Re: Another WIP
« Reply #1, 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?

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Another WIP
« Reply #2, 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)

Asgard

  • So Many Searches, Why Have So Many Searches, One Search Is Enough
  • Posts: 56
Re: Another WIP
« Reply #3, 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...

live627

  • Should five per cent appear too small / Be thankful I don't take it all / 'Cause I'm the taxman, yeah I'm the taxman
  • Posts: 1,670
Re: Another WIP
« Reply #4, 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. :^^;:
A confident man keeps quiet.whereas a frightened man keeps talking, hiding his fear.

spoogs

  • Posts: 417
Re: Another WIP
« Reply #5, on March 12th, 2012, 07:58 AM »
Looks nice Pete. as a user of BlueLight I must admit I like what I'm seeing.
Stick a fork in it SMF

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Another WIP
« Reply #6, 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
Re: Another WIP
« Reply #7, 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.

📎 blue_light_wedge3.png - 26.98 kB, 640x367, viewed 200 times.

Re: Another WIP
« Reply #8, 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.

billy2

  • Trying to earn brownie points for a lads trip to the Red Sea. Minus 1 already - just for asking!!
  • Posts: 350
Re: Another WIP
« Reply #9, on March 12th, 2012, 10:10 PM »
Looking good
 :)
<br /><br />cough, cough.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Another WIP
« Reply #10, 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

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Another WIP
« Reply #11, 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.

📎 blue_light_wedge4.png - 30.83 kB, 640x448, viewed 140 times.

Re: Another WIP
« Reply #12, 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.

📎 blue_light_wedge5.png - 31.6 kB, 640x377, viewed 120 times.

📎 blue_light_wedge6.png - 23.13 kB, 640x214, viewed 174 times.

📎 blue_light_wedge7.png - 26.83 kB, 640x264, viewed 131 times.

Asgard

  • So Many Searches, Why Have So Many Searches, One Search Is Enough
  • Posts: 56
Re: Another WIP
« Reply #13, 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.

live627

  • Should five per cent appear too small / Be thankful I don't take it all / 'Cause I'm the taxman, yeah I'm the taxman
  • Posts: 1,670
Re: Another WIP
« Reply #14, on March 14th, 2012, 01:37 AM »
Would it look better if the shadowed container had no gradient?
« Well Done guys
Let me hold a dollar? »