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??
    Help: Fixing old HTML/CSS Layout (tumblr)
    Tumblr HTML Issue / Please help!
    Tumblr "{block}s" and variables
    Tumblr template - header image automatically resizes
    [Tumblr Help] Weird space
    Facebook Actions not showing in Google Analytics on Tumblr
    Tumblr: Showing avatar of poster on multi-poster tumblr blog
    Extending foreground in TUMBLR layout and removing black box.

    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:
    css help for my website
    Theme/CSS behaves strange in Google Chrome (tumblr)
    Tumblr theme help?
    Coding Help
    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
    •