Kategorie Plugin modifizieren

Chrissi · Post by **Chrissi** » Tue Oct 11, 2005 2:03 pm

Hallo zusammen, ich habe eine kleine Änderung des Kategrorie Plugins vor. Ich möchte das die Kategorie in der ich mich gerade befinde in der Liste der Kategorien hervorgehoben wird. Zum Beispiel nicht mehr unterstrichen ist und ein bisschen dicker! Wie kann ich dieses Vorhaben umsetzen?

Grüsse

Post by **garvinhicking** » Tue Oct 11, 2005 4:03 pm

Am einfachsten ist das, wenn Du Serendipity 0.9-beta2 benutzt (aktuelle nightlies). Da unterstützt das categories plugin nämlich die möglichkeit durch Smarty modifizierbar zu sein (per konfiguration aktiv).

Dann kannst Du die plugins_categories.tpl des templatefolders (von default/ in dein template kopieren) ändern

Nämlich von folgendem code:

Code: Select all

<a href="{$category.categoryURL}" title="{$category.category_description|escape}" style="padding-left: {$category.paddingPx}px">{$category.category_name|escape}</a>

in folgendes:

Code: Select all

<a {if $category.categoryid == $category_info.categoryid}class="category_active"{/if} href="{$category.categoryURL}" title="{$category.category_description|escape}" style="padding-left: {$category.paddingPx}px">{$category.category_name|escape}</a>

Mit einer neuen CSS klasse "category_active" kannst Du dann den Look modifzieren.

Mit Serendipity 0.8 würde es komplizierter, da müsstest du das categories plugin modifzieren per PHP/HTML code.

Grüße,
Garvin

Chrissi · Post by **Chrissi** » Tue Oct 11, 2005 5:20 pm

Leider handelt es sich um die Version 0.8 und eine Aktuallisierung ist auch nicht möglich! Kannst du mir die Schritte für diese Version erläutern? Vielen Dank!

Grüsse

Post by **garvinhicking** » Tue Oct 11, 2005 6:11 pm

Ja, ganz grob:

1. Die Datei include/plugins_internal.inc.php mit einem Editor öffnen.
2. Die class "serendipity_categories_plugin" suchen.
3. Folgende Codezeile suchen:

Code: Select all

              $html .= '<a href="'. serendipity_rewriteURL(PATH_CATEGORIES . '/' . serendipity_makePermalink(PERM_CATEGORIES, array('id' => $cat['categoryid'], 'title' => $cat['category_name'])), 'serendipityHTTPPath') .'" title="'. htmlspecialchars($cat['category_description']) .'" style="padding-left: '. $cat['depth']*6 .'px">'. htmlspecialchars($cat['category_name']) .'</a>';

Das abändern in:

Code: Select all

              $html .= '<a ' . ($serendipity['GET']['category'] == $cat['categoryid'] ? 'class="categories_active"' : '') . ' href="'. serendipity_rewriteURL(PATH_CATEGORIES . '/' . serendipity_makePermalink(PERM_CATEGORIES, array('id' => $cat['categoryid'], 'title' => $cat['category_name'])), 'serendipityHTTPPath') .'" title="'. htmlspecialchars($cat['category_description']) .'" style="padding-left: '. $cat['depth']*6 .'px">'. htmlspecialchars($cat['category_name']) .'</a>';

4. Die style.css Deines Templates öffnen. Am Ende folgendes einfügen:

Code: Select all

a.categories_active {
  text-decoration: none;
  border: 0px;
  font-weight: bold;
}

Viele Grüße,
Garvin

Guest · Post by **Guest** » Tue Oct 11, 2005 8:01 pm

Hey Garvin, du bist genial! Es funktioniert, jippi! Aber ich hätte noch einen kleinen Änderungswunsch! Ist es möglich den Link zu entfernen, damit man wenn man in der Kategorie ist nicht mehr auf den Link der Kategorie klicken kann?

Grüsse

Post by **garvinhicking** » Tue Oct 11, 2005 9:58 pm

Klar, dass kannst Du auch mittels PHP und IF-Abfragen lösen:

Code: Select all

if ($serendipity['GET']['category'] != $cat['categoryid']) {
    $html .= '<a href="'. serendipity_rewriteURL(PATH_CATEGORIES . '/' . serendipity_makePermalink(PERM_CATEGORIES, array('id' => $cat['categoryid'], 'title' => $cat['category_name'])), 'serendipityHTTPPath') .'" title="'. htmlspecialchars($cat['category_description']) .'" style="padding-left: '. $cat['depth']*6 .'px">';
} else {
    $html .= '<div class="categories_active">';
}

echo htmlspecialchars($cat['category_name']);

if ($serendipity['GET']['category'] != $cat['categoryid']) {
    $html .= '</a>';
} else {
    $html .= '</div>';
}

Chrissi · Post by **Chrissi** » Wed Oct 19, 2005 4:02 pm

Hi, ich möchte das selbe auch für das Archiv Plugin machen! Wo sind hier die Änderungen zu tätigen?

Gruß

Post by **garvinhicking** » Wed Oct 19, 2005 4:44 pm

Das ist leider etwas schwieriger, weil man da eine Menge mit Timestamps hantieren muss. Das Plugin befindet sich in der include/plugins_internal.inc.php Datei, als serendipity_archives_plugin.

Die Variablen die Du prüfen musst ist $serendipity['range'] und dann gucken ob dieser Timestamp in dem Bereich liegt, der für einen Monat ausgegeben wird.

Grüße,
Garvin

Chrissi · Post by **Chrissi** » Mon Oct 24, 2005 3:06 pm

Hi, unser Grafiker hat die css nach seinen Vorstellungen angepasst. Leider sind wir Ratlos warum jetzt das oben beschriebene Problem mit den Kategorien nicht mehr funktioniert. Hier die aktuelle css:

Code: Select all

h4,h3 {
    margin: 0;
}
div.serendipity_freetag_taglist {
background-color: #ffe5cd;
border: 1px solid #ff8415;
padding: 5px;
color: #000;
}
.serendipity_freetag_taglist a {
color: #000000;

}
.serendipity_freetag_taglist a:hover {
color: #ff8415;
}

.serendipity_freeTag {
color: #000;
text-align: right;

}

div.serendipity_freeTag a, a:visited, a:active{
text-decoration: underline;
color: #000;

}
div.serendipity_freeTag a:hover {
text-decoration: underline;
color: #ff8415;

}

div.container_serendipity_plugin_freetag {
width: 170px;
}
a.container_serendipity_plugin_freetag {
text-transform: lowercase;
}
.serendipitySideBarContent input {
 	vertical-align: middle;
}
serendipity_center serendipity_msg_important {
text-align: center;
color: ff0000;
}

.serendipitySideBarContent {
    width: 150px;
    margin-left: 10px;
	margin-right: 10px;
}
.serendipitySideBarContent a:link, a:visited {
color: #465D73;
}
.serendipitySideBarContent a:active, a:hover {
color: #ff8415;
}
#mainpane {
    line-height: 100%;
	height: 100%;
    text-align: left;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #FFFFFF;
    margin: auto;
}

#content {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

#serendipityRightSideBar {
    width: 180px;
    padding: 10px;
    background-color: #ffffff;
    vertical-align: top;
}

#serendipityLeftSideBar {
    width: 170px;
}

body {
	margin: 0px 0px 20px 0px;
	background-color: #DBDAD6;
	
}

input, textarea {
    font-size: x-small;
    font-family: verdana, arial, helvetica, sans-serif;
}

th, td {
    font-size: 11px;
}

p, td, th, div, span, a {
    font-family: verdana, arial, helvetica, sans-serif;
	color: #000;
}

#serendipity_banner {
    font-family: Verdana, Arial, sans-serif;
    color: #FFFFFF;
    text-align: left;
    border-bottom: 1px solid #FFFFFF;
    width: 100%;
	height: 46px;
    margin: auto;
}

a.homelink1,
a.homelink1:hover,
a.homelink1:link,
a.homelink1:visited,
#serendipity_banner h1 {
    color: #ffffff;
    font-size: xx-large;
    font-weight: normal;
    padding-left: 5px;
    padding-top: 5px;
    margin: 0px;
    text-decoration: none;
}

a.homelink2,
a.homelink2:hover,
a.homelink2:link,
a.homelink2:visited,
#serendipity_banner h2 {
    color: #FFFFFF;
    padding-left: 5px;
    font-size: 11px;
    font-weight: normal;
    margin: 0px;
    text-decoration: none;
}

.serendipity_title {
    color: #333;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 11px;
    text-align: left;
    font-weight: bold;
}

.serendipity_title a:link {
    color: #333;
    text-decoration: none;
}

.serendipity_title a:visited {
    color: #333;
    text-decoration: none;
}

.serendipity_title a:hover {
    color: #333;
    text-decoration: none;
}

.serendipity_entry {
    padding: 15px 15px 5px 0px;
    background-color: #FFFFFF;
    color: #666666;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 11px;
    clear:both;
}

.serendipity_entry_body_folded,
.serendipity_entry_body_unfolded,
.serendipity_entry_extended {
    /* Inner blocks of .serendipity_entry, can be used for further customization */
}
.serendipity_entry_body {
vertical-align: top;

}

div.serendipity_Entry_Date {
    padding-left: 15px;
    width: auto;
}


.serendipity_date {
    color: #666666;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 11px;
    text-align: left;
    font-weight: bold;
    margin-bottom: 10px;
}

.serendipity_commentsTitle {
    font-family: Tahoma, Verdana, sans-serif;
    display: block;
    width: 100%;
    color: #666666;
    font-size: 11px;
    font-weight: bold;
}

div.serendipity_entryFooter {
    color: #999999;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: x-small;
    border-top: 1px solid #999999;
    text-align: left;
    margin-bottom: 25px;
    line-height: normal;
    padding: 3px;

}

img.serendipity_entryIcon {
    float: right;
    border: 0px;
}

img.serendipity_entryIcon {
    float: right;
    border: 0px;
}

td.serendipity_commentsValue input,
td.serendipity_commentsValue select,
td.serendipity_commentsValue textarea {
    width: 95%;
    border: 1px solid #999999;
    padding: 2px;
}


td.serendipity_commentsLabel {
    font-size: x-small;
    font-weight: bold;
    vertical-align: top;
}

.serendipity_commentForm {
    font-size:x-small;
    color: #666666;
    margin-bottom: 13px;
    margin-right: 10px;
    margin-left: 10px;
    background-color: #FFFFFF;
}
.serendipity_comment {
    font-size: x-small;
    margin-right: 10px;
    margin-left: 10px;
    color: #666666;
    padding: 3px;
    background-color: #FFFFFF;
    border-right: 1px dotted #BBB;
    border-left: 1px dotted #BBB;
    margin-bottom: 10px;
    overflow: auto;
}

.serendipity_comment_source {
    margin-top: 5px;
    padding-left: 5px;
    margin-bottom: 5px;
}

td.serendipity_admin {
    padding: 10px;
}


table.serendipity_calendar td {
    font-size: x-small;
    padding: 3px;
    text-align: center;
}
table.serendipity_calendar a {
    font-weight: bold;
    text-decoration: underline;
}

table.serendipity_calendar a:hover {
    text-decoration: none;
}

td.serendipity_weekDayName {
    font-size: x-small;
    font-weight:bold;
}
td.serendipity_calendarHeader a:link,
td.serendipity_calendarHeader a:visited,
td.serendipity_calendarHeader a:hover {
    border: 0;
    text-decoration: none;
}
div.serendipityPlug, div.serendipityPlug a {
    font-size: 11px;
    text-decoration: none;
    border: 0px;
    text-align: center;
}

/* Container for each item on the side bar */
div.serendipitySideBarItem {
    width: 170px;
    vertical-align: top;
    background-color: #e3f0fb;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

div.serendipitySideBarItem a {
	color: #465D73;
	font-weight: bold;
	text-transform: uppercase;	
}
div.serendipitySideBarItem a:hover {
	color: #ff8415;
	text-transform: uppercase;	
}
div.serendipitySideBarItem a:active {
	color: #ff8415;
	text-transform: uppercase;	
}
div.serendipitySideBarItem a:visited {
	color: #465D73;
	text-transform: uppercase;	
}
.categories_active {
    text-decoration: none;
	color: #ff8415;
	text-transform: uppercase;
}

/* title of an individual item */
.serendipitySideBarTitle {
	background: #3d779d;
	height: 16px;
    color: #fff;
    font-family: Tahoma;
    font-size: 11px;
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
	padding-right: 10px;
	padding-left: 10px;
	margin-bottom: 3px;	
}

.serendipityImageButton {
    cursor: pointer;
}

td.serendipitySideBar {
    font-size: x-small;
    width: 200px;
    padding: 10px;
}

div.serendipity_admin_title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 12px;
}

div.serendipity_admin_list_title {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px;
}

td.serendipity_admin_list_item {
    padding: 15px;
    border: dashed 1px #000000;
}

.serendipity_entry p {
    margin: 0px;
    padding-bottom: 10px;
}

/** Embedded images with the s9y image manager **/
.serendipity_imageComment_center,
.serendipity_imageComment_left,
.serendipity_imageComment_right {
    border: 1px solid black;
    background-color: #fff;
	padding: 5px;
    margin: 3px;
}

.serendipity_imageComment_center {
    margin: 0px;
}

.serendipity_imageComment_left {
    float: left;
}

.serendipity_imageComment_right {
    float: right;
}

.serendipity_imageComment_img,
.serendipity_imageComment_img img {
    margin: 0px;
    padding: 0px;
    border: 0px;
    text-align: center;
}

.serendipity_imageComment_txt {
    margin: 0px;
    padding: 3px;
    clear: both;
    font-size: 10px;
    text-align: center;
}

.serendipity_admin_list_item_even {
    background-color: #ffffff;
}

.serendipity_admin_list_item_uneven {
    background-color: #E0E0E0;
}
.serendipity_admin_filters {
    border: 1px dashed;
    background-color: #FFFFFF;
    font-size: 11px;
    margin-bottom: 10px;
    padding: 2px;
}

.serendipity_admin_filters_headline {
    border-bottom: 1px solid;
}

.serendipity_admin_sortorder {
    font-size: 11px;
    text-align: center;
}

.serendipity_admin_sortorder input,
.serendipity_admin_sortorder select,
.serendipity_admin_filters input,
.serendipity_admin_filters select {
    font-size: 11px;
}

.serendipity_center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.serendipity_entry_author_self {
}

.serendipity_comment_author_self {
    background-color: #f5f5f5;
}

.weiss_unten{
		color: white; 
		}
.weiss_unten a {
		color: white; 
		}
a.categories_active {
  text-decoration: none;
  border: 0px;
  font-weight: bold;
}

Post by **garvinhicking** » Mon Oct 24, 2005 3:56 pm

Mit dem CSS kann ich so leider nichts anfangen, ich bräuchte die URL zu diesem Blog um mir das anzusehen, plus eine Beschreibung was jetzt genau nicht (mehr) klappt...

Viele Grüße,
Garvin

Chrissi · Post by **Chrissi** » Tue Oct 25, 2005 2:15 pm

Leider kann ich dir keine URL geben da der Blog noch nicht online ist! Also hier noch einmal das Problem:
(1) Ich habe die Anpassungen in der plugin Datei gemacht.
(2) Ich habe die css durch folgenden Code erweitert:

Code: Select all

a.categories_active {
  text-decoration: none;
  border: 0px;
  font-weight: bold;
}

So nun habe ich den Effekt das wenn man auf die Kategorie klickt diese nicht mehr unterstrichen wird was auch das gewünschte Ziel ist. Jedoch ist das die einzigste Änderung die funktioniert. Laut dem css Eintrag sollte die aktive Kategorie ja auch noch "bold" sein. Da wir das Ziel haben die gewüschte Kategorie auch farblich anders darzustellen bräuchte ich noch einmal deine Hilfe. Wenn ich folgendes in die css schreibe

Code: Select all

a.categories_active {
  text-decoration: none;
  border: 0px;
  font-weight: bold;
  color: #ff0000;
}

ist der einzige sichtbare Effekt das die aktive Kategorie nicht mehr unterstrichen wird. Sie sollte ja aber laut dieser Definition auch Rot sein. Also wird die Anweisung durch irgend etwas noch überschrieben oder deaktiviert. Leider hab ich keine Ahnung was das sein könnte. Die aktuelle css ist die oben geschriebene.

Gruß

Post by **garvinhicking** » Tue Oct 25, 2005 2:39 pm

Änder das CSS einfach mal in

Code: Select all

a.categories_active {
  text-decoration: none !important;
  border: 0px;
  font-weight: bold !important;
  color: #ff0000 !important;
}

und achte darauf, dass das CSS ganz am Ende steht.

Viele Grüße,
Garvin

Chrissi · Post by **Chrissi** » Tue Oct 25, 2005 3:00 pm

Danke für die schnelle Antwort, leider ist die Änderung ohne Erfolg.

Post by **garvinhicking** » Tue Oct 25, 2005 3:07 pm

Dann muss ich wohl leider warten, bis Du die URL öffentlich machst, oder mir mal eine Dummyseite als volle HTML-Seite mit CSS und Grafiken (Firefox kann das) speicherst und verlinkst.

Grüße,
Garvin

Kategorie Plugin modifizieren

Kategorie Plugin modifizieren

Re: Kategorie Plugin modifizieren