updates
Latest Theme - 20
Coming Soon
↳ All-In-One Tutorial
↳ Theme 21
Networks
Tardis Network
Polythemers
TOP
Neonbike Themes

legilimenthemes:

 THEME 027. underwater (revamp)

this is a revamp of one of my old themes. includes:

  • square or circular icon, 60px (please make sure your image is square or at least close)
  • 3 different transitions for subtitle, including custom opacity (only use one of the three transitions)
  • 20 different font options for the sidebar
  • 6 links
  • optional second sidebar on scroll (show in the second image above)
  • no captions, hover captions, show captions (captions show on permalink page, only use one of these three)
  • 2 options each for either hover or show post info (post info shows on permalink page, only use one of these four)
  • 400px posts

the preview shows: 

  • .5 subtitle opacity (on hover)
  • subtitle is in Josefin Sans
  • the “Crush” option for subtitle hover
  • a circular icon
  • the second sidebar, with links
  • the “NoCaption” option
  • the “ShowPostInfo” option

PREVIEW | CODE

like or reblog if using! more here

check out the coders club and the theme village

worthythor:

THE TARDIS NETWORK IS LOOKING FOR NEW MEMBERS!
WHO CAN JOIN?

IF YOU
HAVE AT LEAST 5 THEMES  (if you think your themes are already original enough, you can apply with less than 5 themes)
HAVE ORIGINAL, UNSTOLEN THEMES
ARE CREATIVE
ARE HELPFUL
ARE AN ACTIVE BLOG THAT IS NOT/WON’T BE ON HIATUS
THEN YOU ARE FREE TO APPLY!

READY TO APPLY?

READ THE RULES HERE
BE SURE YOU ARE GONNA FOLLOW THEM
MBF ME (+CHECK OUT OUR MEMBERS)
REBLOG THIS POST (LIKES WON’T COUNT)
SEND ME YOUR CODES PAGE SO WE CAN SEE YOUR THEMES!

IN THE MEAN TIME, YOU CAN CHECK OUT OUR NETWORK PAGE AND OUR THEME BLOG TO SEE WHO WE ARE AND WHAT WE’RE DOING!

worthythor:

THE TARDIS NETWORK IS LOOKING FOR NEW MEMBERS!

WHO CAN JOIN?

IF YOU

  • HAVE AT LEAST 5 THEMES  (if you think your themes are already original enough, you can apply with less than 5 themes)
  • HAVE ORIGINAL, UNSTOLEN THEMES
  • ARE CREATIVE
  • ARE HELPFUL
  • ARE AN ACTIVE BLOG THAT IS NOT/WON’T BE ON HIATUS

THEN YOU ARE FREE TO APPLY!

READY TO APPLY?

  • READ THE RULES HERE
  • BE SURE YOU ARE GONNA FOLLOW THEM
  • MBF ME (+CHECK OUT OUR MEMBERS)
  • REBLOG THIS POST (LIKES WON’T COUNT)
  • SEND ME YOUR CODES PAGE SO WE CAN SEE YOUR THEMES!

IN THE MEAN TIME, YOU CAN CHECK OUT OUR NETWORK PAGE AND OUR THEME BLOG TO SEE WHO WE ARE AND WHAT WE’RE DOING!

TUTORIAL | STICKY TOPBAR

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

Themes & Pages
21
Coming Soon
20
Preview - Info - Code
19
Preview - Info - Code
17
Preview - Info - Code
16
Preview - Info - Code
15
Preview - Info - Code
14
Preview - Info - Code
13
Preview - Info - Code
12
Preview - Info - Code
11
Preview - Info - Code
10
Preview - Info - Code
9
Preview - Info - Code
7
Preview - Info - Code
6
Preview - Info - Code
5
Preview - Info - Code
2
Preview - Info - Code
redirect pg
Preview - Info - Code
Tag pg
Preview - Info - Code
Rules
1. No stealing Code or Designs.
2. No removing or altering the credit.
3. Please Like or reblog the post.
The rules are simple. Do not steal my codes.
You can edit it as much as you want but do not remove the credit. If you want to move it please ask me first and I will say if it's ok. And I would really love it if you could like or reblog the post so that I can see them being used. This also helps me to find glitches so I can update. By using any of my themes or pages you are agreeing to these rules.
Creative Commons License This work is licensed under a Creative Commons Attribution 3.0 Unported License.
Please Note

My themes are designed to work in Google Chrome. I check for compatability with a few other browsers but there are no guarantees. If you are having trouble using it in another browser and want help fixing it drop by my ask and I’ll see if I might be able to help.

Some themes and pages have been deleted from this blog. This is mostly because I no longer like them or they were very ugly and I didn't have the patience to fix my horrible begginner lvel coding. No worries, they are still available through pastebin if you need them.

Ask & Submit
Before you ask

Please do not hesitate to ask questions. I love to help! Before asking a question please check the FAQ to make sure it han't already been answered.

In your question please include the number of the theme or the page you are using. Please try to describe the problem as specifically as possibe. This will be very helpful in trying to solve the problem. Also It would be helpful if you asked off anon, but you don't have too.

FAQ
General
IS IT OK TO MOVE THE CREDIT?

