| Deviant Login | Shop | Join deviantART for FREE  |
Take the Tour  |
#eCSSited
The commented sections explain each section. There isn't great detail, just a brief over view. This will continue to be updated as new coding or dA changes occur. This is up to date as of 5/2/2013. You can view my live template work file in my GoogleDrive. I keep more notes as I go and bold new entries. 
eviant Green when you start your new layout. Then create yours and save as new.
*, .gr, .gr-box, .gr-top, .gr1, .gr2, .gr3, .tri, .gr-top h2 img, .gr-top h2, .gr-top span, .grf-indent, .gr-body, .text, .bottom, .hsep, .commentslink, .prevlink, .list, em, p, strong, blockquote, li, a, a:hover, a:visited, .shadow, .shadow-holder, .shadow-holder img
- [link]
- [link]
- [link]
- [link]
for author tag addition. And Thanks goes out to 
for introducing me to negate-margin/put-art-here and more and going over all these in extensive notes.
CSS Did You Know? - May 2nd, 2013Volume 9
:iconcss-dyk:
Welcome
CSS can be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note #CSS-DYK.
Inside
dA Embedded Deviations and Videos Styled by `GillianIvy
Author by `im-not-sana
:icongillianivy:
dA Embedded Deviations and Videos Styled
What Am I Talking About?
What is the difference between an embedded deviation and a deviant thumb? Glad you asked. The thumbs have the codes everyone already knows and loves. And if you don't know what I'm on about, then look on the sidebar of your deviation and you will find your thumbcode. These codes can be used in journals, widgets and artist descriptions to link a thumbnail of the deviation.
The Journal Portal
Browse Journals |
Polls |
deviantART [dee·vee·un'nt·ART]
Keep in Touch!
|
Deviousness `anmari has been spreading her infectious positivity throughout our community for over 6 years. Throughout this time Ana has been at the core of all things devious, passionately developing an eclectic gallery, helping organise devmeets, participating in chat events and also recently completed dedicating her time as a Community Volunteer. We are absolutely delighted to bestow the Deviousness Award for May 2013 to `anmari, congratulations! Read More
|
Sta.sh
A few things to add:
*{border:0;
padding:0;
margin:0;
}
adding just 0 works too and is shorter
also for Lit tags you need to add
a.lit img {border:0;}since sometimes the images in journal thumbs get affected
and maybe add
ul li{}li ul{}
as well?
I'll let you know if I think of any more
I had this a long while ago, made it when ~eCSSercise existed. I still have things in the back room there I need to get cleaned up
Thanks for the tips.
img lit is different from a.lit img, but yeah that's true I think that problem only showed up if someone's coding
a img{}You can still access groups that are closed?
You should join #CSS-DYK as a contributor. We're looking for more authors. There's a list in the bg what is planned and what is suggested to write.
I'm already a contributor in #CSS-DYK silly
The group wasn't ever closed, I think just no one new can join. Oh wait, maybe it is closed now? Checked the link but seems to be broken. I didn't hit preview. Oh well, she gave me more than a year to clean out everything I had in there. I am a bad procrastinator.
So, most monitors should be able to view things that are in the 500-600px range. However, this would look small on large screens. For best flexibility, your design would expand with the window size. Rather than a set size, have a bg that either tiles nicely, or blends into the bg color well so it flows.
Height does not need to be set unless you are limiting the length of the journal due to design constrictions. Again, it's sometimes best to use tileable images or a design that can stretch as more content is added, and shrink to look good even if there is very little content. If you want a fixed height and a scrollbar to appear, you add a line for height PLUS a line for
overflow:auto;. Auto makes it determine whether or not it needs the scrollbar.So, your sizes will vary with your designs. I usually design my layout first in an image editing program. You may wish to start with something simple first. Try two images, a HEADER and a FOOTER, keep the body section a solid color. From there, position all your elements into the CSS. Put your HEADER in
.gr-box{background:#000000 url('URL'); background-position:top center;}and FOOTER can go in.gr-body{background:#000000 url('URL'); background-position:bottom center;}. Pay attention that one is set to top and the other is set to bottom, that will put them in the correct places.I have a number of tutorials and such which you may wish to go through. [link] They are contained in my Resources and Stock gallery folder: [link] Which I also have a collection of graphics I use for my journal skins, such as gradients and semi-transparent fills. They are free to use.
Um, warning, I am prone to long responses....
You may want to join #eCSSercise as a Student, membership is now open. I am a Mentor there and there are many lessons in the backroom. We will be transferring some to the journal system to make the group more user friendly ;D