Jump to content


Photo

The 3rd Age 2009 New Skin


  • Please log in to reply
69 replies to this topic

#21 Sûlherokhh

Sûlherokhh

    Sagacious Engineer

  • Project Team
  • 3,754 posts
  • Location:Central Germany
  • Projects:S.E.E., Sage A.I., Code Advisor
  •  'Axe'er of the Gordic Knot

Posted 04 March 2009 - 01:51 PM

Hey, you finally made a post! :p
A good one too. :p

bannerreal01mittelit3.jpg
Axed Head and A.I. Coder for S.E.E. and ... stuff

".. coding is basically boring. What's fun is finding out how things work, take them apart and then put them together in ways that were not intended nor even conceived."


#22 m@tt

m@tt

    #######

  • Project Team
  • 4,056 posts
  • Location:England
  • Projects:The Dwarf Holds
  •  T3A Chamber Member

Posted 04 March 2009 - 02:48 PM

@ Rob38 - will these do?

Posted ImagePosted ImagePosted ImagePosted ImagePosted Image

oops, will fix 4 later

Edited by m@tt, 04 March 2009 - 02:49 PM.

Posted Image

#23 Jeth Calark

Jeth Calark

    Jedi Master

  • Project Team
  • 1,822 posts
  • Location:Spring, TX
  •  Sithspit!

Posted 04 March 2009 - 03:12 PM

Except for that fourth one, they all look good! :p

#24 Rob38

Rob38

    Believer of Hope

  • Hosted
  • 3,567 posts
  • Location:USA
  • Projects:Helm's Deep Last Hope
  •  One who is not afraid of new challenges

Posted 04 March 2009 - 08:42 PM

Cool, about time I got a full and systematic critique on the skin. ;) Now onto the comments (my comments are in white):

general impression of new skin:
matches perfect with look and feel of T3A :good: and is more soft and pleasing for the eyes, even now where some small details still needs correction :good:
... thanks for the great work, Rob :thumbsupsmiley:
Glad you like it. :blush:

comment on the background:
I don't agree with those who wants a lighter and less saturated background. Either you choose darker text on a light background, or a lighter text on a dark background, the last causing less strain on the eyes when properly implemented. I think you did choose wisely, please keep it just as it is right now. :good:
That's exactly what I was think too! A dark background with a lighter text is definitely the way to go. :cool2:

comment on the normal text:
color/hue: the readability would improve with a little more contrast; the palette has become somewhat obsolete, i.e. most options looks just awful with the colorscheme of the new skin, and those who do fit are too limited - if possible, it would be nice with more option in the yellow/ochre/lightbrown range (the alternative being editing the #webcolor manually in the text)
Ah, never even considered that. I completely agree with your statement. I'll check and see if I can change some of those colors to something more suitable.
fontsizes: the readability would improve for larger chunks of text with a size between the size=2 (normal) and size=3 - if you use a high res monitor you get very very long lines of text (relative to the default text font)
So are you saying make the font size 2.5? :unsure:
fontselection: I tested a lot of fontchanges on a post, but none of them was better suited for normal text than the default; serif fonts should in theory be more readable, but for some reason the ones available have less spacing between lines than the default, so no improvement here.
so, for now (sorry) ... :p
Hmmm... I'll have to see if I can add different font styles. Would be cool to do.

thumbcount: 5 up, 1 down, total: 4 up (but I have only two hands, so ...)
:thumbsupsmiley:

P.S. just for information:
this is normal text without specifying color. this is text as above, color="#FFCC66"
don't know which one is the most easy to read, just wanted to try it ...

P.P.S. I think there are about a dozen hues of yellow/ochre/lightbrown which will fit nicely with the new skin. If it can be of any help, I can post samples of them.
Please do! I do like the brighter text color you chose and probably will implement a lighter text. :)


@ Rob38 - will these do?

Posted ImagePosted ImagePosted ImagePosted ImagePosted Image

oops, will fix 4 later

The first three are great and they have been added. :good: Only issue with number 4 is the need for a transparent background. Number 5 is strange though. Why does it change colors? Maybe that was intentional? It's not in the original version so it may need to be fixed. Thanks for helping out with this m@tt. :blush:

signature_group1.gif

 

16821.png


#25 m@tt

m@tt

    #######

  • Project Team
  • 4,056 posts
  • Location:England
  • Projects:The Dwarf Holds
  •  T3A Chamber Member

Posted 05 March 2009 - 10:07 AM

