Deviant Login Shop  Join deviantART for FREE Take the Tour
Group Info Group Founded 4 Years ago Statistics 412 Members
56,905 Pageviews556 Watchers

Gallery Folders

Featured
Resources
deviation in storage by miontre
Articles and pages

Deviants

Admins

Founder

electricnet 

Co-Founders

ginkgografix 

Visitors

You're not here because you're not logged in
  • :iconwerxzy:
    Werxzy
    Visited here 2 days, 2 hours ago
    Isn't a member
  • :iconareteeirene:
    AreteEirene
    Visited here 6 days, 2 hours ago
    Isn't a member
  • :iconelectricjonny:
    electricjonny - Moderators
    Visited here 1 week, 3 days ago
    Submitted a deviation on March 14th, 2014
  • :iconroqqr:
    RoqqR
    Visited here Apr 1, 2014, 2:57:47 PM
    Isn't a member
  • :iconsweetpegasis:
    SweetPegasis
    Visited here Mar 26, 2014, 7:39:44 AM
    Isn't a member

Affiliates

:icondeviantartconcept: DeviantARTconcept Conceptually Deviant :iconecssited: eCSSited a place for all your CSS needs

dA CSS Changes

Sun Mar 25, 2012, 4:18 AM
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


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 ginkgografix
.
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 ginkgografix
.
after-2
.
u
:
after
{
content
:
;

}


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:
Here's a link: www.google.com


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:
Here's a link: www.google.com


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
:
;

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
:
#10258F
;

}

.
attr a
[
href*="youtube.com"
],
attr a
[
href*="youtu.be"
] {
color
:
#C6C600
;

}


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 :)


More Journal Entries

Comments


Add a Comment:
 
:iconastrikos:
Astrikos Aug 17, 2012   General Artist
Quite an amazing group.
Reply
:icon707artworks:
Thankful for membership.
I Look forward to participating and
continual learning.
Reply
:iconlampent:
Ohh, awesome. I'm gonna have a field day with these. Thanks for your contributions, guys!

I realize this isn't the place, but as a computer noob, I was also wondering if there's anybody who could possibly help me out with some of my other extensions or is willing to take userscript requests?
I'm at a loss for how to use many of the ones I have installed.
Reply
:iconswordofscotland:
I was living under a rock and I admit that I had not head of this Group before. This is truly a remarkable Group.
Reply
:iconelectricjonny:
electricjonny Nov 17, 2011  Hobbyist Photographer
Thanks! :)
Reply
:iconmatildarose:
matildarose Jul 22, 2011   Traditional Artist
I hate to bug, but is there any script or addon that allows people to have an easier time with multiple accounts? I have one account for stock images, and it's a headache to go back and forth. I've tried searching the DA customization category, but there's so many miscategorizations in there that it's hard to find anything that's new there.
Reply
:iconginkgografix:
I used to have different browsers for my different accounts. The most active one was used with Firefox, while IE, Opera or Safari was used for any other. That way i don't have to log in and out all the time.
Reply
:iconmatildarose:
matildarose Jul 22, 2011   Traditional Artist
Yeah, I use IE, but it was annoying at first until after I got all the messages about features and updates and whatnot out of the way.
Reply
:iconelectricjonny:
electricjonny Jul 22, 2011  Hobbyist Photographer
You mean, something to make it easier or quicker to log into multiple accounts?

Nope, there's nothing like that, really. When I want to switch accounts, I just login and then do what I need to do, then log back into my main account.

I use this bookmark to login:
https://www.deviantart.com/users/login?ref=http://my.deviantart.com/messages/
and that may be a tad more helpful, since that will send you to your message centre after you log in.
Reply
:iconmatildarose:
matildarose Jul 22, 2011   Traditional Artist
Yeah. I use the 'another browser' trick, but I wanted to see if anyone's gotten around that code-wise. On the flipside, in my search for this, I've found many excellent plug-ins that have made DA much easier to manage in this group.
Reply
Add a Comment: