Forum

[Manfred]

Hallo,

würde gerne meine Navi Leiste so einstellen, wenn man mit der Maus drüber fährt das sich der Hintergrund in verschiedenen Farben darstellt wie auf der Redaxo Seite.
Ist das mit dem Demo Template möglich bzw. darf ich das Überhaupt?

Wenn ja, wie könnte ich das umsetzen? Könnte mir da einer eine Tip geben?

Gruß

Manfred

[Thomas.Blum]

Hej,

Ist das mit dem Demo Template möglich bzw. darf ich das Überhaupt?

Es ist möglich, zumindest wenn du einiges zusätzlich programmierst. Wie meinst du das mit dem dürfen? Hast du rechtliche Bedenken?

Wenn ja, wie könnte ich das umsetzen? Könnte mir da einer eine Tip geben?

Gebe jeden li-Tag eine eigene Klasse und schon hast die Grundlage dafür.


vg Thomas

[Manfred]

Hallo,
ja dachte aus rechtlichen Gründen.

Könntest du mir mal ein Beispiel zeigen wie ich das machen müsste, wäre super nett , ausser es ist zu viel Aufwand.

Gruß und Danke für die schnelle Antwort.

Manfred

[Thomas.Blum]

HEj,

ein Beispiel?

html
<ul>
<li id="link1">Text 1</li>
<li id="link2">Text 2</li>
<li id="link3">Text 3</li>
</ul>

css
#link1 {color:#f90;}
#link2 {color:#f00;}
#link3 {color:#000;}

vg Thomas

[Manfred]

Hallo,

ich glaube da bin ich ein bisschen zu schlecht um das bei mir Einzubinden

Weis leider nicht Wie,Wer,Wo, Was

Muss ich das in das Template (Demo-Template) und in die main.css einbinden?

Kleinen Tip bitte

Tut mir leider das ich so Planlos bin

Gruß

Manfred

[Thomas.Blum]

Hej,

wenn du das für die Navigation brauchst, musst du das in dem Navi-Template einbauen und dann in der CSS-Datei "main.css" entsprechend formatieren.

vg Thomas

[Thomas.Blum]

Hej Manfred,

am einfachsten ist es dabei die ID des Artikels zu benutzen.

Code: Alles auswählen

if ($lev1->getId() == $path1) {
   $navHeader .= '<li id="link'.$lev1->getId().'" class="active"><a class="current" href="'.$lev1->getUrl().'">'.$lev1->getName().'</a>';
}
// 2nd level - no active link
else {
   $navHeader .= '<li id="link'.$lev1->getId().'"><a href="'.$lev1->getUrl().'">'.$lev1->getName().'</a>';
}

Jetzt kann du jeden navi-link via #link1 bzw. #linkARTICLE-ID per CSS ansprechen.

also in der main.css
#link1 a {color:#f90;} für den Navilink mit der Id 1.

vg Thomas

vg Thomas

[Manfred]

Hallo Thomas,

weis leider nicht wie ich das in dieses Template einbinden kann.

<?php
// EXPLODE PATH
$PATH = explode("|",$this->getValue("path").$this->getValue("article_id")."|");

// GET CURRENTS
$path1 = $PATH[1];
$path2 = $PATH[2];
$path3 = $PATH[3];


/* START 1st level categories */
$navLeftCol .= '<ul class="nav1st">';
foreach (OOCategory::getRootCategories() as $lev1) {

if ($lev1->isOnline(true)):
if ($lev1->getId() == $path1) {
$navLeftCol .= '<li class="active"><a class="current" href="'.$lev1->getUrl().'">'.$lev1->getName().'</a>';
if ($lev1->getId() != "1") {
$sitePath .= ' ›› <a href="'.$lev1->getUrl().'">'.$lev1->getName().'</a>';
}
$titlePath .= ' >> '.$lev1->getName();
}
// 2nd level - no active link
else {
$navLeftCol .= '<li><a href="'.$lev1->getUrl().'">'.$lev1->getName().'</a>';
}

// 1st level had categories? -> go on
$lev1Size = sizeof($lev1->getChildren());

if ($lev1->getId() == $path1) {
if ($lev1Size != "0") {
$navLeftCol .= '<ul class="nav2nd">';

// START 2nd level categories
foreach ($lev1->getChildren() as $lev2):
if ($lev2->isOnline(true)) {
// 2nd level - active link
if ($lev2->getId() == $path2) {
$navLeftCol .= '<li class="active"><a class="current" href="'.$lev2->getUrl().'">'.$lev2->getName().'</a>';
$sitePath .= ' ›› <a href="'.$lev2->getUrl().'">'.$lev2->getName().'</a>';
$titlePath .= ' >> '.$lev2->getName();
}
// 2nd level - no active link
else {
$navLeftCol .= '<li><a href="'.$lev2->getUrl().'">'.$lev2->getName().'</a>';
}

// 2nd level had categories? -> go on
$lev2Size = sizeof($lev2->getChildren());

if ($lev2->getId() == $path2) {
if ($lev2Size != "0") {
$navLeftCol .= '<ul class="nav3rd">';

// START 3rd level categories
foreach ($lev2->getChildren() as $lev3):
if ($lev3->isOnline(true)) {
// 3rd level - active link
if ($lev3->getId() == $path3) {
$navLeftCol .= '<li class="active"><a class="current" href="'.$lev3->getUrl().'">'.$lev3->getName().'</a></li>';
$sitePath .= ' ›› <a href="'.$lev3->getUrl().'">'.$lev3->getName().'</a>';
$titlePath .= ' >> '.$lev3->getName();
}
// 3rd level - no active link
else {
$navLeftCol .= '<li><a href="'.$lev3->getUrl().'">'.$lev3->getName().'</a></li>';
}
}
endforeach;
// END 3rd level categories

$navLeftCol .= '</ul>';
} // END by if ($lev2Size != "0"):
}
$navLeftCol .= '</li>';
}
endforeach;
// END 2nd level categories

$navLeftCol .= '</ul>';
} // END by if ($lev1Size != "0"):
}
$navLeftCol .= '</li>';

endif; // END by if ($lev1->isOnline())
}
$navLeftCol .= '</ul>';
// END 1st level categories

if ($REX['CUR_CLANG'] == 1) $breadcrumb = 'You are here ›› <a href="index.php?clang=1">Home</a> '.$sitePath;
else $breadcrumb = 'Sie sind hier ›› <a href="index.php">Startseite</a> '.$sitePath;

// print $navLeftCol;
?>

Kannst mir nochmals Helfen (Bittttte), ich hoffe ich Nerve dich nicht

Gruß

Manfred

[Gast]

Hallo Thomas,

weis leider nicht wie ich das in dieses Template einbinden kann.

<?php
// EXPLODE PATH
$PATH = explode("|",$this->getValue("path").$this->getValue("article_id")."|");

// GET CURRENTS
$path1 = $PATH[1];
$path2 = $PATH[2];
$path3 = $PATH[3];


/* START 1st level categories */
$navLeftCol .= '<ul class="nav1st">';
foreach (OOCategory::getRootCategories() as $lev1) {

if ($lev1->isOnline(true)):
if ($lev1->getId() == $path1) {
$navLeftCol .= '<li class="active"><a class="current" href="'.$lev1->getUrl().'">'.$lev1->getName().'</a>';
if ($lev1->getId() != "1") {
$sitePath .= ' ›› <a href="'.$lev1->getUrl().'">'.$lev1->getName().'</a>';
}
$titlePath .= ' >> '.$lev1->getName();
}
// 2nd level - no active link
else {
$navLeftCol .= '<li><a href="'.$lev1->getUrl().'">'.$lev1->getName().'</a>';
}

// 1st level had categories? -> go on
$lev1Size = sizeof($lev1->getChildren());

if ($lev1->getId() == $path1) {
if ($lev1Size != "0") {
$navLeftCol .= '<ul class="nav2nd">';

// START 2nd level categories
foreach ($lev1->getChildren() as $lev2):
if ($lev2->isOnline(true)) {
// 2nd level - active link
if ($lev2->getId() == $path2) {
$navLeftCol .= '<li class="active"><a class="current" href="'.$lev2->getUrl().'">'.$lev2->getName().'</a>';
$sitePath .= ' ›› <a href="'.$lev2->getUrl().'">'.$lev2->getName().'</a>';
$titlePath .= ' >> '.$lev2->getName();
}
// 2nd level - no active link
else {
$navLeftCol .= '<li><a href="'.$lev2->getUrl().'">'.$lev2->getName().'</a>';
}

// 2nd level had categories? -> go on
$lev2Size = sizeof($lev2->getChildren());

if ($lev2->getId() == $path2) {
if ($lev2Size != "0") {
$navLeftCol .= '<ul class="nav3rd">';

// START 3rd level categories
foreach ($lev2->getChildren() as $lev3):
if ($lev3->isOnline(true)) {
// 3rd level - active link
if ($lev3->getId() == $path3) {
$navLeftCol .= '<li class="active"><a class="current" href="'.$lev3->getUrl().'">'.$lev3->getName().'</a></li>';
$sitePath .= ' ›› <a href="'.$lev3->getUrl().'">'.$lev3->getName().'</a>';
$titlePath .= ' >> '.$lev3->getName();
}
// 3rd level - no active link
else {
$navLeftCol .= '<li><a href="'.$lev3->getUrl().'">'.$lev3->getName().'</a></li>';
}
}
endforeach;
// END 3rd level categories

$navLeftCol .= '</ul>';
} // END by if ($lev2Size != "0"):
}
$navLeftCol .= '</li>';
}
endforeach;
// END 2nd level categories

$navLeftCol .= '</ul>';
} // END by if ($lev1Size != "0"):
}
$navLeftCol .= '</li>';

endif; // END by if ($lev1->isOnline())
}
$navLeftCol .= '</ul>';
// END 1st level categories

if ($REX['CUR_CLANG'] == 1) $breadcrumb = 'You are here ›› <a href="index.php?clang=1">Home</a> '.$sitePath;
else $breadcrumb = 'Sie sind hier ›› <a href="index.php">Startseite</a> '.$sitePath;

// print $navLeftCol;
?>

Kannst mir nochmals Helfen (Bittttte), ich hoffe ich Nerve dich nicht

Gruß

Manfred

Hier noch meine main.css


/* undo
*******************************************************************************/

:link,:visited { text-decoration:none; }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; font-weight:normal; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input, dl, dt, dd { margin:0; padding:0 }
img, a img,:link img,:visited img, fieldset { border:none }
img { margin:0; padding:0; vertical-align:bottom; }
address { font-style:normal }

table { border:none; padding:0px; margin:0px; border-spacing:0px; font-size:1em;}
tr { border:none; padding:0px; margin:0px; }
td { border:none; padding:0px; margin:0px; vertical-align:top; border-spacing:0px; }


legend { display:none; }

body, div,p,li { background-repeat:no-repeat; }

/* reset some basic style
*******************************************************************************/
dl {margin: 0 0 0 0;}
dl dt {margin: 0 0 0 0;}
dl dd+dt {margin-top: 0;}
dl dd {margin: 0 0 0 0;}

ol {list-style: none;}
ol li {margin: 0 0 0 0;}
ol li ol {margin: 0 0 0 0;}
ol li ul {margin: 0 0 0 0;}

p {margin-bottom: 0em;}

ul {list-style: none;}
ul li {margin: 0 0 0 0;}
ul li ul {margin: 0 0 0 0; list-style: none;}
ul li ol {margin: 0 0 0 0;}

pre {font-size:1.2em; }

a:hover { text-decoration:none; }

/* html
*******************************************************************************/
html {
min-height: 100%;
margin-bottom: 1px;
}

/* body
*******************************************************************************/
body {
background-color:#ffffff;
background-image:url(bg_body.jpg);
font-family:verdana, arial, helvetica, sans-serif;
font-size: xx-small;
voice-family: ""}"";
voice-family: inherit;
font-size: x-small;
}

.clearer {
display:block;
clear:both;
line-height:0;
height:1px;
font-size:0;
visibility:hidden;
}

.clear {
clear:both;
}

.flLeft { float:left; }
.flRight { float:right; }

.warning { color:#f00; }


/* website
*******************************************************************************/
#website {
position:relative;
display:block;
margin:0;
padding:0;
height:100%;
width:100%;
color:#000;
text-align:justify;
}

/* header
*******************************************************************************/
#header {
position:relative;
margin:0;
padding:0;
height:130px;
background-image:url(ba_start.jpg);
}


/* content
*******************************************************************************/


#content, #content2 {
display:block;
clear:both;
position:relative;
padding:0 0 0 0;
}


/* hide from IE/MAC \*/
* html #content, * html #content2 {
height:1px;
}
/* end hide */


#content {}

#content2 {
background-image:url(bg__content.jpg);
background-repeat:repeat-y;
}

#main {
float:left;
width:70%;
}

#main-block {}

#main-block2 {
padding:20px;
}


/* Navigation vertical -
Wenn die Navigation mit der ID 3 verwendet wird, kann alles bis
zum nächsten Kommentar gelöscht werden
------------------------------------------------------------------------------*/
#navigation {
float:left;
width:200px;
padding:14px 0;
}

#navigation ul.nav1st {
width:170px;
}


#navigation ul.nav1st li {
padding:8px 0 8px 14px;
}

#navigation ul.nav1st li.active {
background:#dcdcdc;
}

#navigation ul.nav1st li.active a,
#navigation ul.nav1st li.active a:link {
color:#000000;
}

#navigation ul.nav1st a,
#navigation ul.nav1st a:link {
display:block;
color:#808080;
font-size:1.2em;
font-weight:bold;
}

#navigation ul.nav1st a:hover {
color:#000000;
}


#navigation ul.nav1st li ul.nav2nd li {
padding:0;
margin-left:14px;
list-style-type:square;
}

#navigation ul.nav2nd a,
#navigation ul.nav2nd a:link {
display:block;
padding:4px 0 4px 0;
font-size:1.1em;
font-weight:normal;
}

#navigation ul.nav2nd a.current,
#navigation ul.nav2nd a.current:link,
#navigation ul.nav2nd a:hover {
text-decoration:underline;
}


/* Headlines
------------------------------------------------------------------------------*/

/* Headline 1 */
#main-block h1 {
color:#005572;
font-family:arial, helvetica, verdana, sans-serif;
font-size:1.7em;
font-weight:bold;
line-height:1.8em;
}

#main-block .teaser h1 {
font-size:1.4em;
}

/* Headline 2 */
#main-block h2 {
color:#000;
font-family:arial, helvetica, verdana, sans-serif;
font-size:1.4em;
font-weight:bold;
line-height:1.4em;
}


/* Paragraphs / Lists
------------------------------------------------------------------------------*/
#main-block p,
#main-block ul,
#main-block ol {
margin-bottom:1.2em;
font-size:1.2em;
line-height:1.6em;
}
#main-block ul li ul,
#main-block ul li ol,
#main-block ol li ol,
#main-block ol li ul {
font-size:1em;
}

#main-block ul {
margin-left:14px;
list-style-type:square;
}

#main-block ol {
list-style-type:decimal-leading-zero;
}


/* Hyperlinks
------------------------------------------------------------------------------*/
#main-block a, #main-block a:link {
color:#005572;
text-decoration:underline;
}

#main-block a:hover {
color:#000;
}



/* Images
------------------------------------------------------------------------------*/
#main-block div.image {
margin-bottom:0;
}
#main-block div.image p {
margin:0;
font-size:0.9em;
}
#main-block div.flLeft {
margin-right:14px;
}
#main-block div.flRight {
margin-left:14px;
}

[Thomas.Blum]

Hej,

schaue dir den obigen Code an und vergleiche. Das ist nicht schwer und sollte dich auch zum gewünschten Erfolg bringen.

vg Thomas

[Manfred]

Hallo Thomas,

ich bin leider zu dumm (bzw. noch nicht so weit) trozdem vielen Dank für deine Geduld und Hilfe.


Gruß

Manfred