Design of H3SW page on www.moddb.com

Orzie wrote:

3. Web Design (GodRage, I am looking at you!  )
- 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.

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>

GodRage wrote:

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

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

outdated:

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>

Orzie wrote:

Anyways, I'm waiting for good news!

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.

paragraph

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.

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.

Orzie wrote:

(by the way, i feel like there is green gems missing in each corner of this image... )

djenic wrote:

Looks great, GodRage. Nice job!

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.

Orzie wrote:

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.

Orzie wrote:

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.

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.