Journal CSS: Hijacking the cut tag

6 min read

Deviation Actions

nichtgraveyet's avatar
Published:
2.1K Views
READ ME!

1, this tutorial is broken (my fault), and 2, the cut tag no longer works on dA (their fault - either on purpose or they forgot to re-implement it when they updated the journal system)

So why is this still online? I'm keeping it up for historical purposes. I mean, come on, there's 42 comments! I can't delete something with the number 42 in it! :lol:

For more of my journal CSS tutorials, see the sidebar of my /journal/ page.


I should probably have left this for the night, and come back the next day to proof read - but ehh. If you have any problems/questions, leave a comment and I'll help you out and adjust the tutorial so it makes more sense :thumbsup:


Ever wanted to have something show up on your userpage, but vanish when you view your journal in full? Well, thanks to the <cut> tag, we can get up to all sorts of mischief.

:faq223:

Cut tags let you collapse sections of your journal so they don't show up on your userpage (or on your /journal/ page - for simplicity when I say userpage I mean both). Mostly it's used when your journal is really long and you don't want it messing up your userpage, just wrap everything but your introduction in cut tags and away you go. In place of the cut content deviantart places a 'read more' link that people can click to go to your journal in full. Since this link only appears on your userpage, we can hijack it and do anything we like with it.

What you do with it is really up to your imagination, but I'll share two examples with you here so that you can get an understanding of the fundamentals you'll need to play around with this.

Something that will surely annoy people is that we can't preview the cut tag - the journal preview will show you how your journal will look like when full viewed. That means you can't check for mistakes without posting the journal.


Now you see it, now you don't.



To get this effect, you write your journal as normal, and stick the cut tag anywhere you like - but wrap it in a div tag with a class name, ie -

<div class="cutter"><cut></cut></div>

Now you have a way to call the link that deviantart creates - (remember that it turns our cut tags into a 'read more' link):

.cutter a{...}

In my example above, with the Now you see me, now you don't images, what I did was push the journal down 200 pixels using .journalbox{margin-top:200px} and then moved the cut link up into the space with:

.cutter a{
display: block;
height: 200px;
background: url( ... ) center no-repeat;
position: absolute;
top: 0;
left: 0;
right 0;
cursor: default;
}


cursor: default is so that it doesn't look so much like a link anymore.

The link text will still show up though, so to hide that we'll use .cutter{text-indent:-999em} to push it out of view.

Now, at this point you should have an image that is visible on your userpage, but vanishes when you view the journal in full... and you might be wondering how to have a second image hidden from your userpage but visible on the journal page. Well, you stick that second image inside the cut tags!

You can just use some empty bold tags rather than creating a div for it:

<div class="cutter"><cut><b></b></cut></div>

Then you basically repeat the CSS you used for the first image, only change the selector to target the bold tag - .cutter b{...}.

I did this on an unskinned journal, so it might look kind of pointless, but with some imagination I'm sure people could find some creative ways to implement it as part of a journal skin.


Book metaphor.




This time what we do is wrap the entire contents of the journal in a cut tag, and hide everything outside of the cut tag. Your HTML is going to have to look something like:

<cut>
 <div class="content">
  ...
 </div>
</cut>


Then, like in the Now you see it, now you don't method, you target the cut link - only this time it's something like

.journaltext a{
 display: block;
 background: url(...) center no-repeat;
 width: ...px;
 height: ...px;
 margin: 0 auto
}


Now, since the content of your journal will more than likely have links of it's own in it, we have to cancel the styles meant for the cut link:

.content a{
 display: inline;
 background: none!important;
}


The styles for hiding the unwanted link text would be .journaltext{text-indent:-999em}, but don't forget to reset it in .content{text-indent:0}.

At this point you can swap out the content of your journal for an image, but on your userpage the header/borders/moods list might be ruining the effect you're going for. To hide them, use the following:

ul.list{display: none}
.journaltop{display: none}
.journalbox{border: 0}


Keep in mind we have no way to show them again on the journal page, so if you miss the header/posted date/moods list you'll have to recreate those yourself.

... and that's that. I have the feeling some of you would have liked me to show how I made the open book journal skin - but that's for another tutorial. It's basically just a big background image though! :lol:

© 2007 - 2024 nichtgraveyet
Comments42
Join the community to add your comment. Already a deviant? Log In
Xx-Manda-Panda-xX's avatar
Really. cool!

Doesn't seem to work in Google Chrome though (which is what I normally use). Is this normal as a DA bug or just for this hijack?