HOME | DD
electricjonny — dA CSS Changes
Published: 2012-03-22 01:23:15 +0000 UTC; Views: 20172; Favourites: 82; Downloads: 0
Redirect to original
Description
body div#devskin7458189 .gr-box { max-width:860px; margin:0px auto; } body div#devskin7458189 .text { margin:0px; padding:20px; background:#F5F5F5 url(https://electricjonny.com/journal/whitespeckled.png) repeat fixed; box-shadow:0px 6px 8px -8px #000000 inset; -moz-box-shadow:0px 6px 8px -8px #000000 inset; -webkit-box-shadow:0px 6px 8px -8px #000000 inset; } body div#devskin7458189 .h1 { font-size:18px; text-align:center; background:#122B25; color:#EDF2F1; border:1px solid #000000; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; padding:4px 0px 4px 0px; text-shadow:1px 1px 2px #000000; box-shadow:2px 2px 6px -2px #595959, 0px 8px 14px -6px #98B8B0 inset; -moz-box-shadow:2px 2px 6px -2px #595959, 0px 8px 14px -6px #98B8B0 inset; -webkit-box-shadow:2px 2px 6px -2px #595959, 0px 8px 14px -6px #98B8B0 inset; } body div#devskin7458189 .nav { width:200px; height:auto; padding:20px 40px 20px 40px; margin:20px 20px 20px 30px; border:1px solid #000000; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; box-shadow:4px 4px 8px -2px #595959, 0px 16px 18px -14px #FFFFFF inset; -moz-box-shadow:4px 4px 8px -2px #595959, 0px 16px 18px -14px #FFFFFF inset; -webkit-box-shadow:4px 4px 8px -2px #595959, 0px 16px 18px -14px #FFFFFF inset; background:rgb(230, 250, 230); background:rgba(230,250,230,0.8); } body div#devskin7458189 .nav a { text-decoration:none; border:1px outset transparent; padding:2px; line-height:1.6; } body div#devskin7458189 .nav a:hover { border:1px outset #425E58; background:#F4FCF3; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } body div#devskin7458189 .nav a:active { border:1px inset #425E58; } body div#devskin7458189 .red { color:#AB0000; font-size:smaller; } body div#devskin7458189 .timestamp:after { content:' - ('attr(title)')'; font-size:smaller; } body div#devskin7458189 .border-radius { width:auto; height:auto; background:#D9EAFF; border:1px solid #000000; padding:10px; margin:6px 0px 0px 0px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } body div#devskin7458189 .border-radius-2 { height:auto; height:auto; background:#D9EAFF; border:1px solid #000000; padding:10px; margin:6px 0px 0px 0px; border-radius:10px 0px 10px 0px; -moz-border-radius:10px 0px 10px 0px; -webkit-border-radius:10px 0px 10px 0px; } body div#devskin7458189 .box-shadow { height:auto; height:auto; background:#D9EAFF; border:1px solid #000000; padding:10px; margin:6px 0px 0px 0px; box-shadow:6px 6px 10px #000000; -moz-box-shadow:6px 6px 10px #000000; -webkit-box-shadow:6px 6px 10px #000000; } body div#devskin7458189 .box-shadow-2 { height:auto; height:auto; background:#D9EAFF; border:1px solid #000000; padding:10px; margin:6px 0px 0px 0px; box-shadow:6px 6px 10px 5px #000000; -moz-box-shadow:6px 6px 10px 5px #000000; -webkit-box-shadow:6px 6px 10px 5px #000000; } body div#devskin7458189 .box-shadow-3 { height:auto; height:auto; background:#D9EAFF; border:1px solid #000000; padding:10px; margin:6px 0px 0px 0px; box-shadow:6px 6px 10px #FFFFFF inset; -moz-box-shadow:6px 6px 10px #FFFFFF inset; -webkit-box-shadow:6px 6px 10px #FFFFFF inset; } body div#devskin7458189 .box-shadow-4 { height:auto; height:auto; background:#D9EAFF; border:1px solid #000000; padding:10px; margin:6px 0px 0px 0px; box-shadow:4px 4px 8px -2px #000000, -4px -4px 4px -2px #0C543C, 6px 6px 10px #FFFFFF inset; -moz-box-shadow:4px 4px 8px -2px #000000, -4px -4px 4px -2px #0C543C, 6px 6px 10px #FFFFFF inset; -webkit-box-shadow:4px 4px 8px -2px #000000, -4px -4px 4px -2px #0C543C, 6px 6px 10px #FFFFFF inset; } body div#devskin7458189 .rgba { height:auto; height:auto; background:rgb(217, 234, 255); background:rgba(217,234,255,0.4); border:1px solid #000000; padding:10px; margin:6px 0px 0px 0px; } body div#devskin7458189 .comments { height:auto; height:auto; background:#D9EAFF; border:1px solid #000000; padding:10px; margin:6px 0px 0px 0px; } body div#devskin7458189 .after { height:auto; height:auto; background:#D9EAFF; border:1px solid #000000; padding:10px; margin:6px 0px 0px 0px; text-decoration:none; } body div#devskin7458189 .after .u:after { content:' user'; color:#940303; } body div#devskin7458189 .after-2 { height:auto; height:auto; background:#D9EAFF; border:1px solid #000000; padding:10px; margin:6px 0px 0px 0px; text-decoration:none; } body div#devskin7458189 .after-2 .u:after { content:' 'url(https://electricjonny.com/journal/outgoing.png); } body div#devskin7458189 .after-3 { height:auto; height:auto; background:#D9EAFF; border:1px solid #000000; padding:10px; margin:6px 0px 0px 0px; text-decoration:none; } body div#devskin7458189 .after-3 a:after { content:attr(href); } body div#devskin7458189 .after-4 { height:auto; height:auto; background:#D9EAFF; border:1px solid #000000; padding:10px; margin:6px 0px 0px 0px; text-decoration:none; } body div#devskin7458189 .after-4 a { font-size:0px; } body div#devskin7458189 .after-4 a:after { content:attr(href)' 'url(https://electricjonny.com/journal/outgoing.png); font-size:12px; } body div#devskin7458189 .attr { height:auto; height:auto; background:#D9EAFF; border:1px solid #000000; padding:10px; margin:6px 0px 0px 0px; } body div#devskin7458189 .attr a:not(.external) { color:#10258F; } body div#devskin7458189 .attr a[href*='youtube.com'], body div#devskin7458189 .attr a[href*='youtu.be'] { color:#C6C600; } body div#devskin7458189 .conclusion { height:auto; height:auto; background:#DBD9FF; border:1px solid #000000; padding:10px; margin:6px 0px 0px 0px; box-shadow:4px 4px 8px -2px #B6B9B5, 0px 12px 18px -8px #FFFFFF inset; -moz-box-shadow:4px 4px 8px -2px #B6B9B5, 0px 12px 18px -8px #FFFFFF inset; -webkit-box-shadow:4px 4px 8px -2px #B6B9B5, 0px 12px 18px -8px #FFFFFF inset; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; } body div#devskin7458189 .styleCSS { font:9pt Courier; background:#D9D9D9; border:1px solid #000000; padding:8px; margin:10px 0px 0px 0px; width:auto; overflow:auto; white-space:nowrap; } body div#devskin7458189 .styleCSS .selector { color:#B30000; display:inline; } body div#devskin7458189 .styleCSS .property { color:#006400; display:inline-block; text-indent:30px; } body div#devskin7458189 .styleCSS .value { color:#00008B; display:inline; } body div#devskin7458189 .styleCSS .comment { color:#595959; display:inline; } body div#devskin7458189 h2 img, body div#devskin7458189 i.tri, body div#devskin7458189 i.gr1, body div#devskin7458189 i.gr2, body div#devskin7458189 i.gr3 { display:none; } body div#devskin7458189 .gr-top { background:#E6E6E6; border:none; } body div#devskin7458189 .gr { background:#E6E6E6; border:none; } body div#devskin7458189 .gr-top h2, body div#devskin7458189 .timestamp { margin:0px 0px 0px -20px; } body div#devskin7458189 .gr-box { border:1px solid #C4CCC4; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } body div#devskin7458189 .gr-body { border:none; } body div#devskin7458189 .ppb { background:#E6E6E6; box-shadow:0px 6px 8px -8px #000000 inset; -moz-box-shadow:0px 6px 8px -8px #000000 inset; -webkit-box-shadow:0px 6px 8px -8px #000000 inset; padding:8px 0px 8px 0px; }
dA has changed the allowed CSS properties slightly, and I (electricjonny ) wanted to write about them here so that people can understand what they are and how to use them.
Not everything I'm writing about is new, but I wanted to go over some things in a bit more detail so people can understand how it's used. Below you can see some links that will jump down to the specific area talking about them (unless you superbrowsed over to this journal (with the #/d type link). In which case, you're out of luck, I think. Click the title here to load this page normally).
▼ border-radius
▼ box-shadow
▼ rgba()
▼ /* CSS comments */
▼ :before :after content
▼ [attr="foo"] selectors
border-radius
So here is an example of a border-radius, which many of you probably already know of, but here it is again (you can hover over the CSS property to get a tooltip with more information):
All 4 corners have a radius of 10 pixels.
.
border-radius
{
border-radius
:
10px
;
}
Here's another div with a border-radius, but not all corners have the same radius value:
Only the top left and bottom right corners have a border radius of 10 pixels.
.
border-radius-2
{
border-radius
:
10px 0px 10px 0px
;
}
box-shadow
box-shadow is a handy property you can apply, although it's a bit more complicated. But here's a simple example:
The box-shadow is 6 pixels to the right, and 6 pixels below the div, with a feather of 10 pixels, and a color of #000000.
.
box-shadow
{
box-shadow
:
6px 6px 10px #000000
;
}
That's the simplest form you can write out a box-shadow. But you can make it a bit more complicated, for example, adding a spread value to the shadow. A spread value is how much to shrink or expand the shadow. So here's that same example, but I've expanded the box-shadow by 5 pixels:
The box-shadow is 6 pixels to the right, and 6 pixels below the div, with a feather of 10 pixels, and a color of #000000. It's now expanded to 5 pixels bigger than normal.
.
box-shadow-2
{
box-shadow
:
6px 6px 10px 5px #000000
;
}
Then you can tell the shadow to be an inset shadow, so that it's applied inside of the div and not on the outside. You can do this by simply adding inset after your color value. here's a box-shadow with an inset shadow type:
This shadow is 6px to the right and 6px below the div, with a feather radius of 10px and color of #FFFFFF , but it's inside of the box.
.
box-shadow-3
{
box-shadow
:
6px 6px 10px #FFFFFF inset
;
}
Then to add even more customization, you can add box-shadow's on top of each other, to add more of them. Here's a div with multiple box-shadow's:
There are two shadows on the outside, and one on the inside here.
.
box-shadow-4
{
box-shadow
:
4px 4px 8px -2px #000000, -4px -4px 4px -2px #0C543C , 6px 6px 10px #FFFFFF inset
;
}
rgba()
rgba() is a way to specify color values based on red green and blue values, and an alpha value. This is useful to put transparency into the color. Below is the same blue colored box as above, but at lower than half opacity, which should show the background texture:
The rgba() value here is rgba(217,234,255,0.4), and the last 0.4 value tells the color how opaque to be.
.
rgba
{
background
:
rgba(217,234,255,0.4)
;
}
The rgba() color notation can be used anywhere that you can put colors. You may need to specify the opacity value with a 0 in front of the decimal, but that may change in the future. If you get errors using rgba() try making the alpha value start with a 0.
/* CSS comments */
As you may know if you style a lot of things, comments are very useful in making notations about what a specific thing does. The comment doesn't effect the style at all, it's just used to let people know what the developer is doing with the code. Comments are written between /* and */. So this is a proper comment: /* this selector styles the headings */. Below is an example of some CSS and a comment:
The only gotcha with comments is that any comment you put in can't be in a selector or in any of the properties or values. So only above and below the selector and properties, like below:
/* this selector styles the headings */
.
h1
{
color
:
#105210
;
}
:before :after content
The :before: and :after and content selectors and properties are all related, and it lets you apply content based on CSS rather than HTML. The :before and :after selectors let you apply content before and after certain classes and selectors, and what is before and after is selected based on the content property. That's a bit hard to explain, but here is an example:
Using content, I am able to apply the text " user" to dA's built member classes when I use the :devusername: HTML: electricjonny GinkgoWerkstatt
.
after
.
u
:
after
{
content
:
" user"
;
color
:
#940303
;
}
Now that specific example is a bit strange and useless. Lets see what else we can do. We don't have to use text with content. We can use images (and more), so lets see what happens when we use an image. Here is the same CSS, but instead of using text, I'm going to apply an image:
Here are two devusernames, and you can see a small image applied after each name: electricjonny GinkgoWerkstatt
.
after-2
.
u
:
after
{
content
:
" "url(http://electricjonny.com/journal/outgoing.png )
;
}
But wait, there's more! So we can use text for content and also images. But we can also append attributes to things. This is a bit complicated, but lets say you want to put the location of a link after the link. Here's what I mean:
It's just a link to google, but after dA's parsing of [link], you can see the location of the href attribute.
.
after-3
a
:
after
{
content
:
attr(href)
;
}
Now lets adjust things a tad more to get something useful - remove the [link] part and apply our image to any link we post:
With the below code, we are shrinking the font-size down to 0, and then applying the href of the link after it - back at the normal font-size, and then adding our image:
.
after-4
a
{
font-size
:
0px
;
}
.
after-4
a
:
after
{
content
:
attr(href)" "url(http://electricjonny.com/journal/outgoing.png )
;
font-size
:
12px
;
}
And of course, the same works with :before, and it will add your content before the selector.
You'll notice that I've used this to add " - (time since posted)" after the .timestamp class at the top here: content:" - ("attr(title)")";
[attr="foo"] selectors
[attr="foo"] is a way to get more selective with your selectors. We've been selecting things we want to style with classes (prefixed with a period), and DOM elements (like img). With [attr="foo"] selectors, you can select attributes specifically based on what the attribute value is. For example, we can select all href links that are youtube.com or youtu.be domains differently from all other domains. So you can see, based on the link color, that some links are youtube domains, while other links aren't (ok, well technically youtube.com or youtu.be just needs to be somewhere in the domain, but dA's crappy outgoing filter sort of screws this up. But I hope you get the idea):
Links that are youtube.com or youtu.be URL's are yellow, while all others are blue.
brokenchar.deviantart.com/art/… youtu.be/KZUc13CH3us www.deviantart.com www.youtube.com/watch?v=OfwPGZ…
.
attr a
{
color
:
;
}
.
attr a
[
href*="youtube.com"
],
attr a
[
href*="youtu.be"
] {
color
:
;
}
There are four ways to select things based on the attribute value. • [attr="foo"] means "this attribute must match this value in order to be true".
• [attr^="foo"] means "this attribute must start with this value to be true".
• [attr$="foo"] means "this attribute must end in this value to be true".
• [attr*="foo"] means "this attribute must contain this value anywhere in the value to be true".
So as you can imagine, you can start getting creative with how you style things based on what kind of attributes you or dA uses. You can get pretty specific with how certain links look based on the href value, or you can play with how the .timestamp class here looks, if you want to style it differently when the title says a certain thing.
Just so you know, right now you can't use any / character in your attribute. So you can't use [href*="/art/"] to select only those specific URL's.
In conclusion
So this was sort of a textwall of information, but explaining how these things work just ends up like that. dA skins can be a pain in the ass sometimes with what they allow and don't allow, but that was recently changed to now tell you of your mistakes instead of just removing any invalid code (thank DEVlANT for that). I'm pretty sure this is all correct, but there might be a mistake here and there, or a wrong term used. If you have any questions, please feel free to post them here
Related content
Comments: 80
Awesome! 
( I just wish there would be something official by dA like this 
👍: 0 ⏩: 1
Thank you
Well dA doesn't really teach us things like CSS. But yeah, a list of properties we can use (and not use) would be very helpful.
👍: 0 ⏩: 1
Ah yeah, of course. I would already be happy if all the options were just noted down in a most minimal list without any explanation 
👍: 0 ⏩: 1
Yeah 
👍: 0 ⏩: 1
The already have the list of what is possible in the FAQ for general HTML. Of course, a CSS list would be a lot longer, but it may still be very useful. I know, some deviants already took it into their own hands to make such lists, but the one's I know, forgot the name now, are long outdated.
👍: 0 ⏩: 0
I don't really understand the [attr="foo"] selectors? How would I make dA links a different colour to other link? Thanks for writing this, by the way.
👍: 0 ⏩: 1
I'm not sure that the [attr="foo"] selectors work for everyone yet, but a simple way to style deviantart.com links differently from other outgoing links would be to style the .external class. That uses CSS that's a bit more normal, and should work.
So if you just want to style the external outgoing links differently, you can use this CSS:.text a {
color:#00FF00;
}
.text a.external {
color:#0000FF;
}And the outgoing links would all be blue, while dA links would be green.
👍: 0 ⏩: 1
Thank you for this, I don't fully understand some of it, but I'll learn..
👍: 0 ⏩: 1
No problem
It doesn't all work quite yet, but you can (hopefully) try to make some sense out of it all
👍: 0 ⏩: 0
I'd like to know how to do that animated stuff on the journals.
👍: 0 ⏩: 1
Transitions? Yeah, that's a sexy as shit way of styling things. I don't know when it will be made available, but I'm hoping it's soon
👍: 0 ⏩: 0
Thanks Johnny, looks like HTML5 and CSS are taking little steps even further forward here on dA. SOON we'll be able to hack the pages even more easily for custom skins, etc.. 
👍: 0 ⏩: 1
Yeah, things are moving forward with skins it seems. I'm really happy, since it opens up all kinds of doors for the skin developers
👍: 0 ⏩: 1
'Bout time. I've been waiting for YEARS for customization to evolve with our user pages... And while I'm only NOW really getting competent with CSS/HTML, what I've been learning has been burning a hole in my proverbial pocket here on dA.
Have you ever noticed with Gruze that it automatically anchors the images top-left and that the border even when at 0px, will still contain perfectly our images without showing peculiar image overlaps, etc..? LOL@ME. Of course you knew that, I'm the slow learner in the pack. 
👍: 0 ⏩: 1
Not quite sure what you mean with the images 
And haha, yeah. I write some HTML pages by hand, with all sorts of cool styling, and then just grumble with the limitations on dA journals 
👍: 0 ⏩: 1
Yeah, the rounded corners and image position for header and body. the .gr1, etc - All works seamlessly without having to actually add in any code manually.
And absolutely, browser support for many advanced CSS/HTML features are really starting to blow my mind, and even IE, my loathed enemy - has begun to catch up. Sorta. Now for dA to let us have more control over page layout/skin-ability...
👍: 0 ⏩: 0
Awww, I really wanted content to work. I tried it before I scrolled all the way to the bottom. You with your privileges
👍: 0 ⏩: 1
Yeah, not really sure why it's working for me. I turned off the settings that give me extra privs and it still works. Shame, since it's a pretty helpful property to use.
👍: 0 ⏩: 2
it works on the devbug priv not any of the vms features, so you can't actually turn it off 
👍: 0 ⏩: 1
Oh, I see (sorta)
Is content going to be made available for people to use at some point?
👍: 0 ⏩: 0
I had been wanting to use it for some time. Nice for things like blockquotes and links to have an image. But I thought of a funny use for your "user" example. Try "in Bed" after the usernames instead ;D `electricjonny inbed Would be fun for an April Fool's journal skin!
👍: 0 ⏩: 2
I like the way you think
Name not required in bed would mean, I don't care who you are as long as I get laid?
👍: 0 ⏩: 1
That would be awesome
👍: 0 ⏩: 0
I see me
Like i already said, looks good to me and might be very helpful for a lot of people. Still not sure why so many people are happy about the rgb() stuff.
👍: 0 ⏩: 2
Makes less images needed. I am excited about rgba. Which I never paid attention to them before because I couldn't use them.
👍: 0 ⏩: 1
I never felt the urge to use it. Guess i have to read about it, but still think it's easier to use hexcode.
👍: 0 ⏩: 1
Yes, hexcode is easier. I'll have to give the rgba a try though. See how fun transaprencies can be.
👍: 0 ⏩: 0
Heh, well it's rgba(), and that last a lets you put opacity in. So that's a nice way to get opacity in. For example, a div on top of a background image and to have the background image show through a bit without lowering the opacity of the whole div (and text).
I've seen skins that do this with a semi-transparent PNG image, and this is just a bit simpler and easy to adjust.
👍: 0 ⏩: 1
Ah sorry for missing that letter. But yeah the opacity feature is nice, but imo it's more difficult to work with rgb values instead of hexcode - at least if working with PS. Or maybe i am just too lazy. That's why i was wondering why everyone is so happy about it.
But yeah, you are right it would be easier to adjust things via that rather than using pngs (like i did before as well 
👍: 0 ⏩: 1
Haha yeah, for strait up colors, I much prefer hex, since it's a simple copy/paste from a color picker
This is just nice since it gives you opacity, which can be pretty useful in some cases.
👍: 0 ⏩: 1
In case i will make a new journal skin in the future i will give it a try!
👍: 0 ⏩: 0
Great write up. Thanks for putting these all in one place.
👍: 0 ⏩: 1
Thanks
I was getting scared I'd hit the journal size limit
👍: 0 ⏩: 0
My gawd, woman, you're 111 years old 
👍: 0 ⏩: 1
actually I'm 738, but dA only let's you go back so far
👍: 0 ⏩: 1
You better not be a sparkle vampire.
👍: 0 ⏩: 1
um no I'm a lycanpire mua mua mua hahahahahahaaha!
👍: 0 ⏩: 1
Thank goodness. I'll put the fine silver away when you come over for tea.
👍: 0 ⏩: 1
| Next =>