Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:iconbradleysays: More from bradleysays


More from deviantART



Details

Submitted on
May 2, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
6,297 (2 today)
Favourites
104 (who?)
Comments
53
×

CSS Did You Know? - May 2nd, 2013

Thu May 2, 2013, 4:20 AM

{

CSS Did You Know?

}


Volume 9


:iconcss-dyk:

Welcome

CSS can be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note CSS-DYK. :)

Inside

dA Embedded Deviations and Videos Styled by GillianIvy
Author selector by im-not-sana





:icongillianivy:

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.
Thumbcode by GillianIvyGrau Valentinsdag by GillianIvy

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)
Embed Thumb by GillianIvy
Grau Valentinsdag by GillianIvy


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.
Video Code by GillianIvy


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.





:iconim-not-sana:

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:


/* styles "by" */
.gr-top .author {
color: #666666;
}

/* styles username */
.gr-top .author a{
color: #4DB2FB;
}

/* styles username on hover */
.gr-top .author a:hover {
color: #BBE2FF;
}

Output:




The 9th instalment of CSS Did You Know? Learn about styling embedded deviations and videos as well as the .author{} selector.
Add a Comment:
 
:iconmelikebat:
MelikeBAt Featured By Owner Apr 23, 2014  Hobbyist Traditional Artist
This was very useful to me. I was struggling to find out how to style author.
Helped a lot. Thank you. :)
Reply
:iconstojan44:
stojan44 Featured By Owner May 4, 2013
wtf is CSS? counter strike source?
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 4, 2013  Hobbyist General Artist
:lol: Nah it stands for "Cascading Style Sheets" which is basically a computer language used to style websites and blogs etc. that use HTML :)
Reply
:iconjustmango:
justMANGO Featured By Owner May 3, 2013  Hobbyist General Artist
I learn something new every day. :lol: Great article! Saved.
Reply
:iconiridescentstardust:
IridescentStardust Featured By Owner May 2, 2013  Hobbyist General Artist
IT'S LIKE YOU'RE WARPING THE LAWS OF PHYSICS
:heart: amazing article as always ;_; I can't wait for the next issue~
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 4, 2013  Hobbyist General Artist
:lol:

dArwinz theory of DEVolution :la:
Reply
:iconiridescentstardust:
IridescentStardust Featured By Owner May 4, 2013  Hobbyist General Artist
:iconheaddeskplz: Okay that was good XDD
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 4, 2013  Hobbyist General Artist
psh, that was so corny :giggle:

totally got an idea for an emote now :lol:
Reply
:iconiridescentstardust:
IridescentStardust Featured By Owner May 4, 2013  Hobbyist General Artist
Is it a fella-monkey? :shifty:
Cause that might be cute :plotting:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 4, 2013  Hobbyist General Artist
Something like that :D
Reply
Add a Comment: