~ Forums of Enroth ~

An Enroth diehard fan community
 
HomeHome  ChatChat  FAQFAQ  SearchSearch  RegisterRegister  Log inLog in  
Latest topics
» [Ironfist ver 1.3.0+] Bug with fonction OnLocationVisit(type, x, y)
by Unknown_Hero Yesterday at 23:49

» [Ironfist ver 1.3.0+] Unexpected program termination when a double click is performed on a town
by Unknown_Hero Yesterday at 23:46

» [Ironfist ver 1.3.0+] Pixel of blue color visible during fade to black when launching a scenario
by Unknown_Hero Yesterday at 23:43

» [Ironfist ver 1.3.0+] The bass.dll file is missing after installation
by Unknown_Hero Yesterday at 23:40

» [Ironfist ver 1.3.0] Bug in lua scripts with IDs "CREATURE_PEASANT" or "0"
by Unknown_Hero Yesterday at 23:35

» Let's talk about Wizards
by Orzie Yesterday at 05:23

» [Ironfist ver 1.3.0] Lua script, instructions validation problem
by Unknown_Hero 2018-10-13, 23:19

Poll
"Wait" in HoMM2?
Yes
80%
 80% [ 55 ]
No
20%
 20% [ 14 ]
Total Votes : 69
Most Viewed Topics
H3SW: General Graphics discussion
Ragoon's Graphics For HoMM3SW
H3SW General Discussion
H3SW: Dwelling Development
H3SW Map List: Work in progress
Welcome fellow Enrothians!
Enrothian Fan Art
Commanders?
Heroes of Might and Magic 3: The Succession Wars - General info & Announcements
Dervish Faction General Concept

Share | 
 

 Design of H3SW page on www.moddb.com

Go down 
Go to page : Previous  1, 2, 3, 4
AuthorMessage
GodRage
Webmaster
Webmaster
avatar

Messages : 731
Quality Points : 179
Registration Date : 2009-09-21
Location : France

PostSubject: Re: Design of H3SW page on www.moddb.com   2018-01-10, 09:10

No we can't use the area html's tag, the technic we use is " piecing ". (sorry i wrote peace instead of piece in my previous post.. My bad. )
So we put image by image, and some of the images has a link, and in css the :hover will replace the image by the hover-image. We set a copy of the image on the background to avoid the glitch. Smile
with the previous images it gaves:
becomes cause of *
*this "button" is on the same line, so we must put the same image's size. xD

But it's okay i will do it, probably tomorrow, because i want to do it very well, h3sw desserve a fully awake guy working on that.

________________________
~Lands of Enroth~
Back to top Go down
http://homm2.free.fr
GodRage
Webmaster
Webmaster
avatar

Messages : 731
Quality Points : 179
Registration Date : 2009-09-21
Location : France

PostSubject: Re: Design of H3SW page on www.moddb.com   2018-01-12, 07:38

Okay it's here: http://homm2.free.fr/s/vrac/h3sw/z0test3.html
when we'll put the code on moddb, the space between new line swill disappear.

Remember for the future that if you want to change the hover image, you must modify the css. (and so, ask an admin to modify the css..)

________________________
~Lands of Enroth~
Back to top Go down
http://homm2.free.fr
Orzie
Master Modder
Master Modder
avatar

Messages : 1762
Quality Points : 731
Registration Date : 2014-12-12
Age : 26
Location : Tomsk, Russia

PostSubject: Re: Design of H3SW page on www.moddb.com   2018-01-12, 08:00

Looking great! When we will be sending the code and images to the moddb officials, I'll try to fix as much as I can so that we won't have to bother them again for a long time. I will do all that in the end, when we will finish the remaining aspects like fonts, window design, the main page content, etc.

For now I would like to see how the entire moddb main page will look with that window put inside, if it is possible (even without the mouseover effect; it's just to provide a more clear vision on how the page would look). Please do that with the HommSmall size of 10px, the native one. 11px demonstrate some distorted letters, which make reading of the text even harder than it would for native 10px.

P.S. So, no chance to have a popup text window as shown on the concept image ("Visit our VK page" in that example)? If this is the cost we have to pay for the buttons to display perfectly (without loading glitches), it's okay though: there are some other ideas on how to fill that part of the picture.

________________________
Back to top Go down
GodRage
Webmaster
Webmaster
avatar

Messages : 731
Quality Points : 179
Registration Date : 2009-09-21
Location : France

PostSubject: Re: Design of H3SW page on www.moddb.com   2018-01-17, 06:18

Okay, i pasted the "street" in moddb :
(here is the code used right now)
Code:

<div style="padding: 0px; margin: 0px; border: 0px">
<img
src="http://homm2.free.fr/s/vrac/h3sw/street2018/a1.png" style="padding:0px;margin:0px;border:0px;display:inline-block;width:940px;height:175px;background-image: url(http://homm2.free.fr/s/vrac/h3sw/street2018/a1.png);"><br><img
src="http://homm2.free.fr/s/vrac/h3sw/street2018/b1.png" style="padding:0px;margin:0px;border:0px;display:inline-block;width:431px;height:101px;background-image: url(http://homm2.free.fr/s/vrac/h3sw/street2018/b1.png);"><a href="http://heroes2.forumactif.com"><img
src="http://homm2.free.fr/s/vrac/h3sw/street2018/b2.png" style="padding:0px;margin:0px;border:0px;display:inline-block;width:142px;height:101px;background-image: url(http://homm2.free.fr/s/vrac/h3sw/street2018/b2.png);"></a><a href="https://www.youtube.com/user/TheSuccessionWarsMod/videos"><img
src="http://homm2.free.fr/s/vrac/h3sw/street2018/b3.png" style="padding:0px;margin:0px;border:0px;display:inline-block;width:149px;height:101px;background-image: url(http://homm2.free.fr/s/vrac/h3sw/street2018/b3.png);"></a><img src="http://homm2.free.fr/s/vrac/h3sw/street2018/b4.png" style="padding:0px;margin:0px;border:0px;display:inline-block;width:218;height:101px;background-image: url(http://homm2.free.fr/s/vrac/h3sw/street2018/b4.png);">

<br>

<img
src="http://homm2.free.fr/s/vrac/h3sw/street2018/c1.png" style="padding:0px;margin:0px;border:0px;display:inline-block;width:288px;height:132px;background-image: url(http://homm2.free.fr/s/vrac/h3sw/street2018/c1.png);"><a href="https://vk.com/thesuccessionwarsmod"><img
src="http://homm2.free.fr/s/vrac/h3sw/street2018/c2.png" style="padding:0px;margin:0px;border:0px;display:inline-block;width:128px;height:132px;background-image: url(http://homm2.free.fr/s/vrac/h3sw/street2018/c2.png);"></a><img
src="http://homm2.free.fr/s/vrac/h3sw/street2018/c3.png" style="padding:0px;margin:0px;border:0px;display:inline-block;width:279px;height:132px;background-image: url(http://homm2.free.fr/s/vrac/h3sw/street2018/c3.png);"><a href="https://www.facebook.com/thesuccessionwarsmod"><img
 src="http://homm2.free.fr/s/vrac/h3sw/street2018/c4.png" style="padding:0px;margin:0px;border:0px;display:inline-block;width:113px;height:132px;background-image: url(http://homm2.free.fr/s/vrac/h3sw/street2018/c4.png);"></a><img
 src="http://homm2.free.fr/s/vrac/h3sw/street2018/c5.png" style="padding:0px;margin:0px;border:0px;display:inline-block;width:132px;height:132px;background-image: url(http://homm2.free.fr/s/vrac/h3sw/street2018/c5.png);">
<br>
<img src="http://homm2.free.fr/s/vrac/h3sw/street2018/d1.png" style="padding:0px;margin:0px;border:0px;display:inline-block;width:940px;height:158px;background-image: url(http://homm2.free.fr/s/vrac/h3sw/street2018/d1.png);">
<br>
<a href="http://www.moddb.com/mods/h3sw/downloads"><img
src="http://homm2.free.fr/s/vrac/h3sw/street2018/e1.png" style="padding:0px;margin:0px;border:0px;display:inline-block;width:144px;height:143px;background-image: url(http://homm2.free.fr/s/vrac/h3sw/street2018/e1.png);"></a><img
src="http://homm2.free.fr/s/vrac/h3sw/street2018/e2.png" style="padding:0px;margin:0px;border:0px;display:inline-block;width:796px;height:143px;background-image: url(http://homm2.free.fr/s/vrac/h3sw/street2018/e2.png);">
</div>
i had to add the first line: < div style="padding: 0px; margin: 0px; border: 0px" > because the

that moddb automatically add made white space on the left/right border and that was bad. for the top "little white line" there is so many boxes beginning/ending at this precise area that it may take me time to figure out which one is making this white space. So I may just reduce the size of one of the box to force the unknown one to not make the white space. But that will be later, because maybe other modifications will fix that.

If moddb accept the html id="" then I think i could manage to change the d1 image to show description text. But actually, moddb removes the id="".


un-logged, Homm2small 10px: v4c - ADs for visitors may be annoying. xD
logged-in, native font native-px : v4d
(both are using Homm2big for titles)

I obviously didn't work on the "unlogged visitors" looking. However, the only difference is the black lines on my pages, and... guess what. It's just the commercials. On moddb, when i inject my css in the page, the only problematic commercial is the top one, being over a menu. So i will change the place of the commercial later: after we finish this menu.

ps: sorry for the delay. I always work on H2 when i feel the magic in me.


________________________
~Lands of Enroth~
Back to top Go down
http://homm2.free.fr
Orzie
Master Modder
Master Modder
avatar

Messages : 1762
Quality Points : 731
Registration Date : 2014-12-12
Age : 26
Location : Tomsk, Russia

PostSubject: Re: Design of H3SW page on www.moddb.com   2018-01-22, 01:30

Yeah, the example with the native font looks the best.

1. So, I suppose, I should prepare proper arrow buttons for the Images panel.
I wonder why they are misplaced though (the distance between buttons and window edges are different from the left and right sides).


Also, it is absolutely clear that the background for the images must be different, for example they should be placed over black background (which I previously mentioned as Terra Incognita (Uncharted Territory a.k.a. the black fog with stars).


2. I suppose I should also make this panel as a complete png with the same length as presented.

The font color looks a little bit too bright in my opinion, it doesn't look too good on bright red. I suggest bringing it closer to yellow, or reconsider the red header. Actually, if we make the "darker red" header for the whole image, the font might fit better.


3. We might want to remove the "similar mods" window because there are no similar mods to H3SW. Smile
And the grey text looks horrible on the H2-style brown window anyway.



4. It seems that the window size is not 940 px, because we can see that the spoiler line is wider and the lower windows are in fact wider than the main window.

By the way, is it possible to remove the spoiler? For example, write a script which automatically rolls down the whole image at start of the page.

________________________
Back to top Go down
GodRage
Webmaster
Webmaster
avatar

Messages : 731
Quality Points : 179
Registration Date : 2009-09-21
Location : France

PostSubject: Re: Design of H3SW page on www.moddb.com   2018-01-23, 12:58

1./ Arrows, I just tried to replace arrows with another image, and the 2 arrows are actually from 1 image.
They are "misplaced" bicause i didn't do anything about that, because it would just be wasting my time to adapt the CSS for a palceholder image. xD But don't worry, we can do anything witht that ; 1 image for the 4 arrows, or 4 different images. we can place the image, in the center/middle, or on a border, we can change the size of the image. Wink

So, we need an image. If you want I can try to draw something hahahaha

1,5./
ohhh yes i forgot to remove the "dark metal grid" hahahaha
I'll try something tomorrow or current this week. Smile

You want each "screenshots" having a black background ? Or the whole box ?

2./ "yellow titles on red background"
i need a png for the background, we can't keep the red one. As i told before, it's actually a RGBA color that has a bug lolll... So... I need a png for the background. if you don't provide me one before my next version, i'll do something myself. Very Happy
Okay, maybe i'll make a redish png for this background. Smile

3./ "others mods"
we can also set another color than grey.
But so i'll remove them. (but does moddb's admin will allow that ?..)


4./ it's 940px.
The "READ MORE" spoiler button is something in javascript.
I can design the READ MORE, but seems i can't design the black bar.

personnal memo for my next version, the size of the box is here:
div.normalboxreadmore { /*max-height: 300px; */
max-height: 780px!important; }

yeah, i can make the "READ MORE" being on the bottom of them page, I can also make it disappear, but the black line may be unremovable without a strong magic. Buuut maybe nobody would notice it because it'll be the "stars bg" (omg i'm still unsure if that is what you call terra incognita... )

________________________
~Lands of Enroth~
Back to top Go down
http://homm2.free.fr
GodRage
Webmaster
Webmaster
avatar

Messages : 731
Quality Points : 179
Registration Date : 2009-09-21
Location : France

PostSubject: Re: Design of H3SW page on www.moddb.com   2018-01-24, 10:05

v5 http://homm2.free.fr/s/vrac/h3sw/h3sw-css2018v5.html
Okay

5/ I tried to make the menu (under the page's title) with buttons made only with css: it will never look as the ingame buttons, so next time (tomorrow maybe (edit: days are too fast omg.. friday i hope i have the time!)) i'll try with images.

5/ I changed the red+yallow titles, i just changed a data in an original png just to get another color. So there is this gryish png. not fitting well i'll have to change that too. if you have an image to give me... Very Happy
Also the borders of titles, it won't fit anymore, same here, if you have an h3sw border's image... Very Happy

7/ removed the related mods. Smile

8/ the READ MORE is still here!!! confused on my local file, scripts doesn't load, that's why it wasn't here.    Mahhh don't worry, next version will not have the "READ MORE" button.  King
The black line is here, but we don't see it.  

________________________
~Lands of Enroth~
Back to top Go down
http://homm2.free.fr
GodRage
Webmaster
Webmaster
avatar

Messages : 731
Quality Points : 179
Registration Date : 2009-09-21
Location : France

PostSubject: Re: Design of H3SW page on www.moddb.com   2018-01-27, 06:20

v6 : http://homm2.free.fr/s/vrac/h3sw/h3sw-css2018v6.html


Top menu : buttons are okay, but i think without the text shadow it's better, but i don't think there is any other :hover style fitting theses buttons, as in H2 there were no :hover style.

Title right at the top of Top menu :
i hided the image since months, but right now i just hided the background color. So it's the stars in the background. Wink
But, we could let the background image, as it's easily modifiable from the admin's page, and don't need any css to just change the background image. (you can put an empty transparent image, or put some design, actually it's a screenshot). So, question is:
Do you want to keep the ability to put an image under the title of the page ? Smile


Arrows are this image :

I just returned the arrow in the image to make one for the right side, but then the shadow of the arrow isn't "correct".

Titles changed again.
READ MORE totally defeated.

________________________
~Lands of Enroth~
Back to top Go down
http://homm2.free.fr
Orzie
Master Modder
Master Modder
avatar

Messages : 1762
Quality Points : 731
Registration Date : 2014-12-12
Age : 26
Location : Tomsk, Russia

PostSubject: Re: Design of H3SW page on www.moddb.com   2018-01-27, 08:20

Amazing results! Now it starts looking much more convincing. I like your design of the arrow buttons, too: I will fix them a little for the final design along with the other menu assets, just when the code is finished.

I am also very pleased that the spoiler is now gone. However, I noted that the black line is still there:



It's not that noticeable on that background and it can be even avoided somehow if I changed the body color of Terra Incognita (yes, all the way I meant the black background with stars Smile ) to the color of the spoiler line. But, it might still be visible, which is bad.

Nice choice for the header font, too. We just need to think if we can find a way to make it fitting even more.
Thing is, I cannot seem to find a perfect solution for the current chosen kind of background. Even in Heroes 1 there was such thing as the special text which was made as part of the image:


So, I spent a while and came up with some kind of new common window design. The grey stone looks much better for the site, and in fact, is less distracting than the colored brown background.
The header text is placed in the center, the color for the header is #F1AB16 or we can choose something near it, the text has shadow so it has more volume and fits better to the background. Is there only one type of text shadow on moddb?



Ideally, the window should also not have excess space. I don't know if this is possible on Mod Database though. If it is, I will provide you with all the necessary graphics. If not, I will try to design an entirely new window with even more simplified body texture (like Heroes 1 message windows). Perhaps we can even try HommSmall font once again with this kind of background! (I have serious doubts though).



P.S. here's a clean window for you to play with. Smile
Of course, if this design will eventually come to the final stage and look good enough, I will prepare a better version of it, with a nicely tiling texture, etc.


P.P.S. I will also write some more thoughts concerning other places tomorrow.

________________________
Back to top Go down
GodRage
Webmaster
Webmaster
avatar

Messages : 731
Quality Points : 179
Registration Date : 2009-09-21
Location : France

PostSubject: Re: Design of H3SW page on www.moddb.com   2018-01-28, 06:55

Happy to hear your kind words.  
And sorry that i probably make you doubting about my capability by showing you all the "let's try that" versions  lol!

Ahahaha yes the spoiler line is still here. It's a javascript line... That cannot be vanquished!!
We must keep Terra incognita BG for the body of the page.   The only switch possible is a totally black BG.  

Orzie wrote:
Is there only one type of text shadow on moddb?
moddb don't provide premade shadows.
The text-shadow is hand made by css. (on this site, you can play with text-shadows)
There is also the capability to put box-shadow. I used it sometimes on Lands of Enroth. But here, because of Terra incognita, such box shadow is... probably useless.

v7 : http://homm2.free.fr/s/vrac/h3sw/h3sw-css2018v7.html

About images,
i will need the "light" texture used on v7 for the "under the title", tu put it on the right column.
(Update : Edit mod
Game : Heroes of Might and Magic III
Developer : H3SW Team
etc)
actually using this :

that's why the look is not good.

Others images i use:


for the border only


for background of text areas


for the borders only Smile


ps/edit 5 minutes after this post: fixed something, just refresh the ...v7.html and it'll look ok. xD

________________________
~Lands of Enroth~
Back to top Go down
http://homm2.free.fr
GodRage
Webmaster
Webmaster
avatar

Messages : 731
Quality Points : 179
Registration Date : 2009-09-21
Location : France

PostSubject: Re: Design of H3SW page on www.moddb.com   2018-03-10, 02:41

v8 http://homm2.free.fr/s/vrac/h3sw/h3sw-css2018v8.html

Removed the cursor (pretty sure moddb won't accept it)
head title design changed
Write a comment box changed
little fixes for few borders

________________________
~Lands of Enroth~
Back to top Go down
http://homm2.free.fr
Rambo_Ironfist
Peasant
Peasant
avatar

Messages : 3
Quality Points : 2
Registration Date : 2018-05-12
Age : 34
Location : Unconquered forests of Polandnam

PostSubject: Re: Design of H3SW page on www.moddb.com   2018-05-14, 15:42

Nice, love the H2 theme. How about something like this jsfiddle.net/c9328c8b/2/ in div.headerbox.
Back to top Go down
GodRage
Webmaster
Webmaster
avatar

Messages : 731
Quality Points : 179
Registration Date : 2009-09-21
Location : France

PostSubject: Re: Design of H3SW page on www.moddb.com   2018-05-19, 05:35

Rambo_Ironfist wrote:
Nice, love the H2 theme. How about something like this http://jsfiddle.net/c9328c8b/2/ in div.headerbox.
In my opinion it takes quite a large space, and won't solve the problem of the buttons. :'(
But maybe it would be good in a totally different page. If you really feel like remaking all the look yourself you can try something totally new! Smile
The only thing to absolutely keep is the H2-main-street. Smile

________________________
~Lands of Enroth~
Back to top Go down
http://homm2.free.fr
Sponsored content




PostSubject: Re: Design of H3SW page on www.moddb.com   

Back to top Go down
 
Design of H3SW page on www.moddb.com
Back to top 
Page 4 of 4Go to page : Previous  1, 2, 3, 4
 Similar topics
-
» Design of H3SW page on www.moddb.com
» Daily Express front page
» Official Madeleine Face Book Page, to be Investigated....
» Origami Design Secrets Robert J.Lang
» Levi Page: Like him or not, he remains passionate about Haleigh!

Permissions in this forum:You cannot reply to topics in this forum
~ Forums of Enroth ~ :: Modding Guild :: Heroes of Might and Magic III: The Succession Wars :: Development Board-
Jump to: