Schriftart Schriftgröße Schriftfarbe von aktivem Menüpunkt ändern.

[kronright]

Auch auf die Gefahr hin, dass ich über die Suchfunktion etwas übersehen haben könnte, frage ich hier direkt.

Wie und vor allem wo kann man Schriftart, Schriftgröße und Schriftfarbe des aktiven Menüpunkts ändern?

Auch wenn es nicht zum Topic passt schieße ich die Frage gleich hinterher:

Wie und wo kann man das Erscheinungsbild des self-registration und front end user Formulars ändern.
Ich hätte gerne alles untereinander und in einer kleineren Schriftgröße und einheitlicher Schriftfarbe.
derzeit sieht es so aus:


Ich danke für Eure Unterstützung!

[cyberman]

Wie und vor allem wo kann man Schriftart, Schriftgröße und Schriftfarbe des aktiven Menüpunkts ändern?

Da das Menü durch den MenuManager erstellt wird, lohnt sich als erstes ein Blick in das verwendete Template. So ist die Formatierung bei simple menu links zum Beispiel so gelöst

Code: Select all

div#menu_vert ul h3 {}

[myrrrdin]

..... wie kann man denn konkret die Schriftart überall ändern, was muss man genau hinzufügen .....

[NaN]

..... wie kann man denn konkret die Schriftart überall ändern, was muss man genau hinzufügen .....

Du weißt doch hoffentlich, was es mit HTML und CSS auf sich hat?
Falls nicht, schau mal hier nach:

http://forum.cmsmadesimple.org/index.ph ... #msg105764

Was meinst Du mit "überall"?
Für die komplette Seite?
Wirf mal einen Bilck in die Standard-Stylesheets.
Dort steht gleich am Anfang:

Code: Select all

/*
Set initial font styles
*/
body {
   text-align: left;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 75.01%;
   line-height: 1em;
}

Da kannst Du (falls nicht irgendwo auf der Seite andere Schriftformatierungen vorgenommen wurden) die Schrift für die komplette Seite einstellen.

[myrrrdin]

das hatte ich schon geändert - und andere spezifikationen versucht,
auszuschließen, die das wieder eingrenzen oder vielmehr ändern dann ....

ich hab dann verdana da an die erste stelle gestellt und das brachte nichts ....

und moinsein auch ..... nein ich bin kein html´er - hab aber wenig grundkenntnisse,
die nicht immer parat sind ..... ich muss halt auch kein programmierer normal sein,
weil ich usabiity teste, bei diesem prjekt gehts halt um meine
screenshot content sammlung, die ich momentan nur selbst pflegen kann,
weil kein budget ..... oder wenig budget vorhanden und
ein deal der das liefern ollte geplazt ist ....

sprich was ich eigentlich mache ist, das interface und wie gut es ist
zu testen und die dinge anzusprechen, für die ich in meinem fall selbst keine
programmierlösung habe, auch wenn ich die grundsätzliche herangehensweise verstehe usw.

meine seite ist nicht sehr schön, ich weiß.

ich find halt ehrlich gesagt auch kein anderes cms das ich ohne tiefgehender
kenntnisse und aufwand installiert bekomme, daher hab ich dieses noch.


wenn es interessiert aus user sicht: was unendlich nervt:
* dieser wisisg - editor im firefox killt leerzeichen wenn man das wieder neu aufmacht
* editor im ..... usw..
*


ich geb ein andermal weiter, was ihr eh schon wisst vermute ich .....

danke für den tip, aber ich vermute ich kriegs damit nicht gelöst, weil ich das
logischerweise schon probiert hab auf der suche nach orten, wo font definiert wird ....
eben im css für dann die jeweilige stelle .... oder im modul ....

nur - vielleicht muss ich mich da wirklich mal reinhängen -
definiert ein typischer html-befehl die schriftgröße und art im css oder sind die befehle abweichend?
man bekommt den eindruck, weil auch die css lernressourcen nicht immer das gleiche aussagen wie man es dann heir
im cms css wiederfindet .....


welche befehl konkret definiert das zum beispiel für den bredcrumb trea wenn ich die
stelle im layout css gefunden habe?

überall meint überall -
-Navigation (wird durch das default definiert?)
-Breadcrumbtree (da keine Schrift hier vordefiniert ist, im CSS kann man die Stelle auch nur mit Kenntnis der
Code Ergänzung verändern, da hilft das CMS TUrorial nicht dann)
-body (kann ich zur Not definieren-klappt aber nicht so gut, dieser WISIWIG Editor bildet zudem
keine 11 als Schriftgröße ab und taugt auch sonst nur bedingt was - er zwehackt und verdreht andauernd irgendwelche importierten Fo0rmatierungen
-footer (kontakt modul - kann ich zur not über den edotor oder die veränderung des html lösen, wenn ich
weiß wie ich bei cms schriftgrößendefinitionen von 1 2 3 4 5 eine umgewandelte schriftgröße 11 definieren kann, mit 2,5 funktionierts lgaub ich nicht schau ich mir den html code an)
...


das kontaktformular ist halt kleiner dann aber sonst will ich überall verdana rein
haben, sonst zerstört dieser schriftmix die seite .....

[myrrrdin]

und das klappt nicht mit der änderung wie von dir vorgeschlagen .... ich kenn das mit dem cms - verweis auf die allgemeinen quellen, hast recht - nur was hilfts mir .... und die defintion eines cms das es für leute mit ahnung ist
und so weiter und wie sich cms madesimple versteht und definitert - alles richtig :-]

- kann ich alles nachvollziehn und ist zudem open source ......

ich muss trotzdem das rauskriegen - war wegen hunderter wiwiswig sachen und
explorer problem schon oft davor das cms zu wechseln .....
weil es nicht so einfach ist wie der name sagt, weswegen ich es ja nutze :-]

hmmm..... ich kann euch auch nicht bezahlen irgendiwie - vielleicht machen
wir netzwerk und wenn ich mal was eweiß leite ich es weiter an euch .....
https://www.xing.com/profile/KlausDieter_Hinck


wo sind sonst die schriftgrößen definiert und die schriftart?
für die navigation?
dann müsste es ja andere orte geben, im template vermutlich nicht,
wenn die stelle - ich scan grad die referenzen weiter von der seite
"html und css" lernen aus - irgendwo anders ist, schade das ihr es nicht dazu schreibt ....

cms made simple - auch wenn man html und css vorraussetzt, so einfach ists nicht in allem -
dennoch danke für die nutzung ..... ich will auch nicht nerven ..... nur muss das gelöst kriegen
oder das teil kicken.

[myrrrdin]

so das ist nun meine Navigation - da kann ich nichts festlegen meine ich,
zumindestens finde ich keinen Wert der eine Schriftart angibt, den ich dann ändern würde.




/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
  margin-left: 1px;
  margin-right: 1px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {
  /* Fix for Opera 8 */
  /*  overflow: hidden;  */
  background-color: #ECECEC;
  border-bottom: 1px solid #C0C0C0;
  width: 100%;
}

/* 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: #006699;
}
#primary-nav li a {
  border-right: 1px solid #C0C0C0;
  border-left: 1px solid #C0C0C0;
}
#primary-nav li li a {
  border: 1px solid #C0C0C0;
}
#primary-nav li, #primary-nav li.menuparent {
  background-color: #ececec;
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
  background-color: #C7C7C7;
}


/* 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 {
/* arrow for menuparents */
  background-image: url(images/cms/arrow.gif);
  background-position: center right;
  background-repeat: no-repeat;
}


/* 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: #E7AB0B;
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
#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;
}

/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#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%;
}

[myrrrdin]

das ist mein stylesheet allgemeiner art, er definiert bereits die
reihenfolge mit verdana als erste vom browser darzustellende schriftart.....
wo kann ich da was ändern, wenn ich
es lgsich prüfe ..... hmmmmmm ... ich muss nur nach der schriftart suchen die
im moment da ist .........



/*****************
browsers interpret margin and padding a little differently,
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}

/*
Set initial font styles
*/
body {
  text-align: left;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 75.01%;
  line-height: 1em;
}

/*
set font size for all divs,
this overrides some body rules
*/
div {
  font-size: 1em;
}

/*
if img is inside "a" it would have
borders, we don't want that
*/
img {
  border: 0;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
a,
a:link
a:active {
  text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
  background-color: inherit;
  color: #18507C;
}

a:visited {
  text-decoration: underline;
  background-color: inherit;
  color: #18507C;                /* a different color can be used for visited links */
}


/* remove underline on hover and change color */
a:hover {
  text-decoration: none;
  background-color: #C3D4DF;
  color: #385C72;
}

/*****************
basic layout
*****************/
body {
  background-color: #ccc;
  color: #333;
  margin:1em; /* gives some air for the pagewrapper */
}

/* center wrapper, min max width */
div#pagewrapper {
  border: 1px solid black;
  margin: 0 auto;    /* this centers wrapper */
  max-width: 170em; /* IE wont understand these, so we will use javascript magick */
  min-width: 60em;
  background-color: #fff;;
  color: black;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/

div#header {
  height: 80px; /* adjust according your image size */
  background: #294B5F;         
}

div#header h1 a {
/* you can set your own image here */
  background: #294B5F no-repeat 0 12px;
  display: block;
  height: 70px;            /* adjust according your image size */
  text-indent: -999em;  /* this hides the text */
  text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#search {
  float: right;
  width: 25em;    /* enough width for the search input box */
  text-align: right;
  padding: 0.7em 0 0.2em 0;
  margin: 0 1em;
}


div.breadcrumbs {
  padding: 1.1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
  font-size: 90%;            /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
  margin: 0 1em;              /* css shorthand rule will be opened to be "0 1em 0 1em" */
  border-bottom: 1px dotted #000;
}

div.breadcrumbs span.lastitem {
  font-weight:bold;
}

ndiv#content {
  margin: 1.5em auto 2em 0; /* some air above and under menu and content */
}

div#main {
  margin-left: 1.6%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
  margin-right: 1.6%; /* and some air on the right */
margin-top: 2.0%;
}


div#sidebar {
  float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
  width: 0%;    /* sidebar width, if you change this please also change #main margins */
  display: inline;  /* FIX ie doublemargin bug */
  margin-left: 0;
}

/* if sidebar doesnt include menu but content add class="hascontent" */
div#sidebar.hascontent {
  padding: 0 1%;
  width: 24%;  /* make width smaller if there's padding, or it will get too wide for the floated divs in IE */
}

div#footer {
  clear:both;      /* keep footer below content and menu */
  color: #fff;
  background-color: #385C72; /* same bg color as in header */
}

div#footer p {
  font-size: 0.8em;
  padding: 1.5em;      /* some air for footer */
  text-align: center; /* centered text */
  margin:0;
}

div#footer p a {
  color: #fff; /* needed becouse footer link would be same color as background otherwise */
}

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
  height: 1px;
  margin: 1em;
  margin-right: 1em;
  border-bottom: 1px dotted black;
}

/* relational links under content */
div.left49 {
  float: left;
  width: 49%;  /* 50% for both left and right might lead to rounding error on some browser */
}

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
}




/********************
CONTENT STYLING
*********************/
div#content {

}

/* HEADINGS */
div#content h1 {
  font-size: 2em;  /* font size for h1 */
  line-height: 1em;
  margin: 0;
}
div#content h2 {
  color: #294B5F;
  font-size: 1.5em;
  text-align: left;
/* some air around the text */
  padding-left: 0.5em;
  padding-bottom: 1px;
/* set borders around header */
  border-bottom: 1px solid #e7ab0b;
  border-left: 1.1em solid #e7ab0b;
  line-height: 1.5em;
/* and some air under the border */
  margin: 0 0 0.5em 0;
}
div#content h3 {
  color: #294B5F;
  font-size: 1.3em;
  line-height: 1.3em;
  margin: 0 0 0.5em 0;
}
div#content h4 {
  color: #294B5F;
  font-size: 1.2em;
  line-height: 1.3em;
  margin: 0 0 0.25em 0;
}
div#content h5 {
  font-size: 1.1em;
  line-height: 1.3em;
  margin: 0 0 0.25em 0;
}
h6 {
  font-size: 1em;
  line-height: 1.3em;
  margin: 0 0 0.25em 0;
}
/* END HEADINGS */

/* TEXT */
p {
  font-size: 1em;
  margin: 0 0 1.5em 0;  /* some air around p elements */
  line-height:1.4em;
  padding: 0;
}
blockquote {
  border-left: 10px solid #ddd;
  margin-left: 10px;
}
pre {
  font-family: monospace;
  font-size: 1.0em;
}
strong, b {
/* explicit setting for these */
  font-weight: bold;
}
em, i {
/* explicit setting for these */
  font-style:italic;
}

/* Wrapping text in tags. Makes CSS not validate */
code, pre {
white-space: pre-wrap;      /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;      /* Internet Explorer 5.5+ */
font-family: "Verdana", Verdana, monospace;
font-size: 1em;
}

pre {
  border: 1px solid #000;  /* black border for pre blocks */
  background-color: #ddd;
  margin: 0 1em 1em 1em;
  padding: 0.5em;
  line-height: 1.5em;
  font-size: 90%;  /* smaller font size, as these are usually not so important data */
}

/* END TEXT */

/* LISTS */
div#main ul,
div#main ol,
div#main dl {
  font-size: 1.0em;
  line-height:1.4em;
  margin: 0 0 1.5em 0;
}
div#main ul li,
div#main ol li {
  margin: 0 0 0.25em 3em;
}

div#dl dt {
  font-weight: bold;
  margin: 0 0 0.25em 3em;
}
div#dl dd {
  margin: 0 0 0 3em;
}

/* END LISTS */

[NaN]

Musste gerade erstmal tief luft holen...
Kann Dir leider kaum folgen.
Hast Du eventuell einen Link wo man sich das mal anschauen kann?
Welche Schriftart wird denn stattdessen angezeigt?
Was ist Schriftgröße 11 bei Dir?
11 Punkt, Pixel, em, %, Kartoffeln? 
Welches Template/Stylesheet verwendest Du eigentlich?
Ist das Template auch mit dem Stylesheet verknüpft?
Wird das Stylesheet auch mit dem Stylesheet-Tag im Template eingebunden?
Was steht denn im Quellcode der HTML-Ausgabe Deines Browsers?
Sind da eventuell noch -Tags oder andere Stylesheets?
Mit welchen Stylesheets ist Dein Template noch verknüpft?
Überschreibt da eventuell ein Style das andere?

Sorry, aber so kann ich Dir da leider keinen Tipp geben.

Kurz zum Thema Schriftgröße:
Bei dem von Dir geposteten Code handelt es sich offenbar um die Standard-Stylesheets.
Dort steht eine Schriftgröße von 75.01%.
Und genau hier muss Deine Schriftgröße für die Grundschrift hin.

Bei den Standard-Stylesheets wird für alle anderen HTML-Elemente von dieser Größe ausgegangen.
Bsp:

Code: Select all

div {
   font-size: 1em;
}

EM ist eine relative Größe ausgehend vom jeweils übergeordneten Element.
Es handelt sich dabei um Vielfache.
D.h. font-size: 1em bedeutet  1 * Größe des übergeordneten Elements.

Ähnliches bei den Breadcrumbs:

Code: Select all

div.breadcrumbs {
   padding: 1.1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
   font-size: 90%;             /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
   margin: 0 1em;              /* css shorthand rule will be opened to be "0 1em 0 1em" */
   border-bottom: 1px dotted #000;
}

Die Schriftgröße der Breadcrumbs beträgt also 90% der Größe des Übergeordneten Elements.
Habe ich z.B. ein mit Schriftgröße 10 Pixel (font-size:10px;) und in diesem wiederum ein mit der Schriftgröße 90% so hat letzteres logischerweise eine Schriftgröße von 9 Pixel.

[myrrrdin]

Danke ..... ja das meiste hab ich inzwischen rausgefunden und geändert - vermutlich werde ich es noch alles auf % umstellen in den defintionen, damit ich die Größe variabel habe dann. Bis auf den Definitionsort für das Formular und die Buttons, mal sehn ob ich das finde.

Danke für Hilfe und Zeit !

[cyberman]

Bis auf den Definitionsort für das Formular und die Buttons, mal sehn ob ich das finde.

Möglicherweise sind dafür noch keine Definitionen in den stylesheets vorhanden, d.h. du müsstest sie erst hinzufügen ...

PS: Für die Gestaltung von Webseiten ist Firefox mit der WebDeveloper Extension unschlagbar .

[myrrrdin]

Jupp .... hmmm ... nur wo :-] Ich kann das Contactformular in seiner ursprünglichen FOrmatierung, im style unformatieren direkt in der Zeile, wo ich das Formular definiere. Nur dann zerhaut es mir die gesamte Formularformatierung weil die gesamte Formatierung weg ist - dann hab ich zwar meine jetzt geänderte Verdana 11 Pixel Schrift aber auch ein Formular das nicht mehr übereinander angeordnet ist sondern nebeneinander.

Extension hab ich ....

Und mein Button Problem ist nicht gelöst ..... aber Dein Gedanke ist gut, ich komm weiter mit meinem Problem .....
Hier ist auch mehr dazu - mal sehen wo ich das dann einfüge ... ich komm hier nicht weiter ....
http://www.css4you.de/Schrifteigenschaften/font.html

Gruß aus Esens an der Nordse nach ....
Klaus-Dieter Hinck

[cyberman]

Du kannst auch direkt im Quellcode nachschauen, welche Klassen und IDs den einzelnen Elementen zugeordnet sind ...

[myrrrdin]

... ja hast recht - bin aber nicht weitergekommen .. .danke dennoch ... cu

[dowoam]

Hallo,
du arbeitest ja hier an vielen Baustellen auf einmal.
Ich wollte mal das grundsätzliche css versuchen zu erklären.

Stell dir das vor, wie eine große Box, in der viele andere kleine Boxen drin sind.
Wenn du der großen jetzt eine Farbe gibst, dann erhalten alle darin die selbe Farbe, es sei den du weißt einer kleinen explizit eine ander Farbe zu. Das gilt natürlich für alle Formatierungen, die den Ihnalt der Boxen betreffen.
Schriftfarbe: Color, Schriftgröße: font-size, Schriftform: font-family,...
Also CSS vererbt die Eigenschaften in die Tochterelemente.

Wenn du jetzt Modulelement wie das Kontaktformular ändern möchtest, dann kannst du das tun indem du im Quellcode schaust, wie diese Elemente klassifiziert sind. Also welche class="" oder id="" sie haben. Also im Quelltext deiner Seite, die im Browser dargestellt wird.
Du mußt dann das Standartsylesheet der Elemente ändern, oder löschen. (auskommentieren z.b. .... -->)
Dann die einzelnen Klassen in einem neuen Stylesheet neu formatieren.
Möglicherweise mußt du im Template für einzelne DInge wie Submitbutton oder so noch Klassen einfügen.

Ein Beispiel der veränderten Module findest du hier:
http://www.xn--bbm-webdesign-dsseldorf-qpc.de/

hier ist das Stylesheet:
http://www.xn--bbm-webdesign-dsseldorf-qpc.de/stylesheet.php?cssid=44&

Search und Kontaktformular sind umgeschrieben.

Also das ist alles ein wenig viel auf einmal. Wenn du mir mal deine url schickst (PM oder mail), kann ich aber Montag mal draufschauen und dir ein wenig helfen.


Gruß

Dirk