Template "flowered" - ein paar Fragen zur Anpassung

[tbillert]

Hallo zusammen,

ich habe heute auf einer im entstehen begriffenen Website mit letztens installiertem CMSMS das Template "flowered" installiert. Gefiel mir von der Optik her am besten und schien auch einfach genug aufgebaut zu sein, so dass ein Anfaenger wie ich daran lernen kann. Die Installation, trotz dass es sich hier um ein zipped template handelt, lief ohne Probleme.

Ein paar Grundanpassungen habe ich schon gemacht, siehe: http://geojena.billert.de/

Was ich bisher nicht hinbekommen habe, und wofuer ich Euch um Hilfe bitte: alles bis auf das Menue skaliert mit der Groesse des Browserfensters. Ich haette den "Inhaltsblock" gern mit fester Breite, naemlich der der Headergrafik (1024px). Das ist mir bisher leider noch nicht gelungen.

Ist das denn irgendwie machbar?

Vielen Dank im Voraus!

Gruss,

Thomas.

[uniqu3]

Hallo versuche dine stylesheet damit zu ersetzen:

Code: Select all

/* Start of CMSMS style sheet 'flowered' */
html {
	background-image: url(uploads/images/templates/flowered/geojena_right_side.jpg);
	background-repeat: repeat;
	background-position: top right;
}
body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	background-repeat: repeat-y;
	color: #000000;
}
#container {
	width: 1024px;
	margin: auto;
	background: #fff;
}
#main-title {
	margin-bottom: 0;
	font-size: .7em;
	letter-spacing: 5px;
	text-align: right;
	margin-top: 0;
	padding-bottom: 8px;
	font-weight: bold;
	padding-top: 8px;
	padding-right: 50px;
	background-color: #333333;
	color: #FF7F00;
	border-top: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
}
#header-image {
	background-color: #FF7F00;
	background-image: url(uploads/images/templates/flowered/header_geojena.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 177px;
	border-top: 2px #FF7F00 solid;
	border-bottom: 2px #FF7F00 solid;
}
#navbar {
	margin-bottom: 0;
	font-size: .65em;
	text-align: center;
	margin-top: 0;
	padding-bottom: 8px;
	font-weight: bold;
	padding-top: 8px;
	background-color: #333333;
	color: #FF7F00;
	word-spacing: 8px;
	border-bottom: 2px #FF7F00 solid;
}
#navbar a:link, #navbar a:visited {
	color: #FF7F00;
	word-spacing: none;
}
#navbar a.current {
	color: #FF7F00;
}
#navbar a:hover {
	color: #FF7F00;
	text-decoration: underline;
}
#headline {
	font-size: .65em;
	padding-top: 30px;
	text-align: justify;
	background-color: #FF7F00;
	padding-left: 100px;
	padding-right: 100px;
	margin-bottom: 0;
	line-height: 1.5em;
}
p.byline {
	text-align: right;
	margin-bottom: 0;
}
h1 {
	margin-left: 110px;
	margin-right: 110px;
	font-size: .8em;
	padding-bottom: 3px;
	padding-top: 23px;
	padding-left: 50px;
	padding-right: 0;
	color: #000000;
	border-bottom: 1px #ff4700 solid;
	letter-spacing: 5px;
	font-weight: bold;
	background-color: #F2F2F2;
	margin-top: 0;
	margin-bottom: 0;
}
#main-text {
	margin-top: 0;
	margin-bottom: 0;
	font-size: .7em;
	line-height: 1.8em;
	background-color: #ffffff;
}
#main-text p {
	text-align: justify;
	margin-left: 50px;
	margin-right: 50px;
}
h2 {
	padding-bottom: 3px;
	padding-right: 0;
	color: #000000;
	border-bottom: 1px #000000 solid;
	letter-spacing: 5px;
	margin-left: 50px;
	margin-right: 50px;
	font-size: 1em;
	margin-top: 0;
	padding-top: 10px;
}
h3 {
	padding-bottom: 0px;
	padding-right: 0px;
	color: #000000;
	border-bottom: 0px #000000 solid;
	letter-spacing: 0px;
	margin-left: 50px;
	margin-right: 50px;
	font-size: 1em;
	margin-top: 5px;
	padding-top: 10px;
}
p, ul, ol, table {
	margin-top: 10px;
	margin-bottom: 0;
}
ol, ul {
	margin-left: 75px;
	margin-right: 75px;
}
a:link, a:visited {
	text-decoration: none;
	font-weight: bold;
	color: #FF7F00;
}
a:hover {
	text-decoration: underline;
}
#footer {
	text-align: center;
	margin-bottom: 0;
	padding-top: 0px;
	padding-bottom: 8px;
	font-size: 8px;
	margin-top: 8px;
	padding-right: 50px;
	background-color: #333333;
	color: #FF7F00;
	font-weight: bold;
	border-top: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
}
#footer a:link, #footer a:visited {
	color: #ffffff;
	text-decoration: none;
}
#footer a:hover {
	text-decoration: underline;
	color: #ffffff;
}
.right {
	float: right;
	text-align: right;
	width: 50%;
}
.left {
	float: left;
	text-align: left;
	padding-left: 50px;
}
.right h3 {
	margin-top: 0px;
	font-size: 90%;
}
.stretch, .clear {
	clear: both;
	height: 1px;
	margin: 0;
	padding: 0;
	font-size: .7em;
	line-height: 1px;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
* html>body .clearfix {
	display: inline-block;
	width: 100%;
}
* html .clearfix {
/* Hides from IE-mac \*/
	height: 1%;
/* End hide from IE-mac */
}
/* end clearing */
/* replace */
.replace {
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	background-color: transparent;
}
/* tidy these up */
.replace * {
	text-indent: -10000px;
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	background-color: transparent;
}
.replace a {
	text-indent: 0;
}
.replace a span {
	text-indent: -10000px;
}
/* end replace */
/* accessibility */
span.accesskey {
	text-decoration: none;
}
.accessibility {
	position: absolute;
	top: -999em;
	left: -999em;
}
dfn {
	position: absolute;
	left: -1000px;
	top: -1000px;
	width: 0;
	height: 0;
	overflow: hidden;
	display: inline;
}
div.left49 {
	float: left;
	width: 49%;
}
div.right49 {
	float: right;
	width: 49%;
	text-align: right;
}
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
/* The wrapper clears the floating elements of the menu */
#menuwrapper {
	overflow: hidden;
	background-color: black;
	border-bottom: 1px #FF7F00 solid;
	width: 1024px;
	font-size: .65em;
	color: white;
}
/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
	width: 200px;
}
/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
#primary-nav ul {
	position: absolute;
	top: auto;
	display: none;
}
#primary-nav ul ul {
	margin-top: 1px;
	margin-left: -1px;
	left: 100%;
	top: 0px;
}
#primary-nav li {
	margin-left: -1px;
	float: left;
}
#primary-nav li li {
	margin-left: 0px;
	margin-top: -1px;
	float: none;
	position: relative;
}
/* Styling the basic apperance of the menu elements */
#primary-nav a {
	display: block;
	margin: 0px;
	padding: 5px 10px;
	text-decoration: none;
	color: #FF7F00 solid;
}
#primary-nav li a {
	border-right: 1px #FF7F00 solid;
	border-left: 1px #FF7F00 solid;
	color: #FF7F00 solid;
}
#primary-nav li li a {
	border: 1px #FF7F00 solid;
}
#primary-nav li, #primary-nav li.menuparent {
	background-color: black;
	color: #FF7F00 solid;
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
	background-color: black;
	color: red;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth {
	background-image: url(modules/MenuManager/images/arrow.gif);
	background-position: center right;
	background-repeat: no-repeat;
	color: red;
}
/* Styling the apperance of menu items on hover */
#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
	background-color: black;
	color: red;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, #primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
	display: none;
	color: red;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, #primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
	display: block;
}
/* IE Hacks */
#primary-nav li li {
	float: left;
	clear: both;
}
#primary-nav li li a {
	height: 1%;
}
/* End of 'flowered' */