Posted Image
Posted Image

Edited by m@tt, 05 March 2009 - 10:14 AM.

Posted Image

#26 Clement

Clement

    title available

  • Network Staff
  • 1,442 posts
  • Location:France
  • Projects:Various
  •  T3A Team Chamber Member
  • Division:Revora
  • Job:Developer

Posted 05 March 2009 - 12:44 PM

Good job m@tt and rob for the smileys :p it will be usefull not only for the forums :p
Posted Image

#27 Jeth Calark

Jeth Calark

    Jedi Master

  • Project Team
  • 1,822 posts
  • Location:Spring, TX
  •  Sithspit!

Posted 05 March 2009 - 03:56 PM

Smile everyone! :p

#28 Phil

Phil

    Force Majeure

  • Network Leaders
  • 7,971 posts
  • Location:Switzerland
  • Projects:Revora, C&C:Online
  •  Thought Police
  • Division:Revora
  • Job:Network Leader
  • Donated
  • Association

Posted 05 March 2009 - 04:36 PM

This is the code for the blue text

<span style="color: rgb(0, 0, 128);">
<b>Mapper, Photoshopper & Community Forumer</b>
</span>
It cannot be changed in the stylesheet, but isn't this changeable in the template? I assume all the HTML is in there?

It is there, but I have no clue where to find that piece of code you have. Dlots, I need you again. :p

These are custom profile fields and only globally editable. In other words, make the skin fit them, not the other way around.

For the skin changer, it does the same thing for the CNC3.net custom skin. Don't know if there is any way to fix it.

The skin changer will not work if you force a specific skin. Duh :p

revorapresident.jpg
My Political Compass

Sieben Elefanten hatte Herr Dschin
Und da war dann noch der achte.
Sieben waren wild und der achte war zahm
Und der achte war's, der sie bewachte.


#29 Rob38

Rob38

    Believer of Hope

  • Hosted
  • 3,567 posts
  • Location:USA
  • Projects:Helm's Deep Last Hope
  •  One who is not afraid of new challenges

Posted 06 March 2009 - 01:04 AM

Thanks M@tt! All the emoticons have now been edited and the borders have been removed! :p

These are custom profile fields and only globally editable. In other words, make the skin fit them, not the other way around.

Dang. If's going to be rough to find a way to work around those colors. :p

signature_group1.gif

 

16821.png


#30 Námo

Námo

    ***

  • Project Team
  • 1,291 posts
  • Projects:Middle-earth Lore, Cartography & Linguistics
  •  ...

Posted 06 March 2009 - 11:46 AM

off-topic:

(Sûlherokhh @ Mar 4 2009, 02:51 PM) <{POST_SNAPBACK}>

Hey, you finally made a post! :p
A good one too. :p

(Rob38 @ Mar 4 2009, 09:42 PM) <{POST_SNAPBACK}>

Cool, about time I got a full and systematic critique on the skin. :)

Thanks to both of you for a warm welcome to the forum! :p ... glad if I can be of any help :)

on topic: new skin - typography / color variations for normal text

(Rob38 @ Mar 4 2009, 09:42 PM) <{POST_SNAPBACK}>

P.P.S. I think there are about a dozen hues of yellow/ochre/lightbrown which will fit nicely with the new skin. If it can be of any help, I can post samples of them.
Please do! I do like the brighter text color you chose and probably will implement a lighter text.

I will reply on your other comments in a later post, for now just these ...

... textcolor variations ... 1st line is bold, 2nd line is normal, 3rd line is italic, bold italic is not recommended ...


default color:

I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders


color variation samples:


color="#ffee00"
I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders


color="#ffee33"
I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders


color="#ffee66"
I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders


color="#ffdd00"
I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders


color="#ffdd33"
I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders


color="#ffdd66"
I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders


color="#ffcc00"
I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders


color="#ffcc33"
I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders


color="#ffcc66"
I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders


color="#cc9900"
I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders


color="#cc9933"
I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders


color="#cc9966"
I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders



note: above samples are just to test - choose the best, discard the rest! (or maybe put a few of them in the palette, if possible?)
My personal choice would be the #ffcc00/#ffcc33/#ffcc66 range, tweaked a bit, like the following:


for headlines etc. (optional, in palette)

color="#face20"
I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders

for normal text in main topic area, default text color!

color="#face40"
I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders

for highlighting, replying in quotes, etc. (optional, in palette)

