Turning point for Linuxvillage and it's forum?

[melodie]

Hi,

I feel sorry, I sayd shadowed, where I really wanted to say gradient, as in the tabs. I'll work this afternoon on seeking for something related to "how to add again a little bit of hot colors somewhere and what tint", and will post back.

[kjdixo]

The green arrow buttons now have a very subtle soft shading - not too much.

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


I experimented with various types of shading and some shading is too severe and looks bad.
Now the shading is enough to stop the buttons looking flat, whilst still remaining 'low-key' and 'under-stated'.
I started with my mTpaint image of the flat green button mask3.png.

This was obtained by doing a screenshot of my green css web button, with the browser zoomed in to make it (233x233px).
I was able to make the above screenshot have a transparent background using mTpaint channels and mask.
I had a white background and chose to make the white background transparent.

MTPaint: 7.5.7 Creating a Mask from a Single Colour
Pick the colour from the canvas using Ctrl+Left/Right mouse click to store it in colour A & B
Create a new channels using 'Set colour A radius B'

Then I used imageMagick to do 2 steps (see code snippet below):

http://www.imagemagick.org/Usage/advanced/#aqua_effects

Code: [Sélectionner]

convert.im6 mask3.png -alpha Extract -blur 0x8  -shade 130x30 -alpha On -background gray10 -alpha background -auto-level aqua_shade2.png

convert.im6 mask3.png aqua_shade2.png -compose Softlight -composite aqua_result.png
Then resized to 48x48px.
I realize that you wanted 'gradient like the tabs' . . .  which I can do.
I thought that first I would demonstrate, the above shading effect, which might be sufficient, or maybe combine that with a gradient effect on the top surface of the button.
There are many combinations of gradient (angle, multiple gradients and shapes ... triangular?) colours, etc).
I think that simply putting a vetical gradient on a triangular arrow button would look a bit strange.
But I can try it, if you like.

[melodie]

Hello,

I don't know yet for the gradient method. I want to ask Rafaellaguna for advice, if I can get in touch with him. Meanwhile, would you want to try this png?
http://meets.free.fr/images/new-header.png

It is bigger than the one you have used, hopefully it will be less blurry. I don't know what should the width and height be?

[kjdixo]

Added the new header that is less blurry.



style.css in tabs-fun also changed to reference the new image

Code: [Sélectionner]

.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(../../new-header.png);background-repeat:no-repeat}


[melodie]

It seems still not the right size, the welcome messages at the bottom don't appear. Perhaps adding a transparent calc a bit larger would help (or not?). Same, I'll ask Rafaellaguna, who is a professional graphist.

I registered and logged in, there are red buttons:
div.buttonlist_bottom:nth-child(2)

at the top right of the topics.

I can't work fully on it right now, but I'll be back with some more details next.

Thanks!

[melodie]

This is what I see in a screen 1680x1050 (21')

http://meets.free.fr/images/test-forum-index.png
http://meets.free.fr/images/test-forum-index2.png
http://meets.free.fr/images/test-forum-topic.png

done with the program scrot in console, using options -c count and -d delay:

Code: [Sélectionner]

$ scrot -c -d 5 test-forum-index.png
(I noticed you are using mtPaint, perhaps would you like to try scrot which makes it quick doing several screenshots one after the other, just calling back the previous command, and modifying just a bit of the name of the argument).

[kjdixo]

Try the new header now.
I knew that it might  not be right, because it is 150px height and I did not bother to change my style.css
.logo_name{min-height:140px}
is now changed to
.logo_name{min-height:150px}
I did not do it earlier because it was ok in my browser and I had to go out in a hurry.
You should see the welcome messages now.
---------------------------------------------------------------
Yes I was aware of the 'logged in issues', which need a little bit more work.
The issues are caused by the style.css that I have been modifying has a sort of global influence in some areas and that is why I now need to work on those and  tweak and check the layouts for those pages.
It shouldn't take long, however there may be some odd looking layouts whilst I do that.
The red buttons are part of the tabs-fun theme, I will change them and make them nice.

[kjdixo]

Now when logged in.

1. I made all areas so that they are light blue,

2,The 'member' title was white on light blue which was nearly invisible, so I made it black.

3. I removed a whole bunch of the css code relating to those horrible red buttons.
They are now ordinary plain and simple hyperlinks, which I can style with css if you want.
I think that they look ok as just plain and simple hyperlinks.

4. Text areas everywhere were too tightly packed, (forum registration text for example).
I fixed that by increasing the spacing between lines.

Code changes are here:

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:150px;background-image:url(../../new-header.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:24px 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:2px;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 */
div.post_wrapper{background-color:#ccebff}
h5,div.username h4,div.content h3,div.content h4{color:black}
body{line-height:150%}
th{color:white}
a.new_win,li span,li.last span{padding-left:10px}
li.copyright{padding-left:18px}
div#topic_icons.description{height:120px}
span.stats_hour{width:30px}
li.reply_button,li.quote_button,li.notify_button,li.remove_button{background-color:cornsilk;font-size:120%}

Compare the text line spacing  before I did the line-height modification with after the modification.
The general text layout is now much better . . . it  is not all squashed up vertically.



Log in to see that I have made a lot of improvements and it now starting to look quite good when logged in.
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.

[kjdixo]

In my web browser (Palemoon) the linux village header is fully visible with the welcome messages.
I deliberately used the following css code (background-size:cover;min-height:140px;) so that when a certain width of browser window is reached then the image will zoom in and the welcome messages will disappear out of the fixed 140px height frame.
I can tell from your screenshot that there is a wide blue area after the word village, so maybe the fixed height 140px and the zooming effect has already occured.
It is important not to vary the height of the frame as this will affect the positioning of some of my other elements below.
The frame width (not height) is intended to shrink and expand with the page width.
If you don't want that then I can just put a fixed width and fixed height banner that is the same as your old forum design.
It will get cut off on the right when the browser window is made narrow.
I was just trying to make it look adaptable and dynamic.
You probably just want fixed width and height (1323x150)px.
I will leave it for now and wait for your word on it.

[melodie]

There is something wrong with the way posts follow each other, on the test forum.

See here:
http://www.kdworld7.net/smf/index.php?topic=48.0

compare with here:
http://forum.linuxvillage.org/index.php/topic,27.0.html

in the test forum, you can't really distinguish where the previous post stops, and where the new one starts. On the actual default theme, you can clearly see the difference. Is it something which you can get right?

This upper pages: http://www.kdworld7.net/smf/index.php?board=2.0

is good now, of course!

For the buttons, yes, a little CSS would be nice, but no hurry for that part. There are still a few colors which I would want a little different, but I also try to get a few persons I know to come and bring their ideas about some tones.

[kjdixo]

FIXED
Now we have alternating background colours for adjacent posts.
Styling is not the same as your original default theme because it is the tabs-fun theme.
The tabs-fun style has been modified by the creator of the tabs-fun theme.
We can change it but it is better not to because simple changes have 'knock on' effects elsewhere and it is more work.
I have now made your header banner fixed width and fixed height so it behaves in the same way as in your existing forum.

For my screenshots I prefer to use mtPaint thank you.
I have an openbox right click menu shortcut, that does an instant screenshot and I am then able to instantly crop and save any part of the image.
http://forum.lxde.org/viewtopic.php?f=24&t=31525&start=10#p48805

The flat yellow arrow buttons could be made to look the same as the green arrow buttons......
I will wait for your comments before making any more changes.

[kjdixo]

Hi
I have made the sticky topic colours similar to your existing forum sticky topic colours.

[kjdixo]

These are the alternating colour posts, which can be distinguished from each other.

If you need any colour changes or textures or icons then just ask.



Personally, I think the light blue is a bit bright and makes it look like a 1990's email program.
The colours need to be somehow made softer and easier on the eyes.

[melodie]

Hello,

It's much better. There is a glitch with some parts, as you can see here:
http://meets.free.fr/images/test-forum-sunday-22.png

http://meets.free.fr/images/2-test-forum-sunday-22.png

also the previous version of the header was better, when not fixed, because it was responsive. You can see here that the tabbed forum theme seems to be responsive:
http://meets.free.fr/images/test-forum-sunday-22-mobile.png

while the actual theme isn't. In Firefox, you can use Ctrl+Shift+m to change the view.

Let's leave the colors of the arrows for now, I still have to take a moment for that. About the colors of the tabs, the hover color would be better as main color, and the lighter main as second color for the hover.

I tried to reach your post at the lxde forum, but the forum was unreachable.

About soft colors : I also think the backgrounds in the posts are better with soft colors. If you use the same colors as the ones used here for the backgrounds of the posts, that could be a good choice.

[melodie]

I have added mkress-smf_kitBbcodeGfont-1-0.zip from http://custom.simplemachines.org/mods/index.php?mod=3478

which will allow for some font enhancements, as in this recent website I put up : http://bentovillage.me

I would like the welcome message which is in level 2 (just under the menus) to be orange and green:

Code: [Sélectionner]

.user_info {
  color: orange;
}
.user_info a {
  color: green;
}

if you don't think it's a bad idea, of course?

One more detai I just noticed, here:
http://meets.free.fr/images/test-forum-sunday-22.png

the breadcrumbs are one on top of the others, instead of being all on the same horizontal line, which makes the part in between "user info" and "author topic" higher than necessary and looks not nice.

Here on the official forum we have it all on the same line, for the present page:

LinuxVillage » LinuxVillage welcome » Rules and life of the forum » Répondre ( Re : Turning point for Linuxvillage and it's forum? )

can you fix this part too?