Revision [2190]

This is an old revision of WikkaCSS made by DarTar on 2004-11-15 10:26:21.

 

Wikka CSS Issues


Issues and discussion related to Wikka CSS stylesheets

Related pages:

Also relevant:
 



A Better Horizontal Menu

I find that the current Wikka horizontal menu allows very limited layout control.
A well formed CSS menu should IMO:

  1. be put in a dedicated <DIV id="menu"> so that it can be moved around the page and its layout freely modified. See as an example this wikka site: http://www.awug.net/HomePage
  1. be coded as an unordered list. See this tutorial

Your ideas?

-- DarTar

Just give the unordered list itself an id (which indicates which menu it is!), and it can be "moved around the page" as desired. No need to wrap it in a div just to do that (though a div may be useful for other purposes). I agree though that all menus should be marked up as unordered lists and styled with CSS.
-- JavaWoman


From the reference above: The menu has to be wrapped by a div that is used for styling background color, left margin/padding, etc. I've found no way to style the UL itself, because I can't clear the float inside it. Thus the height of the OL always equals zero.
Beside this detail, I think the only problem that remains to be addressed is the question of menu configuration. How are we to save the menu settings in Wikka configuration (currently saved as a wikka-formatted string)? A good solution might be to create a menu administration module (in form of an action with a dedicated SQL table) that allows the user to specify items that go in the menu and their order (and maybe switch on/off an optional secondary menu). This would allow more flexibility than the current systems offers (one wouldn't need to edit the configuration file) and solve the problem of how to save the menu settings. I'm taking a day off from my work, I'll see if I can cook up something

-- DarTar


I have been trying to modify the style sheet without success. I cannot get the footer, commentsheader and smallprint areas to align as they should. They keep flowing below the menu. Could you offer any help, please.
The code for the layout that I'm trying to achieve is like below, any help would bew much appreciated.
An example header.php with the ordered list and id tag would also help.

""<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML lang=en><HEAD><TITLE>Two columns with color - Final layout</TITLE>
<META http-equiv=content-type content="text/html; charset=iso-8859-1">
<STYLE type=text/css media=screen>

hr {
margin-left: auto;
margin-right: auto;
margin-top: 1.25em;
margin-bottom: 1.25em;
width: 100%;
height: 4px;
background-color: #6BB300;
}

body,html {
scrollbar-face-color: #6BB300;
scrollbar-shadow-color: #E6FFBF;
scrollbar-highlight-color: #E6FFBF;
scrollbar-3dlight-color: #E6FFBF;
scrollbar-darkshadow-color: #E6FFBF;
scrollbar-track-color: #E6FFBF;
scrollbar-arrow-color: #000033;
}

.highlight {
scrollbar-face-color: #6BB300;
scrollbar-shadow-color: #E6FFBF;
scrollbar-highlight-color: #E6FFBF;
scrollbar-3dlight-color: #E6FFBF;
scrollbar-darkshadow-color: #E6FFBF;
scrollbar-track-color: #E6FFBF;
scrollbar-arrow-color: #000033;
}

BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY: georgia, times, "times new roman", serif; BACKGROUND-COLOR: #ddd
}
#container {
	BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; BACKGROUND-IMAGE: url(images/background.jpg); MARGIN: 1em 5%; BORDER-LEFT: #333 1px solid; BORDER-BOTTOM: #333 1px solid; BACKGROUND-REPEAT: repeat-y; BACKGROUND-COLOR: #fff
}
#banner {
	BORDER-BOTTOM: #333 1px solid; BACKGROUND-COLOR: #6BB300
}
#banner H1 {
	PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; PADDING-BOTTOM: 0.5em; MARGIN: 0px; PADDING-TOP: 0.5em
}
div#sitenav {float: left; width: 145px; margin-top: 0;
   font-size: 14px; background-color: white;
border-right: 1px solid black;
border-bottom: 1px solid black;}
div#sitenav a {display: block; padding: 4px 8px; margin: 0; 
   text-decoration: none; text-align: right;
   border-top: 1px solid gray; background: #E6FFBF}
div#sitenav a:hover {background: #6BB300;}
div#sitenav a:hover {color: black;}
div#sitenav a {color: #6BB300; text-align: left;}
div#sitenav h4 {background: rgb(33%,33%,33%); color: white;
   text-align: center; margin: 0; padding: 0.25em 0 0.125em 0;}

