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.

That gives us a regular thumb size.  Most CSS coders know how to style these already, and there are several tutorials all over the place for that.  Check the galleries of some of the major CSS groups: eCSSited, deviantCSS, CSS-Babes, journalcss...   And :bigthumb#: works with the same CSS.  However, the embedded deviation, which instead of making a standard thumb size, you can size however you like has a different CSS code.  I used to make a separate div to be a container for these big thumbs, but that can be a lot of extra code for the user.  And if they aren't very good at HTML they might not want to use your skin.

So, let's try the same thumb code again, but put it into an embed code (if you submit the journal via Sta.sh this code is automatically generated)


There is also embedded literature deviations and embedded video.  Lits are coded exactly the same, where you take the numbers only from the thumb and set that as the ID value.  The profile can be youtube|vimeo|film and the id is the code for each of those.  Either thumbcode fo dA film or the url code's unique identifier.

How to Code the dA Embed

Okay, the moment you have all been waiting for, the codes to make these big beautiful images bigger and beautiful-er.   Uh huh.

.embedded-deviation{}

Container for the Embedded Deviation (image or lit)

.embedded-image-deviation img{}

The image itself.  Using both of these makes it so you can make a box and a style for the image.

.daembed{}
iframe{}

Both of these will effect Youtube and dAfilm.  .daembed{} does not work on dAfilm, iframe does.  I have not yet tested for Vimeo, but the iframe should work at the very least.

.embedded-deviation-overlay{}
.embedded-freeform-deviation{}

This is for the lit embedded deviation.  I have not yet tested how these work, looking at the code, it looks like they are both the same section.  Be advised, iframe is also in the code for the literature embed so may effect both the videos and the literatures.  You may need to do a cancel out if there are problems.  (So, .embedded-deviation iframe{} might work.)

I've only recently started testing these and will continue to do so.  I am keeping a blank template updated with all the codes I find and what they are for in my GoogleDrive files.  Which I do permit anyone to have a look.  If anyone wants to give me feedback and test these with me, I'd very much like to discuss.  Using these will end the need to add an extra container div just for those elements.  You can code them all to look like a regular thumb style, or code them to look like special boxes or frames.

Author Selector

To all the CSSecksy people out there, don't you find it a tad bit annoying when you read articles posted through groups, and you can't tell who wrote the blog? Or don't you find it annoying having to manually code in usernames at the top for convenience? Well, there's actually an easy way to do this! Back when gruze was the default skin to publish journals, group blogs had an .author{} selector that displayed the author's username in the .gr-top{} right after the date. So now we can use this to our benefit and code it into our skins for our convenience I'll show you how, it's very simple really. Just add .gr-top .author{} into your CSS and it will automatically place by username into your skin and you can style it however you want!



will become

Example:

Output: