Template talk:Diaryquest

From GodWiki
Jump to: navigation, search

Fixed the styles (mostly)

Tick.png Done — UPDATE: See below...

All of the styles were broken, when that param was specified, due to the crazy padding inserted into the title div. So, I fixed that. The rounded borders are still wrong, but that requires some bigger changes to the structure of the boxes themselves so leaving that alone for the moment. For my own reference, the problem:

The boxes currently have an inner div which specifies the gradient background, and contains a span with the title. Then there's a second div with a solid background color set, which contains the rest of the box content. e.g.

<div style="position:relative; margin-top:1.5em; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;; border:1px solid #CCCCCC; background:#f7f7f7; font-family: Verdana, Arial, Helvetica, sans-serif; width: 30%; display:inline-block;">
<div style="background-image: -moz-linear-gradient(bottom, #e8e8e8, #f5f7f8); background-image: -ms-linear-gradient(bottom, #e8e8e8, #f5f7f8); background-image: -o-linear-gradient(bottom, #e8e8e8, #f5f7f8); background-image: -webkit-linear-gradient(bottom, #e8e8e8, #f5f7f8); background-image: linear-gradient(bottom, #e8e8e8, #f5f7f8);;font-size:1em; font-weight:700; width: 100%; padding: 0.5em 0; text-align:center;">
<span style="color: #444444;">Hero</span>
</div>
<div style="background:#F6F6F9; color: #444444; margin:0em; padding:0.3em 1em; margin-top:1em; font-size:1em;">...</div>
</div>

The problem is, those inner blocks are square, so if they have background colors applied they trample the outer border radius. The way this actually needs to be done (the way it's done on Godville's superhero page) is to make the gradient part of the background of the outer div, and then use transparent inner content with a little padding to keep it away from the edges. Like so:

.block {clear:both; padding: 4px 4px 4px 4px; margin: 1em 0 1.5em 0; color: #333; background: #f0f0f0; line-height: 145%; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: 1px solid #CCC; background-color:#F6F6F9;       }
.block {
	background: #F5F5F5 -webkit-gradient(linear, left top, left 60, from(#F6F8F9), to(#F7F7F7), color-stop(0.5, #E7E7E7), color-stop(0.5, #F9F9F9));
	background: #F5F5F5 -moz-linear-gradient(top, #F7FBFE, #E7E7E7 31px, #F9F9F9 31px, #F7F7F7);
	background: #F5F5F5 -o-linear-gradient(top, #F7FBFE, #E7E7E7 31px, #F9F9F9 31px, #F7F7F7);
	background-color:#FAFAFA;	
}
.block_h {position:relative;height:20px;}
.content h2 {text-align:center;color:#555;margin:0;font-size:1.7em;}
<div id="stats" class="block">
<div class="block_h"><h2 class="block_title">Hero</h2></div>
<div class="block_content">...</div>
</div>

...But, of course, that all has to be translated into inline styling. -- FeRDNYC (talk) 08:54, 18 March 2017 (UTC)

Fixed the "default" style (for real)

In reference to the issues raised in my previous update, all of the necessary work is complete with regards to the "default" style ({{Diaryquest | style=default | ... }}). Diaryquest boxes created with that style should be virtually identical to the official Godville web-based interface.

Next steps are to port those changes to the other "modern" styles (the recolored "sunny", "emerald", "violet", "divine", and "nightly"), and then (hopefully, with buy-in) promote "default" to be the new actual default, so that Diaryquest boxes will use that style unless one of the others is specified. (My plan is to rename the current default style to "hero", which is how it's referred to in the docs, so that it can still be used by those who explicitly wish to keep that style.)

And once that's done, I want to tackle Template:Diary with the same type of changes, making the "default" style for those boxes also match the godville.com interface as closely as possible. -- FeRDNYC (talk) 15:04, 21 July 2017 (UTC)