Skip to content

Commit

Permalink
Item2052: work on fixing compatibility with more styles by adding few…
Browse files Browse the repository at this point in the history 
… more classes and removing some hardcoding of css from the old pattern css i ported

git-svn-id: http://svn.foswiki.org/trunk/WidgetsSkin@6319 0b4bb1d4-4e5a-0410-9cc4-b2b747904278
  • Loading branch information
SvenDowideit authored and SvenDowideit committed Feb 14, 2010
1 parent 864ee67 commit 271c72f
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 21 deletions.
17 changes: 9 additions & 8 deletions data/System/WidgetsSkin.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,16 @@ There is a set of reasonably easy upgrade steps to modify your CSS and =*Design=
* context and 'webHome' CSS classes in =BODY=, so that !WebHomes can have a larger banner pic - and different ones for each web
* where's the top list of webs/pages thing like WP has?
* http://www.movabletype.org/design/assistant/
* work out howto show the thumbnails in each style..
* in the comment of the screen.css there is a list of supported layouts - can we mine it at all? - or just hardcode the default for each style so it looks good.
* BUGGO (in trunk core default skin..): the js for Main.WikiGroups isn't there
* add a button to make non-fixed width (and remove edges)
* add menu widget that will somehow allow
* http://www.codemonkeyramblings.com/theme_tests/alaska_test_blog/
* http://www.codemonkeyramblings.com/theme_tests/inove_test_blog/
* ok, so there seem to be at least 5 totally unrelated ways they've done top menus :(


%I% Unfortunately there is no easy way to preview designs found from the [[http://www.thestylearchive.com/browser/][style archive browser]].
But it's easy to download and install these designs.
%I% It's easy to download and install designs.
Download the zip file for your chosen design, and unzip it in the directory on the server that corresponds to this URL: %PUBURL%/%WEB%/%TOPIC%.
Then type the full URL into the text box in the browser.

Expand Down Expand Up @@ -101,7 +103,7 @@ for even greater control over the rendering, but this is not necessary for most

The fastest way to develop your own CSS is to use [[http://styles.movalog.com/generator/][the Movable Type Style generator]].
Alternatively you can adapt one an existing CSS from the web (though please be careful to respect author copyright).
There is documentation for the required set of CSS classes and tags found at [[http://www.thestylearchive.com/help/stylesheet_reference][Stylesheet Reference]] and other related pages.
There is documentation for the required set of CSS classes and tags found at [[http://wiki.movabletype.org/MT4_Default_Templates_HTML_Structure][MT4 Default Template Reference]] and other related pages.

Once you have a CSS that you want to use, simply upload it to a Foswiki topic and point the WIDGETSSKIN_CSSFILE setting at it.

Expand All @@ -114,7 +116,7 @@ For more radical customisations (or to distribute your theme as a Contrib) you w
You can also optionally customise the Foswiki.css attached to your design topic. This file contains most Foswiki specific styles, such as tables, forms, and diffs.

Finally, you can also customise the common text sections in your design by editing the _Moveable Type Common Text sections_.
There are four sample design topics: WidgetsSampleDesign, WidgetsSample2Design, WidgetsSample3Design, and WidgetsMantistDesign.
There are four sample design topics: WidgetsSampleDesign, WidgetsSample2Design, WidgetsSample3Design, and WidgetsMantisDesign.

Once you are done, you will be able to follow the instructions under 'Enable this design' in your design topic to roll out your design.

Expand Down Expand Up @@ -189,8 +191,7 @@ Use the navigation buttons to select between options. Click on the theme name to
</td>
</tr>
<tr>
<td>Moveable type preview</td>
<td>
<td colspan="3">
<img style="align:center;" src="%CALC{"$SUBSTITUTE(%URLPARAM{"cssfile" default="%CSS%CURRENTCSS%%"}%, screen.css, thumbnail-large.gif)"}%" />
</td>
</tr>
Expand Down Expand Up @@ -466,7 +467,7 @@ from http://github.com/mikert/Movable-Type-Styles - see http://www.codemonkeyram
<div align="center" eestyle="margin:12px;padding:12px;">
<div align="left" style="color:black;opacity:0.8;width:80%;background-color:#ffffdd;border:1px solid;margin:6px;padding:6px;overflow:hidden;">
A selection of thumbnails from styles distributed with this Skin:
| %PUBURL%/%SYSTEMWEB%/WidgetsSkin/hills-dusk.gif | %PUBURL%/%SYSTEMWEB%/WidgetsSkin/disciple.gif | %PUBURL%/%SYSTEMWEB%/WidgetsSkin/cityscape-sydney.gif |
| %PUBURL%/%BASEWEB%/WidgetsSkin/hills-dusk.gif | %PUBURL%/%SYSTEMWEB%/WidgetsSkin/disciple.gif | %PUBURL%/%SYSTEMWEB%/WidgetsSkin/cityscape-sydney.gif |
| %PUBURL%/%SYSTEMWEB%/WidgetsSkin/bloggers-cafe.gif | %PUBURL%/%SYSTEMWEB%/WidgetsSkin/aeros.gif | %PUBURL%/%SYSTEMWEB%/WidgetsSkin/gray-gets-green.gif |
| %PUBURL%/%SYSTEMWEB%/WidgetsSkin/hightech.gif | %PUBURL%/%SYSTEMWEB%/WidgetsSkin/imokay.gif | %PUBURL%/%SYSTEMWEB%/WidgetsSkin/painted-desert.gif |
| %PUBURL%/%SYSTEMWEB%/WidgetsSkin/poetry.gif | %PUBURL%/%SYSTEMWEB%/WidgetsSkin/shadedgrey.gif | %PUBURL%/%SYSTEMWEB%/WidgetsSkin/talian.gif |
Expand Down
8 changes: 3 additions & 5 deletions pub/System/WidgetsSampleDesign/Foswiki.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ from esc tab hack moz min-height solution ***/

/* GENERAL HTML ELEMENTS */

html body {
body {
font-size:104%; /* to change the site's font size, change #patternPage below */
voice-family:"\"}\"";
voice-family:inherit;
Expand Down Expand Up @@ -197,8 +197,6 @@ h6 { font-size:95%; font-weight:bold; }
h2, h3, h4, h5, h6 {
display:block;
/* give header a background color for easy scanning:*/
padding:.25em 10px;
margin:1em -10px .35em -10px;
height:auto;
}
/*
Expand Down Expand Up @@ -1268,7 +1266,7 @@ tr.foswikiDiffDebug td {

/* GENERAL HTML ELEMENTS */

html body {
body {
background-color:#f5f5f5;
color:#000;
}
Expand Down Expand Up @@ -2069,4 +2067,4 @@ Overrides global settings in layout.css, style.css and colors.css
}
#foswikiLogo {
margin-top:1em;
}
}
20 changes: 12 additions & 8 deletions templates/foswiki.widgets.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,23 +64,27 @@ widgetscolumns = %TMPL:P{"widgetscolumns"}%
%TMPL:DEF{"standardheader"}% <div id="header">%INCLUDE{"%TMPL:P{widgetstext}%" section="startsectionwrapper-banner" warn="off"}%
<span id="banner-extra"></span>
<div id="header-inner" class="pkg">
<div id="header-content">
%TMPL:P{header-widgets}%
<div id="header-content">
%TMPL:P{header-widgets}%
</div>
</div>
<div id="main-navigation">
<div id="main-navigation-inner">
%TMPL:P{"top:toolbarbuttons"}%
</div>
</div>
%INCLUDE{"%TMPL:P{widgetstext}%" section="endsectionwrapper-banner" warn="off"}% </div>
<div id="pagebody">
<div id="pagebody-inner" class="pkg"> <div id="alpha">
%TMPL:P{"top:toolbarbuttons"}%
%INCLUDE{"%TMPL:P{widgetstext}%" section="startsectionwrapper-main" warn="off"}% <div id="alpha-inner" class="pkg">
<span id="twiki_text">%TMPL:END%
<div id="content">
<div id="content-inner" class="pkg"> <div id="alpha">
%INCLUDE{"%TMPL:P{widgetstext}%" section="startsectionwrapper-main" warn="off"}% <div id="alpha-inner" class="pkg"> <div id="kludge" class="entry-asset asset hentry">
<span id="twiki_text" class="asset-content entry-content">%TMPL:END%


%{ ******************************************* }%

%{ ******************************************* }%
%TMPL:DEF{"standardfooter"}% </span><!-- twiki_text -->
</div>%INCLUDE{"%TMPL:P{widgetstext}%" section="endsectionwrapper-main" warn="off"}%
</div></div>%INCLUDE{"%TMPL:P{widgetstext}%" section="endsectionwrapper-main" warn="off"}%
</div>%TMPL:P{thin-columns}% </div>
<div id="footer">%TMPL:P{footer-widgets}%</div>
</div>%TMPL:END%
Expand Down

0 comments on commit 271c72f

Please sign in to comment.