Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:iconbradleysays: More from bradleysays


More from deviantART



Details

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

Stats

Views
7,850 (4 today)
Favourites
87 (who?)
Comments
28
×

CSS Did You Know? - May 9th, 2013

Thu May 9, 2013, 5:28 PM

{

CSS Did You Know?

}


Volume 10


: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

Author Avatar by im-not-sana
Utilizing the Header and Footer Sections by GillianIvy


:iconim-not-sana:

Author Avatar



Hey again Devious CSSkinners! So last article I mentioned how to add and style the .author{} selector. This article, I'll tell you how you can add an author's avatar into your journals that the gruze skin will automatically generate! Initially, I was going for a more difficult approach (which is why I separated the two articles) but I figured out a MUCH simpler way to code in the avatars! :eager:

CSS


.gr-top .author{}

.gr-top .author .avatar {
display: inline!important;
}


Basically, dA has set the .avatar{} display value to none, so we need to override that. After you've done that, you'll notice the avatar is at its original size and cropped off to the side. So you'll need to change it's position, width & height.

EXAMPLE


.gr-top .author{}

.gr-top .author .avatar {
display: inline!important;
width: 25px;
height: 25px;
top: 20px;
left: 48px;
}


RESULT




Quick Tip by miontre: if you add position: static; the avatar will revert to its original position, next to the username!

That's just the most basic styling I've done to accommodate my own journal skin, now you can get creative with whatever property and values you like to match your CSS! If anyone has made any skins using the .author{} and .avatar{} selectors, link theme here! I'd like to see what you've all come up with :) Happy coding! :la:


:icongillianivy:

Utilizing Header and Footer Sections



If you have content you wish to have saved on your skin for every journal post, the best place to save it is in the Header and Footer sections. Typically a good place for links, menus, credits.... But can also be used to make a separate container.

Header by GillianIvy Footer by GillianIvy

Whatever by GillianIvy End by GillianIvy

Example by GillianIvy


It can have whatever you want, text, links, images.  This might be a good spot for an image you want to easily be able to edit.  Instead of putting in the code.  Which would be easier for the user as well.  That way they can customize the skin with out needing to dig through the CSS.

With Preview by GillianIvy


Say you would like to have the text area a different color than your header and your footer, but .text controls all three.  So you make a custom box to go inside your journal input.  Which resolves the issue.  However, you don't want people to forget these in their journal and have the section messed up.  So, open the tag in the header...  Then close the tag in your footer.  And Save.  Now, it is saved into the skin for each use.  No extra code for the user to have to remember.

Text Container by GillianIvy


CSS Tips

Do note that because of the line breaks between the header/footer and the journal input area that it looks like you have extra padding.  Just remove it, in this case, padding:0 20px;
<p>Paragraphp> will not work well for this.
Blanks or blueprints of code HTML can be stored here for easy cut & paste, however many people will forget to edit it out and will have a random snippet on their journal instead.


Add a Comment:
 
:icondianagrigore:
DianaGrigore Featured By Owner May 16, 2013  Professional Photographer
:clap:
Reply
:iconikue:
Ikue Featured By Owner May 11, 2013  Hobbyist Digital Artist
ALL THE KNOWLEDGE! :iconallthethingsplz:
Reply
:iconminato-kushina:
Minato-Kushina Featured By Owner May 11, 2013
So useful info! Thanks a lot for sharing! :love: :hug:
Reply
:icongillianivy:
GillianIvy Featured By Owner May 10, 2013  Hobbyist General Artist
:D Glad people are enjoying this series. Eager for more! I'll have to get back to writing more tidbits, looks like you'll be needing more soon ;D
Reply
:icondevildjmachine:
DevilDJMachine Featured By Owner May 10, 2013  Hobbyist
waah, thought CSS meant Counter Strike Source.
Reply
:iconzesler:
zesler Featured By Owner May 10, 2013  Student Digital Artist
That is one awesome guide.
Reply
:icontarynnefdt:
TarynNefdt Featured By Owner May 10, 2013   Digital Artist
Great work
Reply
:iconvanmall:
vanmall Featured By Owner May 10, 2013  Hobbyist Digital Artist
Awesome article! :clap:
Reply
:iconmiontre:
miontre Featured By Owner May 9, 2013  Hobbyist Photographer
And great article people! :)
Reply
:iconmiontre:
miontre Featured By Owner May 9, 2013  Hobbyist Photographer
Quick tip that you might want to get Bradley to update, Sana:

If you add position: static;, it will revert to it's normal position without the need for you to position it manually! :)
Reply
Add a Comment: