Style einfügen - DokuWiki User Forum

archipage

2008-05-13, 10:54 #1

Member since May 2008 · 4 posts
Group memberships: Members

Show profile ·

Link to this post

Subject: Style einfügen

Hey.

Alos ich möchte auf Grundlage des Themes Artic ein Style erstellen.
Ich hab das ganze im Rohformat bereits hier leigen: http://webarea.we.funpic.de/test
Doch ich scheiter jetzt daran das Design zu übertragen.
Wie muss ich vorgehen?

chi (Moderator) 2008-05-13, 12:30 #2

Member since Jun 2006 · 1265 posts · Location: Munich Germany
Group memberships: Global Moderators, Members, Super Mods

Show profile ·

Link to this post

Quote by archipage:
Doch ich scheiter jetzt daran das Design zu übertragen.
Wie muss ich vorgehen?

Ohne konkrete Punkte woran du scheiterst kann ich dir hierbei nicht wirklich weiterhelfen ...

Please add [SOLVED] to the initial thread subject if you feel your question has been answered.

archipage

2008-05-13, 13:31 #3

Member since May 2008 · 4 posts
Group memberships: Members

Show profile ·

Link to this post

also ein problem besteht z.b darin die umrandung (border) zu entfernen und durch die abgerundeten ecken zu ersetzen. zudem soll oben dann der schatten noch als hintergundbild hinter und hinter den gesmaten content auch ein hintergrundbild (repeat-y). außerdem muss unten auch nochmal ein schatten hin. wende dir den link anguckst: ich scheiter daran die umrandung zu übertragen. ich denke es ist eher überflüssig den code hier zu posten (quelletxt ja ersichtlich)?!

bin für jede hilfe dankbar. würde evtl. sogar wenn jemand da helfen könnte einen geringen betrag zahlen.

grüße.

chi (Moderator) 2008-05-13, 15:06 #4

Member since Jun 2006 · 1265 posts · Location: Munich Germany
Group memberships: Global Moderators, Members, Super Mods

Show profile ·

Link to this post

Quote by archipage:
also ein problem besteht z.b darin die umrandung (border) zu entfernen und durch die abgerundeten ecken zu ersetzen. zudem soll oben dann der schatten noch als hintergundbild hinter und hinter den gesmaten content auch ein hintergrundbild (repeat-y). außerdem muss unten auch nochmal ein schatten hin. wende dir den link anguckst: ich scheiter daran die umrandung zu übertragen. ich denke es ist eher überflüssig den code hier zu posten (quelletxt ja ersichtlich)?!

Hmmm, hier mal ein paar Hinweise. Deine runden Ecken generierst du ja über Javascript, du kannst dieses in das Template einbinden indem du es in die script.js einfügst (inwiefern das von dir verwendete Javascript "kompatibel" mit DokuWikis JS Libraries ist ist die andere Frage, das musst du herausfinden). Natürlich musst du das CSS des Templates dementsprechend anpassen damit das mit den runden Ecken nicht interferriert.

Für das Hintergrundbild musst du doch nur das richtige div finden. Ist in deinem Fall entweder div.page_left, oder div.page_right jeh nachdem wo du die Sidebar hast.

BTW die "firebug" Firefox extension is in solchen Fällen umheimlich hilfreich beim finden der Stellen wo man ansetzen muss.

Please add [SOLVED] to the initial thread subject if you feel your question has been answered.

archipage

2008-05-14, 09:55 #5

Member since May 2008 · 4 posts
Group memberships: Members

Show profile ·

Link to this post

okay. danke erstmal. das mit dem firebug war wirklich ein sehr hilfreicher tipp. also mir fehlen jetzt noch der gesamte header un footer bereich. bis jetzt sieht das ganze erst so aus: http://webarea.we.funpic.de/page/Tutorials/doku.php
ich habe jetzt ein weiteren div über den wrapper gesetzt. im firebug wird der auch erkannt, auch wenn ich dort etwas reinschreibe funktioniert dies. nur ein hintergrundbild will dort nicht funktionieren, eben so javascript mit den ecken nicht! wenndu in den quelltext guckst siehtst du, dass die nötigen css angaben eig. vorhanden sind?!doch weder ie noch firefox zeigen das bild an.

archipage

2008-05-16, 18:53 #6

Member since May 2008 · 4 posts
Group memberships: Members

Show profile ·

Link to this post

okay: hintergrundbild ist drin. jetzt möchte ich mich an den Header und Footer machen.
also ich hab in der main.php folgendes in den <head> bereich hinzugefügt:

<style type="text/css">
#container_top {
    background-color: #999;
    background-image: url(images/shadow_top.png);
    width: 981px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: top;
}
</style>

über <div id="wrapper">
hab ich einen weiteren div-tag hiunzugefügt:

<div id="container_top"></div>

das Hintergrundbild wird nur leider nicht angezeigt.
laut firebug ist der div-tag auch an der richtigen Position.

so ist der aktuelle stand:
http://webarea.we.funpic.de/page/Tutorials

wieso wird das hintergrundbild hier nicht angeziegt?!

archipager 2008-05-20, 19:54 #7

Member since May 2008 · 5 posts
Group memberships: Members

Show profile ·

Link to this post

weiß keiner ein rat?! muss man css in der css datei definieren oder wodran leigt das?!

p.s ich hab mein kennwort vergessen und passowrt zuschciekn hat nicht funktioniert - das zugeschcikte passwort (2 versuche) war beide male ungültig. ich hieß früher archipage

chi (Moderator) 2008-05-20, 20:16 #8

Member since Jun 2006 · 1265 posts · Location: Munich Germany
Group memberships: Global Moderators, Members, Super Mods

Show profile ·

Link to this post

Liegt wahrscheinlich daran das der pfad zu dem bild im CSS falsch ist:

url(/page/Tutorials/lib/tpl/webarea/images/shadow_content.png)

versuch mal:

url(images/shadow_content.png)

Please add [SOLVED] to the initial thread subject if you feel your question has been answered.

archipager 2008-05-21, 06:52 #9

Member since May 2008 · 5 posts
Group memberships: Members

Show profile ·

Link to this post

mhm. ja den pfad habe ich sogar so angegeben. aber der shadow_content funktioniert ja auch! nur nicht der top.
siehe post oben.

also es sieht ja derzeit so aus: http://webarea.we.funpic.de/page/Tutorials

und folgender code in der main.php:

...
<div id="container_top" style="background-image: url(images/shadow_top.png);background-repeat: no-repeat;background-position: top;">hier wird schatten als hintergrundbild nicht angezeigt</div>
<div id="wrapper" style="width: 981px;">
...

der div sitzt an der richtigen stelle, zeigt aber das hintergrundbild nicht an.

This post was edited on 2008-05-21, 06:58 by archipager.

ach (Moderator) 2008-05-21, 10:58 #10

Member since May 2006 · 414 posts
Group memberships: Global Moderators, Members, Super Mods

Show profile ·

Link to this post

Quote by archipager:
background-image: url(images/shadow_top.png);

background-image: url(/page/Tutorials/lib/tpl/webarea/images/shadow_top.png);

funktioniert! ;-)

BTW, der Firebug verrät einem auch *das*, daß das Bild nicht da ist ... Wenn man mit dem Cursor in dem rechten Style-Fenster über die URL des Bildes geht, und er rödelt und rödelt ... und zeigt das Bild nicht in der Vorschau an ... dann ist entweder das Bild nicht da oder die URL ist falsch ...

archipager 2008-05-21, 14:32 #11

Member since May 2008 · 5 posts
Group memberships: Members

Show profile ·

Link to this post

okay dankeschön. firebug ist echt hilfreich. wenn mans weiß

archipager 2008-05-25, 19:15 #12

Member since May 2008 · 5 posts
Group memberships: Members

Show profile ·

Link to this post

kann mir nochmal jemand erklären, wei ich mit firebug erkenne wo der fehler liegt? weil aktuell sitzen z.b einige div-Bereiche falsch. wie kann ich erkennen, ob ein </div> zuviel oder zuwenig oder sonst was ist? google hat nichts ausgespuckt. same problem bei der forensuche.

archipager 2008-05-30, 22:15 #13

Member since May 2008 · 5 posts
Group memberships: Members

Show profile ·

Link to this post

kann es sein, dass die klasse dokuwiki einen automatischen abstand erzeugt?! nur bei deren css code block ich leider nihc ganz durch....