Merge lp:~raoul-snyman/ubuntu-packaging-guide/new-colours into lp:ubuntu-packaging-guide

Proposed by Raoul Snyman
Status: Merged
Merged at revision: 47
Proposed branch: lp:~raoul-snyman/ubuntu-packaging-guide/new-colours
Merge into: lp:ubuntu-packaging-guide
Diff against target: 523 lines (+477/-2)
5 files modified
conf.py (+2/-2)
themes/ubuntu/layout.html (+14/-0)
themes/ubuntu/static/default.css_t (+304/-0)
themes/ubuntu/static/sidebar.js (+148/-0)
themes/ubuntu/theme.conf (+9/-0)
To merge this branch: bzr merge lp:~raoul-snyman/ubuntu-packaging-guide/new-colours
Reviewer Review Type Date Requested Status
Ronnie (community) Needs Fixing
Daniel Holbach Needs Fixing
Review via email: mp+56010@code.launchpad.net

Description of the change

Hi,

tumbleweed poked me the other day and asked me if I didn't want to have a go at making an Ubuntu theme for the Ubuntu Packaging Guide.

So this is a rough go at said Ubuntu theme, and it's probably not quite ideal, but have a play with it anyway.

To post a comment you must log in.
Revision history for this message
Daniel Holbach (dholbach) wrote :

Wow, thanks for your work on this!

Can you please add some information to your branch including whose javascript code this is and where you got it from? We need to properly identify this if we want to distribute the guide in any form.

review: Needs Fixing
Revision history for this message
Daniel Holbach (dholbach) wrote :

Can somebody web-technology savvy can comment on this as well?

Revision history for this message
Stefano Rivera (stefanor) wrote :

sidebar.js looks like it came from Sphinx's "default" theme, and is therefore under the same licencing as any sauce Sphinx adds to ones documentation.

I don't see any copyright / licencing declarations in ubuntu-packaging-guide beyond the values in conf.py. Maybe this branch should add a file with the copyright / licencing statements for the image files?

Maybe add "collapsiblesidebar = true" (or false) to ubuntu/theme.conf, as this adds support for it.

ubuntu/layout.html and ubuntu/default.css_t probably have incomplete copyright statements.

Revision history for this message
Ronnie (ronnie.vd.c) wrote :

I created a mockup of how sphinx clould look like, using the web guidelines:
http://ubuntuone.com/p/kvg/

GIMP xcf file:
http://ubuntuone.com/p/kvi/

I dont know whats possible within sphinx theming, but it would be really cool if it looks like all the other ubuntu websites

Revision history for this message
Raoul Snyman (raoul-snyman) wrote :

@Daniel, @Stefano, yes, this is a modified copy of Sphinx's default theme, as I just threw it together one evening - I'm just using it as a starting point. I'm quite aware that we'd need to make sure licensing details are correct, so I'll have a look at that when I get a chance to work on this again. As for sidebar.js in particular, I removed the setting for a collapsible sidebar (I didn't think it necessary), so I can most likely remove the JS as well.

@Ronnie, thanks for that mockup, it looks great! I'll see if I can make the Sphinx theme look like that. It should mostly be possible - I've done something similar before.

Revision history for this message
Daniel Holbach (dholbach) wrote :

Raoul, Ronnie: thanks so much for your work on this. Is there anything we can reuse from https://launchpad.net/ubuntu-website/light-django-theme to make it easier?

Revision history for this message
Ronnie (ronnie.vd.c) wrote :

I think the whole CSS, and a part of the html can be reused. Raoul do you want to try that?

Revision history for this message
Ronnie (ronnie.vd.c) :
review: Needs Fixing
Revision history for this message
Raoul Snyman (raoul-snyman) wrote :

Ronnie, I'll try to have a look in the next few weeks. Unfortunately my free time is rather scarce at the moment.

Revision history for this message
Jurmir Canal Neto (jcneto) wrote :

Hi everybody, I think I might be useful here.
Someone can tell me how this is going and how I can help?

Thanks!!

Revision history for this message
Daniel Holbach (dholbach) wrote :

Basically:
  - sudo apt-get install python-sphinx
  - bzr branch lp:ubuntu-packaging-guide
  - cd ubuntu-packaging-guide
  - <maybe "bzr merge lp:~raoul-snyman/ubuntu-packaging-guide/new-colours" to make use of Raoul's changes>
  - <make changes, figure out how to make use of https://launchpad.net/ubuntu-website/light-django-theme>
  - bzr commit
  - bzr push lp:~<username>/ubuntu-packaging-guide/rebranding
  - bzr lp-open
  - <click on "Propose for merging">

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== modified file 'conf.py'
--- conf.py 2010-11-19 12:07:36 +0000
+++ conf.py 2011-04-01 21:44:05 +0000
@@ -101,7 +101,7 @@
101101
102# The theme to use for HTML and HTML Help pages. See the documentation for102# The theme to use for HTML and HTML Help pages. See the documentation for
103# a list of builtin themes.103# a list of builtin themes.
104html_theme = 'default'104html_theme = 'ubuntu'
105105
106# Theme options are theme-specific and customize the look and feel of a theme106# Theme options are theme-specific and customize the look and feel of a theme
107# further. For a list of options available for each theme, see the107# further. For a list of options available for each theme, see the
@@ -109,7 +109,7 @@
109#html_theme_options = {}109#html_theme_options = {}
110110
111# Add any paths that contain custom themes here, relative to this directory.111# Add any paths that contain custom themes here, relative to this directory.
112#html_theme_path = []112html_theme_path = ['themes']
113113
114# The name for this set of Sphinx documents. If None, it defaults to114# The name for this set of Sphinx documents. If None, it defaults to
115# "<project> v<release> documentation".115# "<project> v<release> documentation".
116116
=== added directory 'themes'
=== added directory 'themes/ubuntu'
=== added file 'themes/ubuntu/layout.html'
--- themes/ubuntu/layout.html 1970-01-01 00:00:00 +0000
+++ themes/ubuntu/layout.html 2011-04-01 21:44:05 +0000
@@ -0,0 +1,14 @@
1{#
2 ubuntu/layout.html
3 ~~~~~~~~~~~~~~~~~~
4
5 Sphinx layout template for the Ubuntu theme.
6
7 :copyright: Copyright 2007-2011 by the Sphinx team, see AUTHORS.
8 :license: BSD, see LICENSE for details.
9#}
10{% extends "basic/layout.html" %}
11
12{% if theme_collapsiblesidebar|tobool %}
13{% set script_files = script_files + ['_static/sidebar.js'] %}
14{% endif %}
015
=== added directory 'themes/ubuntu/static'
=== added file 'themes/ubuntu/static/default.css_t'
--- themes/ubuntu/static/default.css_t 1970-01-01 00:00:00 +0000
+++ themes/ubuntu/static/default.css_t 2011-04-01 21:44:05 +0000
@@ -0,0 +1,304 @@
1/*
2 * default.css_t
3 * ~~~~~~~~~~~~~
4 *
5 * Sphinx stylesheet -- Ubuntu theme, adapted from the default Sphinx theme.
6 *
7 * :copyright: Copyright 2007-2011 by the Sphinx team, see AUTHORS.
8 * :license: BSD, see LICENSE for details.
9 *
10 */
11
12@import url("basic.css");
13
14/* -- page layout ----------------------------------------------------------- */
15
16body {
17 font-family: 'Ubuntu', sans-serif;
18 font-size: 100%;
19 background-color: #ee5925;
20 color: #000;
21 margin: 0;
22 padding: 0;
23}
24
25div.document {
26 background-color: #f7f6f5;
27}
28
29div.documentwrapper {
30 float: left;
31 width: 100%;
32}
33
34div.bodywrapper {
35 margin: 0 0 0 230px;
36}
37
38div.body {
39 background: #fff;
40 color: #000;
41 padding: 0 20px 30px 20px;
42}
43
44{%- if theme_rightsidebar|tobool %}
45div.bodywrapper {
46 margin: 0 230px 0 0;
47}
48{%- endif %}
49
50div.footer {
51 color: #fff;
52 width: 100%;
53 padding: 9px 0 9px 0;
54 text-align: center;
55 font-size: 75%;
56}
57
58div.footer a {
59 color: #fff;
60 text-decoration: underline;
61}
62
63div.related {
64 background: #dd4814 url(header.png) bottom left repeat-x;
65 line-height: 45px;
66 color: #fff;
67}
68
69div.related a {
70 color: #fff;
71 text-shadow: 0 1px #000;
72}
73
74div.sphinxsidebar {
75 {%- if theme_stickysidebar|tobool %}
76 top: 30px;
77 bottom: 0;
78 margin: 0;
79 position: fixed;
80 overflow: auto;
81 height: auto;
82 {%- endif %}
83 {%- if theme_rightsidebar|tobool %}
84 float: right;
85 {%- if theme_stickysidebar|tobool %}
86 right: 0;
87 {%- endif %}
88 {%- endif %}
89}
90
91{%- if theme_stickysidebar|tobool %}
92/* this is nice, but it it leads to hidden headings when jumping
93 to an anchor */
94/*
95div.related {
96 position: fixed;
97}
98
99div.documentwrapper {
100 margin-top: 30px;
101}
102*/
103{%- endif %}
104
105div.sphinxsidebar h3 {
106 font-family: 'Ubuntu', sans-serif;
107 color: #000;
108 font-size: 1.4em;
109 font-weight: normal;
110 margin: 0;
111 padding: 0;
112}
113
114div.sphinxsidebar h3 a {
115 color: #000;
116}
117
118div.sphinxsidebar h4 {
119 font-family: 'Ubuntu', sans-serif;
120 color: #000;
121 font-size: 1.3em;
122 font-weight: normal;
123 margin: 5px 0 0 0;
124 padding: 0;
125}
126
127div.sphinxsidebar p {
128 color: #000;
129}
130
131div.sphinxsidebar p.topless {
132 margin: 5px 10px 10px 10px;
133}
134
135div.sphinxsidebar ul {
136 margin: 10px;
137 padding: 0;
138 color: #000;
139}
140
141div.sphinxsidebar a {
142 color: #ee5925;
143}
144
145div.sphinxsidebar input {
146 background-color: #fff;
147 border: 1px solid #ee5925;
148 color: #000;
149 font-family: sans-serif;
150 font-size: 1em;
151}
152
153/* -- hyperlink styles ------------------------------------------------------ */
154
155a {
156 color: #dd4814;
157 text-decoration: none;
158}
159
160a:visited {
161 color: #ee5925;
162 text-decoration: none;
163}
164
165a:hover {
166 text-decoration: underline;
167}
168
169{% if theme_externalrefs|tobool %}
170a.external {
171 text-decoration: none;
172 border-bottom: 1px dashed #dd4814;
173}
174
175a.external:hover {
176 text-decoration: none;
177 border-bottom: none;
178}
179
180a.external:visited {
181 text-decoration: none;
182 border-bottom: 1px dashed #ee5925;
183}
184{% endif %}
185
186/* -- body styles ----------------------------------------------------------- */
187
188div.body h1,
189div.body h2,
190div.body h3,
191div.body h4,
192div.body h5,
193div.body h6 {
194 font-family: 'Ubuntu', sans-serif;
195 background-color: #dd4814;
196 font-weight: normal;
197 color: #fff;
198 border-top: 1px solid #fff;
199 margin: 20px -20px 10px -20px;
200 padding: 3px 0 3px 10px;
201}
202
203div.body h1 { margin-top: 0; font-size: 200%; }
204div.body h2 { font-size: 160%; }
205div.body h3 { font-size: 140%; }
206div.body h4 { font-size: 120%; }
207div.body h5 { font-size: 110%; }
208div.body h6 { font-size: 100%; }
209
210a.headerlink {
211 color: #f7f6f5;
212 font-size: 0.8em;
213 padding: 0 4px 0 4px;
214 text-decoration: none;
215}
216
217a.headerlink:hover {
218 background-color: #f7f6f5;
219 color: #dd4814;
220}
221
222div.body p, div.body dd, div.body li {
223 text-align: justify;
224 line-height: 130%;
225}
226
227div.admonition p.admonition-title + p {
228 display: inline;
229}
230
231div.admonition p {
232 margin-bottom: 5px;
233}
234
235div.admonition pre {
236 margin-bottom: 5px;
237}
238
239div.admonition ul, div.admonition ol {
240 margin-bottom: 5px;
241}
242
243div.note {
244 background-color: #eee;
245 border: 1px solid #ccc;
246}
247
248div.seealso {
249 background-color: #ffc;
250 border: 1px solid #ff6;
251}
252
253div.topic {
254 background-color: #eee;
255}
256
257div.warning {
258 background-color: #ffe4e4;
259 border: 1px solid #f66;
260}
261
262p.admonition-title {
263 display: inline;
264}
265
266p.admonition-title:after {
267 content: ":";
268}
269
270pre {
271 padding: 5px;
272 background-color: #f0f0f0;
273 color: #333333;
274 line-height: 120%;
275 border: 1px solid #ccc;
276}
277
278tt {
279 background-color: #ecf0f3;
280 padding: 0 1px 0 1px;
281 font-size: 0.95em;
282}
283
284th {
285 background-color: #ede;
286}
287
288.warning tt {
289 background: #efc2c2;
290}
291
292.note tt {
293 background: #d6d6d6;
294}
295
296.viewcode-back {
297 font-family: 'Ubuntu', sans-serif;
298}
299
300div.viewcode-block:target {
301 background-color: #f4debf;
302 border-top: 1px solid #ac9;
303 border-bottom: 1px solid #ac9;
304}
0305
=== added file 'themes/ubuntu/static/favicon.ico'
1Binary files themes/ubuntu/static/favicon.ico 1970-01-01 00:00:00 +0000 and themes/ubuntu/static/favicon.ico 2011-04-01 21:44:05 +0000 differ306Binary files themes/ubuntu/static/favicon.ico 1970-01-01 00:00:00 +0000 and themes/ubuntu/static/favicon.ico 2011-04-01 21:44:05 +0000 differ
=== added file 'themes/ubuntu/static/header.png'
2Binary files themes/ubuntu/static/header.png 1970-01-01 00:00:00 +0000 and themes/ubuntu/static/header.png 2011-04-01 21:44:05 +0000 differ307Binary files themes/ubuntu/static/header.png 1970-01-01 00:00:00 +0000 and themes/ubuntu/static/header.png 2011-04-01 21:44:05 +0000 differ
=== added file 'themes/ubuntu/static/sidebar.js'
--- themes/ubuntu/static/sidebar.js 1970-01-01 00:00:00 +0000
+++ themes/ubuntu/static/sidebar.js 2011-04-01 21:44:05 +0000
@@ -0,0 +1,148 @@
1/*
2 * sidebar.js
3 * ~~~~~~~~~~
4 *
5 * This script makes the Sphinx sidebar collapsible.
6 *
7 * .sphinxsidebar contains .sphinxsidebarwrapper. This script adds
8 * in .sphixsidebar, after .sphinxsidebarwrapper, the #sidebarbutton
9 * used to collapse and expand the sidebar.
10 *
11 * When the sidebar is collapsed the .sphinxsidebarwrapper is hidden
12 * and the width of the sidebar and the margin-left of the document
13 * are decreased. When the sidebar is expanded the opposite happens.
14 * This script saves a per-browser/per-session cookie used to
15 * remember the position of the sidebar among the pages.
16 * Once the browser is closed the cookie is deleted and the position
17 * reset to the default (expanded).
18 *
19 * :copyright: Copyright 2007-2011 by the Sphinx team, see AUTHORS.
20 * :license: BSD, see LICENSE for details.
21 *
22 */
23
24$(function() {
25 // global elements used by the functions.
26 // the 'sidebarbutton' element is defined as global after its
27 // creation, in the add_sidebar_button function
28 var bodywrapper = $('.bodywrapper');
29 var sidebar = $('.sphinxsidebar');
30 var sidebarwrapper = $('.sphinxsidebarwrapper');
31
32 // original margin-left of the bodywrapper and width of the sidebar
33 // with the sidebar expanded
34 var bw_margin_expanded = bodywrapper.css('margin-left');
35 var ssb_width_expanded = sidebar.width();
36
37 // margin-left of the bodywrapper and width of the sidebar
38 // with the sidebar collapsed
39 var bw_margin_collapsed = '.8em';
40 var ssb_width_collapsed = '.8em';
41
42 // colors used by the current theme
43 var dark_color = $('.related').css('background-color');
44 var light_color = $('.document').css('background-color');
45
46 function sidebar_is_collapsed() {
47 return sidebarwrapper.is(':not(:visible)');
48 }
49
50 function toggle_sidebar() {
51 if (sidebar_is_collapsed())
52 expand_sidebar();
53 else
54 collapse_sidebar();
55 }
56
57 function collapse_sidebar() {
58 sidebarwrapper.hide();
59 sidebar.css('width', ssb_width_collapsed);
60 bodywrapper.css('margin-left', bw_margin_collapsed);
61 sidebarbutton.css({
62 'margin-left': '0',
63 'height': bodywrapper.height()
64 });
65 sidebarbutton.find('span').text('»');
66 sidebarbutton.attr('title', _('Expand sidebar'));
67 document.cookie = 'sidebar=collapsed';
68 }
69
70 function expand_sidebar() {
71 bodywrapper.css('margin-left', bw_margin_expanded);
72 sidebar.css('width', ssb_width_expanded);
73 sidebarwrapper.show();
74 sidebarbutton.css({
75 'margin-left': ssb_width_expanded-12,
76 'height': bodywrapper.height()
77 });
78 sidebarbutton.find('span').text('«');
79 sidebarbutton.attr('title', _('Collapse sidebar'));
80 document.cookie = 'sidebar=expanded';
81 }
82
83 function add_sidebar_button() {
84 sidebarwrapper.css({
85 'float': 'left',
86 'margin-right': '0',
87 'width': ssb_width_expanded - 28
88 });
89 // create the button
90 sidebar.append(
91 '<div id="sidebarbutton"><span>&laquo;</span></div>'
92 );
93 var sidebarbutton = $('#sidebarbutton');
94 light_color = sidebarbutton.css('background-color');
95 // find the height of the viewport to center the '<<' in the page
96 var viewport_height;
97 if (window.innerHeight)
98 viewport_height = window.innerHeight;
99 else
100 viewport_height = $(window).height();
101 sidebarbutton.find('span').css({
102 'display': 'block',
103 'margin-top': (viewport_height - sidebar.position().top - 20) / 2
104 });
105
106 sidebarbutton.click(toggle_sidebar);
107 sidebarbutton.attr('title', _('Collapse sidebar'));
108 sidebarbutton.css({
109 'color': '#FFFFFF',
110 'border-left': '1px solid ' + dark_color,
111 'font-size': '1.2em',
112 'cursor': 'pointer',
113 'height': bodywrapper.height(),
114 'padding-top': '1px',
115 'margin-left': ssb_width_expanded - 12
116 });
117
118 sidebarbutton.hover(
119 function () {
120 $(this).css('background-color', dark_color);
121 },
122 function () {
123 $(this).css('background-color', light_color);
124 }
125 );
126 }
127
128 function set_position_from_cookie() {
129 if (!document.cookie)
130 return;
131 var items = document.cookie.split(';');
132 for(var k=0; k<items.length; k++) {
133 var key_val = items[k].split('=');
134 var key = key_val[0];
135 if (key == 'sidebar') {
136 var value = key_val[1];
137 if ((value == 'collapsed') && (!sidebar_is_collapsed()))
138 collapse_sidebar();
139 else if ((value == 'expanded') && (sidebar_is_collapsed()))
140 expand_sidebar();
141 }
142 }
143 }
144
145 add_sidebar_button();
146 var sidebarbutton = $('#sidebarbutton');
147 set_position_from_cookie();
148});
0149
=== added file 'themes/ubuntu/theme.conf'
--- themes/ubuntu/theme.conf 1970-01-01 00:00:00 +0000
+++ themes/ubuntu/theme.conf 2011-04-01 21:44:05 +0000
@@ -0,0 +1,9 @@
1[theme]
2inherit = basic
3stylesheet = default.css
4pygments_style = sphinx
5
6[options]
7rightsidebar = false
8stickysidebar = false
9externalrefs = false

Subscribers

People subscribed via source and target branches