color="#face60"
I don't know half of you half as well as I should like;
and I like less than half of you half as well as you deserve.
... too short a time ... among such excellent and admirable modders


Edited by Námo, 27 March 2009 - 04:44 PM.

... elen síla lúmenn´ ómentielvo ...
... a star shines on the hour of our meeting ...
Posted Image Posted Image Posted Image

#31 Clement

Clement

    title available

  • Network Staff
  • 1,442 posts
  • Location:France
  • Projects:Various
  •  T3A Team Chamber Member
  • Division:Revora
  • Job:Developer

Posted 06 March 2009 - 01:21 PM

Well if you can edit the template file (xhtml code), just do like that:

<span style="color: rgb(0, 0, 128)" class="pers_desc" >
<b>Mapper, Photoshopper & Community Forumer</b>
</span>

Then go to your CSS file (I suppose you're editing direclty the css file) and add:

.pers_desc {
color: /*the color that you want here, in hexa, RGB etc*/;
}

Edited by TheDeadPlayer, 07 March 2009 - 02:52 AM.

Posted Image

#32 Bart

Bart

  • Network Admins
  • 8,524 posts
  • Location:The Netherlands
  • Division:Revora
  • Job:Network Leader

Posted 06 March 2009 - 06:44 PM

That should be
<span style="color: rgb(0, 0, 128)" class="pers_desc">
:)
However, I don't think that would work. Most importantly, DLotS implies that that piece of HTML can only be changed globally (which I find strange, so maybe I'm incorrect?)
Second, if the HTML could be edited that way, blue would still win over the class. This is because it's lowest in the hierarchy. Anyway, why would you add a class if you can edit the HTML anyway? Then just edit the color directly :p (Or remove it and replace with a class, which is of course even better).

If above things don't work, you could always do a Javascript hack which dynamically changes the colour on page load.

By the way, not that TDP's loading images aren't good, but wouldn't it be more in style to have the spinning ring? :p
bartvh | Join me, make your signature small!
Einstein: "We can’t solve problems by using the same kind of thinking we used when we created them."

#33 Clement

Clement

    title available

  • Network Staff
  • 1,442 posts
  • Location:France
  • Projects:Various
  •  T3A Team Chamber Member
  • Division:Revora
  • Job:Developer

Posted 07 March 2009 - 02:59 AM

Second, if the HTML could be edited that way, blue would still win over the class. This is because it's lowest in the hierarchy. Anyway, why would you add a class if you can edit the HTML anyway? Then just edit the color directly wink.gif (Or remove it and replace with a class, which is of course even better).


Yeah I was thinking about the hierarchy thing...
I am adding a class to make the html editable, changing the value in the css seems to only affect the T3A layout (one xhtml file and severals CSS (one by skin)), so you can change the color via css, but blue will still be the color for others templates. But it only works if the hierachy thing does it right.
So yeah just put a class is the best, but that means edit all the skin (not much work, but work).

About the gif loader, I was thinking the same, I was just lazy to make it (and if I remember well my last attempt was not very good...), so I just generated those gif in two clics :p

Edited by TheDeadPlayer, 07 March 2009 - 03:00 AM.

Posted Image

#34 Rob38

Rob38

    Believer of Hope

  • Hosted
  • 3,567 posts
  • Location:USA
  • Projects:Helm's Deep Last Hope
  •  One who is not afraid of new challenges

Posted 07 March 2009 - 05:14 AM

@ Námo - I like #ffcc66 the best. Seems to be the one with the most clarity. ;)

Yeah I was thinking about the hierarchy thing...
I am adding a class to make the html editable, changing the value in the css seems to only affect the T3A layout (one xhtml file and severals CSS (one by skin)), so you can change the color via css, but blue will still be the color for others templates. But it only works if the hierachy thing does it right.
So yeah just put a class is the best, but that means edit all the skin (not much work, but work).

So what do I need to do? :p

True, a spinning ring would work well for the loading animations but that's not a huge priority at the moment.

signature_group1.gif

 

16821.png


#35 Duke

Duke

    Doctor Doctor!

  • Members
  • 420 posts
  • Location:New Zealand

Posted 07 March 2009 - 05:59 AM

:o Back to the old days!! ;)

However, I don't think that would work. Most importantly, DLotS implies that that piece of HTML can only be changed globally (which I find strange, so maybe I'm incorrect?)
Second, if the HTML could be edited that way, blue would still win over the class. This is because it's lowest in the hierarchy. Anyway, why would you add a class if you can edit the HTML anyway? Then just edit the color directly ;) (Or remove it and replace with a class, which is of course even better).

If above things don't work, you could always do a Javascript hack which dynamically changes the colour on page load.


No DLoTS is right because the custom profile things aren't part of any *skin* they're globally done (check out custom profile fields in acp). Using JS is actually probably the best way to do it. Although, after a quick gonz at the source. You might want to add a marker type thing in the htmlfield for custom profile links (id='bluetext' or something). Otherwise you'll have to overwrite the colour itself which is fine unless someone tries to use that colour in a post etc.

And Rob!! Well done dude! This is fantastic, I don't know why it's taken so long but, well - it looks great. I would reccomend playing around with colours a little more to get better contrasting. I remember that was the thing that Hostile's *old* T3A template did really well, limited colours but he managed to get the contrast right, this just blends a teeny bit too much :p

The backround image for the banner does want to repeat on super high resolutions but that's not you're fault, unless you want to somehow manipulate the image to make it 400px (or so) wider.

There's a small gap between the banner and the network bar, I presume it's supposed to be like that but I think it'd look better and tidier without the gap.

Only other thing I can say is the "Revora Front Page" links etc. bar looks a bit weird. Bigger font, or put a box around the text or something.

But overall - great job!

#36 Phil

Phil

    Force Majeure

  • Network Leaders
  • 7,971 posts
  • Location:Switzerland
  • Projects:Revora, C&C:Online
  •  Thought Police
  • Division:Revora
  • Job:Network Leader
  • Donated
  • Association

Posted 07 March 2009 - 11:41 AM

Firstly, the text colours for those fields would of course still require to be some kind of blue, red and green. Secondly, I could remove the colour part from the markup and replace it with simply a class, but that means we'd need to add such a definition to each and every past and future skin to make sure it shows up correctly. In other words, it's much easier if you adjust the background colour in this one skin to fit those colours.

revorapresident.jpg
My Political Compass

Sieben Elefanten hatte Herr Dschin
Und da war dann noch der achte.
Sieben waren wild und der achte war zahm
Und der achte war's, der sie bewachte.


#37 Bart

Bart

  • Network Admins
  • 8,524 posts
  • Location:The Netherlands
  • Division:Revora
  • Job:Network Leader

Posted 07 March 2009 - 12:19 PM

You might want to add a marker type thing in the htmlfield for custom profile links (id='bluetext' or something). Otherwise you'll have to overwrite the colour itself which is fine unless someone tries to use that colour in a post etc.

Yes, but use a class instead of an ID, because ID's are supposed to be unique, and there'll be multiple bluetexts on a page. Also, you'd never replace the colour in all elements, but it would be a bit harder to select the bluetext elements without a class.

I recommend adding the class to the HTML (not removing the colour) and using a quick jQuery script to update their colour dynamically.

Also, the header image is repeatable, if you cut off the mod box thingy.
bartvh | Join me, make your signature small!
Einstein: "We can’t solve problems by using the same kind of thinking we used when we created them."

#38 Clement

Clement

    title available

  • Network Staff
  • 1,442 posts
  • Location:France
  • Projects:Various
  •  T3A Team Chamber Member
  • Division:Revora
  • Job:Developer

Posted 07 March 2009 - 02:31 PM

head_bg2.png

Ok Rob, for the banner background use this one, it is repeatable

background: #190000 url(style_images/t3a/head_bg2.png) repeat-x;
Posted Image

#39 Rob38

Rob38

    Believer of Hope

  • Hosted
  • 3,567 posts
  • Location:USA
  • Projects:Helm's Deep Last Hope
  •  One who is not afraid of new challenges

Posted 08 March 2009 - 06:51 PM

head_bg2.png

Ok Rob, for the banner background use this one, it is repeatable

background: #190000 url(style_images/t3a/head_bg2.png) repeat-x;

Ok, I think I fixed the banner. ;)


I changed the text colors for the posts to a brighter yellow. I also brightened the forum description (red-orange) text. What does everyone think?

signature_group1.gif

 

16821.png


#40 Clement

Clement

    title available

  • Network Staff
  • 1,442 posts
  • Location:France
  • Projects:Various
  •  T3A Team Chamber Member
  • Division:Revora
  • Job:Developer

Posted 08 March 2009 - 07:07 PM

Ok, all your changes are good, the banner is indeed fixed now ;)

Just one thing, I think that the subforums links in hte forum description should have an hover (brighter color certainly).
Posted Image




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users