Design of H3SW page on www.moddb.com

You are absolutely right, the width is still 940 px.
(and I mixed up width and height so I said 768 while I should have said 1024px )

So, here are the images. The texts are currently in their placeholder stage, because I will need to design a few letters and design a new mouseover variant for the new sign texts. This should take a few hours at least.
Blank image:


Placeholder text:


Placeholder text + Mouseover effect:


Much sorries that I didn't crop the buttons by myself. I just don't know which button size is effective. I will be making the actual texts + buttons starting from the current moment.

So, for now, I suppose, the texts will stand for (from left to right):

QUIT -> http://www.moddb.com/mods/h3sw/downloads
LOAD GAME -> https://www.facebook.com/thesuccessionwarsmod
CREDITS -> https://www.youtube.com/user/TheSuccessionWarsMod/videos
HIGH SCORES -> https://heroes2.forumactif.com/
NEW GAME -> https://vk.com/thesuccessionwarsmod



Concerning the site header and stuff: this will be the next step. I'll try to make an example using the current state of our ModDB page to show what I have in mind.

P.S. I have found this mod which I posted earlier in this discussion.

1. It seems that a design like this could be very beneficial to us, because the "HEROES OF MIGHT AND MAGIC III: The Succession Wars" banner will be taking the role of a project logo, just like "SINS OF THE FALLEN: FALL OF KOBOL" on the example.

2. It seems that it is enough to put an upper panel with "Powered by ModDB" text to keep to the rules when editing the native ModDB header/logo. We can make that too, given that it is transparent and probably (probably) won't be spoiling the banner image.

3. However, I am unaware what we can do with the "Summary...Articles...Tutorials...Reviews...Files...Videos...Images" panel. I am afraid that if put on a similar position like on the example, it will overshadow our menu artwork. Perhaps it can be moved to some other place, even on the very top?

4. Just around the artwork, it might be possible to leave a border or something, to make the menu artwork ultimately fit on the site background and differentiate it from the photos section.

EDIT: I am preparing an example image of what I mean.

Orzie wrote:

Much sorries that I didn't crop the buttons by myself. I just don't know which button size is effective. I will be making the actual texts + buttons starting from the current moment.

the "button" size will be 940*703. You just have to put the changed design, and keep the unchanged parts as transparent. So you can put effects anywhere, as long as the image is mainly filled with transparent it will be very light.

Orzie wrote:

P.S. I have found this mod which I posted earlier in this discussion.

1. they put it on the background image hahaha http://media.moddb.com/images/mods/1/28/27112/profile/fok_site_background.png

2. good

3. if we use a design of the game we could put the "Summary...Articles...Tutorials" in it.

4. if we put a 3px border maybe the image we need to use will be 934*697 hahaha...

Here we go! http://homm2.free.fr/s/vrac/h3sw/h3sw-css2018v1.html

I made simple "clic zone" (check image). In final version i would do much more accurate "clic zone" if needed and if the "1000 characters limit" agree with that.

and as you can see with this image, just the different graphics should be kept, in a 940x703 size.

Understood. So, it is even possible to make a "mouseovered" version of the button larger? For example, make an additional popup window somewhere inside the Description window, like you did on Lands of Enroth index page. That's very great and I already have some ideas.

For now, here is the first try to explain how I see it. Some text notes are written as part of the image.

WARNING: BIG IMAGE

I also have a question: it is possible to implement custom fonts on the page? For example, changing the "Summary..." upper menu would be great as well as general info windows where HommSmall and/or HommBig TTFs could be used.

Yes, it's the same technology as the entrance of Lands of Enroth. So you can even make a broken door or a monster walking in the street hahahaha... Maybe we can also add movements, with an APNG (animated png). So the image may be heavier to load... but if there is only 2-3 frames it could be not that much heavy.
// i edited this first paragraph.

on your big image, the 2nd and 3rd paragraph are CSS related.
Honnestly, with CSS there is everything possible. I even made tabs in css! xD (but making tabs on moddb isn't possible because of lack of some html tags.)
but everything about design is doable.

Yes, fonts are changeable, as I did on Lands of Enroth. We can put many differents self-made fonts, everybody will see them. This is also done only by CSS.

Alright. So, if I understand everything correctly, it would be better to make the brown border as a part of the tavern artwork?

Preferably, the bordered version of the artwork should be just the same width as all other interfaces, like it was on your previous demo picture.



So, what width should it be? Still 940 px (including the brown borders)?

P.S. If the custom fonts are possible, we should replace all headers with the big H2 font and all small letters with the small H2 font.
You can experiment with that even with the official H3SW page because it's under development anyway.

Orzie wrote:

You can experiment with that even with the official H3SW page because it's under development anyway.

yay!!

bad new.... Seems that even if the allow html they don't allow "map" and "area" html tags... (they don't even allow a simple "table"). :s
The actual code for just the menu is :

Code:

<center>

<table background="https://i.imgur.com/eUexwIY.png" class="nonono" width="940" height="703"><tbody class="nonono"><tr><td>
<img name="h3street" src="https://i.imgur.com/NCv71bj.png" width="940" height="703" alt="H3 Succession Wars" usemap="#h3sw2">
<map name="h3sw2" id="h3id">

<area shape="poly" coords="0,587,120,528,140,703,0,703" onmouseover="document.images['h3street'].src='h3sw-mainstreet940+p+e_quit.png';" onmouseout="document.images['h3street'].src='https://i.imgur.com/NCv71bj.png';" alt="Quit" href="http://www.moddb.com/mods/h3sw/downloads">

<area shape="rect" coords="279,259,412,380" onmouseover="document.images['h3street'].src='h3sw-mainstreet940+p+e_loadgame.png';" onmouseout="document.images['h3street'].src='https://i.imgur.com/NCv71bj.png';" alt="LoadGame" href="https://www.facebook.com/thesuccessionwarsmod">

<area shape="rect" coords="439,194,561,266" onmouseover="document.images['h3street'].src='h3sw-mainstreet940+p+e_credits.png';" onmouseout="document.images['h3street'].src='https://i.imgur.com/NCv71bj.png';" alt="Credits" href="https://www.youtube.com/user/TheSuccessionWarsMod/videos">

<area shape="rect" coords="591,163,721,263" onmouseover="document.images['h3street'].src='h3sw-mainstreet940+p+e_hiscore.png';" onmouseout="document.images['h3street'].src='https://i.imgur.com/NCv71bj.png';" alt="High scores" href="http://heroes2.forumactif.com/">

<area shape="poly" coords="704,264,761,273,821,259,815,349,792,394,762,421,723,380,703,321" onmouseover="document.images['h3street'].src='h3sw-mainstreet940+p+e_newgame.png';" onmouseout="document.images['h3street'].src='https://i.imgur.com/NCv71bj.png';" alt="New game" href="https://vk.com/thesuccessionwarsmod">

<area shape="rect" coords="" onmouseover="document.images['h3street'].src='h3sw-mainstreet940+placeholder+effects.png';" onmouseout="document.images['h3street'].src='https://i.imgur.com/NCv71bj.png';" alt="" href="">
</map>

</td></tr></tbody></table>

</center>

and when I paste it, it keep only the image, with less attributes than it has. hahaha...
you can try... Maybe it's only fine for the Owner of the group to put such html in the description...

Strangely enough, it simply crops the code you sent me to this one, with a completely blank white window as the mod description.

ok...   that's the end.
The image is a blank image, the "street" is the background of the table (table because it's automatically horizontally and vertically centred!), and hover designs are in each line starting with "
Here is the basic Description there were before our tries :

Code:

<center>
<p><img src="http://media.moddb.com/images/mods/1/24/23726/auto/1384678516bczx.png" alt="" width="1024" height="768" style="z-index: -8; left: 0px; margin: 0px; overflow: hidden; width: 100%; background-repeat: repeat-y; position: fixed; top: 0px; height: 100%; border: 0px none; padding: 0px;" /><img src="https://i.imgur.com/qFyUO2c.png" alt="" width="1024" height="768" /></p>
</center>
<p></p>

Okay, so the only way we have is that :

Code:

<img src="http://homm2.free.fr/a/neutral/h3sw_bouclier.png">
<img src="http://homm2.free.fr/a/neutral/h3sw_bouclier.png">
<img src="http://homm2.free.fr/a/neutral/h3sw_bouclier.png">
<img src="http://homm2.free.fr/a/neutral/h3sw_bouclier.png">
<a href="http://heroes2.forumactif.com"><img src="http://homm2.free.fr/a/neutral/h3sw_bouclier.png"></a>
<img src="http://homm2.free.fr/a/neutral/h3sw_bouclier.png">

but after some tries, javascript's "onmouseover and "onmouseout" are also deleted. :s
so, we can cut the image in some square, and put them one after another (as i did with h3sw shield-logo) and put link on the ones we need. The only requierment is that images has the same height.


Another way I can think about, is to make the "hover" image changing with the css we would put later, as the css will not have any restrictions.

edit : buuuut i just checked and we can't add any
class=""
... so it may be difficult.
I think the last hope would be (still in the css file) something that will looklikes:

Code:

img #content['https://i.imgur.com/qFyUO2c.png']:hover {content:url(https://i.imgur.com/thehoverimage.png); }

but the main problem is that's very random: some browsers will understand and change the image when :hover, but some may not. (Chrome on windows and Chrome on android will probably read differently...)
Anyway i start to be tired for today, tomorrow I will work more with the css.

So, no chance to have the buttons with the mouseover effect?

I think, there was a selection of methods how to make that with the use of CSS, like making an image containing the both "clean" and "mouseover" version, and a script which switches the displayed half of the image upon hovering the mouse on it.

Edit: Alright, take your time and much thanks for the useful info!

You may actually postpone the mouseover idea for now (I would anyway have to produce additional graphics for the assets).
Just check if all the other required changes are generally possible or not.

The description doesn't accept css either.
so if we use css to do that, we must goes by the css file we will send to moddb admins.
And so, each time we want to change something we'll request them to accept a new version of our css. xD
That's a trap!!


i just noticed that moddb description accepts that :
< img src='image.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);" >

style="" is a way to put css directly in the html tag.
so we can put some basic css, but it's not enough to change the image on mouse-over... (it gaves me so much hope!!! hahahaha)


okay, maybe 1 hour have spent while i started to write this reply. xD

So actually we have only basic stuff, but with just css i can change the image when :hover  
check that : http://homm2.free.fr/s/vrac/h3sw/z0test.html

okay, there is still empty space... i can't remove it, i think i'm getting too much tired for today.
and also, if we put any space or line return between the images, it will makes a little space!!.... Kind of a dangerous product!

but, i just pasted my code in the moddb, and so i have to delete 2 blank lines, and it works well! But no mouse-hover yet, as it will be in the css file.

ps/edit :
you can check it now in live: http://www.moddb.com/mods/h3sw
it's 6 images.
and so, to put back the previous image (for the night ) it's:

Code:

<center>
<p><img src="http://media.moddb.com/images/mods/1/24/23726/auto/1384678516bczx.png" alt="" width="1024" height="768" style="z-index: -8; left: 0px; margin: 0px; overflow: hidden; width: 100%; background-repeat: repeat-y; position: fixed; top: 0px; height: 100%; border: 0px none; padding: 0px;" /><img src="https://i.imgur.com/qFyUO2c.png" alt="" width="1024" height="768" /></p>
</center>

edit: sorry for my bad english + key pushing mistakes... i corrected so many that I'm sure there is still some strange english. Don't hesitate to tell me "GodRage can you please write again what you just said?"

Orzie wrote:

Just check if all the other required changes are generally possible or not.

Everything else you said is, imo, an easy task with a custom.css file!
Just a matter of time when there is a goblin hiding behind some pixels.

Anyway i'll start to do something about css tomorrow:wer: I must take a 10 hours break hahaha

The mouseover effect on ModDB doesn't seem to work in my browser. But it works on Lands of Enroth link you just sent.

Well, it's better to take some rest for today. I have finished the new version of the tavern artwork, this time with the frame included.

blank version
idle version
hovered version

(still not final though, because I don't like a wooden part to the right which has unfitting perspective and I noticed an 1px black line which shouldn't be there)

So, I'll also be doing something different for the mod to get some rest, like testing the hero specialties

Have a good night!

Orzie wrote:

The mouseover effect on ModDB doesn't seem to work in my browser. But it works on Lands of Enroth link you just sent.

Yes it's normal, on moddb there is only the static images, the :hover images can be added only with a css file. So we will be able to do that when we will send our css file to the moddb's admin.


yeyy the final image is getting closer !

Thanks, good night to you too and to whoever read this topic silently

If I just paste the previous year's css5c version, it gives that :
http://homm2.free.fr/s/vrac/h3sw/h3sw-css2018v2.html

Okay i worked a little on it :
http://homm2.free.fr/s/vrac/h3sw/h3sw-css2018v3.html
i modified just from the top of the page to the screenshot selection (included)


Terra incognita: i am not fan of this design, it's really a "no clic land" hahaha
(hmmm i'm not even sure... for me, it's the grey stone that there is outside the map, in adventure map in the game.   But maybe is it the "fog of war"? )

Fonts: i think it's working fine. (and easy to put many fonts.)

Screenshot's arrows : on my browser they are different than yours!
it's this one: http://static.moddb.com/cutoff/images/media/navigation.png
So better to insert our own arrows to be sure everybody see the same arrows for the moment the placeholder is:
.
But very strange thing is that your arrows and mine are not the same... So i can't be sure if my magic will replace only my arrows or also yours.

Screenshot's video image : the black bg is in the image:
http://media.moddb.com/cache/images/mods/1/24/23726/crop_120x90/human-vs-undead-battle-gameplay-hd.mp4.jpg

Strangely enough, there are some fast graphical glitches when you first hover the mouse over the signs; then everything becomes normal.

Okay, so here are the comments:


1. We will have to fix this border in future. If you need an expandable border, I will design a proper border piece/pieces if required so that the border will not look overstretched/overcompressed. Just tell me the length of a standard border segment used here.

2. I will provide a proper arrow asset several hours later, right now I'm not at home.

3. The current background for the Image/Video section is indeed too bright and many images will not look good on it for sure. If you are against the Terra Incognita used for the background of this section, here is a quick design with the darkened window area.



The use of Terra Incognita is justified however, because there are different screen resolutions and we risk very much if we try to place a 1920x1080 image there though. I will still try to send you a proper one so you can try it.
Sorceress image 1920x1080
Necromancer image 1920x1080
Changed necromancer image 1920x1080

Another option would be using the in-game grey border all the way on the background, but it will most probably look worse than Terra Incognita.



----

Now, concerning the fonts:

4. Currently, the whatever glowing/text shadow effect you used on the fonts does practically no good for the readability of the fonts. They become too blurry and smudged all over the place, which is, given the small size of the font and its ornate shape, very bad for people's eyes (and even eye health). Putting it on a beige background also doesn't help.



5. The yellow headers look almost normal, but the font color for sure isn't. It stands out too much on the red background (too bright yellow, not corresponding to what was in the game where yellow was not so screaming, I can even make some tries and find a proper hex address for you if you have some problems in differentiating the tones of the yellow), and still, the glowing effect has to be removed. The shadow can probably stay for now, so we can see how it looks.

6. I have big doubts that this font size is really suitable to be used with HommBig font. At this resolution, the font is very much unreadable and cannot be used effectively: people will just leave the page because their eyes are tired.
If we cannot replace the general small font with HommSmall font, it would be better to switch it back to native ModDB font.
Still, the same comment about glowing, especially for the red font. It is just too blurry and cannot be effectively understood by the first glance.

Also, it seems that white text is not readable on such kind of a background. Perhaps we could use a darkened window instead? I mean the one I sent above. You can tell me the general sizes of the box and all lengths of required blocks so that I could make all necessary interface elements.

7. Same comment about the red glowing font. We just cannot seem to be allowed to use the glowing effect with this kind of font. It's already not readable as good as the native ModDB font, so surely this is not an option. The Add File text is going to become a big problem as well.

8. The texts are misplaced for some reason. If the reason is in the massive font character size, I'm afraid we won't be able to use it.

9. If possible, we should remove the Twitter Feed section, as well as some others, like Tags.

Orzie wrote:

Strangely enough, there are some fast graphical glitches when you first hover the mouse over the signs; then everything becomes normal.

Yes, it's because the browser loads the :hover image that will replace the previous image, so during this delay there is a glitch, and once the image is in cache the glitch disappear.
If you want to remove the glitch, we will have to try something new ;
setting the h2ish street as a background, putting "squared" images as we did, but all blank, so, the glitch will happens, but nobody could tell there is a glitch (because the images on the right that will move to their left for 0,2 sec are blank images...).
If you are interested I will work on it. The :hover images would be same as we are already planning.


1. yes, i just putted the "standard border" I putted everywhere else, and you can also notice that this border on the "Articles" box is a bit compressed.
actually all theses borders use this image :

i just need an image with the border with around 100px height, i'm sure this would be great cause it will works on all the boxes (giant and tiny boxes).
Screenshots box is actually: 900x100, plus 25px border. (so it's 950x150)
and background used in all boxes is:


2. okay take your time I'm fine on working on this css project for few hours everyday for 1 week rather than 40hours in 3 days.

3.

Orzie wrote:

If you are against the Terra Incognita

Maybe i have a bad artefact on me... But now i am absolutly not sure at all what is Terra Incognita.
is it the fog of war (black clouds over the undiscovered maps) ? or the map border (stone borders outside the adventure map) ?
Okay i will use BBA9K.png , but, in css the easy way is to make 2 images : 1 for the borders (BBA9K.png is fine), and 1 for the background (and this one is in repeat style usually, so there must be no borders in this one).

Orzie wrote:

Another option would be using the in-game grey border all the way on the background, but it will most probably look worse than Terra Incognita.

Hahaha i'm getting lost   The grey border is probably what i call the stone-border outside the map on the adventure map... So terra incognita is the nighty-clouds, if so, yes I agree Terra incognita is great for the overallpages background



---- from here i didn't work on it, it's (v3) still the result of what happens with the old css work i was working on year ago.

4. (Fonts) Yeah i just pasted the Lands of Enroth's shadow design, as it's the more closer i made to copy the H2 looking.
I agree, we use too different "tones" of colors under the letters that it makes text somehow ugly.

5. too bright... okay it's probably because i'm colourblind! haha so it would be better you pick a proper hex yellow colour Cause for be it's a little dark yellow.


6. it's default font-size (i didn't touch it), but it's related to the font. The Homm2big.ttf i'm using was kind of small... maybe you have a better ttf font ?
And it will be same if I use the Heroes2HQ.ttf i did because i used the Homm2big as a base for shapes & sizes.

small font: ok.

about backgrounds, as it's in repeat, any size is fine, borders must be put in a different image.

7. Pick a color
Pick also a color/design about the mouse :hover for this one (underline? shadow adding?) we can also set a background+border on theses 2 red things, but, they share the same come so they will have the same look.

8. Nahh it's old, I didn't work on it yet. You know, you should let me couple days to make a first "good" version. I just felt i should share my ongoing working.


9. Twitter/Tags... I can hide their content only, the title will still be there.
Or I hide the title "Twitter" and all the title on this column will disappear...




Okay so while writing this reply i made changements requiered, but still, please remember that i need more time to fix many things as I must partially rewrite over the code I wrote years ago. (and anyway making a good css takes time ).
In this version, the main font is the Heroes2HQ i made. And I also know that my Homm2big and Homm2small fonts I have are differents from the fonts that H3SW are holding.

v4 http://homm2.free.fr/s/vrac/h3sw/h3sw-css2018v4.html

"summary articles files videos images forum stats "
We can put buttons. Right now, they are css made so not really as good looking as it would be with images.
But so, the displayed page has the button pushed (here it's "summary"), page that are empty (articles, forum) are a bit dark grey letters, and active buttons are light grey letters. I can also change the :hover style (here it's just an underline) : i can put another image, in fact we can change anything about this menu.

Also, i need you tell the same things for "basic" links, links there is everywhere. Actually they are red, and :hover makes an underline.

hmmm i changed also things there and there, but don't worry about the Profile/status/removed-twitter column on the right, i will work on it tomorrow. I think i'll just use the IzBBA9K.png you gave me.


ps: such long posts made communication slower, maybe you waited my reply...

No, long replies are absolutely okay, it's just me today (and tomorrow) because I am not at home and sometimes don't have a chance to read properly. So, I guess, I will leave a proper reply tomorrow.

The buttons on the top panel seem to be a more effective solution.

I am a bit in doubt about the small font you put, because it obviously has the size not corresponding to the initial H2 size: some letters are stretched, like "v". Is there any chance to find a more fitting size (larger/smaller)?

Orzie wrote:

I am a bit in doubt about the small font you put, because it obviously has the size not corresponding to the initial H2 size: some letters are stretched, like "v". Is there any chance to find a more fitting size (larger/smaller)?

i'll play with font's size tomorrow. but generally, a pixelated font doesn't scale well.

Some biggers sizes aren't that bad but it won't fit theses small boxes.

check it with 11px:
http://homm2.free.fr/s/vrac/h3sw/h3sw-css2018v4b.html



Titles > There is a strange bug with the background.
But somehow it's "normal", because the "red" background is just a transparent red, and so the design will change if the background change. (actually 40% opacity: rgba(256,0,0,0.4); )
Better for you to pick an image for theses "titles" background.

The glitch for the menu disappeared:
http://homm2.free.fr/s/vrac/h3sw/z0test2.html
I pasted the code in the moddb description, it will also works on moddb

Cool to know and sorry for the few days of silence!

Frankly, I don't think we should use any other font size than 10px - the natural size of HommSmall.ttf. If it will not be convenient to read on the site, I'm afraid we will have to switch back to native. There is surely a reason why all mods on ModDB utilize standard fonts.

Besides, here are more proper graphics to put to the site prototype. I prepared the mouseover versions, too; you'll just have to carve the buttons and the text panel which appears with them. I can do that tomorrow myself if you are not inspired to do that.

VK hovered:

Forums hovered:

YouTube hovered:

Facebook hovered:

Download hovered:

In future I will update the background image a little, so the button coordinates might be a little shifted to the right in the final version.

Quote :

Titles > There is a strange bug with the background.
But somehow it's "normal", because the "red" background is just a transparent red, and so the design will change if the background change. Smile (actually 40% opacity: rgba(256,0,0,0.4); )
Better for you to pick an image for theses "titles" background. Smile

So, do I understand correctly that we will have to find a better background image for the window headers?
Anyway, if the fonts will be switched back to native, the change of the header (and probably the whole window design) will be inevitable.

Absolutely no problem.
it gave me time to try to do my first steps into Linux's world.


making peaces of the H2street :
If the only change on the hover is the yellow light effects, i can do it by myself.
But if there is another change (i am not sure for exemple for me the Downloads's paper's border seems brighter also..), better you cut them yourself.

titles bg :
Yes we need a PNG image for the background for titles.
(actually you see there is kind of 2 differents red bg, but it's a bug it should be all the same... but when i put a PNG this bug disappear. Seems it's because of the rgba format i putted there. )

So here are the buttons (to be precise, the images which should be displayed over the background upon hovering over a specific button):

VK
Forum
YouTube
Facebook
Download

Not sure if I did this right, but I hope so. All pixels which should change upon hovering are included in the images.