HOME | DD
barninga — DA journals CSS tutorial
by-nc-nd
Published: 2006-10-10 19:27:02 +0000 UTC; Views: 24029; Favourites: 321; Downloads: 3370
Redirect to original
Description
A quick introduction to the use of CSS for DA journals. Learn how to give your journal a unique and personalized look 'n' feel.
If interested, please see more tutorials from my gallery .
Related content
Comments: 180
double check the syntax, often a missing colon or parenthesis, or a mis-spelled word can screw up the whole css.
👍: 0 ⏩: 0
Uhm all I see is:
".journaltext" is insi
and a small clip from a code D:
👍: 0 ⏩: 1
I imagine you have to click the download button to see all of it
👍: 0 ⏩: 1
Oh yes, I will try that. Thanks.
👍: 0 ⏩: 1
I LOVE THIS TUTORIAL! but one question.do the coding "sections" have to be strictly in this order?
👍: 0 ⏩: 0
omg.I LOVE THIS ahem.But still one question. Do the coding...."sections" have to strictly be in that order ?
👍: 0 ⏩: 1
in general, you can have sections in the order you want. the only caveat is that when a class inherits features from another one, the class containing the inherited features should be defined first.
thank you for your comment.
👍: 0 ⏩: 1
This was very helpful, thank you
And I have a quick question, for other boxes and suck on my profile page could I use the background color code or other things to customize those too?
👍: 0 ⏩: 1
do you mean having boxes with a different background than the journal area?
yes, you just have to specify the chosen background properties in the class that defines the properties for that particular box.
👍: 0 ⏩: 1
Nevermind, I figured it out XD
Thanks though
And I meant *such* not *suck* 
👍: 0 ⏩: 0
Gah. So very useful. I've made more skins and have even recommended your tutorial to others.
👍: 0 ⏩: 0
hi! i got a question and i tried your tutorial.. it was awesome thanks for the tips!.. hmm.. my question is.. i did everything that is your tut but after pressing apply.. i typed the contents of my journal, then published it.. when i checked on my profile the skin was in default again and everything i did was nowhere to be found.. >_<
👍: 0 ⏩: 1
if da didn't change its policies recently, you need a premium memebrship to apply a stylesheet to your journal. check their help pages to make sure of that.
👍: 0 ⏩: 1
ooohhhh... sorry.. i didn't see that maybe it's because i was too excited to customize my own journal.. thanks a lot for the help sir!..
👍: 0 ⏩: 0
Here is the skin I made with your help: [link]
Thank you very much (:
👍: 0 ⏩: 1
nice job, colors are life
👍: 0 ⏩: 1
Wonderful! This will really help when I upgrade -^__^-
👍: 0 ⏩: 0
happy you enjoyed, and thenk you for the
👍: 0 ⏩: 0
How would I get ride of the linebreak between the journal title and date. So that the date is right under the title? I tried margin-bottom:0; for the .journaltop h2!
👍: 0 ⏩: 0
This is the ONLY tutorial that has what I need so far. Thank you so very, very, very much!
👍: 0 ⏩: 1
i'm really happy you found it useful. thank you for the comment and the
👍: 0 ⏩: 1
the layout of my journal (very simple indeed) was created following the rules described in the tutorial. currently, i don't use it 
👍: 0 ⏩: 1
i mean how do u use the tutorial?
👍: 0 ⏩: 1
by trial and error, obviuosly
if you are interested in using cssses to enhance the look of your journal, try experimenting the suggestions and notes you found in the tutorial using the journal advanced options you can access being a da subscriber. there's a tab just upon the journal text editing field.
👍: 0 ⏩: 1
no im mean the tutorial wont come up!
👍: 0 ⏩: 1
just click on the download button on the right and save the image to your desktop or wherever. it's a plain jpg file.
👍: 0 ⏩: 1
This is probably the most straightforward tutorial I've come across, it was really simple and easy to understand, just perfect for a beginner like me! Thanks for posting it up!
👍: 0 ⏩: 1
thank you, i'm happy you found it useful.
👍: 0 ⏩: 0
Would you happen to know what to do if a layout looks completely different in IE that it does in Firefox and Chrome? In normal css you can use *html and the style to have it show up in IE only, but that won't work with the DA coding. Would you know a way to do this?
👍: 0 ⏩: 1
since i am no developer, i usually don't care about ie. if my site looks good in firefox, that's enough for me. anyway, i know that there are tricks around like writing different css snippets for different browser and then using conditional structures in the html pages to load the correct one, depending on the browser that loads the page. googling should help.
a good starting point, however, is the html and css validators available online on w3c's site. they can guide you in eliminating non-standard code, that could mislead rendering engines.
👍: 0 ⏩: 1
I've been working on my journal for awhile, and I'd been having some trouble trying to figure out how DA had things set up for their journals. I've taken a class in CSS before, I know a decent amount about the code, but this helped me to pick it apart, and understand how it works to be able to play around with it.
I do have a question though, for adding background images into your journal, would I be able to put it in under .journaltext, as background-image and then define a url for it to pull the image from? I'm still reading through other tutorials, but you were really good at explaining what each part of the CSS did, instead of just throwing the whole thing out there like a lot of tutorials. I would appreciate any advice you can give about putting in background images, and how to have them repeat across, or how to say make a button around a link.
Thank you, you made a great tutorial.
👍: 0 ⏩: 1
thank you for your comment.
in a previous "version" of my journal css i did use the regular background-image attribute. the tutorial itself is a capture of the journal where i published it, and you can see there's a background image in it. the url should be specified between parentheses, without quotes.
feel free to write me back if you can't manage it, i'll try to investigate deeper.
👍: 0 ⏩: 1
Thank you for your help. I think I figured it out pretty well, and I made myself a new journal skin between your tutorial and another. [link]
I am having one problem with it though, and I would really appreciate any help you could give me. I have an image at the bottom of the journal, I messed something up in the code, so I have two of them for some reason. I'll get that part fixed up on my own, but I'm not sure how to get the image to be behind the "previous | comments" links at the bottom of the page, and also behind the "mood / reading / eating etc." part of the journal. I've been playing with it, but I can't figure it out, and any help you could give about how I should go about doing that would be wonderful.
If you need to see the CSS from my journal to see what I'm talking about, I'd be more than happy to show it to you if you tell me how you would like to see it.
Thank you for any help you can give, and if you have none to offer that is fine.
👍: 0 ⏩: 1
i haven't been fiddling with coding and csses for a while now, so my skills are a bit rusty. i can try to give you some hints, but no guarantee
it looks like the repetition of the images is caused by the default behavior of the background-image attribute. you can set the "background-repeat: no repeat;" property to avoid this, but you'll have then the problem of the journal width, which depends on how the user resizes the window of their browser. theoretically, the background-size property has been defined, and setting it to 100% should do the trick. however, no browser currently support it, so the only way to stretch a background image over its container is to use some rather complex coding trick (see [link] for an example).
about the second question, i assume you mean to have one background image acting as the background for both the sections, so that they appear to be a single section. well, i think that you can't explicitly place journal's divs where you want, it's the way da's server build the page that leads. in fact, you can have the mood div placed differently by setting a configuration option. this prevents you to use a trick like defining a div with a bg image and placing the two divs (both with transparent background) inside. the only way i can think of is to have a bg image for the "comments" div long enough to cover the mood div also, and have the latter placed after the former. however, a bg image should be cut at its container boundaries, so this should not work unless you find a way to override the default, which i didn't by rapidly searching the net. please let me know if you solve this issue.
👍: 0 ⏩: 0
and what about having a [url=[link] ]this image[/url]
as a header?
it was helpfull!^^
👍: 0 ⏩: 1
| Next =>