dons testblog

in eigener sache möchte ich mich einfach mal bei flavour und tanya bedanken!

 

einerseits für die fragen, deren beantwortung immer wieder aus meinen hirnwindungen html-buchstabensuppe macht, andererseits für die hilfreichen lösungsansätze oder komplettlösungen in form eines metaphorischen nudelsiebes. :)

 

da meine bemühungen mit diesem blog hier mehr traffic verursachen, als mein eigener blog, sehe ich, dass es sich gelohnt hat.

 

und wer meinem weinenden auge die tränen abstellen und gern auch mal herzlich lachen will: http://donjermas.kulando.de . danke :)

 

also bis neulich,

euer don

halloooo und mahlzeit!

 

da flavour nicht nur lösungen sondern auch fragen parat hat, hab ich mich nicht nur der lösung bedient, sondern auch ihrer frage angenommen. diese lautet:

 

na, da schauen wir uns doch mal den code in den verschiedenen templates an. da flavour praktischerweise das selbe design benutzt, wie ich hier im testblog, sollte die lösung nach dem basteln hier direkt übernommen werden können. nachdem ich mir klar war, im "header.template" nicht fündig zu werden, suchte ich im "style.css" nach einträgen zum quellbezug der headergrafik. standardmäßig lautet die bezeichnung "top.jpg" und ist im "img" ordner des designs "connections" zu finden. im "style.css" fand ich den headercode auch recht schnell. auch den bezug auf die quelle habe ich gefunden. jedoch ist mir schleierhaft, wie ich an dieser stelle den code modifizieren muss, damit das bild auch als link fungiert. dabei fiel mir ein, dass der css code lediglich die optik bestimmt. also die maße, die position usw. ob man im css code nun das bild anweisen kann, ein link auf die hauptseite zu sein, weiß ich nicht. ich vermute es jedoch. das herauszufinden durch probieren dauert allerdings für einen unerfahrenen kerl wie mich zu lange.

 

daher habe ich google zu rate gezogen. schon allein ein guter suchbegriff hat mich einige minuten gekostet. wie soll man etwas googlen, vondem man nicht den leisesten schimmer hat? ich hab es dann mit "blog header als link" probiert und das fünfte ergebnis in der liste schien erfolgversprechend (quelle): blogheader auf startseite verlinken.

die quelle bezieht sich zwar auf wordpress blogs, jedoch werde ich jetzt mein glück hier versuchen. mehr als nicht funktionieren kann es schließlich nicht. :)

 

nach einigem rumexperimentieren habe ich folgenden code zurechtgebastelt.

 

im "header.template" habe ich folgendes zwischen <div id="header"> und <ul id="topnav"> eingefügt:

<h1 onclick="location.href='http://www.testbilder.kulando.de';">dons testblog</h1>

 

und im "style.css" bei den codezeilen für den header folgendes:

 

#header {
background:#fff url(img/top.grey.jpg) no-repeat;
height: 183px;
margin: 0 auto;
width: 760px;
padding:0;
border:#fc9 0px solid;
cursor: pointer;
}
#header h1 {
width: 00px;
height: 00px;
text-indent: -9999px;
overflow: hidden
background: #FFF url('img/top.grey.jpg') 0 0 no-repeat;
border: 1px;
cursor: pointer;
}

 

das ergebnis stellt mich noch nicht ganz zufrieden, bin aber an der lösung des problems dran.

 

UPDATE:

 

tanya hat die lösung parat. man muss sie halt erst fragen, ob sie es einem verrät. :)

alsooo... es ist einfacher, als ich es erst gedacht habe. im hier genutzten template (new connections) muss man im "header.template" eine zeile mit folgendem code eintragen:

 

<a href="http://testbilder.kulando.de"> <img src="http://www.kulando.de/templates/blog_11655/new_connections/img/top.grey.jpg"> </a>

 

die bunt eingefärbten stellen zeigen die variablen an, welche mit den entsprechenden daten gefüllt werden müssen. in diesem fall muss als linkziel (<a href=""> gibt das ziel an, in den " " wird die url angegeben) die korrekte eigene blogurl eingetippt werden. die quelle, von welcher das bild gezogen werden soll (<img src=""> ist die englische abkürzung für image source und bedeutet nichts anderes als "bild resource", also quelle), muss natürlich auch auf die stelle genau eingetippt werden. da alle bilddaten auf dem kulando server liegen und dort eine eindeutige url haben, kann man für jedes beliebige bild per rechtsklick und url herausbekommen. wichtig ist die nummer in der quellenangabe. sie ist die id-nr. für den blog. ist sie falsch, stimmt die quellurl nicht. im schlimmsten fall erwischt man ein bild von einem anderen bloger. die eigene blog id findet man wie folgt heraus.

dazu logt man sich - falls man es noch nicht getan hat - in seinen blog ein, klickt auf "kontrollzentrum" und dort auf "benutzereinstellungen". in diesem bereich findet man unter dem eingabefeld für die email die url, welche in der kulando-gemeinde auf die profilseite führt. die zahl in dieser url ist die blog-nummer oder auch benutzer-id. wie auch immer man sie nennen will.

 

kulando blog id (klick für großes bild)

hallo zusammen!

 

wer seine blogbeschreibung eingeschaltet hat, und das "textfeld" im header bearbeiten möchte, findet zum design "connections" die entsprechenden codezeilen im "style.css" template. am besten springt man per suchfunktion des browsers bis an die richtige stelle. suchbegriff sollte "#header #desc" (ich vermute "desc" steht für description).

 

#header #desc
{
font-weight:normal;
font-style:italic;
font-size:1em;
color:#B5C09D;
text-align:left;
margin:0;
padding:0px 10px 0px 20px;
}

 

dieser codeausschnitt sind die paar zeilen, in welchen ich meine blogbeschreibung für diesen blog hier bearbeitet habe. "font-style:" gibt hierbei die schriftart an, "font-size:" demnach die größe, "color:" die farbe (die farbcodestabellen kann man in einigen bildbearbeitungsprogrammen wie photoshop einsehen, oder aber man googlet nach tabellen), "text-align:" die ausrichtung und "padding:" ist für die rahmen des textfeldes. probiert bei den werten vor den "px" einfach etwas aus. vergesst natürlich nicht, vorsichtshalber eine sicherungskopie zu machen. dazu könnt ihr auch einfach den html code kopieren und in eine in eine txt datei in windows speichern. px steht übrigens für pixel, wie ich sicherlich richtig annehme. :)

erst mal dank an flavour, die mich darauf hinwies, eine faq kategorie zu erstellen. da die ja nicht undbedingt so ottonormalo sein wird, habe ich auch keinen ottonormalonamen dafür gefunden.

 

die kategorie soll für fragen der kulandoblogger herhalten. hier könnt ihr zu themen, die noch nicht existieren, fragen stellen.

 

bitte vor dem eröffnen in einer entsprechenden kategorie nachschauen, ob es dazu nicht schon ein thema gibt. die suchfunktion des blogs hier ist ebenfalls eine nicht zu unterschätzende hilfe auf der suche nach antworten. :)

 

so dann nur noch eine bitte: ich mache das hier nur nebenher. deshalb kann ich leider nicht alles auf einmal und nicht von heute auf morgen. danke für's verständnis!

 

gruß

don

 

PS: nein, ich will nicht auch noch ein forum betreuen. auch wenn das auf dauer etwas einfacher wäre. hat zum einen den grund, dass ich das forum dann auch noch betreuen müsste und zum anderen kann ich hier auf diesem blog nicht nur euch, sondern auch mir helfen. ich lerne beim suchen und helfen schließlich auch dazu.

auszuschließen ist es jedoch nicht. wenn sich jemand findet, der ein forum gut auf die beine stellen und betreuen kann und auch noch kulando blogger ist, sei er herzlich willkommen. :)

da es seit monaten probleme mit der einbindung von flickr badges bei kulando gibt und im forum niemand vom support hilfestellung gibt, nehme ich die sache auch mal in die hand. meine aktuellen versuche wurden im "panel.template" von diesem design (connections) vorgenommen. die bloginterne aktivierung des flickr badges und auch des flickr albums sind nicht möglich. der fehler liegt laut einer antwort im flickr forum bei kulando auf den servern. wir nutzer/blogger können dagegen als direkt nichts unternehmen. indirekt haben wir natürlich die möglichkeit, uns diese badges einzubauen.

 