You may not move the credit to another page but you can move it to another corner of the page (example: it's in the way of an updates tab). Please don't mess with the size, color, or format of the credit link. It must be completely visible. If you have any questions about moving it please ask and I will be happy to clarify.

Can I edit your themes?

Yes! Edit to your heart's content but please leave the credit. If you remove the credit I will consider it using my theme as a base code which is stealing and is against the rules.


THEME QUESTIONS
How can I add another Dropdown menu to theme 15?

Follow this tutrial on pastebin.

On themes 15 and 13 the HIDDEN PART OF the dropdown menus show before the page loads.

Yes I have no idea why this happens so I am currently working on finding code to replace it. When I find suitable code I will release an update for these themes with the fixed code. Then you will then be able to reinstall the theme and the problem will be fixed. Sorry for the lack of a solution at the moment! Please know that I am working on it!

HOW CAN I SHOW ALL OF THE TAGS ON THEME 14?

Go into the code and find:

.tags {
position:relative;
float:right;
text-transform: lowercase;
font-size: 9px;
margin-top:-5px;
color:;
letter-spacing:1px;
text-align:right;
padding-top:5px;
max-width:300px;
max-height:17px;
/* REMOVE THIS LINE TO SHOW ALL THE TAGS */ overflow:hidden;
-moz-transition-duration:0.3s;
-webkit-transition-duration:0.3s;
-o-transition-duration:0.3s;
}

and delete the bolded line!

Now the Tags overflow will be shown. It will most likely look a bit weird because the theme wans't designed to do this but it's your blog so you can decide!

Where did you find the background for theme 5?

Here! This website has tons of beautiful floral and vintage backgrounds!

How do you add a header image to theme 18?

1. Paste this code in the meta tags section (its at the very top around line 21 but you can paste it anywhere before <style type="text/css">)

<meta name="image:header" content=""/>

2. Paste this in the css section (after <style type="text/css"> and before </style>) and make sure to REMOVE the *** before "block" o r "/block" (They won't show up unless i put those there sory)

.header img{
{***block:If500pxposts}
width:590px;
{***/block:If500pxposts}
{***block:Ifnot500pxposts}
width:490px;
{***/block:Ifnot500pxposts}
height:183px;
}

3. Paste this code directly under <div id="sidebar"> (somewhere around line 820)

<div class="header">
<img src="">
</div>

4. And if you want to hide the title delete this code (it's right under where you just pasted the last code).

<a href="/"><div class="title">Neonbike Themes</div></a>

5. Hit update and save, then go and upload a header image!

Installation Guide
Theme Installation
HOW TO INSTALL THEMES:

1. Find the theme you like and click on “code”. This will take you to pastebin.

2. Select the entire paste or click the icon, and press Control+C.

3. Go to your dashboard, select your blog and click “customize” (it has the little eye symbol next to it).

4. Once in customization mode, click “edit HTML” (near the top).

5. Select all of the existing code and delete it. Replace it with the code you copied earlier (hit Control+V).

6. Hit “update preview” and “save” to view your new blog theme!

7. You are now free to exit customizing mode if you’d like or you can edit the colors and pictures. To do this remain in customize mode. First click the back arrow and scroll down to colors, title, description, and even upload pictures for the background and (in most themes) the sidebar.

HOW TO CUSTOMIZE THEMES:

Themes come with variables that you can change such as colors, titles, links, description, and sometimes options like "grayscale posts" or "hover tags". These can be accessed by clicking "edit theme" (either on your dacshboard or when you are visiting your blog).

These options will let you change the appearane of your theme. They all appear as little switches or buttons inside the left menu when you go to customize your theme. Common variable that I use in my themes are:

  • 500px Posts - My themes usally come with posts 400px wide. This option lets you make the posts 500px wide instead. On som themes it may be reverse and it will come with 500px posts and this iption will change it to 400px.
  • Grayscale Posts - This option makes all posts blck and white. Usually the posts will turn colored again when you hover over them.
  • Hover Tags - This option will make it so that the tags only appear when you hover over the post.
  • Hide Captions - For photo, video and audio posts this will hide the captions so only the image will show.


Page Installation
HOW TO INSTALL A PAGE THEME:

1. Go into customize mode, scroll down and click on “add new page”.

2. IMPORTANT: after naming the page and giving it a URL, be sure to switch it from standard layout to CUSTOM layout. If you don’t do this it won’t work properly.

3. Copy and paste the code into the section for code.

4. Hit “Update preview” and “save”. It may take a little while to load but you should now see a generic version of the page.

HOW TO CUSTOMIZE A PAGE THEME:

If it’s a ask theme make sure to change the URL in the code for the askbox. It will usually be labeled as such and have something along the lines of YOURURLHERE. replace that with your URL. for this site the URL would be “neonbikethemes”.

If it has colors in it you can hit Control+F to find a color and replace it with your own. Make sure to use the color’s Hex or RGB value. Here is a link to help you pick colors.

If it’s a tags, links, or about page you will need to go in and change the text to suit your needs. This will be in customize mode and you will have to edit the code. I usually try to add little helpful notes in the code to help you with this.

+