HOME | DD
GinkgoWerkstatt — .:Code Basics: Border Thumbs
Published: 2010-09-19 18:57:22 +0000 UTC; Views: 5840; Favourites: 111; Downloads: 261
Redirect to original
Description
Every now and then it happens that i get asked how to code certain features for journals and similar to that i often see journals where someone struggles with coding from scratch or doesn't exactly know how to do what.
That's why i figured out that it might be helpful to have several very(!) basic code snippets, people can use to get started.
All these code snippets are rather plain code, mostly without any fancy images and much colors. They should just show the start. The possibilities of what can be done with that code are endless.
Also these snippets do not affect the journal in general, they will just add that featured "journal element" and nothing more.
I hope that this will be helpful for some people. To use the code snippets just click install. Everything can be found in the Skin Header or Footer and in the CSS form area.
No additional content code is needed!
Keep in mind that all these code snippets will refer to the gruze-structure, in case special journal classes will be affected by the code.
Have suggestions for more basic codes? Just leave a comment or note me!
Code Basics:
Planned:
Depending on my time, motivation and how useful this will be for people i might add more advanced code snippets later as well.
Related content
Comments: 39
If you install this it's already at the right places. If you want to combine it with any other skin, you have to copy the CSS to the other skins CSS.
The HTML part (that can be found at the "Skin Header" section. Can be added to your regular journal entry area.
👍: 0 ⏩: 1
Hi Ann,
what will happen if I click on "Install to Journal"? Will it overwrite my present journal? If yes can I undo it or do I have save all the html and css of the present journal to notepad to save in case the "Install..." doesn't look how I expect?
👍: 0 ⏩: 1
Wenn du installieren klickst, wird es erstmal nur zwischengespeichert und ist über deine Journal-Seite abrufbar. Bevor du es aber dann aufrufst, solltest du deinen Code speichern. Der wäre sonst weg
👍: 0 ⏩: 2
ich hätte zu "Thumbs with Border" noch eine Frage. Wie definiert man den Zwischenraum zwischen zwei Thumbs?
👍: 0 ⏩: 1
Bei .thumbs img mit margin arbeiten
👍: 0 ⏩: 1
In FF sieht jetzt alles etwa so aus wie ich es mir vorgestellt hatte aber leider zeigt IE jetzt nur noch einen Thumb statt zwei oder drei pro linie
👍: 0 ⏩: 2
Also bei mir funktioniert alles problemlos. Das mit dem Thumbs ist aber auch von der Weite abhängig. Liegt es vllt daran?
👍: 0 ⏩: 1
Also jetzt bin ich verwirrt! Siehst du mit IE 3 thumbs in einer reihe bei meinem Journal??? Also ich habe zig Journals gesehen ausser meinem wo IE alle thumbs die eigentlich auf einer horizontalen Linie stehen sollen untereinander zeigt.
👍: 0 ⏩: 1
Also dein Journal sieht bei mir im IE genauso aus wie im FF. Da sind mal eins, mal zwei und manchmal drei Thumbs in einer Reihe
👍: 0 ⏩: 2
Nur zur Information ;D ... Habe IE 8 gelöscht aber auch in IE 7 waren die thumbs untereinander. Jetzt habe ich festgestellt, dass wenn ich Beta Tester in dA deaktiviere alles richtig dargestellt wird auch in IE.
👍: 0 ⏩: 1
Hm, welche Auflösung benutzt du? Weil ich hatte bislang absolut keine Probleme.
👍: 0 ⏩: 1
1680*1050px - vermutlich ist deine Auflösung "zu klein" um die drei nebeneinander anzuzeigen (wegen dem margin). Wäre zumindest das Einzige was mir jetzt so dazu einfällt.
👍: 0 ⏩: 1
hm aber wenn ich nicht im dA Tester Mode bin geht's. Jetzt verzichte ich halt eine Weile auf die Tester Extras und schaue dann in ein paar Wochen ob's wieder geht. Der neuste Ärger ist, dass ich bei etlichen Bilder die Kommentare und die Favs verloren habe.
👍: 0 ⏩: 1
Naja im Tester Mode läuft ja auch nicht alles astrein, deswegen isses ja Beta, weil mit Fehlern zu rechnen ist. Wahrscheinlich konkuriert da irgendwas und deswegen kommt es zu Fehlern. Ich bin kein Beta-Tester, deswegen hab ich wohl auch keine Probleme
Das ist nur ein temporärer Fehler, nach einmal Aktualisieren sollte es wieder da sein
👍: 0 ⏩: 1
Ja ich verzichte jetzt auch auf die vereinzelten netten Beta Tester goodies
Wie du prophezeit hast hat sich das comment/fav problem über Nacht gelöst 
👍: 0 ⏩: 1
Na das hört sich doch gut an
👍: 0 ⏩: 1
Ich bin begeistert von so viel Glück
👍: 0 ⏩: 0
Ich fass es nicht
👍: 0 ⏩: 1
Ich hab ne ältere IE version
👍: 0 ⏩: 1
Hm muss ich mir mal angucken, warum der wieder rumzickt.
👍: 0 ⏩: 0
Vielen Dank Anne, ich hatte schiss einfach zu probieren
👍: 0 ⏩: 1
Ich speicher deswegen immer alles zig-Mal ab, bevor ich irgendwas "neues" probiere
👍: 0 ⏩: 1
Bei mir mischt da oft noch Murphy mit
👍: 0 ⏩: 1
I really like all your code basics. One of these days I will figure all this stuff out dang it. lol
👍: 0 ⏩: 1
Thanks Anne! This is exactly what I was looking for. And it works with an img tag inside too.
I just changed the padding to "0", put a solid border around and used other colors.
I have seen and used this code before. But haven't forgotten how it works. The 'thumbs img' and 'thumbs img.hover'
were missing when I tried it myself. I have searched in some other journals for exactly that code.
But although they used the effect, the code isn't the same.
So, yes. This is VERY helpful.
Thanks a lot.
👍: 0 ⏩: 1
Wanted to add an image as well, but totally forget that then. But as long as it helped you though it's ok even without the image background.
There are several way to adress something to work with hovers, but connecting it with the img-tag seems to be the easiest way for this kind of usage (imo). Of course you can always make it go more complex.
My pleasure!
👍: 0 ⏩: 0
Thanks for your work.
I think it's helpful and useful.
👍: 0 ⏩: 1
I hope so, as this was requested
👍: 0 ⏩: 1
I tried one of them, the one of the title bar (now I don't remember the deviation's name) I understood some basic aspects of the standard code of a basic journal.
thank you very much.
👍: 0 ⏩: 1
My pleasure if it helps!
👍: 0 ⏩: 0