Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 09-22-2012, 04:04 AM   PM User | #1
dancelikeheya
New to the CF scene

 
Join Date: Sep 2012
Location: Canada
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
dancelikeheya is an unknown quantity at this point
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>
dancelikeheya is offline   Reply With Quote
Old 09-22-2012, 06:41 AM   PM User | #2
Sammy12
Registered User

 
Join Date: Jun 2011
Posts: 1,063
Thanks: 12
Thanked 241 Times in 240 Posts
Sammy12 is on a distinguished road
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:

Quote:
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
Sammy12 is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 09:08 AM.


Advertisement
Log in to turn off these ads.