-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
198 lines (160 loc) · 10.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>2k11 user.css generator</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700">
<!--[if lte IE 8]>
<link rel="stylesheet" href="styles/49d2fb82.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="styles/067bc93a.css">
<!--<![endif]-->
<script src="scripts/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body id="top">
<!--[if lt IE 8]> <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p> <![endif]-->
<p id="jshint" class="chromeframe">For full functionality of this site it is necessary to enable JavaScript. Here are the <a href="http://www.enable-javascript.com/">instructions how to enable JavaScript in your web browser</a>.</p>
<header>
<h1>2k11 user.css generator</h1>
<p>2k11 offers the possibility to include an optional user.css file to make it easy to tweak the template to your liking. This file is also safe in case of an update since it is <strong>not</strong> part of the original template, so it will <strong>not</strong> be overwritten.</p>
</header>
<main>
<article>
<h2>Configure your user.css boilerplate</h2>
<p><strong>Hint:</strong> You don't <em>have</em> to add both layout types if you plan to only use one. In fact, it will unnecessarily blow up your user.css. Please make sure to enter sensible values in the form fields. The generator does <strong>not</strong> check the values you enter.</p>
<p>Also note that a stylesheet generated automagically like this one will most likely look a bit dull compared to a handcrafted one. Especially the color scheme will most likely merely be a starting point due to the limitations of the (or <em>any</em>, for that matter) generator.</p>
<form action="#" method="get">
<fieldset>
<legend><span>Desktop layout (for resolutions > 768px)</span></legend>
<div>
<label for="max-width-cont">Maximum overall layout width <span>(1em = 16px)</span></label>
<input id="max-width-cont" type="text" value="" placeholder="default: 70">
<label for="max-unit-cont" class="visuallyhidden">Unit for maximum container width</label>
<select id="max-unit-cont">
<option value="em" selected>em</option>
<option value="px">px</option>}
</select>
</div>
<div>
<label for="sidebar-width-2col">2-column sidebar width <span>(left or right sidebar)</span></label>
<input id="sidebar-width-2col" type="text" value="" placeholder="default: 38">
<span>%</span>
</div>
<div>
<input id="include-2col" type="checkbox" value="">
<label for="include-2col">Include 2-column layout in user.css</label>
</div>
<div>
<label for="sidebar-width-3col-l">3-column sidebar width (left sidebar)</label>
<input id="sidebar-width-3col-l" type="text" value="" placeholder="default: 25">
<span>%</span>
</div>
<div>
<label for="sidebar-width-3col-r">3-column sidebar width (right sidebar)</label>
<input id="sidebar-width-3col-r" type="text" value="" placeholder="default: 25">
<span>%</span>
</div>
<div>
<input id="include-3col" type="checkbox" value="">
<label for="include-3col">Include 3-column layout in user.css</label>
</div>
</fieldset>
<fieldset>
<legend><span>Basic color scheme</span></legend>
<div>
<label for="bg-color-page">Content background color</label>
<input id="bg-color-page" class="colorpicker" type="text" value="" placeholder="default: #fcfcfc">
</div>
<div>
<label for="fg-color-page">Content text color</label>
<input id="fg-color-page" class="colorpicker" type="text" value="" placeholder="default: #222">
</div>
<div>
<label for="bg-color-body">Page background color</label>
<input id="bg-color-body" class="colorpicker" type="text" value="" placeholder="default: #ddd">
</div>
<div>
<label for="fg-color-link">Normal link text color</label>
<input id="fg-color-link" class="colorpicker" type="text" value="" placeholder="default: #3e5f81">
</div>
<div>
<label for="fg-hover-link">Hover link text color</label>
<input id="fg-hover-link" class="colorpicker" type="text" value="" placeholder="default: #d52">
</div>
<div>
<input id="include-basic" type="checkbox" value="">
<label for="include-basic">Include basic color scheme in user.css</label>
</div>
</fieldset>
<h3>CSS3 gradients support</h3>
<p>If you enter the 2<sup>nd</sup> nav colors, the generator will add CSS3 gradient backgrounds for the navigation just like 2k11 uses by default. This will add a subtle plastic feel to the navigation.</p>
<p>As to how to pick these colors, 2k11 by default uses colors which are a tad lighter than the 1<sup>st</sup> colors. It's hard to give you a ballpark value here, but about 10-15% lighter should do the trick. You can also use the <b>Fill</b>-Button to propagate the 2<sup>nd</sup> color with a (roughly) suitable value.</p>
<p>Note that these gradients will <em>only</em> be added to the generated user.css if you actually <strong>enter</strong> a 2<sup>nd</sup> color. You'll probably want to provide 2<sup>nd</sup> colors for both nav and hovered nav.</p>
<fieldset>
<legend><span>Navigation color scheme</span></legend>
<div>
<label for="bg-color-navi">Navigation background color</label>
<input id="bg-color-navi" class="colorpicker" type="text" value="" placeholder="default: #294564">
</div>
<div>
<label for="bg-color-navi-2">2<sup>nd</sup> navigation background color</label>
<input id="bg-color-navi-2" class="colorpicker" type="text" value="" placeholder="default: #3e5f81">
<input id="lighten-color-2" type="button" value="Fill">
</div>
<div>
<label for="fg-color-navi">Navigation text color</label>
<input id="fg-color-navi" class="colorpicker" type="text" value="" placeholder="default: #fff">
</div>
<div>
<label for="bg-hover-navi">Navigation hover background color</label>
<input id="bg-hover-navi" class="colorpicker" type="text" value="" placeholder="default: #aabcc5">
</div>
<div>
<label for="bg-hover-navi-2">2<sup>nd</sup> navigation hover background color</label>
<input id="bg-hover-navi-2" class="colorpicker" type="text" value="" placeholder="default: #ccdee7">
<input id="lighten-hover-2" type="button" value="Fill">
</div>
<div>
<label for="fg-hover-navi">Navigation hover text color</label>
<input id="fg-hover-navi" class="colorpicker" type="text" value="" placeholder="default: #000">
</div>
<div>
<input id="include-navi" type="checkbox" value="">
<label for="include-navi">Include nav color scheme in user.css</label>
</div>
</fieldset>
<input type="submit" value="Generate user.css">
<input type="reset" value="Reset form">
</form>
<h2>Your user.css boilerplate code</h2>
<p>Copy and paste this section into your user.css. Remember you need to <em>create</em> that file and upload it to the template directory as well as explicitly activate it in the theme options.</p>
<textarea id="boilerplate"></textarea>
</article>
</main>
<footer>
<p><a href="http://github.com/yellowled/s9y-2k11">2k11</a> user.css generator by <a href="http://yellowled.de">Matthias Mees</a>.</p>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="scripts/vendor/jquery-1.8.3.min.js"><\/script>')</script>
<script src="scripts/75344144.js"></script>
<!-- Piwik -->
<script>
var _paq = _paq || [];
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);
(function() {
var u=(("https:" == document.location.protocol) ? "https" : "http") + "://piwik.yellowled.de/";
_paq.push(["setTrackerUrl", u+"piwik.php"]);
_paq.push(["setSiteId", "6"]);
var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><img src="http://piwik.yellowled.de/piwik.php?idsite=6&rec=1" alt=""></noscript>
<!-- End Piwik Tracking Code -->
</body>
</html>