TOP
Neonbike Themes

Changing a one columned theme into a grid theme (WITH MASONRY)

themesbyzsu:

I’ve seen tutorials on how to make a multi-columed theme, but it never really includes masonry or infinite scroll so I’m going to try fill that void!

Making a two-columned theme is really basic, it’s just when you edit other people’s themes where it becomes a little bit more complicated, because you have to find things. I’m going to be using my base code as an example theme and editing it to make it multi-columned.

Difficulty:  ★ ★ ☆ ☆ 
Requested By: anonymous
Note: This tutorial may not work on all themes, and if it doesn’t I highly recommend either finding a theme that has multiple columns already installed!

Next Tutorial: Moving things on-click with javascript. (Example)

Feel free to request a tutorial! 

Read More

Updates Box 2: Lines | © kimsjongin

kimsjongin:

image

Sorry about the slow gif; preview the updates box here!

expanding updates box tutorial here!

This style was inspired by the theme credit style used by Bell (thisis-mydesign), who, by the way, was one of the people who originally inspired me to start making themes. Another great tutorial for the same style of updates box can be found on hardziam’s theme blog!

All colors, fonts, etc. can be customized; the instructions are within the code. If you only want one updates box, instructions are within the code.

If this helped you, please like/reblog this post. It would be even more appreciated (but not obligatory) if you linked to this tutorial somewhere on your blog. :)

1. Paste this after <style type="text/css"> or before </style>:

2. Paste this after <body> or before </body>:

robbarya:

TAGS PAGE #3 by ROBBARYA
Instructions in code, if you have any questions go to my ask
FEATURES:
3 navigation links
All colours are customizable
80x80px icon
Nine default boxes. More can be added
Infinite amount of links. Scrollbar appears when the list is too long
RULES:
DON’T CLAIM AS YOUR OWN
DON’T REMOVE OR MOVE THE CREDIT
DON’T REDISTRIBUTE
DON’T USE AS A BASE. You can edit it as much as you like as long as the credit remains untouched.
Preview | Code

Please reblog/like if you use ♥ Thank you
Matches this theme

robbarya:

TAGS PAGE #3 by ROBBARYA

Instructions in code, if you have any questions go to my ask

FEATURES:

  • 3 navigation links
  • All colours are customizable
  • 80x80px icon
  • Nine default boxes. More can be added
  • Infinite amount of links. Scrollbar appears when the list is too long

RULES:

  • DON’T CLAIM AS YOUR OWN
  • DON’T REMOVE OR MOVE THE CREDIT
  • DON’T REDISTRIBUTE
  • DON’T USE AS A BASE. You can edit it as much as you like as long as the credit remains untouched.

Preview | Code

Please reblog/like if you use ♥ Thank you

Matches this theme

robbarya:

About + FAQ #1 by ROBBARYA
Matches this tags page. Instructions in code, if you have any questions go to my ask
FEATURES:
4 customizable tabs (about + ask + faq) More can be added
4 navigation links. More can be added
All colours are customizable
80x80px icon
Infinite space to write. Scrollbar appears when is too long.
RULES:
Don’t claim as your own
Don’t remove or move the credit
Don’t redistribute
Don’t use as a base. You can edit it as much as you like as long as the credit remains untouched.
Preview | Code

Please reblog/like if you use ♥ Thank you

robbarya:

About + FAQ #1 by ROBBARYA

Matches this tags page. Instructions in code, if you have any questions go to my ask

FEATURES:

  • 4 customizable tabs (about + ask + faq) More can be added
  • 4 navigation links. More can be added
  • All colours are customizable
  • 80x80px icon
  • Infinite space to write. Scrollbar appears when is too long.

RULES:

  • Don’t claim as your own
  • Don’t remove or move the credit
  • Don’t redistribute
  • Don’t use as a base. You can edit it as much as you like as long as the credit remains untouched.

Preview | Code

Please reblog/like if you use ♥ Thank you

robbarya:

TAGS PAGE #4 by ROBBARYA
Instructions in code, if you have any questions go to my ask
FEATURES:
3 navigation links
All colours are customizable
350x170px topbar
Ten default boxes. More can be added
Infinite amount of links. Scrollbar appears when the list is too long
RULES:
DON’T CLAIM AS YOUR OWN
DON’T REMOVE OR MOVE THE CREDIT
DON’T REDISTRIBUTE
DON’T USE AS A BASE. You can edit it as much as you like as long as the credit remains untouched.
Preview | Code

Please reblog/like if you use ♥ Thank you

robbarya:

TAGS PAGE #4 by ROBBARYA

Instructions in code, if you have any questions go to my ask

FEATURES:

  • 3 navigation links
  • All colours are customizable
  • 350x170px topbar
  • Ten default boxes. More can be added
  • Infinite amount of links. Scrollbar appears when the list is too long

RULES:

  • DON’T CLAIM AS YOUR OWN
  • DON’T REMOVE OR MOVE THE CREDIT
  • DON’T REDISTRIBUTE
  • DON’T USE AS A BASE. You can edit it as much as you like as long as the credit remains untouched.

Preview | Code

Please reblog/like if you use ♥ Thank you

yukoki:

MULTI-PAGE [02] SUIKOMU by YUKOKI

✄ PREVIEW | VIEW CODE ✄

You can easily toggle through this page to find an about section, a tagslist/navigation section, a blogroll and an FAQ+askbox. Page was made using a Carousel Slider, so preview the page to check out the sliding effect! Customize notes can be found in the code, like always.

!!! Important: to get your ask box to work, please ensure you check out the message on line 699 of the code.

Content credits go to maruti-bitamin. Background by Victor Bykov. Made with the help of str-wrs' sliding viewer tutorial!

Please like/reblog if you’re using the page!

Themes & Pages
Rules
The rules are simple. Do not steal my codes. You can edit it as much as you want but do not remove the credit. Iff 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 liked or rebloged the post so that I can see them being used. By using any of my themes or pages you are agreeing to these rules.
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'c content but please leave the credit. If you remove the credit I will consider it using my theme as a base code which is against the rules.


THEME QUESTIONS
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!

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. Common variable that I use in my themes are:

  • 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.

+