Jump to content


Photo
- - - - -

deviantART CSS Journal Tutorials


  • Please log in to reply
1 reply to this topic

#1 nitr0x

nitr0x

    Young Padawan

  • Members
  • Pip
  • 201 posts

Posted 01 March 2007 - 06:18 AM

I have made a few CSS Journal tutorials to use on deviantart, so if you're a subscriber on deviantart and want to learn how to do the CSS Journals that they have. Hope this helps, I plan on keep on doing more and more css journals.

I will be making a series of CSS Journal tutorials/helps/tip and tricks, so if you like them, make sure to keep an eye out on my journal.

Kind of a second part to the Make your CSS Journal but not making a whole journal though.

Just some tips and tricks.

Sub headings

Make sub headings like the one above can be used with extra divs. With a subscriber, you are allowed to use div tags in your journal, so how do we make a sub-heading like above? Well if you add this to where you want your heading to go

< div class="subhead">Heading Title< /div>
Note: Spaces between the < and div should be taken out.

And add something like this into the CSS box, changing anything you want.

.subhead{
border-bottom: 2px solid #821122;
font-family: Courier New, Courier, tahoma, arial, verdana, sans-serif;
font-size: 16px;
}

This is the css that I used for the sub heading above.

More internal divs

Time to learn more about internal divs, these are divs that we use inside the journal but not pre-made ones like the journal itself. What about making areas for thumbnails or featured news, etc? Making them a different colour.

Well first off, add another div class naming it "thumbnails" or something (like we did with the subhead) and the CSS is as follows.

.thumbnails{
background: #333333;
color: #CCCCCC;
text-align: center;
}

This will turn our like this.


Styling the thumbnails

We can style these thumbnails if you like with adding an extra border around them to make them stand out more, and also having the border change colour on mouse over.

.thumbnails img{
border: 6px solid #FCFCFC;
}
.thumbnails img:hover{
border: 6px solid #821122;



Scrollable divs

Pretty simple. But what if you're showing a lot of thumbnails but don't want the journal to be so long? Well a simple CSS styles div will help with this making a div box scrollable.

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

The div goes on just like the others.


!Important

If you look at a lot of CSS for the journals made by others. You'll probably notice that they add !important at the end of just about all of their CSS statements, for example, background: transparent !important;

It is a fact that you do not need to add this to your CSS, so it's a waste of time. Don't do it :artist:

Ok so that's it for now. Now you should be able to make your own basic Journal CSS and also add a few of your own div elements into it. With the next part, we'll start using images in our journal, and learn about the margin and padding elements as well as a few bits more.


Live Preview

Edited by nitr0x, 01 March 2007 - 06:21 AM.


#2 α∂αмяoss

α∂αмяoss

    P2L Jedi Master

  • Members
  • PipPipPipPip
  • 2,102 posts
  • Gender:Male
  • Location:$_SERVER['REMOTE_ADDR']
  • Interests:football, Manchester Utd., coding, web developement, business, girls and warcraft.

Posted 16 June 2007 - 12:21 PM

Wow, that's pretty neat. i've not been on my deviantART for over 3 months :P
I better go update :D
Thanks anyways :D




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users