Damit wird dein gesamtes Inhalt samt Navigation und Header mittig mit 1024px breite dargestellt.

[tbillert]

Hallo uniqu3,

vielen vielen Dank - hat wunderbar geklappt! Ich muss mir Deine Aenderungen ansehen, ich wuerde gern verstehen, was genau Du geaendert hast.

Damit hast Du auch gleich die naechste Baustelle erschlagen - wenn wenig Text auf einer Seite stand, dann fehlte unten (bis auf rechts) der Hintergrund.

Nun muss ich nur noch rausfinden, wie ich die Menues vernuenftig style - bisher sieht man dort nicht, auf welcher Seite man sich befindet, auch eine Einfaerbung bei hover waere noch wuenschenswert. Ich denke, ich sollte mich etwas mehr in CSS einlesen.

Viele Gruesse,

Thomas.

[tbillert]

hm...

Also nun habe ich im CSS die Stellen gefunden, wo das Menue gestyled wird. Immerhin erkennt man jetzt schon, auf welcher Hierarchie man sich befindet, und bei hover wird das Menu-Element eingefaerbt.

Was das CSS aber standhaft ignoriert, ist das color-Setting fuer a) die aktive Seite im Menu und b) den Link bei hover. Die Menuepunkte werden weiter, wie weiter oben im CSS unter #navbar eingestellt, in #FF7F00 angezeigt, obwohl ich denke, an den richtigen Stellen weiter unten #333333 eingestellt zu haben:

/* Styling the apperance of menu items on hover */
#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
background-color: #FF7F00;
color: #333333;

Hier haette ich gern nochmal einen freundlichen Schubs in die richtige Richtung

Danke + viele Gruesse,

Thomas.

[tbillert]

so, kurz vorm Schlafengehen noch ein Stueck weitergekommen:

Die Farbe des aktiven Menuepunkts passt jetzt (auf Startseite wird "Home" jetzt in grauer Schrift mit orange Hintergrund angezeigt).

Die Farben der anderen Menuepunkte und der Punkte in den Ausklappmenues bei hover passt jetzt auch, dito wie oben.

Was nicht passt:

a) die Schriftfarbe des Menuparent bei ausgeklappten Menue. Das ist noch orange auf orange. Das ist ja eigentlich li.menuparent a - wenn ich dem aber eine Zuweisung gebe, sind die anderen Menuepunkte ebenfalls so gestyled. Sprich, wie kann ich zwischen einem menuparent mit ausgeklapptem Menue und den inaktiven menuparents unterscheiden?

b) die Farben der Punkte im Menue des aktiven menuparent. Siehe

http://geojena.billert.de/index.php?pag ... msms-works

und dann dort mal auf das "How CMSMS Works"-Menue klicken. Da ist jetzt alles so gefaerbt, wie es mit aktivem hover aussehen sollte.

Nun ist aber Schluss fuer heute und mit den Monologen.

Gruss,

Thomas.

[Dr.CSS]

You might have been better off using one of the default templates like this one, remove the left side bar if not needed...

http://multiintech.com/defaultcontent/i ... horizontal

[tbillert]

Hi Dr. CSS,

perhaps, yes - however, I liked flowered and the menu it came with. I think I'm quite close to having it look as I want it, just a few styling tasks left - this can't be too difficult.

Not sure if you were able to read my German posts in detail - so what I still need to solve now is actually only:

a) Style the menuparent of an expanded menu the way a hover'ed menu item is styled (while leaving the other (closed) menuparents style-wise untouched)

b) Fix the styling of menuparent and menu items for the active page (i.e. where menuparent = menuactive). Just compare the style of the menu unter "How CMSMS Works" on

http://geojena.billert.de/

and on

http://geojena.billert.de/index.php?pag ... msms-works

If all that is impossible to implement, the only workaround I see is a fixed font color for the complete menu and a compatible hover color.

Thanks for any hints!

Best wishes,

Thomas.

[tbillert]

Hallo,

ich habe die Menuegeschichte jetzt mit einer zusaetzlichen Farbe fuer Hover zu meiner Zufriedenstellung geloest.

Beim Test der Seiet mit verschiedenen Browsern (ueblicherweise benutze ich Firefox) fiel mir auf, dass die Ausklappmenues mit IE 6 nicht funktionieren. Nicht dass mich das sonderlich scheren wuerde, aber vielleicht gibt es ja dafuer eien Loesung?

Danke + Gruss,

Thomas.

[uniqu3]

Hallo,

persönlich verwende ich für IE6 superfish lösung http://users.tpg.com.au/j_birch/plugins/superfish/ es hängt natürlich davon ab wie viel zeit Du dafür noch investieren möchtest  :)

Ansonsten könntest Du dir CMSMS standard templates ansehen, diese funktioneren auch mit IE6, einfach nachbauen 

[tbillert]

Hallo uniqu3,

danke Dir. Ich denke, die superfish-Loesung sprengt den Rahmen des Sinnvollen bei diesem Projekt und geht auch ueber meine Kenntnisse hinaus.

Ich werde das ganze so lassen. Die Seite funktioniert prinzipiell mit dem IE6, einzig die Dropdowns gehen nicht - dafuer kommen aber Navigationsseiten auf die "Node-Seiten" der Menues, so dass man auch so navigieren kann. Und - wieviele Leute benutzen denn noch IE6? Bei vielen hat sich ja schon herumgesprochen, dass dieser Browser sehr kaputt ist.

Gruss,

Thomas.

[owr_bgld]

Und - wieviele Leute benutzen denn noch IE6? Bei vielen hat sich ja schon herumgesprochen, dass dieser Browser sehr kaputt ist.

Zuviele - nachschauen geh - sodala - hab mal die Statistik auf "meiner" Seite ausgewertet. Das Modul "Statistics" mag für manche möglicherweise nicht das Optimum sein, aber für den Hausgebrauch reichts.
Die Zugriffsrate mit IE 6 ist 12%. Mit IE 7 und IE 8 dagegen 2%. Über dem IE 6 sind lediglich "andere" also welche es nicht ausspucken was sie sind (33%) und robots (23%).
FF rangiert bei 5%.

Ich dachte auch da ist eh keiner mehr unterwegs damit - aber als ich mich im Bekanntenkreis umgehört habe, habe ich nicht schlecht gestaunt, wieviele noch mit dem Ding herumgurken.

[uniqu3]

@owr_web
Stimmt es sind noch einige IE6 anwender, meistens die "Angestellten" die durch Firmennetzwerke surfen und keine rechte zur Programminstallation haben 

Browser Besucherzahlen unterscheiden sich auch sehr je nach Thema der Seite, in tbillerts Fall denke ich werden Besucherzahlen nicht gleich in die höhen springen und wenn er einfach eine zweite Navigation in der sidebar einrichtet ist es ja auch ein gutes fallback für IE6.

[tbillert]

wow, sind doch noch so viele mit so ner ollen Kruecke unterwegs. Und das Ding ist so schleusslich...

Nicht in der Sidebar (gibt keine, Platz wird gebraucht), aber es auf den Seiten, die weiter zu den Unterpunkten fuehren, gibt es Links zu diesen. Somit kann auch ein IE6-Benutzer ueberall hin navigieren und wird die Einschraenkungen wahrscheinlich gar nicht mitbekommen.

Gruss,

Thomas.

[Franatic]

Alles bis auf das Menue skaliert mit der Groesse des Browserfensters. Ich haette den "Inhaltsblock" gern mit fester Breite, naemlich der der Headergrafik (1024px). Das ist mir bisher leider noch nicht gelungen.

Halte ich in Zeiten von Netbooks und Co. für keine gute Idee - nichts ist m. E. hässlicher als ein horizontaler Scrollbalken. Mag ja eine Geschmacksfrage sein aber ich würde das flexibel lassen.

Code: Select all

#container {
   background:none repeat scroll 0 0 #FFF;
   border:1px solid #000;
   margin:0 auto;
   /* width:1024px; */
}
#menuwrapper {
   background-color:#333;
   border-bottom:1px solid #FF7F00;
   color:white;
   font-size:0.65em;
   overflow:hidden;
   /* width:1024px; */
}

Gruß
Franatic

[tbillert]

Ja und nein - wenn das Menue und die Headergrafik bei zu kleiner Aufloesung ueberstehen bzw. es bei zu hoher Aufloesung neben der Grafik einen Rand gibt, dann ist das noch unschoener. 1024 px Breite ist m. E. nach ein guter Kompromiss - das schaffen auch die meisten Netbooks. Auch mein iPhone stellt die Seite vernuenftig dar. Auch hinsichtlich der Formatierung des Inhalts ziehe ich eine feste Breite der Seite vor. Sprich, das bleibt so.

Gruss,

Thomas.