~ Forums of Enroth ~

An Enroth diehard fan community
 
HomeHome  ChatChat  FAQFAQ  SearchSearch  RegisterRegister  Log inLog in  
Latest topics
» [EN, RU][Offline] HoMM2 Treasure Hunt Tourney 2017 (Турнир Кладоискателей)
by Orzie Today at 16:55

» [EN, RU][Offline] HoMM2 Main Tourney 2017 (Общий Турнир)
by Orzie Today at 16:50

» What are you listening to?
by Daleron 2017-09-18, 03:07

» Enrothian Fan Art
by Orzie 2017-09-16, 02:44

» Currently open HoMM1/HoMM2 Tournaments!
by Orzie 2017-09-16, 02:33

» [EN, RU][Offline] HoMM2 Trade Guild Tourney 2017-2 (Турнир Диких Земель)
by Orzie 2017-09-16, 02:05

» [EN, RU][Offline] HoMM1 Main Tourney 2017 (Общий Турнир)
by Orzie 2017-09-16, 01:58

Poll
"Wait" in HoMM2?
Yes
80%
 80% [ 44 ]
No
20%
 20% [ 11 ]
Total Votes : 55
Most Viewed Topics
H3SW: General Graphics discussion
Ragoon's Graphics For HoMM3SW
H3SW General Discussion
H3SW: Dwelling Development
H3SW Map List: Work in progress
Dervish Faction General Concept
Enrothian Fan Art
H3SW Recruitment Point - Enroth Needs You!
Серия книг "Земли Меча и Магии"
Heroes of Might and Magic 3: The Succession Wars - General info

Share | 
 

 Design of H3SW page on www.moddb.com

View previous topic View next topic Go down 
Go to page : 1, 2  Next
AuthorMessage
GodRage
Webmaster
Webmaster
avatar

Messages : 630
Quality Points : 144
Registration Date : 2009-09-21

PostSubject: Design of H3SW page on www.moddb.com   2015-07-22, 01:00

Designing http://www.moddb.com/mods/the-succession-wars-mod

This is an Answer & working topic about this part of the message (below) of this post.
Orzie wrote:
3. Web Design (GodRage, I am looking at you!  lol)
- New web design for our ModDB Page customized at least like this one. The graphics is on us: preferably, we will use Ashirox's Tavern and make the buttons on signs: Forums, Twitter, etc.

I will make some tries. Smile

So, first I copy the "starwars conquest page" 's css, and I make it more readable;
Code:

      <style type="text/css">
#body {background-image: url(http://media.moddb.com/images/groups/1/3/2811/swc.bg.1.jpg);
background-attachment:fixed;background-position:center; color:#ced2e0;}
hr {  background: #595959;  color: #595959;}
a {  color: #F90;} /* links*/
a:hover {  color: #ffae00;}/* links:hover*/

div.pagination a.previous,
div.pagination a.next {border-color: #444;  color: #ccc;
background-image: url(http://media.moddb.com/images/groups/1/3/2811/swc.inner.1.jpg); }

div.pagination a.pageoff,
div.pagination span.previous,
div.pagination span.next {border-color: #444;
background-image: url(http://media.moddb.com/images/groups/1/3/2811/swc.inner.1.jpg);}

li.suggest_over { background-color: #96494F;}

.container { background-image: url(http://media.moddb.com/images/groups/1/3/2811/swc.header.png);}
#searchbox span.member { color: #ccc;}
div.normalcorner {background-image: url(http://media.moddb.com/images/groups/1/3/2811/swc.titlebar.png);}

div.tooltip {background-color: #96494F; padding:2px;
background: -moz-linear-gradient(top, #39386B 2%, #1D122B 35%, #000000 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#39386B), color-stop(35%,#1D122B), color-stop(100%,#000000)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39386B', endColorstr='#000000',GradientType=0 ); /* ie */ }

div.mediabox a.themes:hover { background-color: #96494F;}

div.rotatorbox div.title {  background:  url(http://media.moddb.com/images/groups/1/3/2811/swc.header.png);}

div.headerbox h2 a {  color: #fff;}
div.headerbox h2 a:hover {  color: #f5a184;}
div.headerbox div.title {padding: 0px 9px 5px;}
div.normalbox div.body {background-image: url(http://media.moddb.com/images/groups/1/3/2811/swc.inner.1.jpg);}

div.normalbox div.bodyarticle p.introduction {  color: #ccc;}
div.normalbox div.table div.row {  background-image: url(http://media.moddb.com/images/groups/1/3/2811/swc.inner2.1.jpg);}

div.normalbox div.table div.rowalt {   background-image: url(http://media.moddb.com/images/groups/1/3/2811/swc.inner.1.jpg);}

div.normalbox div.table div.rowerror {  border-left-color: #96494F;}
div.normalbox div.tablegalleryfeature div.row a:hover,
div.normalbox div.tablegalleryfeature div.row a.on {  border-color: #757575;}

div.normalbox div.table h4 a.inactive,div.normalbox div.table span.heading a.inactive{color: #fff;}
div.normalbox div.table span.subheading a, div.normalbox div.table span.date a, div.normalbox div.table span.summary a {  color: #FFFFFF;}

div.normalbox div.table span.subheading, div.normalbox div.table span.summary { color: #fff;}
div.normalbox div.table span.date {  color: #fff;}
div.normalbox div.tablemenu h5 {  color: #CCCCCC;}
div.normalbox div.tablecomments div.row, div.normalbox div.tablecomments div.rowalt {
    background-image: url(http://media.moddb.com/images/groups/1/3/2811/swc.inner.1.jpg);}

div.normalbox div.tableform p.helper {  color: #ccc;}
div.normalbox div.tableform div.progressbar div {  background-color: #96494F;}
div.normalbox div.poll div.barinner {  background-color: #96494F;}
div.normalbox div.poll a.results {  color: #ccc888;}
div.normalbox div.tablerating div.rating p {  color: #ccc;}

div.inner {background-color:#15172d;padding:0 5px 5px;}

span.options a {border: 0;}

div.tooltip {background-color: #66698e;}

div.headerbox div.title {background: transparent;margin-left:210px;}

div.normalbox div.table h4 a, div.normalbox div.table span.heading a {color:#F90;text-decoration:none;}

div.normalbox div.table h4 a, div.normalbox div.table span.heading a:hover {color: #ffae00;text-decoration: none;}
div.normalbox div.tablerelated a.heading {color: #F90;}
a:hover, div.normalbox div.table span.heading a:hover {color: #A71212;}

div.tablemenu input.text {color: white;
background: #231A2D; /* old browsers */
background: -moz-linear-gradient(top, #231A2D 0%, #001647 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#231A2D), color-stop(100%,#001647)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#231A2D', endColorstr='#001647',GradientType=0 ); /* ie */}

table.tableforum tr.subcategoryalt, table.tablepost tr.postalt table.tablepost tr.postmod td.details{
background-image: url(http://media.moddb.com/images/groups/1/3/2811/swc.inner2.1.jpg);}

table.tablepost tr.post td.actions a {color: #DFB216;}

table.tableforum tr.category td {
background: #2D324C; /* old browsers */
background: -moz-linear-gradient(top, #2D324C 7%, #212B42 27%, #131621 99%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(7%,#2D324C), color-stop(27%,#212B42), color-stop(99%,#131621)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2D324C', endColorstr='#131621',GradientType=0 ); /* ie */}

div.tooltip {color: #D3D4DE;}
div.normalbox div.table h4 a:hover, div.normalbox div.table span.heading a:hover {color:#F90;}

div.articlecontent {background: #dde0ec;}
table.tableforum tr.subcategory td.latest a {color:#B78E00;font-style:normal;}

table.tableforum tr.category td span.related a, table.tableforum tr.category td span.related {
color:#B78E00;text-decoration:none;}

table.tableforum tr.category td span.related a:hover{text-decoration:underline;}
table.tableforum tr.category td.buttons {background-color:#171C2C;text-align:center;
background: #3f4c6b; /* old browsers */
background: -moz-linear-gradient(top, #3f4c6b 7%, #212B42 48%, #212B42 54%, #1E2433 99%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(7%,#3f4c6b), color-stop(48%,#212B42), color-stop(54%,#212B42), color-stop(99%,#1E2433)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#1E2433',GradientType=0 ); /* ie */  }

table.tableforum tr.category td.buttons a:hover {
background: #3A4360; /* old browsers */
background: -moz-linear-gradient(top, #3A4360 7%, #212B42 84%, #23263D 99%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(7%,#3A4360), color-stop(84%,#212B42), color-stop(99%,#23263D)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3A4360', endColorstr='#23263D',GradientType=0 ); /* ie */ }

table.tableforum tr.category td.buttons a, table.tableforum tr.category td.buttons span {
color:#FFFFFF;display:block;font-size:1.3em;font-weight:bold;text-decoration:none;filter: dropshadow(color=#4c4c6d,offX=0,offY=1);text-shadow: 0px 1px 0px #4c4c6d;
-webkit-transition: background 1s ease-in;
-moz-transition: background 1s ease-in;
-o-transition: background 1s ease-in;
transition: background 1s ease-in;}

table.tablepost tr.postmod { background-image: url(http://media.moddb.com/images/groups/1/3/2811/swc.inner2.1.jpg);}

table.tableforum tr.subcategoryalt, table.tablepost tr.postalt { background-image: url(http://media.moddb.com/images/groups/1/3/2811/swc.inner2.1.jpg);}

a:hover, div.normalbox div.table span.heading a:hover {color:#ffae00;}
table.tableforum a:hover {text-decoration:underline;color:#ffae00;}

div.forumbox table.tablepoll div.poll div.barinner {color:#FFFFFF;
background: #4C5C7C; /* old browsers */
background: -moz-linear-gradient(top, #4C5C7C 7%, #35566B 48%, #283F51 56%, #23263D 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(7%,#4C5C7C), color-stop(48%,#35566B), color-stop(56%,#283F51), color-stop(100%,#23263D)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5C7C', endColorstr='#23263D',GradientType=0 ); /* ie */}

div.forumbox table.tablepoll div.poll div.barouter {margin:0;
background: #A3A3A3; /* old browsers */
background: -moz-linear-gradient(top, #A3A3A3 0%, #EAEAEA 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A3A3A3), color-stop(100%,#EAEAEA)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A3A3A3', endColorstr='#EAEAEA',GradientType=0 ); /* ie */}

div.forumbox div.body table.tablepost div.quote {
border-left: 4px solid #AAA;color: white;font-size: 11px;margin-left: 10px;padding-left: 8px;}


table.tableforumform tr.category input.text, table.tableforumform tr.subcategory input.text, div.normalbox div.tableform input.text, select, textarea, div.normalbox form.filter input {
border:2px solid #FFFFFF;font-size:1.2em;
background: white; /* old browsers */
background: -moz-linear-gradient(top, #8C8C8C 0%, #D8D8D8 24%, #FFFFFF 99%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8C8C8C), color-stop(24%,#D8D8D8), color-stop(99%,#FFFFFF)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8C8C8C', endColorstr='#FFFFFF',GradientType=0 ); /* ie */ }

option, optgroup {background: #171c2c; color:white}

div.normalbox form.filter div.buttons input, div.normalbox form.filter div.buttons a {
background: #56657F; /* old browsers */
background: -moz-linear-gradient(top, #56657F 0%, #0e0e0e 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56657F), color-stop(100%,#0e0e0e)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#56657F', endColorstr='#0e0e0e',GradientType=0 ); /* ie */
color:white;}

#footer {border-top:0;}

div.headerbox ul.menu {text-align:center;}

table.tablepost tr.postmod td.actions, table.tablepost tr.postmod td.details {
background: #000000; /* old browsers */

background: -moz-linear-gradient(top, #000000 0%, #1D122B 35%, #39386B 97%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(35%,#1D122B), color-stop(97%,#39386B)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#39386B',GradientType=0 ); /* ie */}

table.tableforum tr.subcategory td.category, table.tableforum tr.subcategory td.latest, table.tableforum tr.subcategory td.topics, table.tableforum tr.subcategory td.posts, table.tablethread tr.subcategory td.thread, table.tablethread tr.subcategory td.board, table.tablethread tr.subcategory td.author {
color:#999999;
}

table.tableforum tr.subcategory th {color:white;}

div.normalbox div.poll div.baroptionalt {
background-color: transparent;
background-image: url(http://media.moddb.com/images/groups/1/3/2811/swc.inner2.1.jpg);
}

table.tablepost tr.post td.actions {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.07, #3F4C6B), color-stop(0.48, #212B42), color-stop(0.54, #212B42), color-stop(0.99, #1E2433));
}

table.tablepost tr.postmod td.actions {
border-left: none;
}
</style>
It's more "fast" to first copy the css of someone else on this kind of site; in order to know the names on what we can work.. Searching theses names 1 by 1 is really long. ^^ (but maybe the moddb site provide an empity css to fill??.. :p)

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

Messages : 1520
Quality Points : 641
Registration Date : 2014-12-12
Age : 25
Location : Tomsk, Russia

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-22, 01:06

I think you should register there to check ModDB engine capabilities. I will then add you to H3SW team there so you will be able to experiment. From what I was able to figure out, their engine has some limitations and some CSS solutions didn't work for me; I gave up and did simple HTML, and with the latest update of ModDB things became broken.

In fact, yes, I would like to be able to change the interface there completely to a more H2-styled design, and also make some buttons active on the building signs of the Tavern I showed you. That would be fresh.

________________________
In case someone cares for my music:
Mylinks_profile_page
Back to top Go down
GodRage
Webmaster
Webmaster
avatar

Messages : 630
Quality Points : 144
Registration Date : 2009-09-21

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-22, 01:20

For the buttons on the ashirox tavern image; you mean theses 4:
- Official website
- facebook
- twitter
- vk
? Very Happy


I am register on it. Smile i jst "tracked" H3:SW..


edit:
I did some tries on local; seems we have to find tricks to modify the look. Smile

For the moment, I didn't find any "edit" button, or any "modifications" page where I can add some css code or so. Smile
But mah, I will be offline for some hours, but I hope to work on it when I come back!! Smile

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

Messages : 1520
Quality Points : 641
Registration Date : 2014-12-12
Age : 25
Location : Tomsk, Russia

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-22, 05:28

GodRage wrote:
For the buttons on the ashirox tavern image; you mean theses 4:
- Official website
- facebook
- twitter
- vk
? Very Happy

+ I am register on it. Smile i jsut tracked H3:SW.. http://www.moddb.com/members/GodRage

I sent you an invitation to H3SW Team. Check the upper part of the website for an icon of a letter. It should appear there.

The buttons I think of should feature the most actual mod resources. So, perhaps, this kind of idea can work:


This is for maximum variant. The minimum variant (since we don't have a reliable support from AshiRox) should feature only 4 sign buttons: Official Forums, Facebook, VK and YouTube.
All objects/buttons must change their look when pointed by mouse cursor. Of course, all graphics are on us.
The text on the bottom will be a part of the image, I suppose. ModDB doesn't allow to use custom fonts, only standard family.

What I need from  you is to:

Gems Check if you are able to make buttons changing their look if pointed on by the mouse cursor
Gems Check if you are capable to change the classic ModDB interface (all panels like SW Conquest mod for Mount&Blade does)
Gems Check if this image size fits to the ModDB width limitation fine, and if not, reveal the maximum width so I will be able to adjust the image and buttons accordingly.
Gems Check if your buttons redirect to proper info sources. Well, that's not needed because even I was successful in making such buttons.

You can do what you want with the current H3SW ModDB page design. There is no trouble if it is scrapped because it got too old anyway.

________________________
In case someone cares for my music:
Mylinks_profile_page
Back to top Go down
GodRage
Webmaster
Webmaster
avatar

Messages : 630
Quality Points : 144
Registration Date : 2009-09-21

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-22, 10:13

edit: just putting into spoiler outdated parts.

hahaahaha!! Does JVC really said that about H3:SW!?? Very Happy It would be funny and awesome to add a sentence of him in this page. Smile

I never did it before, but I wanted to do it! Smile
The key is in html: http://www.w3schools.com/tags/att_area_href.asp
outdated:
 
So.. I will have to force the site to accept some css programmation... So I must save first what was here in place ;
Code:
<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="http://media.moddb.com/images/mods/1/24/23726/auto/y7e3.png" alt="" width="904" height="650" style="margin-top: 17px;" /></p>
<ul>
<li><span style="color: #000000;">The Succession Wars Mod is a total conversion for Heroes of Might and Magic III, replacing the game graphics with warm pixelated standards of its prequel, HMMII, also adding many new unique developments.</span></li>
</ul>
<ul>
<li><span style="color: #000000;">Meet new units in every castle. Every unit now can be upgraded, like in classic HMMIII, and </span><br /> <em><span style="color: #ff99cc;">even PEASANTS now have a chance to build a career!</span></em></li>
</ul>
<ul>
<li><span style="color: #000000;">Get yourself prepared to meet the quintessence of many magnificent features specific to both of the games. But don't forget to leave the place for something new in your heart, as plenty of things will be attaining this category. Also, don't expect you will get away so easily from the old friends from the very past. The earlier parts of the series will not be forgotten by us as well in sorts of ways.</span></li>
</ul>
<center><span style="font-size: 24px;"><span style="color: #000000;">VISIT OUR OTHER INFO SOURCES!</span></span></center><center><a href="http://heroes3mod.webs.com" target="_blank" title="Visit our Official Website and Forums!"><img src="http://media.moddb.com/images/mods/1/24/23726/auto/kvpx.png" alt="The Succession Wars Mod Official Website" width="180" height="60" /></a> <a href="https://www.facebook.com/thesuccessionwarsmod" target="_blank" title="Like us on Facebook!"><img src="http://media.moddb.com/images/mods/1/24/23726/auto/yg4o.png" alt="The Succession Wars Mod Facebook Page" width="180" height="60" /></a> <a href="http://www.youtube.com/user/TheSuccessionWarsMod/videos" target="_blank" title="Subscribe to our YouTube Channel!"><img src="http://media.moddb.com/images/mods/1/24/23726/auto/oj2c.png" alt="The Succession Wars Mod YouTube Channel" width="180" height="60" /></a> <a href="http://vk.com/thesuccessionwarsmod" target="_blank" title="Join Russian SW Mod Community!"><img src="http://media.moddb.com/images/mods/1/24/23726/auto/pf98.png" alt="The Succession Wars Mod VK Page" width="180" height="60" /></a></center>
<p></p>
Then even if I do an irreversible mistake, we still can paste that. Smile


So, right now:
1/ I will try to make css working.
2/ Checking about image size.
(it kind of come together.. :p)

________________________
~Lands of Enroth~


Last edited by GodRage on 2015-07-22, 14:00; edited 1 time in total
Back to top Go down
http://homm2.free.fr
Orzie
Master Modder
Master Modder
avatar

Messages : 1520
Quality Points : 641
Registration Date : 2014-12-12
Age : 25
Location : Tomsk, Russia

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-22, 10:20

Hah, if he really said it word-by-word, I would run naked on the street for an hour. I will try to make H3SW shown to him sometime though.
Anyways, I'm waiting for good news!

________________________
In case someone cares for my music:
Mylinks_profile_page
Back to top Go down
GodRage
Webmaster
Webmaster
avatar

Messages : 630
Quality Points : 144
Registration Date : 2009-09-21

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-22, 10:56

Orzie wrote:
Anyways, I'm waiting for good news!
Ok, first news for you! Smile
moddb wrote:
Here is a list of what you need to know about how customization works:

  • Customizations won't replace the main CSS of ModDB. Your modifications will be added into another one, which will be implemented into all of your pages.
  • 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.
  • If you want to use a customized design created by someone else on the site, you will need to get the express authorization from the author.
  • If your modifications break the site in a sense of conflictual CSS and/or HTML elements, your modifications won't be approved until you solve them.
  • The ModDB logo and the user bar can't be removed. However, you can edit them, visually speaking.
  • Your modifications can be applied on both ModDB and IndieDB.
source: http://www.moddb.com/tutorials/designing-and-customizing-your-modgame-profiles
So... Just making the stuff offline, and then sending everything by email... Smile

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

Messages : 630
Quality Points : 144
Registration Date : 2009-09-21

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-22, 11:08

940px for the body
940px for a div
920px when it's a

paragraph



So, the image we need must be 940px width. Smile
And... Also with "Youtube" & "VK" & etc wroten on it. + image to display when the mouse is hover.
(so you can just make a kind of yellow light with transparency, in png, then we may use only 1 image for all the overs... anyway, I didn't really succeeded make to load an image when it's hover. :p)

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

Messages : 630
Quality Points : 144
Registration Date : 2009-09-21

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-22, 13:58

It took time but it's working fine on my computer, with only 2 lines of css:
.nonono,.nonono table,.nonono td{top:0px;left:0px;border:0px;margin:0px;padding:0px;border-spacing:0px;}
div.normalbox div.body table{margin-left:0px;margin-right:0px;}


and some html lines:* They want to rally your army. Do you accept? *
<table background="main-screen940.bmp" class="nonono m10" width="940"><tbody class="nonono"><tr><td>
<img name="h2street" src="blank940.png" width="940" height="585" alt="H3 Succession Wars" usemap="#h3sw2">
<map name="h3sw2" id="h3id" class="h3boutons" onmouseover=style='border:1px;'>

<area shape="rect" coords="0,0,200,100" onmouseover="document.images['h2street'].src='top-right.png';" onmouseout="document.images['h2street'].src='blank-640-398.png';" href="http://www.youtube.com/user/TheSuccessionWarsMod/videos" alt="Youtube">
<area shape="poly" coords="234,7,283,12,325,26,297,91,264,80,235,77,234,7,235,8" onmouseover="document.images['h2street'].src='facebook.png';" onmouseout="document.images['h2street'].src='blank-640-398.png';" href="http://www.facebook.com/thesuccessionwarsmod" alt="Facebook">
<area shape="circle" coords="500,100,20" onmouseover="document.images['h2street'].src='vk.png';" onmouseout="document.images['h2street'].src='blank-640-398.png';" href="http://vk.com/thesuccessionwarsmod" alt="VK">

</map>
</td></tr></tbody></table>
(half credit to this page)
For each link, we'll need to make the click-area shape ; there is 3 kind of shape:
rect = rectangular. first angle x,y + opposite angle x,y.
circle = x,y +radius (in pixel)
poly = polygone, each point have an x,y (can be so long to do...)

And so, this is what images we need; (all png)
"h2tavern" image with 940px width (585px height?). (it will touch right and left borders)
and then 1 image (940*585) for each "hover". (10 links=10 images), background must be transparent. (i mean, don't keep any useless part or the file is too heavy :p)


For putting text(blabla?bla!) over the h2tavern-image, it will just need one line of css (padding-top:-300px;)... But, i think it's better to write blabla things directly in the image (HommII fonts!! Very Happy)


And... I'm sure I'm forgetting something important...

For the other stuff (tables design), I will see tomorrow. Smile

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

Messages : 1520
Quality Points : 641
Registration Date : 2014-12-12
Age : 25
Location : Tomsk, Russia

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-22, 19:58

So, did you manage to find a way to create buttons which change when you hover your mouse cursor on it? Fantastic!

Now the only thing to do is to replace standard ModDB interface with our own panels, like MISERY mod for Stalker or Fall of Kobol for Sins of the Solar Empire.

I must admit, however, that changing the classic ModDB interface is not 100% necessary for the mod to be popular. In fact, there are mods like Brutal Doom which don't need it. But they got awesome support because they were already popular all over the world thanks to Doom fans and manifold communities.

As for us, we have just created such a community. Very Happy

________________________
In case someone cares for my music:
Mylinks_profile_page
Back to top Go down
GodRage
Webmaster
Webmaster
avatar

Messages : 630
Quality Points : 144
Registration Date : 2009-09-21

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-23, 04:36

I still have to make the background image, all the images for the "hover"... Smile (or you may do the background image?..)

And anyway, don't worry, I will try to do something great. (like I did for the Forums of Enroth. Wink).
And after I did it, we still make adjustments as H3SW team wish. Smile

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

Messages : 1520
Quality Points : 641
Registration Date : 2014-12-12
Age : 25
Location : Tomsk, Russia

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-23, 04:41

The very background image (which is painted with Dirt terrain here on Forums of Enroth) should be made of Terra Incognita. It feels great to see those stars in the deepest dark.

If you mean the image I sent you (the tavern), it is already made. I can re-size it for 940px width and send to you if needed. The buttons are on us - I will try to persuade Ashirox to make the beautiful text first.

________________________
In case someone cares for my music:
Mylinks_profile_page
Back to top Go down
GodRage
Webmaster
Webmaster
avatar

Messages : 630
Quality Points : 144
Registration Date : 2009-09-21

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-23, 04:56

Orzie wrote:
The very background image (which is painted with Dirt terrain here on Forums of Enroth) should be made of Terra Incognita. It feels great to see those stars in the deepest dark.
By Terra Incognita, you mean the fog covering the non-revealed parts of the map?

Orzie wrote:
If you mean the image I sent you (the tavern), it is already made. I can re-size it for 940px width and send to you if needed. The buttons are on us - I will try to persuade Ashirox to make the beautiful text first.
Send me it both, the full size and the 940px one.
The design of the buttons must be drawn directly on the image of the tavern. ^^
Only the "hover" design must be in another image. Wink
But wait, I will put a sample online soon, it will be more easy to understand how I managed it to work. Wink

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

Messages : 1520
Quality Points : 641
Registration Date : 2014-12-12
Age : 25
Location : Tomsk, Russia

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-23, 05:30

Yeah, that fog. Smile

2401x1500
940x585

________________________
In case someone cares for my music:
Mylinks_profile_page
Back to top Go down
GodRage
Webmaster
Webmaster
avatar

Messages : 630
Quality Points : 144
Registration Date : 2009-09-21

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-23, 06:09

ahhh... I misunderstood somewhere, but it's fine, thanks for the taverns. Smile

Anyway, I want to finish the tavern-buttons design first. Smile

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

Messages : 1520
Quality Points : 641
Registration Date : 2014-12-12
Age : 25
Location : Tomsk, Russia

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-23, 06:24

Stop stop stop, I've told you that the graphics is on us. This means that we are responsible for graphics. You don't have to do the graphic design for buttons, man.

What we want is a new HD font replicating Heroes 2 buttons. Here is the example Ashirox did:



What we need from you is the HTML/CSS code for making the image shine. When we will get the new HD font from Ashirox, we will use your code and the design will be finished.

However, aside from the buttons, your graphic help with classic ModDB interface will be very much appreciated. I thought about this kind of texture for text backgrounds and frames:


________________________
In case someone cares for my music:
Mylinks_profile_page
Back to top Go down
GodRage
Webmaster
Webmaster
avatar

Messages : 630
Quality Points : 144
Registration Date : 2009-09-21

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-23, 09:44

Don't worry. I just made some design just as idea (design didn't took that much time..Very Happy), because I had to make an image for each one to check if the hover works well, and to show you how the images must be done.
This is the stuff I made : http://heroes2.forumactif.com/h2-try1-menu-of-heroes-of-might-and-magic-iii-the-succession-wars

So, you can see that the "buttons" must be done in the main image.
And the, 1 image for each "hover" effect desired. Smile theses images must all be in 940*585.



For ModDB interface, I will try stuff tomorrow. Smile

edit: by the way there is some url that I don't know (twitter, check for translate, OF2 community)

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

Messages : 630
Quality Points : 144
Registration Date : 2009-09-21

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

Preparing for tomorrow... Razz

Orzie wrote:
Do you have the same one without the OK button? Very Happy
For the big whole inside, no problem; it's far from the border so I can manage it. Smile
(by the way, i feel like there is green gems missing in each corner of this image... Razz)


Do you have a wide "terra incognita"png? from h3sw? (Or does the look is totally same as H3 one? H3 one? :p..)

And.. can you tell me what images you want I keep in the actual page. Smile

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

Messages : 1520
Quality Points : 641
Registration Date : 2014-12-12
Age : 25
Location : Tomsk, Russia

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-23, 16:26

I do have some additional materials, but unfortunately I am leaving to the countryside until the Sunday evening so I cannot send anything right now Sad

________________________
In case someone cares for my music:
Mylinks_profile_page
Back to top Go down
GodRage
Webmaster
Webmaster
avatar

Messages : 630
Quality Points : 144
Registration Date : 2009-09-21

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-26, 10:25

Ok, I kind of finished my work for the moment; you can see how it looks on this image:


http://s28.postimg.org/9wyib8wsd/h3sw_moddb_2015_07_25_short1.png
it's png image, 5 Mo. Smile

So, outside the 2 wrong design that my "web screenshot taking" plugin did, it's quite fancy. Smile
Right arrow We need a better Heroes III The Succession Wars logo for the top,
Right arrow shadow I did a good job on the border, we don't really notice where I joined/cuted them. ^^
Right arrow We need also a bar for putting under the menu (summary, news, features,..). I took a bar from the game, but I had to make it more big to fit the menu size. (because transforming the links into buttons wasn't working. :s)
Right arrow shadow and then I will have to make the colors of them matching the menu-bar.png. Smile
Right arrow a modDB logo redesigned by us. Because I took on another mod's page. :p


Right arrow shadow The H3:TSW menu will be added later (that's why it's not on this screenshot).

On the H3:TSW menu page, did you enjoy the hover on the Potion??? Very Happy
I would like to add a lot of stuff like that! Smile ... Can I? Very Happy

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

Messages : 17
Quality Points : 4
Registration Date : 2015-07-22
Age : 1527

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-26, 14:33

Looks great, GodRage. Nice job! Very Happy
Back to top Go down
GodRage
Webmaster
Webmaster
avatar

Messages : 630
Quality Points : 144
Registration Date : 2009-09-21

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-27, 04:14

djenic wrote:
Looks great, GodRage. Nice job! Very Happy
Thanks you very much djenic!! Razz

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

Messages : 1520
Quality Points : 641
Registration Date : 2014-12-12
Age : 25
Location : Tomsk, Russia

PostSubject: Awesome!   2015-07-27, 04:20

Very nice job! You have managed to make almost everything I wanted! The hover effect is done just right and the outline looks like something we will add (but I think the outline for buttons will be yellow like it was in the original menu); we will create our own buttons with the proper lighting later. Concerning the potion... I guess not now, because it will also require proper graphic style, and I would like to have a special effect devised for that button (otherwise people will think that it's something wrong with the bottle). Smile

Crystal Concerning the native ModDB interface, you have shown a decent progress. The frames for message windows look okay and we even can leave them like that I suppose; the background for them is a little bit noticeable as it stands out. I guess we can fix it. I am also thinking about darkening the whole interface because currently it's hard to read the fonts. The font color should be grey, and it is too bad that we cannot customize it... but there is nothing we can do I think.

Crystal Finally, I would like to propose this kind of filler for the "grid" you mentioned. Since it's grey, maybe we can use Heroes 2 Border on the adventure map? The only problem for it will be only to link it properly.

Crystal Ah, and one more thing. I guess we should use the same brownish interface you used everywhere for the Tavern screen (yes, everything that it is currently in the beige thin border will be deleted, with the Tavern put inside). All fonts on the page must be milk white, otherwise they will not be noticeable. Also, about the ModDB menu (news, downloads, etc.): we will need to think what kind of a menu bar should be there to satisfy the white font color. The beige bar doesn't seem to get on with it perfectly.

Anyways, I'm really happy after the demonstration you show me. This is the kind of thing I would never have done myself because I don't know CSS and don't have time to learn it. You will have my eternal gratitude for this development.

________________________
In case someone cares for my music:
Mylinks_profile_page
Back to top Go down
GodRage
Webmaster
Webmaster
avatar

Messages : 630
Quality Points : 144
Registration Date : 2009-09-21

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-27, 05:30

Orzie wrote:
The font color should be grey, and it is too bad that we cannot customize it... but there is nothing we can do I think.
I can, I just didn't worked on that, because we don't have the "final" images yet. (so, if I design the font color right now, I will probably must re-design it after putting another background image..)


Orzie wrote:
Crystal Finally, I would like to propose this kind of filler for the "grid" you mentioned. Since it's grey, maybe we can use Heroes 2 Border on the adventure map? The only problem for it will be only to link it properly.
Hmmm this grid doesn't appear on the page... appears just on the screenshot. So there is no border to add here... Razz


Orzie wrote:
Crystal Ah, and one more thing. I guess we should use the same brownish interface you used everywhere for the Tavern screen (yes, everything that it is currently in the beige thin border will be deleted, with the Tavern put inside). All fonts on the page must be milk white, otherwise they will not be noticeable. Also, about the ModDB menu (news, downloads, etc.): we will need to think what kind of a menu bar should be there to satisfy the white font color. The beige bar doesn't seem to get on with it perfectly.
For the "everything in milk white color!" ... Nahhh... Titles in H2yellow! it's a "graphic rule" in H2. Smile
and after, there is more than 1color on brownish tables: theyre is white-ish, greyish, redish(links). Smile
the white-ish one is E2E2E2 (it's also H2 game "white" color if I remember well).

Orzie wrote:
Anyways, I'm really happy after the demonstration you show me. This is the kind of thing I would never have done myself because I don't know CSS and don't have time to learn it. You will have my eternal gratitude for this development.
Thank you very much! Smile
Because I'm here now, seems you will never have chance to learn CSS.

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

Messages : 1520
Quality Points : 641
Registration Date : 2014-12-12
Age : 25
Location : Tomsk, Russia

PostSubject: Re: Design of H3SW page on www.moddb.com   2015-07-27, 05:37

The titles can be in H2 yellow I think, but I would at least vote for making them bold if it's possible. Let's hope they will be displayed just right.

And the headline letters still don't fit very good to the background. I think we should create special backgrounds for headlines like this mod has.

An ultimate variant would be to make H2 golden buttons for the headlines (as images), but I don't know if this is possible.


________________________
In case someone cares for my music:
Mylinks_profile_page
Back to top Go down
 
Design of H3SW page on www.moddb.com
View previous topic View next topic Back to top 
Page 1 of 2Go to page : 1, 2  Next
 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: