I am not accepting asks on this blog anymore. I am now at solarre.
☼
I have abandoned this theme blog and created a new one at solarre.
I've decided that a change was needed. My coding style has changed immensely since the start of lunecerise, and I decided it was best to start fresh. Questions about my old themes will no longer be answered. Lunecerise themes will no longer be active, but this blog will remain purely as an archive. Thank you all for a great experience. All themes coded under lunecerise will still be found here. To see the blog, continue scrolling.
Paste the above code anywhere inside of <style type=css> and </style>
If you want it to fade slower or faster just adjust the seconds in the CSS. (eg: 0.4s, 0.8s, 1s, 1.5s, and so on)
Now to apply it! Locate the container that holds everything. It should be labeled <div id=”container”> or something along those lines. You’re going to add a class to the div tag.
class="box fade-in one"
You are going to add that class to your container and sidebar div tags like so:
<div id ="sidebar" class="box fade-in one">
(remove the space between the equal sign and id..tumblr is being weid and wouldnt show the code) And that’s it! It’s super easy to do and creates a cool effect! I hope this is all makes sense! If not ask me with whatever questions you may have.
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 codeas 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)
Hi! i am in love with your slide out menu!!! I looked at your HTML help and found the post with what I need to put where. But I am HORRIBLE at coding and knowing where to put things, I was wondering if you could do me the biggest favor and step me through it? its a lot to ask but i would really appreciate it!
Ok— sorry for the delay and sorry for the length, but I tried to go into as much detail as possible. This is sort of tricky because you will still have to customize it to your own uses but hopefully I’ll go into enough detail here to make it clear how to do that:
1. CSS code here: copy this and paste it after the line:
<style type=”text/css”>
2. Javascript here: most themes have some javascript elements, but there are a few that don’t. If yours already has it, you’ll almost definitely see the line:
This allows jquery to run on the theme. If you don’t see this in your theme, copy and paste it in. I have it right under the <meta name>s in my theme. Right under this line you should copy and paste the code from the link.
3. I did a REALLY bad job at explaining how to do the html in the other post, so I’m not surprised that you’re confused. In order to try to make it clearer, I’ve pasted all the relevant html code exactly as it appears in my theme here.
I’ll go through it so you know what everything is doing— and you can check it with my page if you’re confused as to what ends up where. All of this goes after the <body> line. The dashed line just indicates that there’s some stuff inbetween but I don’t think it’s relevant. It looks more complicated than it is. The stuff above the dashed line governs the actual menu itself. The first three lines will be identical, so don’t change anything in those. Each <li> tells the menu to create a new line, so you can see where the breaks happen. The javascript there (everything between <script language=”javascript”> and </script>) is just an online counter, so you can ignore that. Two of my links go to pop up boxes, for graphics and explore tags. The other link just goes to /tagged/themes for my themes. It takes a bit more coding to do the popups, but if you’re just adding links to other pages, you can use the same setup as the themes link on mine:
<li><a href=”/tagged/themes”>themes</a></li>
Here, we have the <li> that puts it on a new line, the link url itself, the title that appears, and then the closing elements for the link and the line.
After the dashed line is what I have for my standard links. These are the ones that appear right below my header— the “home” “ask” and “navigation” that are always there. What you want to take away from this is the structure for how the menu knows to slide in when “navigation” is clicked. All you basically need is this line:
<div id=”push”> <a href=”#”>navigate</a> </div>
I just wanted to put it in context of my other home page links so you know where it is and what it’s doing there. You’ll want to find where your top links are in your code and embed this line there. You need the “push” div id because that is what tells the menu to push into the screen.
So you just need to find the corresponding link html in your theme and put this line where the link that activates the slide menu will go.
Let me know if this is still confusing. Or if you have any particular questions. Try it out first, and if you can’t get it working it’s usually easier to troubleshoot than to start from scratch c: Be patient and it’ll work!
I’ve received quite a few asks about the hovering permalinks on my theme Rhea. So here is a quick and easy way to achieve this.
INSTRUCTIONS
Firstly you must add position: relative; into your #entry (it could also appear as #posts or something similar).
Then add one of these codes anywhere between <style type=”text/css”> and </style>
Finally, add one of these codes at the beginning of your posts. It should look something like this:
<div id=”content”> {Block:Posts} <div id=”entry”> Code Here {block:Text}
COMMENTS
That’s it! You’re finished! Just be sure to change the width in #perma_hold to your post size and you should be fine. Feel free to customize it more if you feel comfortable, but be aware that I won’t be helping if you mess something up.
Difficulty: Easy (though it is suggested you understand basic CSS and HTML)
Unfortunately, I am lazy and can’t be bothered to find which application on my computer records screens and then gif it, so please refer to this example. I recently used this technique in my Underwater theme, and was pleasantly surprised to find that it wasn’t as complicated as I thought it to be…
Quick and Dirty Tumblr Audio Player Fix Tested on IE, Firefox, Opera, Chrome & Safari
Alright, so Tumblr messed around with the audio player today, and rendered lots of themes broken and tutorials useless, plus given theme makers a puppy load of work to do. Sooo I just wanted to provide a couple snippets of code as a base, for any theme makers who don’t really have the time to delve into the frustration that is styling the player…And also anyone who’s got a broken theme (this isn’t hard to do, I promise).
All you need to do is insert this code between your <style></style> tags. Preferably delete any styling previously associated with the Audio block, if you can.
And replace the contents of your {Audio} {/Audio} block with this code.
You’ll get something formatted like the picture above. There’s no styling, so it’ll adopt the colours, fonts, etc of your theme automatically, and will fill your post container regardless of size (this is a 250px example, but the code will adjust for 400px, 500px, etc)
Quick guide to styling:
If you want to make the song titles bold or anything like that, everything you need to edit is in the trackdetails div.
If you want to change the colour of the player (I used white, obviously) just change {AudioPlayerWhite} to {AudioPlayerBlack} or {AudioPlayerGrey} instead, BUT don’t forget to adjust the background-colour of .playerbuttonbg.
If you’d like to make the image larger or smaller:
Change the width and height of .audioimgwrapper to whatever you want
Change the left margin (margin-left) of .trackdetails accordingly (audioimgwrapper width + 10px works nicely)
Reposition .playerbuttonbg accordingly to make it sit in the middle of the image again.
Anyway. Yes. I don’t think I have anyone following me that makes themes but oh well. There you guys go. Feel free to use and abuse as you want. No credit required. :D
so, for a while, i’ve been getting a lot of requests on how i make my slide menus for my themes. these effects involve css, html and javascript, and i recommend that you have prior html knowledge before making these menus. please, i’ve made this tutorial out of the goodness of my own heart, and i won’t be answering any questions about it. please respect this.
Hello! So in this tutorial I’ll be going over three methods to reveal things on click using jQuery. It is recommended that you are at least a little familiar with HTML and CSS. Here’s a preview of the final product.
I thought it would be pretty helpful if I put together some theme resources for my followers who are interested in starting to code. It’s a hard process to learn so its good to have a toolbox!
CodePen: the main site is full of lovely inspiration for web design, but the pen is a very helpful place to test out and build different elements of your code that you can insert into your theme without downloading a program like dreamweaver. Its separates the different codes into HTML, CSS, and Javascript so it doesn’t take much thought.
ColourLovers: This website is full of different color pallets that you can use on your theme, you can look them up by the color, or just the general theme you are looking for.
Codrops: This is a great place for inspiration and code help. It has a wide variety of tutorials to help you make your theme as unique as possible.
Base Code: This is the base code by theme maker farahmir that I usually use. Its hard to start from scratch when you’re just beginning so its very generous of talented theme makers to release codes to help people get a start.
Codecademy: I’ve only just started to explore this website but it seems to be a good place to start when it comes to gaining your footing as a web designer.
W3schools: If I have really basic curiosities about a bit of coding I usually end up over here. It isn’t overly complicated. Like I said, just for the basics.
Drop-down boxes are popular and easy to use when you want to add a lot more links to your theme! All you do is stick the code at the bottom of your description.
You can adjust anything to fit your needs. Width will change the width of the box, border will add a border of your choice thickness (and you have to put a color hex code after solid), color is for text, background color is for the background, everything is editable and self-explanatory.
To add more links, just copy and paste one of the option values underneath another option value.
You may need to retype quotation marks. You can view the full code on my blog itself.
