Here a new layout I was experimenting with.
http://kmeleon.sourceforge.net/tryout/

This need to be cleaned, but I don't have the time to finish it currently.
If someone can help or has any suggestions.

This new layout is gorgeous, absolutely fantastic, I love the top bar and the use of our old icon as a favicon, which I think never should have been replaced.

Is there any way to obtain the green background of the top bar as a single file to use on my skin as a toolbar background (I mean to replace the back.bmp)?

Just rename to .BMP
It's just a 'hack' but it shouldn't be any visible difference between the original and this one ;)

Thanks.

Hey, you're using K-Meleon Right-click with the mouse over the image > Page Properties > Background image Funny that it looks a bit different in "original", perhaps there's another size set in the html-code...

I like that flip-up (en?) concept, gives faster access
Would find it important to have direct access to "skins" and extensions/"addons"/macros, that's one of the first and basic things I examine when I check out a new browser...

The flags currently are too hidden, so there could be an arrow beside the english flag, or personally I'd just leave them all open, or put "switch language" instead of english in the first one. Or better yet, just a short row of flags that flip open when hovering. Just not that it looks as if there were only english available...

Due to the very wide screen now, even on my old 14"-monitor, the font appears rather tiny now, even though that may only be an optical error...



Edited 1 time(s). Last edit at 03/09/2010 12:03AM by siria.

Quote
Dorian
Here a new layout I was experimenting with.....

Nice layout. Clean, uncluttered and easy in the eyes.

Kutto's

Charlie

~~If it ain't broke, why screw it up?~~

Doesn't it look nice? It's just the Klassik skin with a pair of basic modifications.
You should see how it mixes with the new layout of the website, it's charming!



Clicking over the image leads to a supersized version of it.

Well, I hate being myself who calls to order, but ... wasn't this thread suppossed to aim at looking for someone who can help on the new website layout building?

Any volunteer?


PS. I'll gladly volunteer myself ... the problem is that I know nothing about CSS and javascript, my website is pure and basic HTML in the old style.

Anyway, if I can be of any help I'll be more than happy to lend a hand.

I think the font is just a little small. Perhaps we could give up 40% of the light grey border on either side and get a larger font.

The languages available need to be shown better. Perhaps just the flags shown until the cursor in in the area and then the drop down full list. If the extra space of giving up 40% of the right border was implemented, I think there could be room for an array of flags that could be 4 flags wide and 3 flags high. We might get 4 high array. See next item

If the green banner at the top were just a little taller, then the "Home/News" could be right under "you have control" and there might be room on the menu line for "Screenshots" and "Extensions". Remember we might gain 40% of the border on that side also.

I'll have to give some thought to what items should be under "Resources".

Could the "Forum" heading contain items like "Index" for the whole forum and the individual forums like "Announcements", "General", etc. These could popdown like "Documentation", and "Screenshots" do under "Resources". This should not be hard coded. It should somehow be linked to the forum in case we add another catagory.

I have a little problem with the color of the dropdowns. I cannot see the black characters on the red background easily. That could just be my tired old eyes.

And include huge pic/icon of "Kmeleon in action" (screen with huge Kmeleon head) like they do it:

http://icofx.ro/
http://www.videolan.org/vlc/

It will remove "dulness" of the page.

enaitzjga, your version would look nice if this was 1992 but it is not.

:-)

Being retro is always fashionable.

Quote
panzer
And include huge pic/icon of "Kmeleon in action" (screen with huge Kmeleon head) like they do it:

http://icofx.ro/
http://www.videolan.org/vlc/

It will remove "dulness" of the page.

I've already thought about it. But since we're using the wiki here, it's not really possible to do so.

Quote
JamesD
I think the font is just a little small.

The size was unchanged though. Maybe the font.

Quote
JamesD
Perhaps we could give up 40% of the light grey border on either side and get a larger font.

I think it will be too large and the content will be harder to read.

Quote
JamesD
If the green banner at the top were just a little taller, then the "Home/News" could be right under "you have control" and there might be room on the menu line for "Screenshots" and "Extensions". Remember we might gain 40% of the border on that side also.

The website would be easier to maintain if the number of main pages was minimal, especially for the translation. I've added the popup just to keep the current structure because it's impossible to make all those change at the same time.

Quote
JamesD
Could the "Forum" heading contain items like "Index" for the whole forum and the individual forums like "Announcements", "General", etc. These could popdown like "Documentation", and "Screenshots" do under "Resources". This should not be hard coded. It should somehow be linked to the forum in case we add another catagory.

Anyone who want to do so can develop it and I'll glady add it

Quote
JamesD
I have a little problem with the color of the dropdowns. I cannot see the black characters on the red background easily. That could just be my tired old eyes.

I agree this may not be the best combinaison.

Sorry, but even though the font may have the same size, it still looks much smaller. Additionally it 'appears' yet smaller because the lines are now so endlessly long. It may just be an optical trick due to the wider page size, but nevertheless my eyes find it really hard to read too...



Uhm, must admit am a bit scared now that you want to delete some of the main pages

Dorian, retain please that big download icon.

I hope that would work. I am selling books on one of the sites and you would not believe how many people have asked me how much money a book cost although a really big price is shown on the site.

My little contribution to future KM Web site:
Basically Dorian layout with little changes, corrections and otimizations:

- View web:
http://kmeleon.110mb.com/enlaces/KM.html

- Download web files:
http://kmeleon.110mb.com/enlaces/NewKMWeb.zip

Greetings.

K-Meleon in Spanish
The worst day of my life.
I feel like a GIF archive.



Edited 2 time(s). Last edit at 03/14/2010 02:28AM by desga2.

Just an idea of a minor change:



No idea if it really looks better since tastes are so different.

Uhm, the bottom button looks nicer yes, but in general it's now getting a bit too much patterned for my taste... But it's true that the plain white borders do need something. Perhaps a cool graphic (but who has) or at least a color gradient, or a pretty chameleon photo like on 100mb would be cool... Or perhaps it's just getting too much with the patterned download button, and the sides are okay.

Must admit I have no problem with the 'old' layout with the sidebar, and would be happy just to see those handy flip-out links added (with skins and extensions ). That flipping by the way seems broken in the latest version...

But what a difference between the first 'tryout' and desga's improvements, a huge step forward IMHO! Amazing, what a difference just an easy-on-the-eyes font and an image can make



Edited 1 time(s). Last edit at 03/14/2010 02:34PM by siria.

Of the pages shown so far, I think I like Dorian's best.

I was trying to build Dorian's version on my computer at home. Just trying this so I can learn which code make certain things work. The site in the first post is no longer like it was when first posted. The heading does not shrink when I scroll down and some items are shifted to the left. Does anyone know what code changed? I really liked the shrinking header.

I found that I cannot have a file with "?" in the filename on Windows. I had to change that code. Also had to fix paths to point to local files in the same directory. Lots of work to get all files down to my computer, but at least I mess up anything on the wiki.

I have found that two changes in km.css file can improve readability quite a lot. The green is still different from the background and the words show up better.

These are the two areas to change.

#KmMenu li:hover {
   background-color:#3CB371;
   /*background-color:#960C10; */
}

#KmMenu ul.popupmenu {
  position:absolute;
  background:#3CB371;
  /*background:#960C10; */
  -moz-border-radius:0 0 3px 3px;
  -webkit-border-radius:0 0 3px 3px;
}

Also un-commenting the margin here puts the alignment back the way it was.

#KmMenu {
  position:absolute;
  bottom:-1px;
  text-align:left;
  color:white;
  font-size:1.2em;
  /*margin-left:245px; */
   margin-left:245px; 
}

Update: Here is what it looks like with these changes. http://dl.dropbox.com/u/1522294/Tryout%282%29.jpg



