athenability:

I start off with these tags:

<html>
    <head>
        <title>{Title}</title>
<style type="text/css" media="screen, print, projection"> 
CSS CODES GO HERE </style>
JS CODES GO HERE     </head>
    <body>
BLOG CONTENTS GO HERE    
    </body>
</html>

Click here for CSS Guide.

Click here for Blog Contents Guide.

You can read this for  more info about blog content. What you need to do is to group the contents the way you want so you can apply specific css layout / design..

Let’s say for example you want to make a 2 column theme..

first inside the <body> and </body> tags, put the “wrapper div”  tags (the size of the whole theme)

Note: I put spaces on the div id names, so they can be shown..

so we’ll have: 

 <body>   
    <div id = " wrapper ">     
    </div> 
 </body>

Inside the wrapper div, let’s put our sidebar div tags..

 

 <body>   
    <div id = " wrapper "> 
          <div id = " sidebar  ">    
            </div>
   </div> 
 </body>

Below the sidebar div tags, lets put our main div tags. Why below? So it will be separated from the sidebar, and it will be inside the wrapper div.

Note: Be sure to always out the close </div> tags!

 <body>   
    <div id = " wrapper "> 
          <div id = " sidebar  ">    
          </div>
          <div id = " main ">
          </div>
   </div> 
 </body>

Inside the sidebar div tags, Put everything you want like chatbox, music players, visitor trackers etc.

Inside the main div tags, Put all the blog contents which can be found here. Make sure they are inside the {block:Posts} {/block:Posts} tags

 <body>   <div id = " wrapper ">  <div id = " sidebar ">   </div> <div id = " main "> {block:Posts}  ALL BLOG CONTENTS HERE SURROUNDED BY BLOCK TAGS  {/block:Posts} </div> </div>  </body>

Here’s an example of what we SHOULD have now:

Note: I just kind of copied the blog contents from the guide and i put div instead of li

<html> <head> <title>{Title}</title> <style type="text/css" media="screen, print, projection"> CSS CODES GO HERE </style> JS CODES GO HERE  </head> <body> <div id = " wrapper ">  <div id = " sidebar ">   </div> <div id = " main "> {block:Posts}  {block:Text} <div class= " post text "> {block:Title} <h3><a href="{Permalink}">{Title}</a></h3> {/block:Title} {Body} </div>
 {/block:Text} {block:Photo} <div class= " post photo ">
 <img src=" {PhotoURL-500} " alt=" {PhotoAlt} "/> {block:Caption} <div class= " caption ">{Caption}</div> {/block:Caption} </div>
 {/block:Photo} {block:Photoset} <div class= " post photoset ">
 {Photoset-500} {block:Caption} <div class= " caption ">{Caption}</div> {/block:Caption} </div>
 {/block:Photoset} {block:Quote} <div class= " post quote " >
 "{Quote}" {block:Source} <div class="source">{Source}</div> {/block:Source} </div>
 {/block:Quote} {block:Link} <div class= " post link ">
 <a href="{URL}" class= " link " {Target}>{Name}</a> {block:Description} <div class=" description " >{Description}</div> {/block:Description} </div>
 {/block:Link} {block:Chat} <div class= " post chat ">
 {block:Title} <h3><a href= " {Permalink} ">{Title}</a></h3> {/block:Title} <ul class=" chat " > {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> {/block:Lines} </ul> </div>
                {/block:Chat}





                {block:Video}
                    <div class= " post video ">
 {Video-500} {block:Caption} <div class= " caption ">{Caption}</div> {/block:Caption} </div>
 {/block:Video} {block:Audio} <div class= " post audio ">
 {AudioPlayerBlack} {block:Caption} <div class= " caption ">{Caption}</div> {/block:Caption} </div>
{/block:Audio}                   {/block:Posts} 
</div>    
</div>         
</body> 
</html>

You can add other things like the date, tags.. refer to the guide..

Let’s move on to the CSS part. The hard part. >_< First let’s define the style of the blog itself (font, body background)

body
{
background: INSERT HEX CODE OF THE COLOR url(IMAGE_URL) POSITION REPEAT/NO-REPEAT;
font: INSERT FONT FAMILY & FONT COLOR;
text-align: CENTER/JUSTIFY;
color: INSERT FONT COLOR;
}

Now let’s define he size of our first divs (wrapper, sidebar and main). We’ll put the codes on the CSS area. To render style on the wrapper div, we should write #wrapper

Note: # for div id and . for div class

#wrapper {
width: 900PX; (should be the rough sum of the main width and the sidebar width)
}

#sidebar {
width: 300PX;
float: right; SIDEBAR ON THE RIGHT PART
background: INSERT COLOR url(INSERT IMG URL) ;
OTHER STYLING CODES HERE REFER TO THE CSS GUIDE


}

 #main{
float: left; MAIN ON THE LEFT
width: 500px;
background:;
OTHER STYLING CODES HERE REFER TO THE CSS GUIDE


}

To put a specific css style on the blog posts, just check the div class names. Example for the quote:

.post quote{
font: FONT SIZE FONT FAMILY;
color: FONT COLOR;
OTHER STYLING CODES HERE REFER TO THE CSS GUIDE

}

You may put the pagination on the side bar. Refer to the guide for other elements you may and you need to put.

This ends my tutorial for now.. I will add other things in the future.

&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;  &lt;/body&gt; &lt;/html&gt; You can add other things like the date, tags.. refer to the guide.. Let’s move on to the CSS part. The hard part. &gt;_&lt; First let’s define the style of the blog itself (font, body background) body { background: INSERT HEX CODE OF THE COLOR url(IMAGE_URL) POSITION REPEAT/NO-REPEAT; font: INSERT FONT FAMILY &amp; FONT COLOR; text-align: CENTER/JUSTIFY; color: INSERT FONT COLOR; } Now let’s define he size of our first divs (wrapper, sidebar and main). We’ll put the codes on the CSS area. To render style on the wrapper div, we should write #wrapper Note: # for div id and . for div class #wrapper { width: 900PX; (should be the rough sum of the main width and the sidebar width) } #sidebar { width: 300PX; float: right; SIDEBAR ON THE RIGHT PART background: INSERT COLOR url(INSERT IMG URL) ; OTHER STYLING CODES HERE REFER TO THE CSS GUIDE }  #main{ float: left; MAIN ON THE LEFT width: 500px; background:; OTHER STYLING CODES HERE REFER TO THE CSS GUIDE } To put a specific css style on the blog posts, just check the div class names. Example for the quote: .post quote{ font: FONT SIZE FONT FAMILY; color: FONT COLOR; OTHER STYLING CODES HERE REFER TO THE CSS GUIDE } You may put the pagination on the side bar. Refer to the guide for other elements you may and you need to put. This ends my tutorial for now.. I will add other things in the future." />

Athenability Themes

Athenability Themes© is a collection of tumblr themes I have made.. They are best viewed on a 1280x800 screen resolution. If they aren't compatible with yours, I'm so sorry. But you may request me to edit the codes, if and ONLY IF I have time and of course if you're nice enough. ;)

These themes are free and you may alter, transform or edit them the way you want but please DON'T remove the attribution, DON'T claim them as yours and DON'T use my works for commercial purposes:)

Want to be featured? Show me your edited theme and I might just choose you. yes YOU! :) Cheers!

P.S.
I know there are some imperfections, as I can't check all themes in all browsers. Some issues are fixed but you need to download the codes instead of installing it from the theme garden. Feel free to report malfunctions of my themes. Talk to me? i don't bite :)

♥ Athenability

donate



    FLAG COUNTER
    free counters

    How to make a theme [Basic Tutorial]

    athenability:

    • How do you make your themes?

    I start off with these tags:

    <html>
    <head>
        <title>{Title}</title>
<style type="text/css" media="screen, print, projection"> 
CSS CODES GO HERE </style>
JS CODES GO HERE     </head>
    <body>
BLOG CONTENTS GO HERE    
    </body>
</html>

    Click here for CSS Guide.

    Click here for Blog Contents Guide.

    • Can you explain better?

    You can read this for  more info about blog content. What you need to do is to group the contents the way you want so you can apply specific css layout / design..

    Let’s say for example you want to make a 2 column theme..

    first inside the <body> and </body> tags, put the “wrapper div”  tags (the size of the whole theme)

    Note: I put spaces on the div id names, so they can be shown..

    so we’ll have: 

     <body>   
    <div id = " wrapper ">     
    </div> 
 </body>

    Inside the wrapper div, let’s put our sidebar div tags..

     

     <body>   
    <div id = " wrapper "> 
          <div id = " sidebar  ">    
            </div>
   </div> 
 </body>

    Below the sidebar div tags, lets put our main div tags. Why below? So it will be separated from the sidebar, and it will be inside the wrapper div.

    Note: Be sure to always out the close </div> tags!

     <body>   
    <div id = " wrapper "> 
          <div id = " sidebar  ">    
          </div>
          <div id = " main ">
          </div>
   </div> 
 </body>

    Inside the sidebar div tags, Put everything you want like chatbox, music players, visitor trackers etc.

    Inside the main div tags, Put all the blog contents which can be found here. Make sure they are inside the {block:Posts} {/block:Posts} tags

     <body>   <div id = " wrapper ">  <div id = " sidebar ">   </div> <div id = " main "> {block:Posts}  ALL BLOG CONTENTS HERE SURROUNDED BY BLOCK TAGS  {/block:Posts} </div> </div>  </body>

    Here’s an example of what we SHOULD have now:

    Note: I just kind of copied the blog contents from the guide and i put div instead of li

    <html> <head> <title>{Title}</title> <style type="text/css" media="screen, print, projection"> CSS CODES GO HERE </style> JS CODES GO HERE  </head> <body> <div id = " wrapper ">  <div id = " sidebar ">   </div> <div id = " main "> {block:Posts}  {block:Text} <div class= " post text "> {block:Title} <h3><a href="{Permalink}">{Title}</a></h3> {/block:Title} {Body} </div>
     {/block:Text} {block:Photo} <div class= " post photo ">
     <img src=" {PhotoURL-500} " alt=" {PhotoAlt} "/> {block:Caption} <div class= " caption ">{Caption}</div> {/block:Caption} </div>
     {/block:Photo} {block:Photoset} <div class= " post photoset ">
     {Photoset-500} {block:Caption} <div class= " caption ">{Caption}</div> {/block:Caption} </div>
     {/block:Photoset} {block:Quote} <div class= " post quote " >
     "{Quote}" {block:Source} <div class="source">{Source}</div> {/block:Source} </div>
     {/block:Quote} {block:Link} <div class= " post link ">
     <a href="{URL}" class= " link " {Target}>{Name}</a> {block:Description} <div class=" description " >{Description}</div> {/block:Description} </div>
     {/block:Link} {block:Chat} <div class= " post chat ">
     {block:Title} <h3><a href= " {Permalink} ">{Title}</a></h3> {/block:Title} <ul class=" chat " > {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> {/block:Lines} </ul> </div>
                {/block:Chat}





                {block:Video}
                    <div class= " post video ">
     {Video-500} {block:Caption} <div class= " caption ">{Caption}</div> {/block:Caption} </div>
     {/block:Video} {block:Audio} <div class= " post audio ">
     {AudioPlayerBlack} {block:Caption} <div class= " caption ">{Caption}</div> {/block:Caption} </div>
{/block:Audio}                   {/block:Posts} 
</div>    
</div>         
</body> 
</html>

    You can add other things like the date, tags.. refer to the guide..

    Let’s move on to the CSS part. The hard part. >_< First let’s define the style of the blog itself (font, body background)

    body
{
background: INSERT HEX CODE OF THE COLOR url(IMAGE_URL) POSITION REPEAT/NO-REPEAT;
font: INSERT FONT FAMILY & FONT COLOR;
text-align: CENTER/JUSTIFY;
color: INSERT FONT COLOR;
}

    Now let’s define he size of our first divs (wrapper, sidebar and main). We’ll put the codes on the CSS area. To render style on the wrapper div, we should write #wrapper

    Note: # for div id and . for div class

    #wrapper {
width: 900PX; (should be the rough sum of the main width and the sidebar width)
}

#sidebar {
width: 300PX;
float: right; SIDEBAR ON THE RIGHT PART
background: INSERT COLOR url(INSERT IMG URL) ;
OTHER STYLING CODES HERE REFER TO THE CSS GUIDE


}

 #main{
float: left; MAIN ON THE LEFT
width: 500px;
background:;
OTHER STYLING CODES HERE REFER TO THE CSS GUIDE


}

    To put a specific css style on the blog posts, just check the div class names. Example for the quote:

    .post quote{
font: FONT SIZE FONT FAMILY;
color: FONT COLOR;
OTHER STYLING CODES HERE REFER TO THE CSS GUIDE

}

    You may put the pagination on the side bar. Refer to the guide for other elements you may and you need to put.

    This ends my tutorial for now.. I will add other things in the future.

    Mar 08 , 2012 • 118 notes • VIA • Share
    #tutorial
    118 notes
    1. fernandosalas reblogged this from athenabilitythemes
    2. valadonia reblogged this from athenabilitythemes
    3. justrecentlydiscovered reblogged this from athenability
    share
    « previous post next post »
    Your Ad Here

    updates

    SUPPORT

    Copy and Paste the code on your blog. Don't worry! It's background friendly.



    Ads

    Your Ad Here
    Theme 30
    Design by Athenability
    Powered by Tumblr