| Poll | | | Global announcements should be: | | Everlasting, 1 for each project. | | 0% | [ 0 ] | | Temporary, when there is something new to announce. | | 100% | [ 6 ] | | Holalala... No idea where the Ultimate artifact is. | | 0% | [ 0 ] |
| | Total Votes : 6 |
|
|
| | Design of H3SW page on www.moddb.com |  |
| | |
| Author | Message |
|---|
GodRage
Webmaster
Messages : 1055
Quality Points : 229
Registration Date : 2009-09-21
Location : France
 | Subject: 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.  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~
| |
|  | | GodRage
Webmaster
Messages : 1055
Quality Points : 229
Registration Date : 2009-09-21
Location : France
| | Subject: 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~
| |
| | | | Orzie
Master Modder
Messages : 2166
Quality Points : 843
Registration Date : 2014-12-12
Age : 32
Location : Turkey
| | Subject: 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. ________________________  | |
| | | | GodRage
Webmaster
Messages : 1055
Quality Points : 229
Registration Date : 2009-09-21
Location : France
| | Subject: 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~
| |
| | | | Orzie
Master Modder
Messages : 2166
Quality Points : 843
Registration Date : 2014-12-12
Age : 32
Location : Turkey
| | Subject: 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. 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. ________________________ | |
| | | | GodRage
Webmaster
Messages : 1055
Quality Points : 229
Registration Date : 2009-09-21
Location : France
| | Subject: 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.  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. 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.  Okay, maybe i'll make a redish png for this background. 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~
| |
| | | | GodRage
Webmaster
Messages : 1055
Quality Points : 229
Registration Date : 2009-09-21
Location : France
| | Subject: 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... Also the borders of titles, it won't fit anymore, same here, if you have an h3sw border's image... 7/ removed the related mods. 8/ the READ MORE is still here!!!  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.  The black line is here, but we don't see it.
________________________
~Lands of Enroth~
| |
| | | | GodRage
Webmaster
Messages : 1055
Quality Points : 229
Registration Date : 2009-09-21
Location : France
| | Subject: 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. 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 ? 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~
| |
| | | | Orzie
Master Modder
Messages : 2166
Quality Points : 843
Registration Date : 2014-12-12
Age : 32
Location : Turkey
| | Subject: 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 ) 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. 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. ________________________ | |
| | | | GodRage
Webmaster
Messages : 1055
Quality Points : 229
Registration Date : 2009-09-21
Location : France
| | Subject: 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  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 ps/edit 5 minutes after this post: fixed something, just refresh the ...v7.html and it'll look ok. xD
________________________
~Lands of Enroth~
| |
| | | | GodRage
Webmaster
Messages : 1055
Quality Points : 229
Registration Date : 2009-09-21
Location : France
| | Subject: 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~
| |
| | | | Rambo_Ironfist
Peasant
Messages : 3
Quality Points : 2
Registration Date : 2018-05-12
Age : 40
Location : Unconquered forests of Polandnam
| | Subject: 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. | |
| | | | GodRage
Webmaster
Messages : 1055
Quality Points : 229
Registration Date : 2009-09-21
Location : France
| | Subject: 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! The only thing to absolutely keep is the H2-main-street.
________________________
~Lands of Enroth~
| |
| | | | Sponsored content
| | Subject: Re: Design of H3SW page on www.moddb.com | |
| |
| | | | | | Design of H3SW page on www.moddb.com | |
|
| | Permissions in this forum: | You cannot reply to topics in this forum
| |
| |
| |
Home 
Latest images 
Search 
Register 
Log in 
