Shop Mobile More Submit  Join Login
Ah yes welcome back! Yes it's been two weeks already, and a day over too. Sorry about that. But all that aside, let's begin with part five (wow!) of Getting the Most out of your CSS Journals. If you want to read the rest of the series before you look here, make sure to read: Getting the most out of your CSS Journals!

Side menus

Marker-Guru suggested this, and I thought I'd give it a shot. It's the standard Side menu. Nothing flashy about it, it's just a menu at the side that holds your links, stamps and whatever. This code can easily be adapted to hold your other information, or whatever you like:

CSS:

.menu {
width:20%;
right:0px;
position:absolute;
background-color:#FFFFFF;
text-align:center;
}


HTML:





It's really that simple! Just make sure to pretty it up with some background images (background-image:url(whatever.gif); ) and position it wherever you like. I hope you all get some use out of that :)

Custom bulleted lists

This can really add some nice effects to your journal. It lets you take lists, and change the bullet to a little picture. This saves using :bulletred:. Here is all you need to make your lists pretty:

CSS:


li {
list-style-image: url(yourfilehere.gif);
}


HTML:

[ul]
[li]Item[/li]
[li]Item[/li]
[/ul]


And whenever you use the LI tag, you'll see your lovely little bullet images instead of the generic black dot. Much nicer :)

Remember to change the [ to < and ] to > for the HTML example to work

First-letter fun

The first letter pseudo-element for CSS can be very useful to add a little bit of shine to your journal. Mozilla Firefox seems to support the first-letter element for most tags. You can do cool things like making the first letter of a paragraph bigger, a different colour, and more. You can also use the first-line to make the whole first line stylable. It all goes a little something like this:

CSS:

.mytext:first-letter {
color:#FFFFFF;
}

.myline:first-line {
font-weight:bolder;
}


HTML:


<f class="mytext">This is some text. Notice how the first letter is white?</f>
<f class="myline">This is some more text.
This text is on another line. Notice how the first line is bold
But none of the other lines are bold?
</f>


Just change <f to < p and /f to /p to make the above example work (Damn dA's parsing system :P)

And there we go. As the text explains, one paragraph will have the first letter white, and the second will have the whole first line bold. You can use this to style the header of your journal, by using something like:

CSS:


h2:first-letter {
font-size:larger;
}


to make the first letter of your journal title a shade larger.

Journal features!

Yessir! More journal featuring goodness! This week we showcase some nice designs that will no doubt make you salivate!

csjwcr

Best viewed at it's full (csjwcr.deviantart.com/journal/…), csjwcr's journal features a nice bold header that draws you in, the content is laid out VERY well, and it's easy on the eyes. All this makes for a wonderful and pleasing journal to read. Make sure you check him out. You won't regret it!

NKYC

I might have mentioned this deviant before, but their journal needs another mention ;D

Nick has created a nice and easy on the eye journal, integrating a modern look with photography and a basic scheme that looks damn good. His website work is incredible too. A must see!

The CSS Gallery

Don't forget the Journal CSS Gallery. You can find heaps of exciting journals in there, some you can even use as your own journals. Check it out!
csjwcr.deviantart.com/



And that's it for this week. Hopefully in two weeks time I'll have something totally awesome and mind-blowing for you. Feel free to note me your ideas, and journals to be featured. Make sure you do! I'm counting on you! :P

Comments and questions are welcome, like always! Good luck, and make sure to note me with your tweaks so I can see them in action ;D
Add a Comment:
 
:iconshoofly-stock:
Shoofly-Stock Featured By Owner Jan 20, 2013  Professional Digital Artist
I'm soooo glad to see you're still around :)
I've been using your tutorials for 6 years! There's 1 thing I need help with if you don't mind. I am trying to get certain sentences in my journal to have a different colored text. I don't want to highlught the text, I just want it a different color for 1 or 2 sentences. All my text is inside content holder boxes.

I tryed messing with this example but it's not working for a whole sentence. Can you help me?
(example)
sentence 1,2 and 4 = black (default)
sentence 3 should be red or blue or whatever.

How would I modify the css and html below to do that? THANK YOU!!

.mytext:first-letter {
color:#FFFFFF;
}

<f class="mytext">This is some text. Notice how the first letter is white?</f>
Reply
:icongrayda:
Grayda Featured By Owner Jan 21, 2013  Professional Photographer
I'm amazed that people are still using my tutorials and adding them to their favourites. I was a complete CSS noob back then!

In order to get a whole sentence to change colour (instead of just the :first-letter), you would do something like this:

.mytext {
color: #FFFFFF;
}

.mytext2 {
color: #FF0000;
}

This sentence is white. while this sentence is the default colour. However, this sentence will be red.

In the above examples, I just removed the :first-letter modifier, which will only make the first letter change colour. In addition, I've never actually heard of the "F" tag (<f>blah</f>) so that may be an issue. I instead used the tag, which, as it implies, spans across text. You can use almost any valid HTML tag, such as

,

, etc.

I hope that clears things up for you?

Reply
:iconshoofly-stock:
Shoofly-Stock Featured By Owner Jan 21, 2013  Professional Digital Artist
I got it working but the only problem is the line that says "this sentence is red" seems to have a ghost line above and below it, like it's being formatted - you can see it here > [link]
Reply
:icongrayda:
Grayda Featured By Owner Jan 22, 2013  Professional Photographer
hmm, what browser are you using? It shows up alright without any lines or anything funny on Google Chrome (v24)

And yep, you're right, it should be < p class = "mytext" >. I thought dA would show the full text in a comment, but I guess not! :P
Reply
:iconshoofly-stock:
Shoofly-Stock Featured By Owner Jan 22, 2013  Professional Digital Artist
I'm using FF17 - I've got Chrome and will try it out later. Thanks again!
Reply
:iconshoofly-stock:
Shoofly-Stock Featured By Owner Jan 21, 2013  Professional Digital Artist
whoops - mine didn't show up either. It was this without spaces: < p class = "mytext" >
Reply
:iconshoofly-stock:
Shoofly-Stock Featured By Owner Jan 21, 2013  Professional Digital Artist
Thanks! So the HTML would be

?
At the bottom of your reply the HTML tag doesn't show - all I see is a "," and ", etc."

Reply
:iconkazza234:
kazza234 Featured By Owner Mar 21, 2008
with the Side menus it works but the other text from the journal goes in the middle of the side menus what do i do to fix it??
Reply
:iconkatelyn-banshee:
Katelyn-Banshee Featured By Owner Jan 9, 2007
I have a question, although I'm sure it's been too long since the last comment for you to actually answer.

I am in love with the idea of the side menu for stamps and other things, however, when I try to use this code the menu covers some of the original text from my journal. Is there any way to create a new column for this feature? And if so, what's the code to position it? Thanks! ^^ And great work on these journals! You're a great help.
Reply
:iconfusion-defiance:
Fusion-Defiance Featured By Owner Dec 3, 2006  Hobbyist General Artist
i've always wondered about the side menu...
hopefully i can get it to work XD
Reply
:icongrayda:
Grayda Featured By Owner Dec 3, 2006  Professional Photographer
It's not too hard. If you need help, there's always [link] ;D

Bit of a design tip, try and avoid backgrounds that repeat as yours does. When it goes from dark to light, it can break readability. Also, the links when you hover over them, are almost unreadable. Black on white or white on black would be a good choice for that. But other than that, keep experimenting, and I look forward to seeing what you can do :)
Reply
:iconabidingdarules:
AbidingDaRules Featured By Owner Dec 2, 2006   Photographer
: peeking in for another question : Is there some place where i can learn about this instead of asking a billion questions? Maybe a user friendly site? Thankies ::slips quietly out::
Reply
:iconabidingdarules:
AbidingDaRules Featured By Owner Dec 2, 2006   Photographer
not to sound dumb but, The side menu is where i can add links right? (first dumb question) How do I add the links? (second dumb question getting dumber) and finally how do i dress it up as you say? (totally off the dumb scale now) :giggle: Thanks for any help you can throw my way..=0
Reply
:icongrayda:
Grayda Featured By Owner Dec 3, 2006  Professional Photographer
To add the links, you would make your menu something like this:

<div class="menu">
Important people:
:dev username:
:dev username:
:dev username:
[a href="http://link.htm"]Some text[/a]
</div>

(Make sure to replace [ with < and ] with > for links and stuff

To gussy it up, you'd add things like background colours, images and stuff. To learn about all that, I recommend [link] which has a great CSS tutorial that I look over sometimes.

Hope that helps :)

-G
Reply
:iconabidingdarules:
AbidingDaRules Featured By Owner Dec 10, 2006   Photographer
thank you so much that was sweet of you to answer! :hug: I appreciate it so much!
Reply
:icongrayda:
Grayda Featured By Owner Dec 13, 2006  Professional Photographer
You're very welcome :) I hope all this gets you on the way to becoming a CSS master ;D
Reply
:iconabidingdarules:
AbidingDaRules Featured By Owner Dec 20, 2006   Photographer
:giggle: thanks so much I hope so!
Reply
:iconyayster:
Yayster Featured By Owner Dec 2, 2006  Hobbyist Digital Artist
Really helpful, I just revamped my journal with CSS for the first time, and this gives me even more ideas :hug:
Reply
:icongrayda:
Grayda Featured By Owner Dec 3, 2006  Professional Photographer
I'm glad I helped! That's the whole point of these articles, to inspire people to do more :#1:

Looking good btw! Text is a bit dark for my liking, but it's looking good :)
Reply
:iconyayster:
Yayster Featured By Owner Dec 3, 2006  Hobbyist Digital Artist
I think my gamma is set very light on my laptop. I'll try setting the text to a brighter colour ^_^ Thanks for the feedback! :glomp:
Reply
:icongrayda:
Grayda Featured By Owner Dec 5, 2006  Professional Photographer
No worries! Keep up the good work :)

My gamma on the monitor in my room is very low even when it's up high, so that's why I endorse contrasting colours. That, and I have kerataconus in both eyes, meaning that I have blurry vision and troubles with lights and stuff.. :XD:
Reply
:icontruemarmalade:
truemarmalade Featured By Owner Nov 29, 2006
Just when I thought there wasn't anything else to be done, you manage to pull out another spiffy trick!
Reply
:icongrayda:
Grayda Featured By Owner Nov 30, 2006  Professional Photographer
Yep! But it's best to not ask from which orifice these tricks come from. I think it's illegal :paranoid:

But thanks! I hope you got some use out of all this. Interesting read on Graffiti in your journal btw.. There's some awesome artists out there for sure!
Reply
:iconmonkeyshack:
Monkeyshack Featured By Owner Nov 29, 2006
if i weren't so busy i'd post more code. i've got lots in the works to post, just haven't had time.

(job takes up about 50 hours a week, and the family, and then sleeping and eating factor in...lol)
Reply
:icongrayda:
Grayda Featured By Owner Nov 30, 2006  Professional Photographer
That's cool. Take your time man. I reckon tons of people have gotten use out of your rounded corners. I haven't used them yet, but that's because I'm behind on my CSS Journals, and of course journals for others..

So yeah take however long you need. Thanks for taking interest in all this though :)
Reply
:iconmonkeyshack:
Monkeyshack Featured By Owner Nov 30, 2006
yeah, i've got more than corners though. just have to get time. lol.
Reply
:icongrayda:
Grayda Featured By Owner Dec 2, 2006  Professional Photographer
As I said, take your time. Real-life comes loong before the 'net life. Hopefully this series will be going for a while yet, so take as long as you need :)
Reply
:iconzeolyte:
zeolyte Featured By Owner Nov 29, 2006
wohoo... I got the menu already ;)

great article!
Reply
:icongrayda:
Grayda Featured By Owner Nov 30, 2006  Professional Photographer
Some people have.. I've seen a few of them hanging around, but decided to show the rest of 'em how it's done.

Damn I love this CSS stuff.. keeps me entertained here on dA, at least for a few minutes..

I just remembered, I've got a journal to design, and I haven't even got around to noting the person. Laziness ain't all great :P
Reply
:iconzeolyte:
zeolyte Featured By Owner Nov 30, 2006
I used to be addicted to CSS.. back when I was active at livejournal... I remember I always had a new layout every month, and for every release there is always a new LJ rule that comes out that this CSS feature should be disabled... which kinda sucked :P... and now came DA CSS ;)

very nice of you to share the menu thingy :)
Reply
:icongrayda:
Grayda Featured By Owner Dec 2, 2006  Professional Photographer
And dA seems to have more restrictions than an LJ or MySpace page would. Which is good in some ways, but bad in others. I swear to god, I don't see how MySpace people can live with such crap layouts that have no readability, break every bloody W3C standard known to man, and just make your eyes want to cross themselves until they're facing into the back of your head..

Citizens Rage Against Myspace People's Shit

CRAMPS! ... terrible acronym, but it was the best I could do at 1am :P
Reply
:iconptitepousse:
ptitepousse Featured By Owner Nov 28, 2006
:clap:

so kind :D
Reply
:icongrayda:
Grayda Featured By Owner Nov 29, 2006  Professional Photographer
Thankyou! I love to help others out and I love coding too. So it's a natural thing to be sharing such information :)

Thanks again, and good luck getting a sub again. There's a few competitions out there that have subs as prizes.. best of luck!
Reply
:iconelectricjonny:
electricjonny Featured By Owner Nov 28, 2006  Hobbyist Photographer
I think I might try the first letter stuff. Good info as always :)

A question from last week's article though. If you add your own custom journal mood icon, is there anyway to hide the text that appears next to the old mood icon?
Reply
:icongrayda:
Grayda Featured By Owner Nov 29, 2006  Professional Photographer
Not via standard methods.. you can however make a new DIV, that is big enough to cover the text and the picture, then inside the DIV put an IMG tag with your custom mood in it. That would work, just make sure you match the colour of the DIV to the background, and you should be all set.. hope that makes sense. I'd write up some code, but I'm just too tired. If you can't get it to work lemme know and I'll knock something up real quick :)
Reply
:iconjeriweaver:
jeriweaver Featured By Owner Nov 28, 2006  Professional Traditional Artist
I have a question.
Is there any way to stop your journal content from going underneath your menu DIV?
I tested it on an older journal [link]
and see how the text goes underneath there?

Anyway that the text can wrap around the menu?
Reply
:iconmirrorkills:
mirrorkills Featured By Owner Nov 28, 2006  Hobbyist Digital Artist
try creating a new div and calling in say maintext or whatever you like, and set the width to around 80% and see if that helps.
Reply
:iconjeriweaver:
jeriweaver Featured By Owner Nov 28, 2006  Professional Traditional Artist
Yeah Thats how I told my sister to do it and it works fine, but that way your whole journal is on one side. I'd preffer it to wrap around so that there isn't all that wasted space below the menu box.
Reply
:iconjeriweaver:
jeriweaver Featured By Owner Nov 28, 2006  Professional Traditional Artist
Thank you so much =D
Reply
:iconleaf-lover:
leaf-lover Featured By Owner Nov 28, 2006
:thumbsup:
Reply
:iconyashachan:
yashachan Featured By Owner Nov 28, 2006  Hobbyist Photographer
You could get into something really fun and go over doing CSS driven menus. ;p
Reply
:iconelectricjonny:
electricjonny Featured By Owner Nov 28, 2006  Hobbyist Photographer
I really like your journal menu :thumbsup:

If I think of enough things to put in one I might make one for my journal.
Reply
:iconyashachan:
yashachan Featured By Owner Nov 28, 2006  Hobbyist Photographer
I raped =Zikes' code for it, so the credit for it should go to him. :nod: His is also a lot slicker, it's got icons and stuff (it's on his Ubuntu-styled journals).
Reply
:iconelectricjonny:
electricjonny Featured By Owner Nov 28, 2006  Hobbyist Photographer
I think I looked at about a dozen or so journal source codes to get mine where it is right now ;)

His is pretty cool, I want to figure out that color switching trick he's got in his.
Reply
:iconyashachan:
yashachan Featured By Owner Nov 28, 2006  Hobbyist Photographer
Yours is looking good, though maybe a little heavy on images (my connection could be a bit slow right now, though).

Yeah, his color switcher is the next thing I want to look into. :nod: And then employ this knowledge when I redo my personal site.
Reply
:iconelectricjonny:
electricjonny Featured By Owner Nov 28, 2006  Hobbyist Photographer
Hehe, yeah, I went a bit crazy on images :D

I'm slowly working on making them smaller in file size and a bit less "look, I'm an image!"y.
Reply
:iconblacksnoopy:
BlackSnoopy Featured By Owner Nov 28, 2006  Student Artist
thank you
Reply
:iconipholio:
ipholio Featured By Owner Nov 28, 2006  Professional Interface Designer
Nice tip on changing up bullet entries, hadn't really thought of that before. And of course you had to feature =NickCreevy again...he does have some sweet stuff. :thumbsup: Just don't forget who actually coded his Getting Up layout....ahem. ;)
Reply
:icongrayda:
Grayda Featured By Owner Nov 30, 2006  Professional Photographer
ooh really? Consider yourself featured next time around ;D

And there's a few tips and tricks that few have thought about. I'm really surprised nobody has used GD and PHP to make scrapers for images and stuff, instead of just displaying Audioscrobbler and Tickerfactory images.. Now if only my Pastie-Like script in my gallery was admin approved.. :paranoid:
Reply
Add a Comment:
 
×

:icongrayda: More from Grayda


More from DeviantArt



Details

Submitted on
November 28, 2006
Link
Thumb

Stats

Views
783
Favourites
202 (who?)
Comments
101
×