notte-themes - Tumblr blog

notte-themes · 9 years ago

Note

I'm not sure if it's just me, but a lot of the static previews don't work properly. :(

Yes I just returned from a very long hiatus and I will look into it within the next few months.

I have a lot on my to-do list from responding to questions, releasing themes, updating anything I possibly can. It will be a long process but hopefully I have a lot of exciting new things for those who prefer my themes.

They should all be working fine now, let me know if you have any issues with any of them.

2 notes · View notes

notte-themes · 10 years ago

Photo

Updates Tab #1 | by bisexualamy

static preview / code (instructions are in the code)

Rules:

Don’t repost this updates tab as your own

Don’t redistribute this in your own themes

You don’t have to credit me but it would be nice

Features:

The code has six tabs but you can add/remove as necessary

If you want to change the colors color blender tells you the hex codes for the gradient

Change the fonts/colors as you like as long as you follow the rules

Please like/reblog if using and message me with any questions or issues!

#tutorial

235 notes · View notes

notte-themes · 10 years ago

Photo

Update tab 7: by sethscodes / doctorstwelfth

Update tabs:

easy options to change positioning of the tab

all colors customizable

detailed instructions in the code on how to style the tabs if you wanna change something

other options such as borders, automatic scroll if the tab gets over 250px in height

Rules:

like / reblog if using

maybe support me with a follow?

don’t remove credit!

don’t steal or copy parts of the code

feel free to send me a message anytime if you’re having trouble with the code!

How to install:

paste this code in your html after <head> but before <style>

paste this code in your html after <style> but before </style>

paste this code in your html after <body> but before </body> (preferably just after <body>)

paste this code after </body> but before </html>

#tutorial

488 notes · View notes

notte-themes · 10 years ago

Text

The Art of Asking Theme Makers Questions

I’ve noticed more and more theme makers getting frustrated with questions they’re being asked. So I thought as a theme maker myself that I would write up a sort of guide on asking theme makers questions so that not only more theme makers may not resort to closing their ask box, but also help you as theme users get help faster.

Keep reading

#tutorial

368 notes · View notes

notte-themes · 10 years ago

Photo

this is a simple tutorial on how to do custom fonts for themes (with the use of Google Fonts).

these fonts are applicable to most of the browsers (IE, Firefox, Chrome, Safari) so it’s really helpful.

Here’s the steps on how to do it (Please read this carefully because instructions should be followed for it to work)

1. Go to this page and look for the font you like; i already compiled most of the fonts i like, if you want more options you can go to google fonts.

2. There are two links below the font title, the first one with the <link href=“…”> and the second one with the “font-family:”;“

3. Copy the first one and paste it in the html section of your theme, anywhere will do but i recommend you place it after the <head> section. ***HERE’S THE CRUCIAL PART*** when you copy the link, you can see a space between the ’<’ and the ‘link’, remove that. if you don’t it wouldn’t work properly!

4. Now for the second link, place it in the CSS portion of the code. here’s a sample of that:

#title{ font-family: 'Font Goes Here', cursive; font-weight: 100; }

this is just a sample, replace the ones inside with the second link you got and the div section you want to place the font with.

5. If you go after the <body> section you could see that if we place text in the div section, it would look different. here’s a sample:

6. Then it works! hope this tutorial helps! :)

#tutorial

1K notes · View notes

notte-themes · 10 years ago

Photo

Links to Help You Start Coding by azurethemes/salazhar In honor of opening my theme blog, I thought I’d make this post on learning how to code since many people ask where/how I started coding. This is not a tutorial on how to code a theme, but a list of resources on how to start learning HTML and CSS.

UNDERSTANDING HTML These websites are the one I used to learn and understand more about HTML and CSS.

Code Academy Code Academy teaches you HTML, CSS, Javascript, jQuery, and more interactively. Their tutorials are great for anyone of any age. This site is my favorite and I definitely recommend it.

w3Schools w3Schools is what I like to call my online glossary. It has literally everything you need to know.

MAKING TUMBLR THEMES There are many great tutorials here on tumblr on creating your own theme. Here are a few:

By lmthemes

By farahmir

By themesbyeris

By ettudis

By howtomakeasimpletheme

By buildthemes

Tumblr has also provided us with a document on creating custom themes and I suggest going through it.

USING BASE CODES If you wanna start coding themes, but you don’t know where to start, I suggest using a base code. I have a masterpost of base codes here, but you will want to use base codes that come with instructions like these two [ one | two ] so it’s easier for you to customize and understand the theme.

CONCLUSION Again, this is just a list of resources to help you begin coding your own tumblr themes. I will release another resources list with more external links that provides you with tutorials to make your themes even better. This one is just to help you start out.

Please like/reblog this if you found it useful. If you have anymore questions on coding, feel free to ask me!

#tutorial

15K notes · View notes

notte-themes · 10 years ago

Text

Hey who wants a colored follow and dashboard buttons? Add the code you want to your custom css at the bottom of the customization page under advanced. Only good on safari and chrome.

Blue on white

#tumblr_controls { -webkit-filter: sepia(1) invert(1) saturate(5); }

Black on blue

#tumblr_controls { -webkit-filter: invert(1) sepia(1) hue-rotate(100deg) saturate(5); }

Black on green

#tumblr_controls { -webkit-filter: invert(1) sepia(1) hue-rotate(30deg) saturate(20); }

Purple-ish on pink-ish

#tumblr_controls { -webkit-filter: invert(1) sepia(1) hue-rotate(240deg) saturate(15); }

Black on light green

#tumblr_controls { -webkit-filter: invert(1) sepia(1) hue-rotate(30deg) saturate(5); }

Dark red on light red

#tumblr_controls { webkit-filter: invert(1) sepia(1) hue-rotate(300deg) saturate(5); }

The following aren’t the prettiest colors but they were the best i could manage.

White on blue

#tumblr_controls { -webkit-filter: drop-shadow(0px 0px 0px #00ffff); }

White on green

#tumblr_controls { -webkit-filter: drop-shadow(0px 0px 0px #00ff00); }

More will be added. Feel free to ask for a specific color, I’ll try my best.

#tutorial

118 notes · View notes

notte-themes · 10 years ago

Photo

updates popup tutorial + tips for customization by nerdydean

preview | read below for codes and instructions

Keep reading

#tutorial

675 notes · View notes

notte-themes · 10 years ago

Photo

GA Dash introduces a Tumblr theme tutorial that doesn’t totally blow. But it still could have been done a bit better.

#tutorial

59 notes · View notes

notte-themes · 10 years ago

Text

Dynamically changing/displaying web page content using javascript without refreshing the page

Sometimes we may need to change the content displayed in the webpage frequently. Javascript will enable achieving this without the need for refreshing the webpage.(i-e without requesting the page again). <html> <head> <script type="text/javascript"> var quoteIntervalId = 0; var arrQuotes=[ 'quote1', 'quote2', 'quote3', 'quote4']; function displayQuote ( ) { quoteIntervalId = setInterval ( "showQuote()", 1000 ); } function showQuote ( ) { var randnumber=Math.random ( )*1000; randnumber=parseInt(randnumber); var count_quotes=arrQuotes.length; var quoteindex=randnumber%count_quotes; document.getElementById("quotemsg").innerHTML = arrQuote

#tutorial

11 notes · View notes

notte-themes · 10 years ago

Photo

HOVER EFFECTS CODES by Roxie

Static preview (Please read the instruction below)

Features:

Contain with 5 hovers effects, each effect has 2 versions (10 in total)

Inspired by this website

Each effect contains with 1 image, 1 main title, 1 sub title and 5 links

Can be used in sidebar, headers, banners, etc.

No Javascript required

Default size: 400px x 250px

How To Use

Download the CSS style here (paste them after <style>)

Here is the div style example

You can change the detail based on your preference

Rules:

Please like or reblog if you’re using

Do not claim as your own

Do not remake and repost (if you’re using in your public themes please credit me)

It will be nice if you credit me somewhere on your blog

If you have any problem please message me

#tutorial

606 notes · View notes

notte-themes · 10 years ago

Text

Transforming CSS

Hi. Right now I’m just gonna explain some things your can do with CSS, including scaling (making bigger or smaller), rotating, translating (moving from one place to another), and skewing (deforming the object).

Add & edit these codes in a CSS object that is already made. CSS is under <style> or <style type=“text/css”>

Keep reading

#tutorial

8 notes · View notes

notte-themes · 10 years ago

Photo

SLIDE MENU TUTORIAL :::: BY TRENZATHEMES :::: LEVEL :::: INTERMEDIATE :::: RULES :::: NO REPASTING // NO CLAIMING AS YOUR OWN // LINK TO THE TUTORIAL WHEN ASKED WOULD BE COOL. :::: I finally decided to post how I code my slide menus. I use them for asks, theme rules, update tabs, etc. Pretty much anything you want to put content into! I use Codrops tutorial and this is how I get it to work with tumblr. :D Under the cut is the tutorial! Enjoy!

Keep reading

#tutorial

422 notes · View notes

notte-themes · 10 years ago

Link

In this tutorial we are going to make a set of modern buttons to share posts on popular social networks including:

Facebook

Twitter

Google+

Tumblr (we can’t make a social network list without Tumblr and its reblog function)

We’ll build these buttons with HTML and CSS...

#tutorial

88 notes · View notes

notte-themes · 10 years ago

Link

Excuse me while I go pore over this.

#tutorial

40 notes · View notes

notte-themes · 10 years ago

Photo

HOW TO MAKE AN ARROW WITH CSS AND HTML:

An example can be seen in the header and questions on my Underwater theme.

Difficulty: Easy

Keep reading

#tutorial

124 notes · View notes

notte-themes · 10 years ago

Link

#tutorial

191 notes · View notes