deviantART

 
About Me Premium Member Varied Artist JayLesch20/Male/United States Recent Activity Deviant for 2 Years
11 Month Premium Membership
Statistics 57 Deviations
1,874 Comments
9,001 Pageviews

Favourites


Flash Player 8 is required to view SitBack. Get the latest version of Flash Player.

Zombie Trooper

Zombies... awesome.
Stormtroopers... also awesome.
A zombified stormtrooper? ... Super-awesome.

Flawless logic no? :D

Wallpaper 12-30-07

Visitors

Rock-a-Journal

Journal Entry: Tue Feb 10, 2009, 6:21 PM
-THE ARTIST'S PERSONAL NEWS-
I'm currently in my 2nd semester of a Dental Assisting class at an occupational school. I'm happy to have secured the Dentist's office I'm going to do my externship at. Just gotta get a coupla things handled and I'll be taking x-rays, impressions, handing instruments, disinfecting, sterilizing, and being payed at least double minimum wage hopefully :D


Oh, I'm also the proud owner of a Kia Rio 5. Never heard of the car before, but I'm lovin' it!


-THE FEATURE PRESENTATION-
As you can see, I've done a bit of CSS tinkering to some small measure of success. And being the benevolent guy I am, I wanna share the secerets I learned!


First things first, you gotta be a deviantArt subscriber in order to throw some CSS into your journal, so don't waste 'yer life reading my following rambling tutorial if you're not. The pretty journals around you are just such teases I know :dohtwo: But who needs to pay for online decorations right? :paranoid:


Next thing, this is a simple tutorial based off a template and more detailed tut by the most talented `Lilyas. I plan on tackling her more advanced tuts next, and again passing on what tidbits I learn. But if you wanna get the original or find s'more knowledge from her, have at it! But now for me to start off this fantastic voyage towards your own hot new journal :P


Alrighty, as far as code is concerned, we'll start with this:

.journalbox {
color:#1*****;
text-decoration:none;
background-color:#2*****;
background-image:url(3**);
background-repeat:no-repeat;
background-position:center bottom;
text-align:left;
border-width:0px;
border-color:#4*****;
}



Before you freak and say "WTH is that?!?"... chill. Copy that chunk of code directly into the CSS box at the bottom of your "Edit Journal" page. You gotta click "Add CSS". I'm gonna cover the values you need to know/substitute in an easy to understand manner, painless.
1***** is a 6 digit number used to represent a specific color, known as a hex code.
In this instance, this value controls the default color of the text for the whole journal.
For this tutorial, plug in C8C8C8. (note, just to replace the 6 characters I had before, they should be between the # and the ; )
2***** is yet another hex code. This time it's controlling the color of the entire background of your journal (mine's the solid dark grey).
Put 000038 in there for now just like you did the first one.
3** is a URL to an image. This is suprisingly going to be the footer at the very bottom of the page.
Put in i8.photobucket.com/albums/a10/SuprBlahman/footer_db.jpg (but with http:// in front of it of course) now.
4***** controls the color of the border for your entire journal. Replace with C8C8C8.

You're done with the first bit of code (otherwise known as a "rule")! Time for the next piece 'o code. It's bigger, but don't worry, only 3 things you need to change:
.journaltop {
font-size:0px;
background-color:transparent;
background-image:url(1***);
background-repeat:no-repeat;
background-position:top center;
width:auto;
height:344px;
}
.journaltop img {
display:none;
}
.journaltop h2{
color:#2*****;
font-size:18px;
font-family:Tahoma, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
line-height:1em;
letter-spacing:0.01em;
background-color:transparent;
text-align:center;
padding-top:275px;
}
.journaltop span {
background-color:transparent;
text-align:center;
color:#3*****;
font-size:10px;
position:absolute;
top:10px;
left:20px:
letter-spacing:0.0em;
}

1** is another image link, this time for the header. For now, throw in i8.photobucket.com/albums/a10/SuprBlahman/header_db.jpg (again, don't forget http:// before it. Last time I'm reminding you).
2***** is the color of the font for your Journal Title. Set it as 000038.
3***** is the color of the font for the date and time of the journal submission. Set it as 6CB6FE.

Okay, time for the next set of rules. See, this is easy:
.journaltext a:link {
color:#1*****;
font-weight:bold;
text-decoration:none;
}
.journaltext a:active {
color:#2*****;
font-weight:bold;
text-decoration:none;
}
.journaltext a:visited {
color:3*****;
font-weight:bold;
text-decoration:none;
}
.journaltext a:hover {
color:4*****;
font-weight:bold;
text-decoration:none;
}

1***** is the color of the font for links within your journal that haven't been clicked yet. Replace with 3A81FE.
2*****... I'm not exactly sure what state of a link this actually controls... set it as C8C8C8 though...
3***** is the color of the font of a link after it's already been clicked once before that session. Replace with 3A81FE.
4***** is the color of the font of a link when you place your cursor over it but don't click yet. This helps them stand out more when a person moves their mouse across the screen. Replace with 90C7FE.

On to the next set of rules:
.list {
background-color:transparent;
color:#1*****;
font:9px Tahoma;
text-align:left;
margin-top:10px;
padding: 10px 10px 15px 20px;
}
.list .a {
background-color:transparent;
}

1***** is the color of the text used in your Mood/Listening/Watching/Playing/Eating/Drinking box. Replace with C5E7FC.

That one was short, time for the next:
.journalbox .commentslink {
color:#1*****;
font-weight:bold;
text-decoration:none;
margin:0px 12px 0px 26px;
}
.journalbox .prevlink {
color:#2*****;
font-weight:bold;
text-decoration:none;
margin:0px -30px 0px 10px;
}
.journalbox .journalbottom a:hover {
color:#3*****;
}

1***** controls the color of the font for the link to view Comments at the bottom of your journal. Set it as 77A2EE.
2***** controls the color of the font for the link to view Previous Journal Entries at the bottom of your journal. Set it also to 77A2EE.
3***** controls the color of the font for both the links at the bottom of your journal when hovered over. Set it to C5E7FC.

Done there, onward to the last set of rules:
.journalbox .textboxbg {
background-image:url(1**);
margin:20px 10px 10px 10px;
border-style:solid;
border-width:1px 1px 1px 1px;
border-color:2*****;
padding:10px;
}
.journalbox .title {
color:3*****;
font-size: 20px;
letter-spacing: 3px;
border-style:solid;
border-width:1px 0px 1px 0px;
border-color:4*****;
background-color:5*****;
padding: 1px 0px 4px 15px;
margin: 15px -29px 0px -29px;
}
.journalbox .textbox {
color:6*****;
font-size:13px;
text-align:left;
font-family:Tahoma, Verdana, Arial;
background-color:7*****;
border:1px #8***** solid;
margin:35px 5px 10px 5px;
padding:5px 6px 5px 6px;
}

1** will be the image that is tiled behind your journal entry. Put i8.photobucket.com/albums/a10/SuprBlahman/tbtiledb.jpg (I lied before, might as well remind you one last time to put http:// before that...) in there.
2***** is the color of the border surrounding the box with the tiled image. Make it C8C8C8.
3***** is the color of the font for the title text. This is the words "-THE ARTIST'S PERSONAL NEWS-" and "-THE FEATURE PRESENTATION-" in my journal. Make it C5E7FC.
4***** is the color of the border surrounding the banner that the title is on. Make it 60BAFF.
5***** is the color of the banner. Make it 2188C7.
6***** is the color of the font used in the main body of the journal entry. Make it C8C8C8.
7***** is the color of the background of the main body of the journal entry. Make it 000C52.
8***** is the color of the border seperating the main body of text from the outer tiled square. Make it C8C8C8.

Okay, now you have this blue dragon journal layout. Do note, this is a free journal template by `Lilyas, so you can keep it as is. Although the joy of a custom CSS journal is, of course, customizing it yourself!

As you can see, you can already change the colors for text and backgrounds by plugging in different hex codes. Here's a site to get the appropriate codes for different colors. Also, as you can see there are really only 3 images involved in this whole thing. You can use those 3 as templates to come up with a header, footer, and repeating tile background of your own!
I'll be posting a part 2 for this with some further customization options later with this code. And in the future to come, I plan to be explaining some even more advanced CSS features.
But for now, I hope you can enjoy this journal!

If you need any specific help, be it with the code itself or perhaps even putting together your images, don't hesitate to ask me :)

  • Mood: Helpful
  • Listening to: Al di Meola
  • Reading: Dragon Ball mangas
  • Watching: Friends
  • Playing: City of Heroes
  • Eating: KFC
  • Drinking: Root Beer

deviantID

No deviantID yet.

Devious Info

  • Current Residence: California, da Silicone Valley
  • Print preference: Smexay
  • Interests: Sci-fi, Sonic the Hedgehog, Halo, Star Wars
  • Favourite movie: The Dark Night; IronMan
  • Favourite band or musician: Dream Theater
  • Favourite genre of music: Rock, Progressive Rock, Metal
  • Favourite artist: Phillip M. Jackson (aka JollyJack)
  • Favourite poet or writer: Eric Nylund
  • Favourite photographer: Not the dudes on the front page... >_>
  • Favourite style of art: Again, smexay
  • Operating System: Windows XP Pro
  • MP3 player of choice: Black 30 GB Microsoft Zune
  • Wallpaper of choice: Must I again?... TEH SMEX!!!
  • Favourite game: I really dunno at this rate... love Halo though
  • Favourite gaming platform: Xbox 360
  • Favourite cartoon character: Sally Acorn
  • Personal Quote: "I try"
  • Tools of the Trade: Mechanical pencil, paper, tablet, and Photoshop Elements 4.0

Comments


Hey, thanks for the comments and the favorite! I very much appreciate it :D

--
"In the fyres of Struggle we will bake New Men, who will notte heed the Old Lies"
- Suffer-Not-Injustice Vimes
I may have asked you this before, but I have a project that can use your help.

--
When any minority group loses out, everyone loses out. United we stand, devided we fall.
Hey. this person wrote something about you in their blog.. CLICK HERE

--
~Bound-For-Freedom
hey! check this out! I just saw who my Secret VALENTINE WAS !! it really works.. see who your VALENTINE is just CLICK HERE

--
~Bound-For-Freedom
Thanks for the fave...appreciated!

--
I wasn't born with enough middle fingers...
Hi there!:giggle: It was a long time no see...:D Hope everything's fine!

--
"They tried to bury their sins but instead planted the seeds of their doom"~Paxton Fettel
Oh yeah, I almost forgot, thank you for the fav too!!
Thanks for the comment and critique! I should be adding more stuff soon.
thanks for passing by :)
~:D~Just thought I would stop by and say, "Hey".

Haven't herd from you for some time.
By the way it's still Hot Out Here!
you maybe right about the "Jack" and "John" name aspect of Big Boss... So I will do more research

thanks for the comment

--
.:VastGamers - The Sentinel of Digital Media:.
i like your avatar :iconyesyesyesplz:

--
You And Me Forever
cheers for the fav+ :)

--
take a look at my gallery......
you never know you might like it......
Thanks for the fav. :) It should be in color soon.
Thank you for watching Edtropolis!

--
Edtropolis...Tell your friends!!!

...And remember, his whole head...was made of bacon...
Thanks for the fav, yo =)

--
As I fly through the valley of death I fear no evil, for I am 80,000 feet and climbing.

- USAF SR-71 pilot -
Wow! u sure have nice art here^^

--
It's better to have loved and lost than to have never loved at all ~ :heart:~ No llores por quien no te ama, ama a quien llora por ti.
ChadtheCartoonNut is a friend of yours?
I love ChadtheCartoonNut art.
heya!
wanna look again at my new pics?there are some new Cloud Hedgis in them.
would be very nice if you could tell me how you like them.

--
Who hates Amy Rose dosn't know who she realy is!She is so much more than a hysteric Fangirl!!
Brave,strong,optimistic and know what she wants!

Site Map