PE: #CSS-DYK Launch:iconcss-dyk:#CSS-DYKWelcome!Attention CSS lovers! You are invited to join #CSS-DYK the main hub for the CSS Did You Know? articles.If you are unfamiliar with these articles, they are articles educating deviants on different areas of deviantART CSS. Here are a few of the articles: WANTED! ContributorsI am looking for contributors who wouldn't mind contributing to these articles. Requirements: Intermediate to Expert CSS Skills Willing to educate deviants Spare time doesn't matter - it'll be completely up
Media queries and youFirst, a quick primer, which probably consists of information that most of you already know.So, you want to write an article with cool CSS, and you want to make it work nicely when it's displayed on the tiny screen on your smartphone. Tricky! However, with media queries it becomes pretty easy. By writing.text { color: blue; }@media only screen and (max-width:480px) { .text { color: red; }}...suddenly you have blue text at normal resolutions, and red text on a smartphone. Or on a browser which has been resized down to be really narrow.In fact, try it out on this article! If you resize your window right now to make it narrower, it should magically invert its colors. Madness!As an example of where this might be particularly useful, let's consider the #hq site update articles with that big ol' sidebar.It looks like:
How to: Request CSS HelpI do get notes and comments of people asking for help quite a lot. While most people do just fine there are some people that forget that they are asking for a favour and aren’t in the position to demand anything.Others are just so vague that you never really know what they really want you to do. And because of that I decided to write down some tips – based on my own experience – to help those who are not sure how to ask for help right. It will make things easier for both sides.The following things are not universal, they reflect mostly my point of view and how I would like to deal with such request and the process of it. It will not apply for all CSS coders, but it should still give you an idea of what to do and what you should avoid.Before you ask for helpMake sure that you have tried everything that is within your possibilities. The best way of learning is to spot mistakes on your own.Sometimes it is easier to quickly ask someone else, b
Modern Elite CSS Contest - Premium Prizes to winHi fellas,A new contest is in the house! Yes, you have heard me right! A new CSS contest with premium prizes to grab for yourself is here for you! You and I can see a lot of journal skins present in our DA's Journal & Gallery Skins category till date but we see only a few of them are modern style designs. As, many of you probably know that I mostly like modern design for my journal skins. So, I want you to go crazy with your own creativity and do the same for this contest.Many of you might wonder, what is modern style web designs anyway? Please mind that I'm using the word "web design" here because journal skins in DA are nothing but web designs that we code in CSS. So coming back, a modern design generally..1) has few colors2) contains simple yet elegant images to make the design look smart3) has all it's elements well arranged4) has minimalistic touch (not always though)5) includes high usage of typography
Project Educate: User Friendly Journal SkinningThis article is written for fellow CSS coders who already have basic+ knowledge of deviantART journal codes. This is not a beginner's tutorial.User Friendly Journal Skin CodingI've been making journal skins on DeviantART since 2010, I'd dabbled in CSS before, but never for other people. I know what my codes are and how to use them to their full potential and often, just code on the fly when I want something to do something. But making free and commission skins here showed me that I needed to make them as easy to use as they are pretty. And really, who wants to type in a lot of extra HTML when they go to write a journal? It is easy enough to access the artist's comments.But even then, copy & paste, memorize that.... It can be a lot to deal with if you do not know CSS and HTML. Which is the reason most people get someone else's skin design in the firs
Transition effect without CSS3 transitionThere's no such thing as a former alpha tester~:iconchallengeacceptedplz:<
PE: How to embed thingsWritten by `Infinite-Heart for #projecteducate's community week. You may have noticed GIFS and hot things in people's journals and profiles. With HTML and CSS, you can add some hotness to your journals and profile.Pretty neat, yes? Embedding Images and GIFsDeviantART Images Images on dA can easily be linked with thumbcodes. While on a deviation page, all you have to do is scroll down and look right until you see:Copy and paste the thumb code. :thumb367944988:And if you want it bigger: :bigthumb367944988:And bam. There you are.If that's not good enough, you can play around with the size like this.. .<da:deviation width="Number" id="deviationID">It's the thumbcode number without thumb in it... Trying it out... <d
TypographyOne of the most frequently overlooked sections of a journal skin, typography is something far more challenging to get right then people think. You see, it's far more then just picking a font and dumping it in. It is, in fact, an art form.Now, I could waffle on at length about why typography is so damn cool and important and all that, or I could just get to the damn point: How to use typography effectively in your journals.The first rule to remember is people have to read it. Yeah, that 10px san-serif font may look great on your screen, but for someone reading on a phone, or on a higher resolution screen it's like stabbing them in the eyes repeatedly. Keep your text big. 16px is a good size for longer form body copy, and is about the size of print in a book on most normal screens.Secondly, not everyone has their brightness and contrast the same as yours. Text, especially when it's designed to be read, should have a high contrast against the background. Whether that's dark text on a l
Desviaciones de texto y HTMLLiteratura en dA.Primeros pasos para gestión de textos.Algunos apuntes para su personalización y tratamiento estético. Hasta hace algún tiempo no había oído hablar del lenguaje HTLM ni sabía como subir, escribir y tratar una desviación literaria o un texto en deviantART. Os paso algunas consideraciones para quién, como yo, empieza de cero pero no le gusta la creación de páginas con el texto "amontonado". Me referiré a las etiquetas HTML para su uso en devs de contenido literario y textos en general. Otras etiquetas de uso más habitual, para elaboración de listados o indicación de links, users, avatares, etc. para Journals o comentar
dA adds new CSS attributes Skinners! Must read!Okay, as per the latest dA site update found here. CSS coders are now allowed to use 3 more properties to rock their journal skins.The properties are:1) content2) counter-increment3) counter-reset~~~~EXPLANATION~~~~Lets see what can we do with these new fancy stuffs!What does these attributes do?1) content--> it is used to insert generated content in your HTML (Journal body for DA). Don't worry, don't worry! I'll tell you what is this "generated" content!2) counter-increment --> it is used to insert numbers (or counters) to sections or sub-sections. I'll explain what "sections" and "sub-sections" are don't worry again!3) counter-reset --> it is used to reset the countersAll these 3 properties are generally interlinked and are used together. But the "content" property can be used alone and has some cool usage.~~~~"cont
Give me News! + CSS3I want your dA related news My Profile PageBrowse dA RelatedChat in #dArelatedSuggest a DDAs you may have noticed earlier, I've started doing monthly Community Relations updates, where I feature official news from dA (from the Community Relations team in particular), but even more important, what's been going on in the community - that's you! Do you run/know of a contest or project about stamps or CSS? Do you have a group for dA improvement and suggestions? Have you noticed a trend in the memes or adoptables community? Or combinations of these? Let me know! I may want to feature it, or watch the deviant/group to stay in touch with them CSS3 UpdatesI haven't seen much about t
deviantART Related Collaboration Contest ...and the contest is closed! Thanks everyone for the entries, judging will commence now. Ladies and gentlemen! Welcome to the #communityrelations sponsored deviantART Related Collaborations Contest Where you have six weeks to work together on any work in the dA related category. A quick overview;This contest will be open to all mediums in the deviantART Related main category, as well as dA tutorials and dA avatars.It will run from today (3rd April) to May 15 2012. Your entry must be submitted between (or on) those dates!You can participate in three ways (see the bottom of this article for examples);Work on your own based on an existing dA related deviation (with their permission if needed; e.g. find a visual suggestion and make a browser script to make it work).Collaborate with another artist on a piece in one medium (e.g. make a stamp or devID together.)Work together to create two related deviations (e.g. a
Customize Your Literature ThumbnailsThis journal will break down the components of the various kind of Literature (and Journal) thumbnails now available, as well as discuss how to customize them in a journal CSS. I believe there's some overlap with gallery CSS, but these tips are specifically for the way things look in journals. Anyway, this isn't a basic tutorial on coding but you can find great resources in groups like #eCSSited.If it's a PDF or something visual and has a PNG/JPG preview, it behaves the same as normal thumbnails, so it doesn't bear mentioning here.The different types of thumbnails is the standard one. Anything that is either written in Sta.sh Writer or with the 'Enter Text' option in the Submit dialog will have this. Some include a preview image within the thumbnail itself, but I won't be discussing that here. is the thumbnail for journals.Unfortunately, :bigthumb: doesn't do anything special. But with Sta.sh Writ
Do-It-Yourself Journal SkinDo-It-Yourself Journal SkinGet into Journal skinning by learning how to create your own Journal skin in this tutorial!Written by `miontre for dA Related Week in #projecteducateJump to resourcesHeya everyone! In this tutorial, you'll be learning how to create your own Journal skin on deviantART. This tutorial takes a "Do-It-Yourself" or "Assemble-It-Yourself" type approach. I've pre-created a design, and it's up to you to put it together and customise it - with instructions, of course! Note that you need a Premium Membership to use Journal skins! This tutorial is aimed at anyone who is interested in starting to create Journal skins on dA using CSS. Those who don't know anything about CSS yet can follow along, and hopefully learn something along the way! Those who are beginners with CSS can learn how to turn a design into code, and how to use CSS to create a Jo
Fix for notes width@namespace url(http://www.w3.org/1999/xhtml);@-moz-document domain("my.deviantart.com") {#notes td.notes-left{width:318px !important;}#notes td.notes-right{width:100% !important;}textarea#notebody{height:300px !important;width:100% !important;}div.field{width:90% !important;}}
CSS Tricks: Background ImagesToday's CSS Trick will be about using background images in Journal Skins.There are three types of images that are mostly used in journals skins: big background images, seamlessly repeatable patterns and icon/logo-like images.Images can be used for all elements of a journal: in the header, footer, behind text, next to text etc.. Any journal element has the ability to contain an imageI cannot stress enough that the main objective of a journal is making written content enjoyable to read. It is all about readability and making it as easy for the reader as possible. Very often I come across pretty journal skins, that have a complete lack of readability. In one of my previous CSS Tricks I already mentioned the dangers of text lengths and how to limit the .text width to improve readability.Problems with using images:Despite being big an images turns out to be too small for a journalAn image does not repeat seamlesslyText becomes non-re
All fonts for dASafe Web Fonts (For text or literary deviations and Journals only)This is the complete list of fonts you would display in all browsers. (You know, not all are valid)Compiled by AimanStudio to #deviantCSS (deviantART XHTML & CSS Ref). Many thanks!If you're a little bored of our old Verdana, you can change the font in your literary deviations.Before of writing, indicate the font you choose with the tag: <font face="Georgia"> or <font face="Courier New">, etc.Close the application with </font>.Personalize and work in the view of your literary deviations. Here they are:ArialArial BlackArial NarrowBook Antiqu
CSS Tricks: Responsive dA?If you are at least slightly into web design and/or using mobile devices to browse, you should have come across the term "Responsive Webdesign". Basically it means that a website is set up in a way so it gives the best browsing experience no matter on what device you are viewing it.One term that is often mentioned along with it are "Fluid Designs". This usually refers to web sites that use % instead of px values to define sizes inside the layout.This necessary trend in web design made me think about the deviantART.com layout. Because it is a design that has been working responsive for several years! You can test this by going to any place on dA and changing your browser window. You will notice how the ratio of all elements in width remains the same no matter how wide the browser window.Now that we know that dA is responsive, we will soon find out that there is a responsive element inside dA, which reacts in first instance to the page on dA you are and in second instance to the brows
Tech tip - Sharing dA tags and html source code This is the least hideous approach I've been able to come up with without altering the appearance of the test and without the running into problems with dA's online text editors software due to the fact that they process the text bricked in the html … tag sequence. The following formatting workarounds will breakᴺ¹ the interpreters involved to get the desired results. Normally most of this would be achievable by using html escapes < [http://www.deviantart.com/http://www.deviantart.com/ Display html escapes: replace & with &Display html tag source by replacing everyWould be written: ｉ⃝ For listings > 40 characters wide in Journals add a horizontal scroll bar. To make code in t
Sta.sh
Intermediate to Expert CSS Skills 
Spare time doesn't matter - it'll be completely up 
Please mind that I'm using the word "web design" here because journal skins in DA are nothing but web designs that we code in CSS. So coming back, a modern design generally..
Do you run/know of a contest or project about stamps or CSS? Do you have a group for dA improvement and suggestions? Have you noticed a trend in the memes or adoptables community? Or combinations of these?
Let me know! I may want to feature it, or watch the deviant/group to stay in touch with them 
...and the contest is closed! Thanks everyone for the entries, judging will commence now. 
Ladies and gentlemen! Welcome to the #communityrelations sponsored deviantART Related Collaborations Contest 
is the thumbnail for journals.
Display html escapes: replace & with &Display html tag source by replacing every
