Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Canada
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with CSS/HTML for tumblr theme (Nav Links)

    So, for this one, I would like someone who know's how to make tumblr themes, but this isn't needed. I'm trying to make one with links off to the side like this one (like the home, message and credit and links next to the sidebar). But I don't know how. Help would be nice! THANKS!

    This is my theme so far [here]

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    
    <!--"I'm Yours, Proudly So" Theme Made by dancelikeheya.tumblr.com and base theme made from http://themesbyeris.tumblr.com/. DO NOT REDISTRIBUTE!--->
    
    <meta name="color:Background" content="">
    <meta name="color:text" content="">
    <meta name="color:Sidebar Title" content="">
    <meta name="color:Title Hover" content="">
    <meta name="color:sidebarbackground" content="#F5EBCC">
    <meta name="color:Primary Color" content="">
    <meta name="color:Title Hover" content="">
    <meta name="color:Links" content="">
    <meta name="color:links hover" content="">
    <meta name="color:linkbg" contents"">
    
    
    <meta name="image:Sidebar" content="" />
    
    <meta name="text:link1 url" content=""/>
    <meta name="text:link1 title" content="link 1" />
    <meta name="text:link2 url" content=""/>
    <meta name="text:link2 title" content="link 2" />
    <meta name="text:link3 url" content=""/>
    <meta name="text:link3 title" content="link 3" />
    <meta name="text:link4 url" content=""/>
    <meta name="text:link4 title" content="link 4" />
    
    <title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
    {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
    <link rel="shortcut icon" href="{Favicon}" />
     
    <style type="text/css">
    
    body {
        background-color:{color:background};
        font-family: arial;
        margin: 0;
    }
        
    #sidebar {
        background-color:{color:sidebarbackground};
        Width:255px;
        Height:1000px;
        Position: fixed;
        top:0px;
        left:100px;
    }
    
    img {
        border: none;
    }
    
    #sidebar img {
        height: auto;
        width: 254px;
        margin-left:0px;
        margin-top:-5px;
    }
        
    
    #sidebartitle {
        Color:{color:Sidebar Title};
        font-size:15px;
        text-align:center;
        padding:0px;
        Font-family:georgia;
        line-height:6px;
        Margin-left:-15px;
        margin-bottom:-8px;
        text-transform:uppercase;
    }
    
    #sidebartitle a {
        color:{color:Sidebar Title};
        text-decoration: none;
    }
    
    #sidebartitle a:hover {
        color:{color:Title Hover};
        font-style:italic;
    }
    
    #description {
        Margin-top:10px;
        Margin-bottom:10px;
    	font-size: 12px;
    	text-align: center;
    	padding:0px;
    	line-height:100%;
        font-family:arial;
        border:1px;
        width: 251px;
    }
    
    #sidebarlinksmain {
        color:{color:Links};
        font-size: 12px;
        text-align: center;
        font-family: Times New Roman;
        margin-bottom: -8px;
        text-transform: uppercase;
    }
    
    #sidebarlinksmain a {
        text-decoration:none;
        Color:{color:links};
    }
    
    #sidebarlinksmain a:hover {
        color:{color:links hover};
        font-style:italic;
    }
    
    #pagination {
        font-family:arial;
        font-size:12px;
        text-align:center;
        background-color:transparent;
    }
    
    #content {
        background-color: transparent;
        margin: 20px 2px 50px 400px;
        padding: 20px 0;  
    }
    
    #content blockquote {
        border-left: solid 2px black;
        margin: 0;
        padding-left: 10px;
    }
    
    #content a {
        color: {color:Primary Colour};
        text-decoration: none;
    }
    
    img {
        border: 2px;
        max-width: 100%;
    }
    
    #content #posts {
        background-color:#FDFBF5;
        width: 500px;
        margin:0px auto 10px;
        margin-left:-30px;
        padding:10px;
    }
    
    #content #posts .title {
        font-size: 22px;
    }
    
    #content #posts .text {
        color:{color:text};
        font-size:11px;
    }
    
    #content #posts #permalink {
        font-size:9px;
        margin-top:10px;
        color:black;
    }
     
    #content #posts #tags {
        font-size:9px;
    }
     
    #content #posts #tags .comma:last-child {
        display: none;
    }
     
    #content #notecontainer {
        margin: 20px auto;
        width: 500px;
        font-size: 11px;
    }
    
    #content a {
        color: black;
    }
     
    #content #notecontainer ol.notes {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
     
    #content #notecontainer img.avatar {
        margin-right: 10px;
        width: 16px;
        height: 16px;
    }
    
    #permalinks {
        font-size: 10px;
        margin-top: 10px;
        color:#000000;
    }
    
    #tags {
        font-size:9px;
    }
     
    #tags .comma:last-child {
        display: none;
    }
    
    #pagination {
        font-size:12px;
        color: black;
    }
    
    #question {
        font-size:15px;
        color:#000000;
    }
        
        {CustomCSS}  
    </style>
    </head>
    <body>
    
    <div id="sidebar">
    <p align="center">
    <div id="sidebartitle"><a href="/"/a>{Title}</div>
    
    <div id="sidebarlinksmain">
    <p align="center">
    <a href="/">home</a> &nbsp;
    <a href="/ask">message</a> &nbsp;
    <a href="http://dancelikeheya.tumblr.com">credit</a> &nbsp;
    </div>
    
    <div id "sidebarimg">
    <img src="{image:sidebar}"/></div>
    
    <div id ="links">
    <a href="{text:link1 url}">{text:link1 title}</a> &nbsp;
    <br>
    <a href="{text:link2 url}">{text:link2 title}</a> &nbsp; 
    <br>
    <a href="{text:link3 url}">{text:link3 title}</a> &nbsp;
    </div>
    
    <div id="description">
    {block:Description}{Description}{/block:Description}
    
    </div>
    
    <div id="pagination">
    {block:PreviousPage}<a href="{PreviousPage}">←</a>{/block:PreviousPage} {CurrentPage} / {TotalPages} {block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}</div>
    </div>
    
    <div id="content">
    {block:Posts}
    <div id="posts">
     
    {block:Photo}
    {LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
    {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
    {/block:Photo}
     
    {block:Photoset}
    {Photoset-500}
    {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
    {/block:Photoset}
     
    {block:Video}
    {Video-500}
    {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
    {/block:Video}
     
    {block:Audio}
    {AudioPlayerBlack}
    <div class="text">~ {PlayCountWithLabel}</div>
    {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
    {/block:Audio}
     
    {block:Quote}
    <div class="title">“{Quote}”</div>
    {block:Source}<div class="text"><br>~ {Source}</div>{/block:Source}
    {/block:Quote}
     
    {block:Text}
    {block:Title}<div class="title">{Title}</div>{/block:Title}
    <div class="text">{Body}</div>
    {/block:Text}
     
    {block:Answer}
    <div class="question">{Question}</div>
    <div class="text">~ {Asker}</div>
    <div class="text">{Answer}</div>
    {/block:Answer}
     
    {block:Chat}
    {block:Title}<div class="title">{Title}</div>{/block:Title}
    <div class="text">
    {block:Lines}
    {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
    {/block:Lines}
    </div>
    {/block:Chat}
     
    {block:Link}
    <div class="title"><a href="{URL}">{Name}</a></div>
    {block:Description}
    <div class="text">{Description}</div>
    {/block:Description}
    {/block:Link}
    
    <div id="permalinks">
    <a href="{Permalink}">
    {block:Date}{lang:Posted TimeAgo}{/block:Date}
    {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}
    </a>
    </div>
    
    <div id="tags">{block:HasTags}Tagged:
    {block:Tags}#<a href="{TagURL}">{Tag}</a><span class="comma">, </span>{/block:Tags}
    
    </div>
    {/block:HasTags}
     
    </div> 
    {/block:Posts}
    </div> 
     
    </body>
    </html>

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by dancelikeheya View Post
    So, for this one, I would like someone who know's how to make tumblr themes, but this isn't needed.
    No one here has made a tumblr theme or has a tumblr. Everyone here spends their time programming, not re-blogging gifs of kittens, provocative pictures of the opposite gender (hoping their crush will get jealous), justin bieber, or quotes by kid cudi (he's so deep and profound)... kittens are adorable though.

    I don't know anyone who pursued a programming career to make tumblr themes.
    I also haven't seen anyone answer a tumblr question on this forum other than myself, probably because the question always looks like this:

    Hiii,

    I dont kno where to post this, but I am trying to make my blue box thingy on the right to stay the same place when you scroll down. I don't know how to code, but could you code it for me?

    THANKS!!1

    P.S. Can you add music player 2??
    http://www.codingforums.com/showthread.php?t=271671
    http://www.codingforums.com/showthread.php?t=248654
    http://www.codingforums.com/showthread.php?t=241073
    http://www.codingforums.com/showthread.php?t=269883
    http://www.codingforums.com/showthread.php?t=266770
    http://www.codingforums.com/showthread.php?t=268837
    http://www.codingforums.com/showthread.php?t=262081
    http://www.codingforums.com/showthread.php?t=270399

    If you're using Chrome, you can right click the page, "inspect element" and see how they made it. You can right click something in inspect element and click "copy HTML." You can even click ctrl + s to download the entire website.



    ^ That is how we all learned. If you show some effort in making it yourself and run into a problem, we will be more than happy to answer it

    And here is my experiences with tumblr posters:
    http://www.codingforums.com/showthread.php?t=234297
    http://www.codingforums.com/showthread.php?t=234255
    http://www.codingforums.com/showthread.php?t=234812
    http://www.codingforums.com/showthread.php?t=254005
    Last edited by Sammy12; 09-22-2012 at 07:34 AM. Reason: MOAR LINKS MOAR LINKS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •