ShopDreamUp AI ArtDreamUp
Deviation Actions
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 . 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 )
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!
mistercreevy
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!
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
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 . 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 )
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!
mistercreevy
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!
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
Err.. Hi! :D
It's that time of year where I submit a journal. So, this is it. Hi!
:|
Sending me an instant gram
There is that new-fangled inter-net web-site that all the cool kids are on. It's called instant gram, and it lets you send photographs over the inter-net (which I predict won't last that long -- it's just a phase kids are going through)
If you have an inter-net, and an instant gram, follow me there. I post far more often there than I do here (and I don't know why?). I don't use filters, because I tweak my photos like a man -- by bending pixels with my own two hands.
Follow me on instagram
I'm also on Google+, Facebook and also on SmugMug (this link is really important! Bookmark it!)
In other news? I'm upgrading from my Canon EOS 40D, to a
Amethyst Eyes - The Book
I'm not sure why I haven't mentioned this earlier, but my wife, Enamorte (https://www.deviantart.com/enamorte) has published her very first book, Amethyst Eyes. It's been a few years in the making and has gone through lots of revisions to both the story and the characters (and even the way they look. See her collection of Amethyst Eyes art for a better idea.
There were many, many nights where she'd lock herself in her room and write furiously, and many times when we sat down and discussed the progress of the book (which at some points just seemed like an ever-shifting goalpost) but she did it, and I am so very proud of her for accomplishing what few have
If you're interest
davidgray Photography on Google+
I'm now on Google Plus!
Now that I'm starting to ditch Facebook over concerns about my privacy, features being opt-out instead of opt-in, I've turned towards Google's fantastic new social network - Google+. And it's already starting to pay off. In the short time that I've had my page up, I've got more followers than I ever had on my Facebook page. Most of them are photographers themselves and the quality of their work is of a very high standard. It's quite refreshing.
So if you're on Google+ (and even if you're not), head on over to my page and take a look. I'll be posting all of my 2012 365 challenge photos there, so keep coming back!
dav
© 2006 - 2024 Grayda
Comments101
Join the community to add your comment. Already a deviant? Log In
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>
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>