Turning point for Linuxvillage and it's forum?

[rafaellaguna]

Hi everybody. In my humble opinion I wouldn't use more than 2 colours if the background is a pure flat colour already. Multicolour can apply when the background is totally white. Otherwise it could look a bit childish.

We designers use to apply the 60 / 30 / 10 rule for colour balancing: http://www.tigercolor.com/color-lab/tips/tip-01.html

Also I'd use a message / conversation / balloon icon for the messages section.

Also, if a site is full of text you might consider having an colourfull page will bloat the reading and make it tiring. BUT this is always a matter of taste!

[kjdixo]

Thanks for the good advice rafaellaguna, I agree, we don't want it to look like an explosion in a paint factory. Thanks for the link.
Melodie, I have done some more, hopefully correcting some of the the errors you mentioned.
I can see a few more minor errors, only small tweaks needed.
The colours are toned down and numbers of colours reduced.
I am busy tomorrow, I will be able to do a little, just not hours and hours.
Anyway, you probably need a few days to think about it and ask other people for their opinions.
http://www.kdworld7.net/smf/index.php

[melodie]

Hello,

Thanks for such a good work. To tell you the truth, I don't know many more people through internet with graphic knowledge and skills. Next time, would you change the left green/yellow triangles for something else as Rafael suggested? Either message icons, or bubbles, either/or, what you think best?

Then instead of having them green/yellow, why not dark yellow (orange) and very light yellow, as in the tabs?

PS:
#linktree has a padding-top 54px, and " .user_info clearfix" has a height of 80px, which makes the space above the breadcrumbs still quite empty. Next time you work on it, if you could reduce this space a little, it would look better. (Perhaps lowering a lot the #linktree top padding for a start, let's say, to 5px and see how it looks like next?)

[kjdixo]

Posté par: kjdixo le: 21 novembre 2015 à 20:40:54 :
I saw your orange/green plugin effect.
I can do that in the theme css if you want.
I think that the line of user info text is too small, it should be a bigger font and moved away from the yellow tabs, the dropdown lists sometimes cover it, which is not good.

1, I think that your orange / green text is too small, making it difficult to read.
2. I changed the orange to darkorange, it shows up better on a light background.

Posté par: melodie le: le: 23 novembre 2015 à  02:07:09 :
#linktree has a padding-top 54px, and " .user_info clearfix" has a height of 80px, which makes the space above the breadcrumbs still quite empty.

1. I have to be careful here because this is one of the cases where the logged in and logged out interfaces are both affected by the same bit of css code.
When logged out the area contains the login form and if I reduce the height (logged in) then the breadcrumbs (not logged in) will overwrite the login form.

2. One suggestion I have is to put an eye catching graphic either side of the login form, which will be dynamic and look good when logged in and when logged out. It will fill the space and also be a useful clickable link(s).
In the same modification I could enlarge the orange/green user text and make it more thematically similar to the login form.
Also making sure that the dropdown tabs do not cover anything when hovered.
The dropdown tabs covering items below them might not be a concern for you.
What do you think?
If you like I can try a few of my ideas and then see if you like them or not.

Simple solution with minimal changes
1. Reduce the gap height as you requested, but only for the logged in interface (a bit tricky, but I will try).
2. Enlarge your orange/green text to be the same size as the other text (I think is a good idea).

Another point
Maybe to reduce the number of colours I could remove the lightskyblue border around each post and remove the additional green 1px border surrounding (hugging) the post contents, it would make the pages look less "busy" and make it more like your existing forum.

I can try all this at the end of today, this evening / tonight.
I will also try changing the green/yellow arrows to more "exciting (wow factor) descriptive" icons.

The look and layout needs to be fine-tuned and brushed-up so that when finished and thoroughly tested it will be difficult to criticise.

[melodie]

Hello!

Yes, agreed on everything! Looking forward to it.

Have a nice day.

[melodie]

Hi,

I have had a look here: http://www.kdworld7.net/smf/index.php?topic=48.0 and here: http://www.kdworld7.net/smf/index.php?topic=6.0

It's coming pretty smooth and nice! It looks almost perfect to me, providing you do what you suggested in your last post, next time you can work on it. I'll just point to the breadcrumb "Forum test > Welcome > Rules of the forum > Rules of the forum  « previous next »" and  "Login with username, password and session length" which overlap, but this is my fault as I asked you to reduce the empty space in that area. Well you warned me!



   

[kjdixo]

Melodie
Have a look now and tell me what you think.
You will only be able to see the pages for 'logged out' and 'logged in ordinary member'.
I have also worked extensively on the 'logged in administrator' pages.

I deliberately removed some components that are easily accessible from the tabs.
Before my modifications, there were (at times) 2 login boxes visible at the same time.
I removed all that clutter and also made the text bigger and easier to read.
It is now a clean interface . . . and quick and easy to navigate.
It was difficult to make, so I hope you like it.
The only problem might be:
I changed and added (injected) text content using css and the text I added was in english, so obviously those bits of text it won't display in french.
I have only been modifying one css file = style.css.

Code: [Sélectionner]

div.user_info.clearfix center:after{content:' - please login or register';color:green}
span.ie6_header:after{content:' with username, password and session length'}
To display that bit of text in french I would have to find where to modify the PHP code somewhere.

Anyway, if the layout is ok then I could go ahead and try to do that.

The left icon buttons for the topics are not yet changed, they are still green and yellow arrows.
I will experiment with new icons for them in the next day or two.

[melodie]

Hello,

Yes, I like it a lot!

I still have proposition for a few parts to modify. Here it is:

Code: [Sélectionner]

div.post_wrapper {
    border: 2px solid #d0d0e0;
    margin-top: 4px;
    border-radius: 1em;
    padding: 8px;
}

div.user_info.clearfix center {
 /*   font-size: 120%; */
      font-size: 105%;
    margin-top: 10px;
}

blockquote {
    border: 1px solid #BABABF;

}
instead of:
blockquote {
...
/*    border: 1px solid #000; */
...
}

.quoteheader, .codeheader {
    text-decoration: none;
    font-style: normal;
    font-weight: bold;
    font-size: x-small;
    line-height: 1.2em;
    width: 100%;
    color: #666;  // instead of #000
}

code {
    color: #000;
    background-color: #DDD;
    display: block;
    font-family: "courier new","times new roman",monospace;
    font-size: x-medium;   //instead of x-small
    line-height: 1.5em;    // instead of 1.3em
    border: 1.5px solid #BABABF;  /instead of 1px solid #000
    margin: 1px auto;
    padding: 1px;
    width: 99%;
    overflow: auto;
    white-space: nowrap;
    max-height: 24em;
}

can we try that?

As for the languages, I looked they are in:
(root of the forum)/Themes/default/languages and the top message (I grepped) would be in the page : "index.french-utf8.php". Do you see one in the tabbed theme?

[kjdixo]

I have installed French and English Languages.
Did you see it when I changed the language to French?

Posté par: kjdixo  le: Aujourd'hui à 11:18:15
The only problem might be: . . . . . . .

Code: [Sélectionner]

div.user_info.clearfix center:after{content:' - please login or register';color:green}
span.ie6_header:after{content:' with username, password and session length'}
. . . . . . . . .To display that bit of text in french I would have to find where to modify the PHP code somewhere.

I have solved that problem.
In the file (root of the forum)/Themes/tabs-fun/languages/ThemeStrings.english.php

Code: [Sélectionner]

// kjdixo modification 2015-11-24-1900 it removes unecessary clutter from the login screen
// global (works for all languages and overrides the default theme text for 'quick_login_dec').
$txt['quick_login_dec'] = '';
?>

I will try out your css code suggestion.

[kjdixo]

That css code you gave me to try does work but it does not valdate it has errors


I will try to fix them whilst not affecting the result.
It is better if the css validates properly.

[kjdixo]

Fixed.
The only real error was x-medium is not a font-sze.
I used medium instead to replace the original x-small.
All of the other errors were due to commenting incorrectly with // instead of  /* */ which is easy to do if you are in a hurry.

[melodie]

Sorry, I thought you would have read the content and noticed!


/* corrected here, but needs you to read the content and associated comments */

div.post_wrapper {
    border: 2px solid #d0d0e0;
    margin-top: 4px;
    border-radius: 1em;
    padding: 8px;
}

/*   here you need to replace the  " font-size: 120%;" by this one: */
div.user_info.clearfix center {
      font-size: 105%;
}


/* here you need to replace the border in the blockquote section by this one */
blockquote {
    border: 1px solid #BABABF;

}


/* here you need to replace the color in the ".quoteheader, .codeheader" section by this one */
.quoteheader, .codeheader {
    color: #666; 
}

/* here you need to replace the three following lines in the code section by these ones */
code {
    font-size: medium; 
    line-height: 1.5em;   
    border: 1.5px solid #BABABF;
 
}

/* again sorry for the confusion I created! */

PS: you don't need to port the comments which are above  in your CSS file, of course.

[melodie]

When not connected, the user message on top is still 120%. It's too big. 100% should be enough, perhaps even 95% would be better (also when connected, unlike I suggested in my previous post).

Bienvenue, Invité Merci de vous connecter ou de vous inscrire.

Strangely, "bienvenue" on the test forum is smaller than the rest, and "invité" has a strong tag.

All fonts in the same line should be on the same level, same size. (There is already an emphasis with the orange/green colors). Do you have any idea why the word "Bienvenue" is clearly smaller than the other words on the line? I seem unable to see anything which could explain it.

I like the colors of the borders and the backgrounds of the posts and quotes/code blocks much better now. What is it that you think? Do you also like it that way?

[melodie]

It seems the green looks bigger (color vibration). What about you do reverse?

    Bienvenue, Invité Merci de vous connecter ou de vous inscrire.

Wouldn't it look better? (I know, I'm probably knitpicking… :p )

[kjdixo]

Login orange-green swap and size and font-weight (strong tags in HTML)
(i) smf/Themes/tabs-fun/index.template.php
//echo '<center>', $txt['hello_guest'], ' <strong>', $txt['guest'], '</strong></center>'; commented out

echo '<center>', $txt['hello_guest'], ' ', $txt['guest'], '</center>';
// kjdixo modification 2015-11-24-2230 removed <strong> and </strong> tags.

(ii) style.css
Changed 105% back to 120% and several other inter-related font-size tweaks.
div.user_info.clearfix center {/*Melodie 2015-11-24*/
 /*   font-size: 120%; */
      font-size: 120%;
    margin-top: 10px;
}

(iii) style.css
Swapped orange and green
.user_info {color:green}
.user_info a{color:darkorange}

Don't worry about being picky . . . . getting it right is very important.
I can still see lots of minor imperfections, I will probably fix them when I get time.