Shop Mobile More Submit  Join Login
×

:icongrayda: More from Grayda


More from DeviantArt



Details

Submitted on
November 28, 2006
Link
Thumb

Stats

Views
709 (2 today)
Favourites
203 (who?)
Comments
101
×
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
Add a Comment: