lieu theme

by airudite

cation-codes:

In this tutorial I will be teaching you how to create a sticky topbar; prerequisites include HTML and CSS experience, basic jQuery knowledge. 

Because this is a tutorial you do not have to give me credit for the code I am providing, it would be appreciate though. 

STEP 001 | BASECODE

I have taken the liberty of creating a very minimal bascode for you to build upon. You can fill it out as you read through this tutorial.

Download basecode @ pastebin.com/tfFZkDiw

STEP 002 | INSTALL JQUERY

You can install jQuery by downloading it and hosting through tumblr or some other text hosting website. You can also use jQuery from google…

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

Paste this script underneath INSTALL JQUERY in the HTML document. 

STEP 003 | HTML

Underneath TOPBAR in the HTML document, type the div class for the topbar, as well as the links that you want in the topbar (links are optional, can be replaced with a title or whatever). 

You can copy and paste the example below or type your own:

<div class='four20'>
    <a href='/'>home</a>
    <a href='/ask'>inbox</a>
    <a href='/archive'>archive</a>
    <a href='linkurl'>link</a>
</div>

STEP 004 | CSS 

Time for the CSS, best part imo. Customize your topbar, make it your own.

Once again, you can copy and paste the example below (under neath TOPBAR in the CSS) or type your own.

.four20{
left:0;
top:200px;
width:100%;
position:absolute;
background:#000000; }
.four20 a{
color:#ffffff;
display:inline-block;
}

200px in top:200px can be changed to any number (e.g. 250, 100, 50, 500).

You are also going to need to add another class, I will explain why later on in this tutorial. Name the div class whatever you want but you must include the following…

  • position:fixed;
  • top:0;

Example

.blazeit{
position:fixed;
top:0;
}

STEP 005 | JQUERY

This is the final step, not much to do except for copy and paste underneath JQUERY SCRIPT (some minor editing for those that have different div id’s).

<script>
$(document).ready(function(){
$(window).bind('scroll', function(){
if($(window).scrollTop() > 200){
$('.four20').addClass('blazeit');
}

else{
$('.four20').removeClass('blazeit');
}
});
});
</script>

Make sure that the in the jQuery code, scrollTop() > 200 matches the top:200px; in the CSS.

The blazeit class is to make the sticky part stick to the top.

If you would prefer to edit a basecode as opposed to filling in a document you can find one @ pastebin.com/cvjYprP1

(via rphelper)

airudite
wonders...

Explain the color blue.

If I explained the color blue, there would be nothing left for you to ponder.

Now I’m going to be working on the text posts as well as the asks. This is an example of the text post. Bolditalic, strikeout.

Here’s an unordered list for all of you people who like lists that are unordered

Okay, maybe that list was ordered. Here’s a blockquote, I promise they’ll look better later.

Lorem ipsum. It’s so generic it hurts. Well, here is a blockquote. I rarely use these but they look so nice usually. To do list: text posts, ask posts, add meta tags, add pagination, beautify the unordered links, fix the ‘further’, do permapage

Click on the further; magical things happen :) scroll over the sidebar!

Read More

fawndeviney:

perfect start of summer | picnic at the ocean 

(via feuilla)

Posted on July 9
2,341 notes
b3

wanderthewood:

Great Wall of China by Boccaccio1

(via antarcticus)

b3

arquerio:

. by Miss Julia Jones on Flickr.

(via feuilla)

Posted on July 9
4,433 notes
b3

Hello, this is an example of a link. I created this theme, inspired by the themes in the theme garden. This theme is not intended to be of my usual style, but I still attempt to maintain my fondness of minimalism.

there are worse things
than being alone
but it often takes
decades to realize this
and most often when you do
it’s too late
and there’s nothing worse
than too late.

—Charles Bukowski

miyunete:

No. 1 Party Anthem - Arctic Monkeys

(via airudite)

  • "No. 1 Party Anthem"
  • Arctic Monkeys
  • AM