Edited 1 time(s). Last edit at 03/25/2010 11:02PM by JamesD.

Keeping the menu color to a matching dark-red or maroone is preferable I think. Just needs the white text instead of black to be readable.

Even the white does not do well with the dark red background. If using white instead of black, to which color would you change when selected or maybe that is hover. Site uses white now. Both white and black show up well on medium sea green color.

This the language menu in medium sea green. http://dl.dropbox.com/u/1522294/Tryout%282b%29.jpg

I just noticed that on the choice of languages, the English choice uses the flag of Great Britain but the later in the page the english version for download uses the flag of the United States. Is this for a reason or just a left over bit of code from somewhere?

Even though I am from the U.S., I think I must give Great Britain the right to claim English.

I just noticed, that after visiting the German page, all the words in the frame of this post are German. I have no idea what language will be used when I click "Senden".

Quote
JamesD
Even the white does not do well with the dark red background. If using white instead of black, to which color would you change when selected or maybe that is hover. Site uses white now. Both white and black show up well on medium sea green color.

This the language menu in medium sea green. http://dl.dropbox.com/u/1522294/Tryout%282b%29.jpg

The white looks good on dark red background IMO. Seems pretty readable to me, but another option is to have it in bold white. Selected/Hover could be white background, black text. I don't like the sea green at all. It clashes with the textured green background. But it's all subjective

@ jnsj

I don't have to have green. I was just looking for something that was more easy for me to read. There is a real good site for colors here. http://www.w3schools.com/css/css_colornames.asp

If you click on the name of the color you get a page which shows how text in other colors will display aginst it. They have a maroon color but it does not match our color. It might be a good indicator of which text colors are OK to use.

I have another, more personal, problem with red. The only way that I can tell where I have been in the forum is with this code in my user defined stylesheet.

/* --  Links that have been visited are DeepPink  -- */
a:visited { color: DeepPink !important; }

As you might guess, it does not do well with reds.

I have been trying to understand the code for the website. I created some copies locally on my PC so I make changes and see how those changes appeared. The files to run the home/news pages for the various languages are in a 7z file here. http://dl.dropbox.com/u/1522294/Local%20Web%20Code.7z

I have found that I get a different color for the top line of the menu on the English page depending on whether Javascript is running or not. And it only took me four days to find that difference was Javascript and not my changes to km.css Can anyone explain why Javascript makes a difference in color?

Just for demo puposes I use a different css file for the French page. I think that one is like Dorian's original code.

Using the files in the 7z, you can test your own changes on your own computer. However, if you select any one of the links except another language, you will end up on the wiki version and not your computer.

Quote
JamesD
I have found that I get a different color for the top line of the menu on the English page depending on whether Javascript is running or not. And it only took me four days to find that difference was Javascript and not my changes to km.css Can anyone explain why Javascript makes a difference in color?

JavaScript is used to do a degradated in top menu. The green background have a front image semitransparent, like a filter. This do the effect the green bar is more dark that the original background color without the filter.

Look in my layout imges files.

K-Meleon in Spanish
The worst day of my life.
I feel like a GIF archive.



Edited 1 time(s). Last edit at 04/02/2010 06:08PM by desga2.

@ desga2

It is not the green color that is a problem. I changed the background of the menu from red to green for when the cursor is on the item. That works when Javascript is off. However the top line of the menu reverts to red when Javascript is on.

This code, "parseInt(menu.css..." is in the Javascript file. I don't have a "menu.css" file and there was not one in your group of files.

I don't think transparent is the problem. For that the underlying color would have to be red and I have no red color in my css file except the footer.

Well, I found it. The red background color is hard coded into the file km.js on line 109.

        // backgroundColor:'#960C10', // $('#KmMenu li').css('backgroundColor'),
		backgroundColor:'#3CB371', // $('#KmMenu li').css('backgroundColor'),

The menu becomes readable with this change and the four changes in km.css file.