CSS Tricks: Journal title styling issue by pica-ae, literature
Literature
CSS Tricks: Journal title styling issue
I thought it would be a good idea, to give a short explanation of an issues that can occur between viewing a journal skin in Sta.sh Writer and the preview/live view in regards to the journal title.
What is the journal title?
As it says, it's the title you will give to your journal while writing and has to stati:
A text field in which you enter the name of your journal while in sta.sh writerA link that directs to the journal deviation page when it's submitted.These two never appear at the same time!
The styling of .gr-top h2 a is not visible in sta.sh writer!
So what's the problem?
To make things easier for myself (and for you) I created a
Following up my previous tutorials Journal break-down and Deviations in Journals here's the tutorial or rather resource for a basic blank journal skin.
It is merely a collection of classes that should be considered when coding a new skin, they are all given by DA, none of them have been created by me. I only broke them down into the nude.
Skin Template
* {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
/* ----------------------------- General ----------------------------- */
.gr1, .gr2, .gr3, .gr-top .tri, .gr-top .gr h2 img {
display: none;
}
a {}
a:hover {}
/* ----------------------------- Journal --------------
CSS Tricks: Deviations in Journals by pica-ae, literature
Literature
CSS Tricks: Deviations in Journals
As promised in my previous tutorial CSS Tricks: Journal break-down comes the follow up tutorial about styling deviations in journals.
You'll see what classes deviations are built from and how to "hack" them in order to style them entirely to your preference. I will cover regular image thumbs, literature and other text deviation thumbs and embedded deviations.
Deviation Thumbs
Aaah, the traditional way of featuring art in your journal.
Generally, all thumbs consist of an image file, a link and one or more containers around both image and link. This tutorial will explain how those are built up exactly, and also explain the elements text thum
CSS Tricks: Journal break-down by pica-ae, literature
Literature
CSS Tricks: Journal break-down
This has been done before by many others :dummy: I don't want to step on anyone's toes, I just wanted to give this a go myself :)
If you still write CSS NOT using gruze … stop that! Start using gruze. Just do it!
There are a few "hacks" that you will need to make it work totally under your control, but there's always help with those :XD:
Well, here comes help with those hacks :la: (I gotta give GinkgoWerkstatt (https://www.deviantart.com/ginkgowerkstatt) credit for some of it, go hug her! That's an order :evileye:)
At the end of this CSS Trick I will provide you with a template, that I use myself, as a base for creating new skins. It will only contain the basic classes of the jo
CSS Tricks: Before and After! by pica-ae, literature
Literature
CSS Tricks: Before and After!
No, this is not about a tv show in which I take a CSS and make it prettier ;)
It is about the pseudo-elements ::before and ::after.
They are similiar for example to the :hover element, meaning that it is not necessary (or possible) to add them to the HTML, but can be controlled purely by writing CSS. They are always there, but whether they are visible depends on whether you code them or not.
::before and ::after are almost self-explanatory pseudo-elements. They define what happens either before or after a regular HTML element. They can be applied to any element.
Let's get right going!
So in the first simple example we are going to add gui
Lists are awesome :meow: So let's talk about them :D
The basic list format is avaiable everywhere on dA, you do not need a premium membership to create a list. Of course you could just use :bulletgreen: or a symbol like ~ to indicate a new list item, but an actual HTML coded list has a lot of benefits over that.
Especially when you have single points that exceed a single line a HTML list, a line break appears at a spot you cannot control and therefore you will end up having no indentation and it will just look messy.
You don't have to be a Premium Member to use the HTML for lists, see FAQ #104: https://www.deviantart.com/help/104 - What HTML formatting can we use on DeviantArt? And what is the format for these codes?
You do need it, if you want to use Journal Skin
CSS Tricks: Fonts and Text Basics by pica-ae, literature
Literature
CSS Tricks: Fonts and Text Basics
Today I want to talk about fonts in journal skins :XD: You probably saw this one coming :giggle: And maybe you also saw coming that this will be a rather long tutorial :faint: There is just a lot to say about this! Actually this will only be the first one about fonts and text. This one will cover the basics of working with fonts.
I will start by talking a bit about web-safe fonts and the concept behind a fallback hierarchy. Further down you'll find a selection of properties that can be styled with examples and explanations.
So, let's go! :eager:
The standard web safe fonts
A font is defined as web safe when it is installen on a great numbe
CSS/HTML Tricks: Article Layout by pica-ae, literature
Literature
CSS/HTML Tricks: Article Layout
Hello!
Another tutorial for news articles and journals on dA!This one is meant to help you add structure to your news articles (and personal journals) and thus enhance the reading experience for your audience.
I have already written a tutorial on the topic of HTML Literature, but only showcased what is possible there. It is almost the same as FAQ #104: https://www.deviantart.com/help/104 - What HTML formatting can we use on DeviantArt? And what is the format for these codes?
This tutorial will try to explain why you should use additional HTML in your articles and how it helps improve their quality.
Also it turned out to be quite long, so skip to your liking.
For further reading please refer to CSS Tricks: Limiting .text width, which explains the necessity of li
CSS Tricks: Background Images by pica-ae, literature
Literature
CSS Tricks: Background Images
Today'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 image
I 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
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