UseMod Wiki: WikiSuggestions/CSS

This is the place for CSS-related WikiSuggestions and WikiPatches.

There is some MergingCSSPatchesDiscussion.

WikiPatches/CSSskins
WikiPatches/TagBlankLines (P tags need to be properly closed for CSS to work)
WikiWithCascadingStyleSheet
WikiPatches/MultiCSS
WikiPatches/GlobalCSS
WikiPatches/DivTags
WikiPatches/ClassMarkup
WikiPatches/AlternateStyleSheets
WikiSuggestions/CSSIncludeSpan

Tag Closing

As well as P tags closing, so do LI, DT, and DD.

DIV enclosure

I've just had one of those simple-yet-huge ideas that would make CSS on UMW much easier. One of the problems I had with making headers (see my patch at WikiPatches/CSSskins) is that I'm using positioned blocks for logo, links, and headers. Unless absolute positioning is used, the margins in the body make clean alignment difficult, and setting BODY margins to 0 in CSS makes the page's Wiki text flush with the window edge and hard to read...

Anyway, ramble over. The quick solution is to hack the script to enclose all Wiki content in a DIV class="wiki". In plain CSS-free operation this would be invisible. For CSS users, BODY could be set to 0 margin and DIV.wiki could then acquire them.

I've written this up. See WikiPatches/DivTags

-- Tarquin

CSS block classes

I'm working on implementing CSS classes for the UnrealWiki (see SiteList for URL). Current progress is at WikiPatches/ClassMarkup. The proposed markup is:

: @@classname@text

possibly with a closing @ so things like OL and UL can be included within a class block. Possible uses so far to include:

making OLs that start at zero for listing a code array (unfortunately this seems to be impossible with current browser support of CSS2)
blockquotes for code; would set font & border
blockquotes of technical info from other sources

-- Tarquin

Page vs Site CSS; UseMod as the CSS editor

I just (last night) hacked together a CSS modification for a friend's site for his band. Put simply, it checks for a subpage of the current page named /CSS, and uses that page as the stylesheet. If a local CSS page cannot be found, it checks for System/CSS and uses that. Very simple and straight-forward, and easy for admins to tweak CSS settings without having to use a local editor and an FTP program.

A description is available at http://www.ekotox.com/Patches/CSSMod ...

Better DIV support suggestions

(sorry about my english)

I've just downloaded usemod and begin hacking css to get a nice looking wiki but i've found a problem: the normal DIV structure is:

<div class=wikiheader> blabla </div>

<div class=wikitext> blabla </div>

<div class=wikifooter> blabla </div>

you can do neat things with this structure, but it isn't always the same, some times instead of class=wikitext you find wikirc or wikipref, thats is not a problem, you can add DIV.wikitext, DIV.wikirc, DIV.wikipref { /* css code */ } to the CSS, but with some pages there is no wikitext DIV, in that pages the structure is:

<div class=wikiheader> blabla </div>

blabla no div for the body blabla

<div class=wikifooter> blabla </div>

this structure breaks the CSS style for some pages: wikipref, editing page, revision page, etc, i can fix it hacking some code: adding some print '<div class=divforediting>'; and so but in the next version i'll lose the hacks so i suggest a universal DIV structure for all pages in the wiki:

<div class=container>
      <div class=wikiheader></div>

      <div class=wikibody> blabla </div>

      <div class=wikifooter> blabla </div>
</div>

-- thanks in advance, Hass

See WikiBugs/ClassWikifooterMissing, seems to be fixed for the next version --StefanTrcek

: sorry, i not talking about the footer, i think there are some "central divs" missing in, for example, the preview page: its like this:


"normal" page

          |----------------------------|
          |       header div:          |
          |      class=wikiheader      |
          |----------------------------|

          |----------------------------|
          |     the body div:          |
          |     class=wikitext or      |
          |     class=wikirc or        |
          |     class=wikipref         |
          |----------------------------|

          |----------------------------|
          |      footer div            |
          |      class=wikifooter      |
          |----------------------------|




this is the "View other revisions" page or the editing page ...

          |----------------------------|
          |       header div:          |
          |      class=wikiheader      |
          |----------------------------|

****broken
the html code behind the header and before the footer is out of any div,
if you are using a css that uses the "central div"
it will look broken and not aligned
****broken

          |----------------------------|
          |      footer div            |
          |      class=wikifooter      |
          |----------------------------|





this is the Preview page

          |----------------------------|
          |       header div:          |
          |      class=wikiheader      |
          |----------------------------|

****broken
the html code after the header and before of the wikipreview div is out of any div,
if you are using a css that uses the "central div"
it will look broken and not aligned
****broken

          |----------------------------|
          |     the wikipreview div:   |
          |     class=wikipreview      |
          |----------------------------|

          |----------------------------|
          |      footer div            |
          |      class=wikifooter      |
          |----------------------------|


and if you could implement an extra div "container div" like this, it will be nice:
(the "body div" must be in ALL pages including editing page, revisions page, ...)


     |----------------------------------------|
     |                                        |
     |             container div:             |
     |        useful for css hacking          |
     |                                        |
     |    |----------------------------|      |
     |    |       header div:          |      |
     |    |      class=wikiheader      |      |
     |    |----------------------------|      |
     |                                        |
     |    |----------------------------|      |
     |    |     the body div:          |      |
     |    |     class=wikitext or      |      |
     |    |     class=wikirc or        |      |
     |    |     class=wikipref         |      |
     |    |----------------------------|      |
     |                                        |
     |    |----------------------------|      |
     |    |      footer div            |      |
     |    |      class=wikifooter      |      |
     |    |----------------------------|      |
     |                                        |
     |----------------------------------------|

: I've been using usemod only a week and i could be wrong, i'm sorry if i've made a mistake with this
(again: sorry about my english)

Just to add to the CSS comments here, the general rule should be to introduce a <div id=""> or <div class=""> (as appropriate) for each structural element of a given page layout. The different types of pages may indeed have different div classes or ids, but they all should have a rational containment hierarchy with as many structural elements as necessary to capture the structure of the page. I find myself jumping through CSS hoops to get the "Recent Changes | Preferences" links to be styled differently than the "last edited" text, for example.

I've made some hacks to help with my own layouts, but they are not suitable for general consumption. For example, there's no reason to have the search form contain all the links, etc, at the bottom of the page, so I relocated the begin/end search form code to limit the scope of the form to just the input field.

Still, this is easiest Wiki to set up that I found, with just enough power for me. Thanks!!!