[x]

deviantART

 
[x]  

Notices



More Customization News

Smile - 微笑 - Sourire - Lächeln - Son

~Humanization:iconHumanization: reports, 11h 13m ago
Well, Summer is upon us and it calls for celebration! As difficult as life may be sometimes and as much troubles as there are in the world, we need to remember to smile and stop and remember to take a look at those little things in life we might miss but so often bring smiles to our faces =D

Chance to Shine - Volume VI

`LeoLeonardo:iconLeoLeonardo: reports, 1d 19h ago
Newest issue of the emoticon newsletter, Chance to Shine!

10 Awesome Free Avatar Creators

=FreeAvatarProject:iconFreeAvatarProject: reports, 2d 23h ago
Here are 10 free avatar artists that you may not know. Find free avatars to use at dA and meet some talented iconists!

Unexpected Greatness!

^Grandchild:iconGrandchild: reports, July 7
Three of the currently most active members of the AVS visualization community released big packs during the last week. And a classic reappeared on the scene.
Time for a feature I think!

So i herd u liek emotes?? - Volume 39

^Synfull:iconSynfull: reports, July 4
39th volume in a weekly series focused on promoting emotes and emoticonists from the dA community

So i herd u liek emotes?? - Volume 38

^Synfull:iconSynfull: reports, June 28
38th volume in a weekly series focused on promoting emotes and emoticonists from the dA community

Chance to Shine - Volume V

`LeoLeonardo:iconLeoLeonardo: reports, June 23
Issue number 5 of the Emoticon newsletter: Chance to Shine

This is Dead !

~Mis-kin:iconMis-kin: reports, June 20
About Dead-Man23 ...

So i herd u liek emotes?? - Volume 37

^Synfull:iconSynfull: reports, June 21
37th volume in a weekly series focused on promoting emotes and emoticonists from the dA community

The Future Is Upon Us - Pixel Art/Emoticon Contest

=Sinister-Starfeesh:iconSinister-Starfeesh: reports, June 16
Pixel Art/Emoticonist Contest

The idea of the contest is to create somthing futuristic. This can be your idea of futuristic, or the idea everyone has planted in their head that we will be flying in cars, aliens and dodgey space meals.

Customization News This Week

Chance to Shine - Volume VI

