Design of H3SW page on www.moddb.com

H2yellow bold:




And about headlines, I didn't really understood about where in the page exactly you was talking about...
But using theses very fancy letters would be great!!


About the part with this bg:
It will be only for the "tavern menu"? if yes I will delete background and borders, of course.

I meant these parts. Currently we are lacking them.



P.S. Yellow in bold looks better.

Quote :

About the part with this bg:
It will be only for the "tavern menu"? if yes I will delete background and borders, of course.

You should not delete the borders I think. But I think you should add brown borders instead like you did with other windows
...or not? Maybe we should check the tavern with the current thin borders?

Sok so, it's bold H2yellow or...let's put titles like in the original game: ?


Even if I like to see one title like that, al lthe titles on the pages in this style, I think it will be "too much"... And it will remove the "special" feeling we have about theses letters..

Also, I think putting the tavern without borders is better than the brown border. I agree the brown border would match the tavern but... all the page is already "browned".
But anyway, I will try both, taking 2 screenshots, and comparing here.

Alright, you can put aside the gold letters for now and proceed with original ModDB font - perhaps we can at least experiment with the font family - there are some other fonts to use. But I would still like to have a somewhat red background for the Yellow headlines, similar to what we have on the Roland's Campaign image you posted.

I just checked, and was editing my post, but you replied too fast. xD

We can't replace titles by differents images. We can put a bg image but not replacing the text. (then bg image will be same for all theses titles).

mah.. Anyway, you want more design for theses titles, all right!
I will manage something H2ish.

Better than screenshots, I putted online the whole page as I managed to transform it, for the moment:

http://homm2.free.fr/s/vrac/h3sw/h3sw-cssing4.html ~ bg of titles is with roland-bg.png
http://homm2.free.fr/s/vrac/h3sw/h3sw-cssing4b.html ~ bg of titles is with rgba(256,0,0,0.4)

I didn't remove the "sorceress town" and the description from the page. If you want I will do it.

An amazing progress! I really enjoyed the second variant of the font headers (rgba). It seems that the yellow letters fit better to the brighter red background. It looks a bit H1-ish, but in terms of graphical beauty and designer solution it looks better. It is good that you included this variant.

Yes, you can delete the Sorceress artwork along with the text description about the Peasants and those 4 buttons completely. That was an old variant of the menu. After some update of ModDB the background got broken and some code too.

  Now the only font problem left is the grey font of clickable areas (Contact, Official Page, Track this mod, etc.). It's barely visible on our new brown background. I think we should both make the font brighter and reconsider the background. You know, the current brown background has a problem because it has a clear pattern which causes difficulties with reading the classic ModDB font. The classic ModDB font has no anti-aliasing and doesn't have multi-colored texture like original H2 font had, so it looks a bit lost on the current background.

A viable option would be to add this darkened section (in the center) to the background for all text area, and place it over all background (see the right side of the image - the darkened background contacts with the frame). It doesn't have a pattern and it is darker, so the fonts should look perfect on it. You can also take a good texture of the red banner for (roland.png) you mentioned.




   Next, we should mention the big active text (see Latest Downloads). Currently "Succession Wars Mod Beta from January, 9th, 2013" is black so it's barely able to be discerned. I suggest white or gold colors for this title. By the way, are you able to add the new buttons for "+" and "RSS feed" (see the upper right corners of many windows)? We could design a Good-style interface buttons for them if possible. I see you already put H2-styled buttons for "Previous" and "Next" buttons. I would suggest to make the text on them bold to look how they would be discernible on their beige background.

The Tavern you developed should be also placed in a frame just like all other windows are Same for the panel with the "Heroes of Might and Magic III: The Succession Wars" text. I am not yet sure how to unite them properly though. The panel with "Heroes of Might and Magic III: The Succession Wars" text also has a placeholder background, we will need to think about something else for it.


Also, we should think something about the main ModDB menu (mods, downloads, features, news, etc.). The beige background doesn't fit good for both black and white font. Perhaps we need something else.


Finally, the current project logo (which is not official) is too large and perhaps it's not needed at all. We will have the project logo on the Tavern picture, where currently you can see "Heroes II of Might and Magic" on the banner.

It was me who gave GodRage the project logo and it looks quite bad when blown up and I completely agree that the banner in the Tavern is enough

I think did all you said (except border around tavern-menu), and a little more; better to get a look:  
http://homm2.free.fr/s/vrac/h3sw/h3sw-cssing5.html ~
http://homm2.free.fr/s/vrac/h3sw/h3sw-cssing5b.html ~ bg-darker.png
the 5b shows us that I/we/you/us/Ector(Because he has a geek face! ^^)   must made new borders to fit the bg-darker.

Wauw, both look amazing. I can't even pick the one I like best

Amazing solution with the upper menu!

I will comment on other aspects later in Sunday
I guess I must help you with the rest of the graphics.

Thanks for your reactions!! :-)

http://homm2.free.fr/s/vrac/h3sw/h3sw-cssing5c.html
I changed something in the title (bottom of the tavern), with a big H like official titles.

If I understood well, moddb.com will close.
The "work" I did in this topic can be easily put on any other page... on H3SW website, or so.

Are you sure? It looks like GameFront is going to be closed, not Moddb. Moddb users are trying to rescue content uploaded on this page.

Uhm wrote:

Are you sure? It looks like GameFront is going to be closed, not Moddb. Moddb users are trying to rescue content uploaded on this page.

Oh, then it's my mistake
I thought moddb was a part of GameFront, and so closing all the sub-services at once. But if you say so, then no problem..

It's time for Enroth, it's time for moddb!

Cool to hear.

If you login to your Moddb account, you will see that I already started making some changes. The picture is a placeholder though, because it has broken quality.

http://www.moddb.com/mods/h3sw

Also, you will see that they seem to have changed the rules there. Now the screen can be only 1024x768 (if I understood it correctly), and there is a rule that some lines of text must be ever present. Also, there is a stupid spoiler line which I don't know how to get rid of.



For now, my design idea is almost the same as we discussed: we have a full-screen image (this time, probably, 1024x768) with the active buttons which will now have custom text. The required effects for the buttons are the "mouseover" version, probably the "clicked" version too.



The problem might be that there is a minimum rule of 100 or 200 text characters in the main window. The place for the text may be assigned in the lower part of the picture where we should first try how the natural white font looks. If it doesn't fit good enough, the discussion will start.

Also, I'd like to replace all native ModDB interface like we previously discussed. This time I have enough free time to draw it all, so it will all be okay. If it is possible, a replacement of the font like you did on Lands of Enroth would also be ultimately good.

I've checked popular mods with good design on the site, and I see that all of them adapted their designs to the new rules, and no one tried to actually remove the stupid spoiler. This might mean that this is impossible to do and we will have to adapt to this too.

There are some solutions to do that effectively. First I would like to have the pictures of native ModDB interface, to know exactly their size in pixels. I mean ALL of the pictures, including the headers above, the window with "Heroes of Might and Magic III mod" text, and so on. Then, I will try to make some graphic themes to replace the actual interface and see how everything looks.

I really should know our capabilities in changing the webpage to provide a more effectively looking design.

Orzie wrote:

Now the screen can be only 1024x768 (if I understood it correctly)

This is: " Logo / Shown when browsing mods / 1024x768 or larger recommended".
I understand that it's just the logo, and they want 1024x768 or bigger size! But it's also just a recommendation.
Does the image we are going to use is the 1024x768 you just posted?

Orzie wrote:

and there is a rule that some lines of text must be ever present. Also, there is a stupid spoiler line which I don't know how to get rid of.

What is this rule about? I don't see anything in the edit board.
The "spoiler" you talk about is the commercial between Moddb menu and H3SW menu ? (only visitors(not logged in) can see that?)
or it's the "READ MORE"? (or the entire line... but this line is here to show the "READ MORE" button.)

Orzie wrote:

with the active buttons which will now have custom text. The required effects for the buttons are the "mouseover" version, probably the "clicked" version too.

mouseover is ok. Clicked version may be difficult to implement especially because as soon as it's clicked the user loads a new page! So, you would like another effect during the 0,2 sec between the click and the new page? hmm..

Okay, i forget about the spoiler. (sorry i took time to write this reply that you posted twice hahaha )

Orzie wrote:

There are some solutions to do that effectively. First I would like to have the pictures of native ModDB interface, to know exactly their size in pixels. I mean ALL of the pictures, including the headers above, the window with "Heroes of Might and Magic III mod" text, and so on. Then, I will try to make some graphic themes to replace the actual interface and see how everything looks.

Okay I will grab everything I can, and more precisely everything we can modify with css.
Hmmm by the way we'll need to check asap if replacing the design of a button works with my technics or not!

By the way an easy way to check "our capabilities in changing the webpage" is to do Ctrl+Shift+I , then click on the mouse-pointer, and the pick an element and try to change it's "related css stuff". Things done like that will be possible with putting CSS code in the page.

And if you see another moddb page that did something you want to do on h3sw modb page, tell me, i will be able to copy it's ability for sure!

Quote :

This is: " Logo / Shown when browsing mods / 1024x768 or larger recommended".
I understand that it's just the logo, and they want 1024x768 or bigger size! But it's also just a recommendation.
Does the image we are going to use is the 1024x768 you just posted? Smile

No, you looked to another place. The "Logo" is the picture which is shown here, and I already put the actual image so it's all okay.
What I meant is that the overall width of the mod information window is actually 768 pixels, so that you can see that an image I put on the current version of the page fits perfectly there.

If you remember, in the past the width of this window was 940 pixels.

Quote :

What is this rule about? I don't see anything in the edit board.  
The "spoiler" you talk about is the commercial between Moddb menu and H3SW menu ? (only visitors(not logged in) can see that?)
or it's the "READ MORE"? (or the entire line... but this line is here to show the "READ MORE" button.)

Sorry for disinformation! What I meant at first is that when you try to remove the whole text from the mod information window (with the Tavern image), the site will not allow you to save the mod info, indicating that there is not enough text information. In other words, you cannot have a blank image without texts as a mod information.

However, now I did things in a proper way, and the mod now has only the blank image with no problems.
Only the white parts of the description window must be removed somehow.
http://www.moddb.com/mods/h3sw

EDIT: Actually the rule still works. If you remove all text from the code, and only paste an image without additional info filling the code window, the site will not allow you to save it, telling that the description text must be no less than 100 characters in length.

When I talked about the spoiler, I meant that "READ MORE" text and the following effect which makes half of the screen invisible unless you click on the READ MORE button. I really would like this effect to be removed, but like I said, it seems that it is impossible and we will have to adapt our page design to that.

Quote :

mouseover is ok. Clicked version may be difficult to implement especially because as soon as it's clicked the user loads a new page! So, you would like another effect during the 0,2 sec between the click and the new page? hmm..

Forget about the clicked version then. Only mouseover is really required for our design

112 x 51 http://static.moddb.com/cutoff/images/default/tab_on_hover.png
77 x 51 http://static.moddb.com/cutoff/images/default/tab_off.png
But if we change that, it will change only on the main page, not the others pages.

We are going to inject css in "Description" field, so our css changes will work only on the main page.

Quote :

EDIT: Actually the rule still works. If you remove all text from the code, and only paste an image without additional info filling the code window, the site will not allow you to save it, telling that the description text must be no less than 100 characters in length.

Hmmm but the code is going to be much larger than 100 characters, and we can also display text in a corner with transparent color, so I absolutely don't worry about this curse!!


Ohhh I see!!! yeahhh it's a spoiler !!! I didn't click on READ MORE yet hahahaha...
READ MORE seems to be some javascript, but i guess that we can put something like "on load, push READ MORE" in javascript to open it automatically.
with css i can design it to be more "fancy".


edit:

Orzie wrote:

Quote :

mouseover is ok. Clicked version may be difficult to implement especially because as soon as it's clicked the user loads a new page! So, you would like another effect during the 0,2 sec between the click and the new page? hmm..

Forget about the clicked version then. Only mouseover is really required for our design

but maybe we can delay the loading to another page with javascript. But anyways we should care about the "clicked" design after the main things works properly.

Alright, thank you a lot. Could you also send me the links to images which are used on the other parts of the design?

For example, here we can see that almost every asset of the native interface was changed. Ideally, we would have that too: the general window body image, its borders, the mod header, the moddb header, etc. The Moddb logos and the buttons "Home, Xbox, etc." you sent above will probably be the last ones to replace, if we ever decide to.

In another mod, we can see that they also replaced the background image (see left and right sides of the screen). For now, we can leave it as is, but it would be nice to know the size of the image, so that we can add Terra Incognita like it was in the H3SW alpha design (and like it is now).

In this mod they made some borders transparent, and this effect might be very beneficial to us. They also removed the original moddb text "Heroes of Might and Magic III mod" which I would also like to do, and placed the active buttons in the center.

800 x 30 http://static.moddb.com/cutoff/images/default/bg_search_box.png
16 x 208 http://static.moddb.com/cutoff/images/icons/content.png (better to not touch it)
21 x 21 http://static.moddb.com/cutoff/images/default/btn_search_box.png (it's inserted by html)
2000 x 185 http://static.moddb.com/cutoff/images/default/bg_header.png
310 x 120 http://static.moddb.com/cutoff/images/default/bg_header_logo.png

50x50 http://static.moddb.com/cutoff/images/default/bg_headerbox.png
this is the background of Heroes of Might and Magic III: The Succession Wars
Heroes of Might and Magic III mod | TBD


The first step is to do the H3SW street's menu.

Orzie wrote:

If you remember, in the past the width of this window was 940 pixels.

it's still 940 pixels. Or my cache has a very long memory.
So you must tell me what is the 940 px image we are going to use, then I can start the programming.


Thanks for the links!!
i can tell you 2 things:
it's easy to modify background, borders, everything, with css.
it's difficult to do so if we can't put a css file on each page.
I remember we talked in this topic about that we must request the moddb admins to put a custom css to our moddb pages.
Actually, if I put css stuff in the description, it will change only the main page.
So, the description should get only the code for the menu.

EDIT :
here we go: http://www.moddb.com/tutorials/designing-and-customizing-your-modgame-profiles

Quote :

Your modifications need to be staff approved, that means you will need to give your customized CSS to the staff, by sending a private message to Erayser (website editor). Modifications are generally approved and applied within 2 business days.

edit/minor add:
I thee that this mod removed the "HOME  XONE  PS4  Switch  VR  iOS  Android" buttons... Which should not be allowed, or I misunderstand the "rules" about css editing. x)
+ And they changed the image of "message letter" by css, so instead of 13 images in 1 file, they have 13 images. They did so we can do!

But so, we have 2 different lines now, the menu (easy, we can do it ourself) and the css (after woking on it for some hours/days we will need to contat Sir " Erayser ")

GodRage wrote:

Orzie wrote:

If you remember, in the past the width of this window was 940 pixels.

it's still 940 pixels. Or my cache has a very long memory.
So you must tell me what is the 940 px image we are going to use, then I can start the programming.

wait, when I take a screenshot, and mesure it with irfanview, the street image is 940px.... But it looks smaller than the 768px image you sent.
How is that possible .... lol
never mind, i thought the image was 768px width, but it's 1024.
So, on my computer it's really a width of 940px.

So I'm ready to start as soon as you can give me the correct image.