vorab ist es natürlich von nöten, sich bei flickr.de anzumelden. da flickr zu yahoo gehört, sollte das mit einem evtl. bestehenden yahoo account bereits machbar sein. wenn man sich bei flickr eingelogt hat, kann man gerne diesen link hier klicken --> http://www.flickr.com/badge.gne. dieser link funktioniert nur, wenn man registriert und angemdelt ist. hinter dem link steckt eine kurze selbsterklärende einleitung, wie man sich sein flickr badge für den blog erstellen kann.

 

das flickr badge als html einzubauen, ist nicht ganz so kompliziert. dazu habe ich es einfach mal ausprobiert und den code des bei flickr erstellten badges hier eingefügt. wo? auch im "panel.template". ich habe mir gedacht, am besten macht es sich unter dem kalender. auch hier bekommt man eine verwirrende fehlermeldung vom blog an der stelle, wo profil, suche, kalender, kategorien usw. sein sollten. der code für ein auf flickr erstelltes badge sieht bei mir original so aus:

 

<!-- Start of Flickr Badge -->
<style type="text/css">
/*
Die Bilder sind in divs "flickr_badge" mit den IDs" flickr_badge_imageX" klassifiziert, wobei X ein Integer ist und die Position angibt. Sie finden unten einige Stilrichtungen.
*/
#flickr_badge_uber_wrapper {text-align:center; width:150px;}
#flickr_badge_wrapper {padding:10px 0 10px 0;}
.flickr_badge_image {margin:0 10px 10px 10px;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<div id="flickr_badge_uber_wrapper"><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><div id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=3&display=latest&size=s&layout=x&source=all_tag&tag=design"></script>
</div></div>
<!-- End of Flickr Badge -->

 

um den fehler zu vermeiden, habe ich einfach etwas herumexperimentiert. dabei fand ich heraus, welcher codeteil wichtig dafür ist, damit das badge überhaupt angezeigt wird. der code hierfür beschränkt sich auf die  fettgedruckten codezeilen im obigen abschnitt des codes. der fehler versteckt sich also irgendwo im kursiven teil des codes.

 

ich habe über meinen flickr account also versucht, das flickr flash badge einzubauen. und zwar wie oben erwähnt im "panel.template". hier habe ich es unter den kalender einfügen wollen. so sollte es dann auch im panel rechts auf dem blog erscheinen. der code scheint sich jedoch nicht einwandfrei mit dem templatecode zu verstehen. so hat es mir eine fehlermeldung rausgegeben, die man hier auf dem screenshot sehen kann.

 

 fehlerhaftes flickr badge

 

der dazugehörige code:

 

<!-- Start of Flickr Badge -->
<style type="text/css">
.zg_div {margin:0px 5px 5px 0px; width:117px;}
.zg_div_inner { color:#666666; text-align:center; font-family:arial, helvetica; font-size:11px;}
.zg_div a, .zg_div a:hover, .zg_div a:visited {color:#3993ff; background:inherit !important; text-decoration:none !important;}
</style>
<script type="text/javascript">
zg_insert_badge = function() {
var zg_bg_color = 'ffffff';
var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color=' zg_bg_color '&zg_tags=design&zg_tag_mode=any';
document.write('<iframe style="background-color:#' zg_bg_color '; border-color:#' zg_bg_color '; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="' zgi_url '" title="Flickr Badge"><\/iframe>');
if (document.getElementById) document.write('<div id="zg_whatlink"><a href="http://www.flickr.com/badge.gne"    style="color:#3993ff;" onclick="zg_toggleWhat(); return false;">Was ist das?<\/a><\/div>');
}
zg_toggleWhat = function() {
document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
return false;
}
</script>
<div class="zg_div"><div class="zg_div_inner"><a href="http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br>
<script type="text/javascript">zg_insert_badge();</script>
<div id="zg_whatdiv">Dies ist ein Flickr Modul mit öffentlichen Elementen in Flickr mit dem Tag <a href="http://www.flickr.com/photos/tags/design">design</a>. Ihr eigenes Modul können Sie <a href="http://www.flickr.com/badge.gne">hier</a> erstellen.</div>
<script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script>
</div>
</div>
<!-- End of Flickr Badge -->

 

---

 

nach den varianten, wie es nicht funktioniert, nun die variante, die funktioniert. ich habe nur zur erleuchtung die fehlerquellen hier ausführlich beschrieben. ganz wichtig also jetzt die lösung. zusammengefasst ist dabei wie folgt vorzugehen.

 

1. flickr account zulegen,
2. entweder selbst bilder bei flickr hochladen oder andere alben benutzen, um
3. ein flickr badge auf flickr.de erstellen und
4. den flickr code aus dem letzten schritt in das
5. kulando template an gewünschter stelle einbinden.

damit das badge einwandfrei eingebaut werden kann, muss man den flickr code mit folgendem code umrahmen:

 

{literal}

<!-- Start of Flickr Badge -->

flickr plugin code

<!-- End of Flickr Badge -->

{/literal}

 

 

darauf gebracht hat mich flavour. sie hat in den comments diese lösung eingebracht und auch die quelle preis gegeben. diese wollen wir mal nicht verheimlichen:

quelle: http://forum.blogsport.de/topic.php?id=21

als erstes will ich mich mal um eine aktuelle frage kümmern.

 

kann man in jedem design die überschrift seitlich innerhalb des headers verschieben?

da ich jetzt noch nicht gebastelt habe, vermute ich einfach mal ja. denn in den verschiedenen designs sind die überschriften auch unterschiedlich ausgerichtet. daher halte ich es pauschal für machbar. ich werde mir das html der verschiedenen header.templates anschauen und mich hier testhalber auslassen. die codestelle, welche es dafür mit welchen befehlen zu ändern gilt, werde ich dann hier posten. vorab sei jedoch schon mal erwähnt, dass ich weder weiß, ob der code dann universell in jedes template eingesetzt werden kann, oder nicht. ausprobieren werde ich es jedenfalls nicht. dazu fehlt auch mir die zeit. jedoch sollte es ja auch nicht sonderlich schwer sein, sich die entsprechenden zeilen in den jeweiligen templates selbst herauszusuchen und es am eigenen blog auszuprobieren. sicherungskopien von jedem template sind ja schließlich möglich.

 

ich habe jetzt im template "styles.css" dieses designs (connections) geschaut.

in dem "style.css" template gibt es eine stelle, die lautet wie folgt:

 

}
#header h1
{
margin: 0;
font-size: 2.6em;
padding:15px 15px 0 0;
text-align:left;
}

 

hier sind informationen für die überschrift des blogs hinterlegt. ich denke, mit etwas englisch kann man sich selbst erklären, dass "text-align:left;" die stelle ist, welche angibt, wo der schriftzug im header sein soll. im obigen beispiel habe ich es auf left gestellt. ursprünglich steht es in diesem design auf "text-align:right;". eine zentrierte überschrift bekommt man mit "text-align:center;".

 

in der zeile "padding:20px 15px 0 0;" kann man die positionierung der überschrift ebenfalls modifizieren. in diesem fall sind die "20px" die höhenangaben. ändert man hier also den wert nach oben, rückt die überschrift nach unten. man hat den abstand zur oberkante vergrößert. die "15px" sollten demnach logischerweise die breitengrade sein. wenn man von der standardausrichtung "right" ausgeht, stimmt das auch. belässt man die überschrift also rechts, kann man mit den "px-werten" die position horizontal und vertikal nach belieben verändern.

 

vorher:

 

nachher:

hallo gemeinde.

 

zur erleuterung: als ich anfing hier zu bloggen, hatte poolie (den findet ihr sicher noch mit reichlich antworten im forum vertreten) die verantwortung. es war sein projekt, was ihm auf grund der größe und der damit einhergehenden zeitaufwendung über den kopf wuchs. er gab es also an ein unternehmen ab und seit dem wird effektiver support hier leider schmerzlich vermisst.

 

da ich selbst gelegentlich hilfe benötige, auf diese jedoch verzweifelt und vor allem vergeblich wartete, habe ich mir gedacht, hier etwas zu tun. wenn ich auch leider nur als laie und nicht sofort bei allem helfen kann, so will ich doch mein bestes geben, die kulando community beim bloggen zu unterstützen.

 

einen 24/7 support kann ich nicht garantieren und auch keine einwandfreien erfolgslösungen, da ich selbst vieles erst ausprobieren muss. kenne mich nämliche auch nicht wirklich mit html aus. was also fragen bezüglich kompletter eigendesigns angeht, werde ich versuchen, entweder kompetente hilfe für hier zu finden, oder aber euch raten, einfach etwas mehr eigeninitiative und lernwillen zu zeigen. :)

 

soweit sogut.

 

gruß

don