`LeoLeonardo:iconLeoLeonardo: reports, 1d 19h ago
Newest issue of the emoticon newsletter, Chance to Shine!

Smile - 微笑 - Sourire - Lächeln - Son

~Humanization:iconHumanization: reports, 11h 13m ago
Well, Summer is upon us and it calls for celebration! As difficult as life may be sometimes and as much troubles as there are in the world, we need to remember to smile and stop and remember to take a look at those little things in life we might miss but so often bring smiles to our faces =D

10 Awesome Free Avatar Creators

=FreeAvatarProject:iconFreeAvatarProject: reports, 2d 23h ago
Here are 10 free avatar artists that you may not know. Find free avatars to use at dA and meet some talented iconists!

Unexpected Greatness!

^Grandchild:iconGrandchild: reports, July 7
Three of the currently most active members of the AVS visualization community released big packs during the last week. And a classic reappeared on the scene.
Time for a feature I think!

All is Well With Emotes - Volume 1?

~Alliswellwithme:iconAlliswellwithme: reports, 2d 18m ago
The First (if any more come anyways) of All is well with Emotes News thingies XD

Helveticons

=eos8:iconeos8: reports, 1d 10h ago
Helviticons by Maximilian Larsson

Free Dragon Icons!

=FallenZephyr:iconFallenZephyr: reports, July 7
For anyone who needs an icon!

A Question, tell the truth now.

~trinitymaster3:icontrinitymaster3: reports, July 7
A question about which characters of mine that people like the most. I have a list here.

Who loved it?

~Eleionomae
=ldylore
*pandemoniumfire
*LobaNegra94
*biquin
~foxdragoncloud
=my-dark-desire
~BookKeeper
~Aminatos
~Misa-chii
=StarWisherMidnight
=paintedbluerose
*libiblackcat
=ReevScythe
=Toph-and-Daisy-Fan
*SilviaCampo96
=myah5000
=laceratedwrists
=DelinquentDog
=LadyBlacksword
=munich-lover
=ailime
*AliveInLetters
=3o6k0
=DarcKnyt
*berrixkisses
=Asatira
~Day-Li
=King-Mushroom
!Your-Reflection
~fuzzy-tofu
=EvilMariachiBand
~Blodsvart
~bryzunovrokks
=oh-noh
~AubryTheOdd
=bbokeer
=ozzyopolis
=Robiq
=Metalix-Reshef
=gnulinuxman
~girlonthesidewalk
~evolus
~KiiKari
~fanficbug
*fmuller
~Crysthal
~RJDaae
~StarburstMinni
=kjherstin
=sonar-ua
=kmil60
~Marauders-Princess
=mzkate
=Infernalord
=Arteddy
~KatSumeragi
~11J
=karusuman
~kawaiiFuu
=pic44
*amarilli
=neokiva
~kanotai
`DigitalPhenom
=porotto
*FlameReaper
=apocalypsebunny
=WOWandWAS
~Fire-Woman-Janice
~falconmjc07
~Gel-chan
=Utena-Tenjou10
=BobSmith006
~bricta
~pipid
~mcf-stock
~sunmoongirl
=Lintufriikki
=TwillightRhapsody
*Special-K-001
=MissingHorcrux
~dr-druids
~West-Ninja
~BloodRubiesNata
~dragonzmoon
*silvercss
~lilivy
~Raynie-Lockedheart
~Flaremaster
=SilverPixiGirl
~CrimsonSilk
~bchere
~My-Music-My-Life
~Anathema6205
=RibenaCreature
=spojr
=Shironotenshi
~twinofBorat
*Insanguinated
~lionheart539
~FutureElements
~Subnuggurat
=wrinkledlight
~Lost-Mind-Found-Bob
~-nexis
*AbidingDaRules
=engine-kyo
=Jezhawk
~ArtOfTheChicken
=chod
*maverick-decadence
*shawn529
~poisonedsodapop
=eagle79
`ClaireJones
~Dying-Soul
=starvine
~litauh
~kukalive

x 1 devious rejections

Customization


Make your CSS Journal #2

=dot-Silver:icondot-Silver: reports, March 12, 2007
So in the first one, we learned how to create our first basic CSS Journal. But now it's time to learn a bit more yes? Make your CSS Journal stand out a bit more with adding some of your own bits and pieces into it. In the this article, I will be replacing all < and > with the characters [ and ] so that the code will show properly.



Sub Headings

With CSS Journals allowing internal divs, it's very easy add extra bits into it. A comment usage is sub heading, just like using the bold text on news to define a certain area of the article. You can find them almost every where.



.subhead{

border-bottom: 2px solid #821122;

font-family: Courier New, Courier, tahoma, arial, verdana, sans-serif;

font-size: 16px;

}




We set a border bottom, a font-family and size. You can do more if you want, such as backgrounds, more borders, etc.



[div class="subhead"]Heading Title[/div]



More Internal Divs

Internal divs is a great way of showing extra bits off, whether it's news, or stamps, or features work, etc. Anything.



Internal divs are divs that we use inside the journal but not pre-made ones like the journal itself.



.thumbnails{

background: #333333;

color: #CCCCCC;

text-align: center;

padding: 5px;

}




[div class="thumbnails"][/div]



You can add as many thumbnails as you want in there. We define a background colour, colour of any text being used, and we set them to be in the center. When we don't define a width, it will just automatically be 100%.



Styling thumbnails

So we have our special section for the thumbnails, what about adding an extra border onto these or something?



.thumbnails img{

border: 6px solid #FCFCFC;

}

.thumbnails img:hover{

border: 6px solid #821122;

}


We add a border of 6px wide, when the thumbnail is hovered we change the border colour. Simple as that really.

Scrollable Divs
What if you are showing a lot of thumbnails but you don't want your journal to be very very long right? Well, we could put the thumbnails into a div that has a set height, and will scroll up and down.

.scroll{
position: relative;
overflow: auto;
width: 100%;
height: 200px;
text-align: center;
background: #561420;
}


And the div code.

[div class="scroll"]Thumbnails Here[/div]

!important
I would just like to clarify a fact, because a lot of people use this little unneeded bit in their CSS, which of course, just makes the page load a bit slower than it could. It is a fact that you do not need to add !important to the end of all your CSS elements, example:

text-align: center !important;

Not needed... delete that !important!

That's all folks
Well that's all for this series, but I would like to finish off with some CSS Journal features (not including mine)

=ElementsUnleashed - Simple yet effective, and a nice combination of colours.

*zeolyte - A design that I enjoy, and a great way of keeping the dA colours too.

*Nicasus - Got to admit, pretty clever design? So clean and professional looking too.

*steward - Ok ok... Not the best CSS design, but it's a good example to a basic CSS Journal.

Devious Comments

love 1 1 joy 1 1 wow 0 0 mad 0 0 sad 1 1 fear 0 0 neutral 0 0

^LawrenceDeDark:iconLawrenceDeDark: Mar 12, 2007, 6:19:30 PM
Nice ... I like the custom thumb code and I have never understood why so many people are using the !important thing.

--
Resources & Stock Gallery Moderator
@cypher-neo:iconcypher-neo: Mar 13, 2007, 12:44:38 AM
The !important is probably the last hangover of CSS that can be disposed of in most browsers.
Some browsers claim to need that extra !important kick in the rear (:lmao:) but for the most part Firefox does not. There are a few FF plugins that still use that extra tag though.

--
We didn't start the flame war...
Peeps were hatin on it, before I left my comment.
~humpy77:iconhumpy77: Mar 13, 2007, 6:22:52 AM
Nice article.

You can display < and > on your code using &#60; and &#62;, so type
 &#60;div class="scroll"&#62;Thumbnails Here&#60;/div&#62;
and get
 <div class="scroll">Thumbnails Here</div>

You should be able to use &gt; and &lt;, but these seem to be blocked so you'll need to remember the codes.

It might be worth mentioning that you do need !important in some situations, but that it should only be tried when you're not getting the result you expect.

--
When I have nothing to say, my lips are sealed.
=dot-Silver:icondot-Silver: Mar 13, 2007, 8:21:00 AM
Well I was told by staff that !important isn't needed, this is because our custom CSS is the last CSS to be put on the page, so everything that we do in it overwrites all other CSS that is put on the page.

And thanks for the tip on the < and > I'll remember that for when I add #4 to the news article. (I already have it on my journal)
~humpy77:iconhumpy77: Mar 13, 2007, 8:36:40 AM
That's what I would have expected. However, when I did my first journal with CSS I definately had to add !important to get some of the background images where I wanted them. Maybe it's just a problem in the preview window, :hmm:.

Glad I could help. You can use the &# codes to get all sorts of characters out, www.lookuptables.com.

--
When I have nothing to say, my lips are sealed.
~lysanda:iconlysanda: Mar 14, 2007, 2:31:31 AM
Very useful! When I will have some time I will take them all in action!

--
*lysanda

"the hardest part isn't finding what we need to be, is being content with who we are" - the ataris

{ [link] -> my gallery }
~littlep:iconlittlep: Mar 14, 2007, 2:41:02 AM Mood: Love
very very useful for the css beginer~!!!!

thanks!

--
On my way... ...



(\\_/) welcome to my gallery {link}
(O.o) blog {link}
(^ ^)
=BeyondTheHorizon:iconBeyondTheHorizon: Mar 14, 2007, 6:00:17 AM
The !important tag might be needed by some browsers. Take *zeolyte's Journal; check it in FF and IE, and you see 2 different Journals. Dunno if this is the reason, but the 2 versions does look rather different ;)
*yeknom:iconyeknom: Mar 14, 2007, 6:31:29 AM
Good article, saw this just when I'm starting to take a bold step into CSS :D
 

Site Map