Turning point for Linuxvillage and it's forum?

[melodie]

Hi,

I have started to look, just right now I'm not at home, I'll be back this evening and hopefully can take some time during the week-end, i'll do a screenshot of the test forum you put up and test some colors. I think red and black are way too strong to be used with this tone of blue. However colors need to be picked carefully not to hurt the sight.

[melodie]

Hi,

Here is what I have come with:
http://meets.free.fr/images/forum-test.png



Of course it's opened to improvements. ie : if you like the idea of the shading on the sides, it could be improved to match better with the color at the top. I did my best, however I am not a graphist. Perhaps the banner would be better in the center, or in the right side… and the search field on the top right removed as there is already a search tab.

How do you feel about the colors in this draft?

[kjdixo]

Hi Melodie
Sorry for the wait, I was busy.
I think it looks good, except for these few points.
1. Difference between icons 'New posts' (dark orange) and 'No New posts' (light orange) is not pronounced enough. I would maybe use the html background-color: 'lime' which is a bright green for New posts. It is easy to see and complements the orange.
Also, the black borders around the orange icons look a bit 'clunky', they could be made to look more smooth and glassy and 3d.
2. Zooming in on the tabs, I see that the gradient colour is 2 steps red/orange, it would be nicer to use css3 and produce a sort of gradient effect, though not all browsers are html5 and css3 capable. Or change the code to use images for the tabs and then all older browsers will render complex 'artistic tabs'. I prefer to use css tabs rather than images because css loads faster than images.
3. The banner looks ok. The background gradient is ok.
The banner could be enlarged to fill the full page width and blend in and be more integrated..
4. Experiment with thin borders, they can transform a page from unfinished and ordinary to very professional looking.

[melodie]

Hi Melodie
Sorry for the wait, I was busy.

Well you waited for me too, and I couldn't help it. Don't worry I know how it is. I am glad to have you here bring your ideas and help.

I think it looks good, except for these few points.
1. Difference between icons 'New posts' (dark orange) and 'No New posts' (light orange) is not pronounced enough. I would maybe use the html background-color: 'lime' which is a bright green for New posts. It is easy to see and complements the orange.

Then if you use lime, or any kind of green, please reuse a bit of any of the green tones which are already in the banner, and check that the colors look nice together (can you do a screenshot on a test image and do that with gimp, inkscape or so?)
I guess you know color pickers such as gcolor2?

Also, the black borders around the orange icons look a bit 'clunky', they could be made to look more smooth and glassy and 3d.

Well I am at risk to look picky, however "smooth and 3d" is ok with me, glassy isn't that much. I know a few members who would not like it, so if some gradient effect can be done to make it look consistant, I agree with that. Let's try to avoid these old glassy effects.

I don't want the black borders either, I just did a fast "select by colors" and "poor some other color", using Gimp. I told you, I am not a graphist. (I just have an eye for colors, and the original colors of this theme seem much too strong and agressive to me, then also I feel the need for bits of hot colors red tones, but not too dark and so on).

2. Zooming in on the tabs, I see that the gradient colour is 2 steps red/orange, it would be nicer to use css3 and produce a sort of gradient effect, though not all browsers are html5 and css3 capable. Or change the code to use images for the tabs and then all older browsers will render complex 'artistic tabs'. I prefer to use css tabs rather than images because css loads faster than images.

We can try either or, as you wish. Then you will need to check how it renders in Firefox, Opera, Midori, and Chromium Browser. Nowadays these are the main browser (let's forget about IE). Also the forum isn't responsive and I suppose it's not possible to make it responsive? What do you think?

3. The banner looks ok. The background gradient is ok.
The banner could be enlarged to fill the full page width and blend in and be more integrated..
4. Experiment with thin borders, they can transform a page from unfinished and ordinary to very professional looking.

I agree completely. I don't know how to do that. Is it your main professional occupation?

[melodie]

Hi again,

Rafaellaguna, who did the last version of the header, just sent me back the SVG. It is available here. I just miss the lettering right now (font type), I need to find where…
Here it is!

[kjdixo]

I am in a bit of a hurry to go out so I will answer your questions tomorrow.
However, I have tinkered with the css to produce orange and green icons (css actually, not images).
I added the following 2 lines to style.css in the tabs-fun theme.

Code: [Sélectionner]

a img[title='New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #9ce000;border-top:20px solid transparent;border-bottom:20px solid transparent}
a img[title='No New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid orange;border-top:20px solid transparent;border-bottom:20px solid transparent}
The result is here
http://www.kdworld7.net/smf/index.php

and here is a screenshot

When 'logged in' the green "icons" are visible.

I will post more tomorrow

[melodie]

Hello,

I have had other feedback from someone who follows the forum while not registered, its about the colors. We should use very light yellow for the "new messages" icons, and pale green for the rest, in her opinion. (red being an "alert/danger" signal). I'll try to work on this idea and produce a model using again a screenshot from your new layer on the test forum.

Have a good end of day!

[kjdixo]

I changed the colours to pale yellow and pale green, which did not look good on a white background, so I changed the background to pale blue, which seems to 'blend in well' with the darker blues and helps to highlight the icons.

Code: [Sélectionner]

a img[title='New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #ffffb3;border-top:20px solid transparent;border-bottom:20px solid transparent}
a img[title='No New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #66cc99;border-top:20px solid transparent;border-bottom:20px solid transparent}
.windowbg{background-color:#ccebff}
Here is a screenshot


and the test forum with the new colours.
http://www.kdworld7.net/smf/index.php
I can see the yellows ('new post' icons) only when logged in . . . is that correct . . . or should they be visible to everyone (when not logged in)?

[melodie]

The green and yellow and light blue background colors look very nice. Visible to everyone is better. We have sign up and sign in only for the reason we don't want spammers/spambots, but we don't hide the posts nor the activity.

About the tabs, which colors should we use now? the same green for the main color and yellow for the hover, or reverse?

For your other idea related to the banner, did you see I linked to the sources? SVG and font? Also can you stretch the main body and use a fading color on the edges as in this pic? http://meets.free.fr/images/forum-test.png

[melodie]

Far from being perfect yet (the banner integration needs more care of course), but here is the idea about the borders, which I wanted to share: http://meets.free.fr/images/test-forum-look-with-narrower-body.png

[kjdixo]

did you see I linked to the sources? SVG and font?

Yes, I installed the font on my computer, but it did not display in the svg.

For now, I have experimented with the original png and the css code.
I fixed the gradient background (946px) + below filled with css coloured background  as requested, but it faded to white, which was much too harsh on the eyes.
So I cropped the background gradient  to 900px height (not yet bright white, but slightly blue tinted) and used the colour value of the 900th pixel to use as the background colour to the page bottom.
I am keeping all my modifications at the end of style.css in the tabs-fun theme.

Code: [Sélectionner]

.logo_name{margin-left:0px;/* kjdixo modifications start */border:solid 1px white;border-radius:0.5em;margin-top:10px;background-size:cover;min-height:140px;background-image:url(../../header_linuxvillage2.png);background-repeat:no-repeat}
.level1,.level2{padding-top:6px}
.level1{border-top-left-radius:0.4em;border-top-right-radius:0.4em}
.level2{border-radius:0.2em}
/* resized images/short_bg.jpg and images/short_bg2.jpg to 50px height */
a img[title='New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #ffffb3;border-top:20px solid transparent;border-bottom:20px solid transparent}
a img[title='No New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #66cc99;border-top:20px solid transparent;border-bottom:20px solid transparent}
.windowbg{background-color:#ccebff}
body{background:url(images/backdrop3.png);background-repeat:repeat-x;padding: 0% 4% 0% 4%;background-color:#f0f6fa}
div.user_info.clearfix{background-color:#ccebff;border-top-left-radius:0.5em;border-top-right-radius:0.5em;height:80px}
div.user_info.clearfix center{font-size:120%;margin-top:10px}
li{background-color:#ccebff}
li.level1,li.level2{background-color:transparent}
div#footerarea.headerpadding.topmargin.clearfix{background-color:#ccebff}
div#bodyarea{background-color:#ccebff;padding:14px 4px 4px 4px}
form,form input,form select{margin-top:0.5em;margin-bottom:0.5em;font-size:120%}
form#search_form{margin-right:15%;margin-top:284px;display:none}
.logo_name h1{display:none}
div#menu a.level1,div#menu span.level1{padding-top:4px;background-color:transparent}
.tall_bg{padding:0px 0px}
#infocenter_login{background-color:#ccebff;border:solid 1px black;border-radius:0.2em}


http://www.kdworld7.net/smf/index.php

I now have to do other things . . . that is all for today.

[melodie]

Yes, I installed the font on my computer, but it did not display in the svg.

Does it display in the choice of fonts in Inkscape when you load the image? If not, you might want to consider typing in console "fc-cache reload", or the same with sudo if you installed the font in /usr/share/fonts/TTF for instance. If it's loaded in the choice of fonts in Inkscape, you will need to apply it to the text.

For now, I have experimented with the original png and the css code.
I fixed the gradient background (946px) + below filled with css coloured background  as requested, but it faded to white, which was much too harsh on the eyes.
So I cropped the background gradient  to 900px height (not yet bright white, but slightly blue tinted) and used the colour value of the 900th pixel to use as the background colour to the page bottom.
I am keeping all my modifications at the end of style.css in the tabs-fun theme.

I don't get it all, but the result is becoming better and better.

Code: [Sélectionner]

.logo_name{margin-left:0px;/* kjdixo modifications start */border:solid 1px white;border-radius:0.5em;margin-top:10px;background-size:cover;min-height:140px;background-image:url(../../header_linuxvillage2.png);background-repeat:no-repeat}
.level1,.level2{padding-top:6px}
.level1{border-top-left-radius:0.4em;border-top-right-radius:0.4em}
.level2{border-radius:0.2em}
/* resized images/short_bg.jpg and images/short_bg2.jpg to 50px height */
a img[title='New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #ffffb3;border-top:20px solid transparent;border-bottom:20px solid transparent}
a img[title='No New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #66cc99;border-top:20px solid transparent;border-bottom:20px solid transparent}
.windowbg{background-color:#ccebff}
body{background:url(images/backdrop3.png);background-repeat:repeat-x;padding: 0% 4% 0% 4%;background-color:#f0f6fa}
div.user_info.clearfix{background-color:#ccebff;border-top-left-radius:0.5em;border-top-right-radius:0.5em;height:80px}
div.user_info.clearfix center{font-size:120%;margin-top:10px}
li{background-color:#ccebff}
li.level1,li.level2{background-color:transparent}
div#footerarea.headerpadding.topmargin.clearfix{background-color:#ccebff}
div#bodyarea{background-color:#ccebff;padding:14px 4px 4px 4px}
form,form input,form select{margin-top:0.5em;margin-bottom:0.5em;font-size:120%}
form#search_form{margin-right:15%;margin-top:284px;display:none}
.logo_name h1{display:none}
div#menu a.level1,div#menu span.level1{padding-top:4px;background-color:transparent}
.tall_bg{padding:0px 0px}
#infocenter_login{background-color:#ccebff;border:solid 1px black;border-radius:0.2em}


If the main body of the forum could be even more narrow it would be better. (I think the actual default skin is a bit more narrow, and yet it seems somehow a bit wide, so while you are on it…).

The tabs might look nicer with two tones yellow, one as light as the lightest here pix.toile-libre.org/?img=1447895574.png and one darker as what you got here: http://www.kdworld7.net/smf/index.php

It could be the light yellow from here: http://www.kdworld7.net/smf/Themes/tabs-fun/new-posts2.png


light yellow: #FFFFB3
other light yellow: #FDF4A9

darker yellow: #FECB2A // as in this pic of your's: http://www.kdworld7.net/smf/Themes/tabs-fun/new-posts3.png
other darker yellow: #FBBA71

A try would be welcome. I know the version I put up was clumsy, http://pix.toile-libre.org/upload/img/1447895574.png but this tone for the tabs was the closest I have been able to get to the idea. 

[kjdixo]

Hi Melodie
I will install and look at inkscape later.
My latest modifications . . . tab colours and more space at left and right sides.




http://www.kdworld7.net/smf/index.php

Code: [Sélectionner]

/* kjdixo modifications start */
.logo_name{margin-left:0px;border:solid 1px white;border-radius:0.5em;margin-top:10px;background-size:cover;min-height:140px;background-image:url(../../header_linuxvillage2.png);background-repeat:no-repeat}
.level1{border-top-left-radius:0.4em;border-top-right-radius:0.4em}
.level2{border-radius:0.2em}
/* resized images/short_bg.jpg and images/short_bg2.jpg to 50px height */
a img[title='New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #ffffb3;border-top:20px solid transparent;border-bottom:20px solid transparent}
a img[title='No New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #66cc99;border-top:20px solid transparent;border-bottom:20px solid transparent}
.windowbg{background-color:#ccebff}
body{background:url(images/backdrop3.png);background-repeat:repeat-x;padding: 0% 8% 0% 8%;background-color:#f0f6fa}
div.user_info.clearfix{background-color:#ccebff;border-top-left-radius:0.5em;border-top-right-radius:0.5em;height:80px}
div.user_info.clearfix center{font-size:120%;margin-top:10px}
li{background-color:#ccebff}
li.level1,li.level2{background-color:transparent}
div#footerarea.headerpadding.topmargin.clearfix{background-color:#ccebff}
div#bodyarea{background-color:#ccebff;padding:14px 4px 4px 4px}
form,form input,form select{margin-top:0.5em;margin-bottom:0.5em;font-size:120%}
form#search_form{margin-right:15%;margin-top:284px;display:none}
.logo_name h1{display:none}
div#menu a.level1,div#menu span.level1{padding-top:6px;background-color:transparent}
.tall_bg{padding:0px 0px}
#infocenter_login{background-color:#ccebff;border:solid 1px black;border-radius:0.2em}
.title,div#menu a.level2,div#menu span.level2{color:navy}
/* transformed colour of images/tab_bg.jpg using mtPaint */

What do you think?

[melodie]

Hello!

I think I don't have much more to say, apart from some shadowning should be nice too on the left green arrows (I suppose you have thought about that). For my like, now we need a bit of hot colour somewhere, but I need to think about it, or find some people who can suggest something that fits.

I am going to ask around and see who can help.

[kjdixo]

I added some shadows to the left green buttons

http://www.kdworld7.net/smf/index.php

Code: [Sélectionner]

/* kjdixo modifications start */
.logo_name{margin-left:0px;border:solid 1px white;border-radius:0.5em;margin-top:10px;background-size:cover;min-height:140px;background-image:url(../../header_linuxvillage2.png);background-repeat:no-repeat}
.level1{border-top-left-radius:0.4em;border-top-right-radius:0.4em}
.level2{border-radius:0.2em}
/* resized images/short_bg.jpg and images/short_bg2.jpg to 50px height */
a img[title='New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #ffffb3;border-top:20px solid transparent;border-bottom:20px solid transparent}
/* a img[title='No New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #66cc99;border-top:20px solid transparent;border-bottom:20px solid transparent}*/
.windowbg{background-color:#ccebff}
body{background:url(images/backdrop3.png);background-repeat:repeat-x;padding: 0% 8% 0% 8%;background-color:#f0f6fa}
div.user_info.clearfix{background-color:#ccebff;border-top-left-radius:0.5em;border-top-right-radius:0.5em;height:80px}
div.user_info.clearfix center{font-size:120%;margin-top:10px}
li{background-color:#ccebff}
li.level1,li.level2{background-color:transparent}
div#footerarea.headerpadding.topmargin.clearfix{background-color:#ccebff}
div#bodyarea{background-color:#ccebff;padding:14px 4px 4px 4px}
form,form input,form select{margin-top:0.5em;margin-bottom:0.5em;font-size:120%}
form#search_form{margin-right:15%;margin-top:284px;display:none}
.logo_name h1{display:none}
div#menu a.level1,div#menu span.level1{padding-top:6px;background-color:transparent}
.tall_bg{padding:0px 0px}
#infocenter_login{background-color:#ccebff;border:solid 1px black;border-radius:0.2em}
.title,div#menu a.level2,div#menu span.level2{color:navy}
/* transformed colour of images/tab_bg.jpg using mtPaint */
/* mtPaint snapshot of zoomed in css web button, then made background transparent, then ImageMagick to create a shadow, then resized with Mirage to (48x48) including background, result is a new images/off.png */

If they are ok . . . then I will go ahead and do the same for the yellow side buttons?