#nav {
	FLOAT: left; MARGIN-LEFT: 10px; WIDTH: 145px; PADDING-TOP: 1em
#nav a {display: block; padding: 4px 8px; margin: 0; 
   text-decoration: none; text-align: right;
   border-top: 1px solid gray;}
#nav a:hover {background: #FB9;}
#nav h4 {background: rgb(33%,33%,33%); color: white;
   text-align: center; margin: 0; padding: 0.25em 0 0.125em 0;}
}
#nav P {
	MARGIN-TOP: 0px
}
#content {
	MARGIN: 0px 2em 0px 200px; PADDING-TOP: 1em
}
#content H2 {
	MARGIN-TOP: 0px
}
#footer {
	CLEAR: both; PADDING-RIGHT: 1em; BORDER-TOP: #333 1px solid; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; PADDING-TOP: 1em; BACKGROUND-COLOR: #E6FFBF; TEXT-ALIGN: right
}
#footer2 {
	CLEAR: both; PADDING-RIGHT: 1em; BORDER-TOP: #333 1px solid; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; PADDING-TOP: 1em; BACKGROUND-COLOR: #CCFF80; TEXT-ALIGN: right
}
#footer3 {
	CLEAR: both; PADDING-RIGHT: 1em; BORDER-TOP: #333 1px solid; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; PADDING-TOP: 1em; BACKGROUND-COLOR: #99FF00; TEXT-ALIGN: right
}
</STYLE>

</HEAD>
<BODY>
<DIV id=container>
<DIV id=banner>
<H1>Site name</H1></DIV>
<DIV id=sitenav>
<P><b><a href="http://www.jamesmcl.co.uk/wikka/wikka.php?wakka=HomePage">Home Page</a></b>
<b><a href="http://www.jamesmcl.co.uk/wikka/wikka.php?wakka=">Home Page</a></b>
<b><a href="http://www.jamesmcl.co.uk/wikka/wikka.php?wakka=">Home Page</a></b>
<b><a href="http://www.jamesmcl.co.uk/wikka/wikka.php?wakka=">Home Page</a></b>
<b><a href="http://www.jamesmcl.co.uk/wikka/wikka.php?wakka=">Home Page</a></b>
<b><a href="http://www.jamesmcl.co.uk/wikka/wikka.php?wakka=">Home Page</a></b>
<b><a href="http://www.jamesmcl.co.uk/wikka/wikka.php?wakka=">Home Page</a></b>
<b><a href="http://www.jamesmcl.co.uk/wikka/wikka.php?wakka=">Home Page</a></b>
<b><a href="http://www.jamesmcl.co.uk/wikka/wikka.php?wakka=">Home Page</a></b>
<b><a href="http://www.jamesmcl.co.uk/wikka/wikka.php?wakka=">Home Page</a></b>
<b><a href="http://www.jamesmcl.co.uk/wikka/wikka.php?wakka=">Home Page</a></b>
<b><a href="http://www.jamesmcl.co.uk/wikka/wikka.php?wakka=">Home Page</a></b>
<b><a href="http://www.jamesmcl.co.uk/wikka/wikka.php?wakka=">Home Page</a></b>
</P></DIV>
<DIV id=content>
<H2>Page heading </H2>
<P>Ut wisi enim ad minim veniam, quis <a href="www.aol.com">Home Page</a> nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
<form>
<textarea class="highlight" rows=3 cols=45>
in hendrerit in
 vulputate velit esse
 molestie consequat
, vel illum dolore 
eu feugiat nulla
facilisis at vero eros 
et accumsan et iusto odio dign
issim qui 
blandit praesent luptatum zzril delenit augue duis
</textarea>
</form></P>
<P>Ut wisi enim ad minim veniam, quis <a href="www.aol.com">Home Page</a> nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore <br><hr>
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
</P>
<P class=nextbutton><A href="javascript:history.back()">&lt; Back to 
tutorial</A> </P></DIV>
<DIV id=footer>Footer stuff here </DIV>
<DIV id=footer2>Footer stuff here </DIV>
<DIV id=footer2>Footer stuff here </DIV></DIV></BODY></HTML>


--JamesMcl

Strikethrough rendering

Strikethrough seems to highlight the selected text like this instead of striking through it. Looks like Wikka uses the deletions class from wikka.css instead of the strikethrough class.
.strikethrough {color: #888; text-decoration: line-through;}
.deletions {color: #876; background-color: #FFCC99;}

--RichardTerry

(see new code below)
--NilsLindenberg (no own computer, no installed wikka :(

Marking "a strikethrough" as "deletion" in order to get a certain rendering is just a roundabout way to go back to presentational markup instead of structural, semantic markup! The class should indicate its purpose (i.e., real clasification!); so if the purpose is "strikethrough" rather than "deletion", it should indeed be a separate class. In the CSS you then have the freedom to either style both classes the same, or to style them differently.
See also my remarks about "markup of diff pages" in the SuggestionBox!
-- JavaWoman


Yes, I have read your remarks in the SB. But this is (hopefully, as i can't test it) an easy solution for the problem, as long as it isn't modified towards your suggestions.

The problem is, that there is no handling for "deletion". Instead, "strikethrough" is missused for it. To change this:

change in formaters/wakka.php

static $trigger_inserted = 0;
static $trigger_center = 0;

to
static $trigger_inserted = 0;
static $trigger_deleted = 0;
static $trigger_center = 0;

and

$trigger_bold = $trigger_center = $trigger_floatl = $trigger_inserted = $trigger_italic =$trigger_keys = 0;

to
$trigger_bold = $trigger_center = $trigger_floatl = $trigger_inserted = $trigger_deleted = $trigger_italic =$trigger_keys = 0;

and

// strikethrough
else if ($thing == "++" || $thing == "&yen;&yen;") 
{
 return (++$trigger_strike % 2 ? "<span class=\"deletions\">" : "</span>");
} 

to
// strikethrough
else if ($thing == "++") 
{
return (++$trigger_strike % 2 ? "<span class=\"strikethrough\">" : "</span>");
} 

and add (after //inserted))

// deletions
else if ($thing == ""&yen;&yen;") 
{
return (++$trigger_deleted % 2 ? "<span class=\"deletions\">" : "</span>");
} 



Missing Pages
Is there a reason why missing pages are marked through <a href="..."><span class="missingpage">Page name</span></a> instead of <a class="missingpage">Page name</a>? This makes control on hover behavior difficult.
-- DarTar



Better code rendering
I found that bits of code sometimes are rendered hard to understand, with both loss of original indents and line wrapping. The cause is 1) inheritance of the body's "justify" text alignment, and 2) the fact that lines are allowed to wrap (overflow: auto; doesn't prevent this).

My suggested solution is the following change for the code class in wikka.css:
.code {
	color: black;
	background: #ffffee;
	border: 1px solid #888;
	font: 11px "Bitstream Vera Sans Mono","Courier New", monospace;
	width: 95%;
	margin:auto;
	padding: 3px;
	text-align: left;     /* override justify on body */
	overflow: auto;       /* allow scroll bar in case of long lines - goes together with white-space: nowrap! */
	white-space: nowrap;  /* prevent line wrapping */
}

(BTW, a formatter for css would be nice ;-)) - See GeSHi! which several other Wikis are already using...)
-- JavaWoman



Alternate stylesheets

I really appreciate alternate stylesheets (classical one, more elaborated, aso). To allow them to be configured in WikkaWiki, you could just add :

* In wikka.config.php this line (for exampe just after "stylesheet" => "wikka.css", ) :

  "alternates_stylesheets" => array("wikka1.css" => 'Wikka 1', 
									"wikka2.css" => 'Wikka 2', 
									"wikka3.css" => 'Wikka 3'),


* in header.php this two lines just after the last link and before the "style" box :

<?php
  // Alternate links
  foreach ($this->GetConfigValue("alternates_stylesheets") as $alternate_css => $alternate_name)
  {
	echo '<link rel="alternate stylesheet" type="text/css" href="' . $css_path . $alternate_css . '" media="screen" title="' . $alternate_name . '" />';
  }
?>


(I've too added a $css_path variable,
$css_path = 'css/';
)
I don't thing that various "media=print" CSS would be really usefull.
Of course you need a browser like Firefox / Mozilla to easily switch them, otherwise you have to take care of the stylesheets' switch directly in your pages [ see http://www.openweb.eu.org/ for example ].

--SergiO

CategoryDevelopment
There are 4 comments on this page. [Show comments]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki