Rp Tutorials

S	M	T	W	T	F	S
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28

wastintime

rp_tutorials

wastintime

rp_tutorials

Bloggish: Customize that standard entry footer!

wastintime

rp_tutorials

9:36 PM

wastintime

rp_tutorials

If you're creating custom styles for S2 Bloggish, chances are that you already know how to use CSS to change the colors, fonts, padding, etc. so I'm not going to go into that or explain stylesheets to you. I'm going to assume you know what those are because there are tons and tons of tutorials on those. What I'm here to tell you about is something rather nifty: using CSS to remove or alter the text in the entry footer. Basically, I'm going to show you how to grab each element in the footer and change it using pseudo-elements and attribute selectors. OOO SCARY BIG WORDS! Don't worry, it's not that hard. :)

( Hopefully, this will alleviate some frustrations about the limitations to customization... )

ETA: If you just want the time to show up in the footer without the "posted at" I can help you with that code because I just figured it out, but it'll be a little different for every layout. :)

Tags: layouts: journals, resources: tutorials

wastintime

rp_tutorials

wastintime

rp_tutorials

This is SO FREAKING COOL

wastintime

rp_tutorials

11:10 PM

wastintime

rp_tutorials

Do you use Scribbld styles for info pages? Well, I have the coolest trick ever to show you...

→ Click me! ←

The Code

<html>
<head>
<style type="text/css">
html { overflow-y: scroll; }

.tabs {
    position: relative;
    min-height: 100px; /* This part sucks */
    clear: both;
    margin: 25px 0 60px 0;
}
.tab {
    float: left;
}
.tab label {
    background: #eee;
    padding: 10px;
    cursor: pointer;
    width: 90px;
    text-align: center;
    display: block;
    border: 1px solid #ccc;
    margin-left: -1px;
    position: relative;
    left: 1px;
}
.tab label i {
    font-style: normal;
    font-size: 10px;
    color: #aaa;
}
.tab [type=radio] {
    display: none;
}
.content {
    position: absolute;
    top: 40px;
    opacity: 0;
    left: 0;
    background: white;
    right: 0;
    bottom: 0;
    padding: 0px 20px;
    border: 1px solid #ccc;
    height: 0;
    
-webkit-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
   -moz-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
    -ms-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
     -o-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
        transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
    
}
[type=radio]:checked ~ label {
    z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
    z-index: 1;
    opacity: 1;
    height: 100%;
    padding: 20px;
}

#close-tab {
    position: absolute;
    z-index: -1;
    top: 0px;
}

#close-tab label {
    background: white;
    border-bottom: 1px solid white;
}

[type=radio]:checked ~ label ~ #close-tab {
    z-index: 3;
}
</style>
</head>
<body>
Click these!
<form>
  <div class="tabs">

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

</div>
</form>
</body>
</html>

Source

And the best part? People have made other awesome code with it. Like this javascript-free slideshow!

I AM FLAILING SO HARD YOU HAVE NO IDEA

Tags: resources: general, resources: scribbld, tools: html

derezzed

rp_tutorials

derezzed

rp_tutorials

question regarding html characters.

derezzed

rp_tutorials

11:11 PM

derezzed

rp_tutorials

Does anyone know a way to download updates for seeing special HTML characters, like the ones pictured here? I'm trying to figure out how I can see character such as a king's crown, cool-looking arrows, etc., etc. and all I'm getting are boxes.

Profile

Navigation

February 2023

Tags

September 24th, 2011

Bloggish: Customize that standard entry footer!

This is SO FREAKING COOL

question regarding html characters.