Post by Former Member on Jul 27, 2011 4:27:45 GMT -8
How can i put a navigation bar underneath the header image and have it look something like this frontarmy.com?
Currently, it looks like this i.imgur.com/wRk3f.jpg, as you can see, i have a:
-Search box
-Sumbit button link
-Ask button link
-Archive button link
-Hit Counter
-2 button for going back and forth through the pages on my tumblr.
I plan on having it like this i.imgur.com/ihIA6.jpg
What coding would i have to delete and add? Thank you guys for helping out. I really appreciate it.
Here is the HTML coding for my site:
Currently, it looks like this i.imgur.com/wRk3f.jpg, as you can see, i have a:
-Search box
-Sumbit button link
-Ask button link
-Archive button link
-Hit Counter
-2 button for going back and forth through the pages on my tumblr.
I plan on having it like this i.imgur.com/ihIA6.jpg
What coding would i have to delete and add? Thank you guys for helping out. I really appreciate it.
Here is the HTML coding for my site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" href="{RSS}"/>
{blockescription}
<meta name="description" content="{MetaDescription}" />
{/blockescription}
<title>{Title}</title>
<!-- STYLE SHEETS -->
{block:IndexPage}
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/fbpqdir/oYmlgfovo/main.css"/>
{/block:IndexPage}
{block:PermalinkPage}
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/fbpqdir/ZEplgfovb/single.css"/>
{/block:PermalinkPage}
<!-- DEFAULT COLORS -->
<meta name="color:MainText" content="#1d1d1d"/>
<meta name="color:Links" content="#25bdfc"/>
<meta name="color:Header" content="#25bdfc"/>
<meta name="color:QuoteBox" content="#25bdfc"/>
<meta name="color:QuoteText" content="#ffffff"/>
<meta name="color:ButtonText" content="#ffffff"/>
<meta name="color:ButtonHoverText" content="#676767"/>
<meta name="color:ButtonBackground" content="#25bdfc"/>
<meta name="color:ButtonHoverBackground" content="#E2E2E2"/>
<meta name="color:SubText" content="#1d1d1d"/>
<meta name="color:ParagraphText" content="#676767"/>
<meta name="color:VimeoControls" content="#25bdfc"/>
<meta name="color:SearchBox" content="#E2E2E2"/>
<meta name="color:Separator" content="#EAEAEA"/>
<!-- DEFAULT APPEARANCE -->
<meta name="if:Enable Twitter Module" content="1"/>
<meta name="if:Enable Author" content="1"/>
<meta name="if:Enable Note Count" content="1"/>
<meta name="if:Enable Tags" content="1"/>
<meta name="if:Enable Frontpage Media Text" content="1"/>
<!-- CUSTOM CSS -->
<style type="text/css">
/* Custom Color Styles */
p, .text p, .frontpost ul li, .photoset p, .photo p, .video p, .answer p, .link p, .action, .action a {
color: {color:ParagraphText};
}
a, .post-date p a, .post-date p span, .post-notes p span, .post-reblogged a, .audio-info p span {
color: {color:Links};
}
body, .module, #user p, #twitter p, #footer p, #search li a, #foot li a, .post-reblogged, .post-tags, .post-notes, .post-author, .post-meta p, .post-tags p, .post-notes p, .post-author p, .post-date p, .audio-info p {
color: {color:MainText};
}
h1, h2, h1 a, h2 a {
color: {color:Header};
}
#searchbox {
background-color: {color:SearchBox};
}
.quote-box, .answer-box, .bubble-point {
background-color: {color:QuoteBox};
}
.quote-con a, .quote-con a span.mark, .quote-con p, .answer-con a, .answer-con a span.mark, .answer-con p {
color: {color:QuoteText};
}
#previous a, #next a, #home a, #returnbutton a {
color: {color:ButtonText};
background-color: {color:ButtonBackground};
}
#previous a:hover, #next a:hover, #home a:hover, #returnbutton a:hover {
color: {color:ButtonHoverText};
background-color: {color:ButtonHoverBackground};
}
.quote-source a, ul.con li.user, .artist, .answer-source a {
color:{color:SubText};
}
.separator {
background-color:{color:Separator};
}
{CustomCSS}
</style>
<!-- JAVASCRIPT FILES -->
<script language="javascript" type="text/javascript" src="http://static.tumblr.com/fbpqdir/43slfxpq8/jquery-1.4.3.min.js"></script>
<script language="javascript" type="text/javascript" src="http://static.tumblr.com/fbpqdir/OfOlfxpr3/jquery.masonry.min.js"></script>
<script language="javascript" type="text/javascript" src="http://static.tumblr.com/fbpqdir/Sdelfxpqi/jquery.cycle.lite.min.js"></script>
<script language="javascript" type="text/javascript" src="http://static.tumblr.com/fbpqdir/BGmlgn9o8/utils.js"></script>
</head>
<body>
<div id="container">
<div id="topbox" class="grid_10">
<div id="information" class="grid_10">
<div id="user" class="module grid_2">
<div id="description">
<p>{Description}</p>
</div>
</div>
{block:IfEnableTwitterModule}
{block:Twitter}
<div id="twitter" class="module grid_2">
<div id="tweet"> <div id="twitter_update_list">
<p>Loading tweet...</p>
</div>
</div>
<script type="text/javascript" src="http://static.tumblr.com/fbpqdir/H3Blfvs1f/tweets.js"></script>
</div>
{/block:Twitter}
{/block:IfEnableTwitterModule}
<div id="meta" class="module grid_2">
<div id="search">
<form action="/search" method="get">
<input id="searchbox" type="text" name="q" value="{SearchQuery}"/>
<input id="searchbutton" type="submit" value=""/>
</form>
</div>
<ul id="menu">
{block:Pages}
<li><a href="{URL}">{Label}</a></li>
{/block:Pages}
{/block:HasPages}
{block:SubmissionsEnabled}
<li><a href="/submit">Submit</a></li>
{/block:SubmissionsEnabled}
{block:AskEnabled}
<li><a href="/ask">{AskLabel}</a></li>
{/block:AskEnabled}
</ul>
</div>
<div id="footer" class="module grid_2">
<ul id="foot">
<li><a href="/archive">Archive</a></li>
<li><a href="{RSS}">RSS</a></li>
</ul>
</div>
<div id="nav" class="module grid_2">
{block:IndexPage}
{block:Pagination}
{block:PreviousPage}<div id="next"><a href="{PreviousPage}">
<span>Newer</span></a></div>{/block:PreviousPage}
{block:NextPage}<div id="previous"><a href="{NextPage}">
<span>Older</span></a></div>{/block:NextPage}
{/block:Pagination}
{/block:IndexPage}
{block:PermalinkPage}
<div id="home"><a href="/">
<span>Home</span></a></div>
{/block:PermalinkPage}
{block:SearchPage}
<div id="home"><a href="/">
<span>Home</span></a></div>
{/block:SearchPage}
</div>
</div>
</div>
<div id="bottombox" class="grid_10">
<div id="preloader">
<img src="http://static.tumblr.com/fbpqdir/A0qlf59bv/loader.gif"width="16" height="16" alt="Loader"/>
</div>
{block:IndexPage}
<div id="posts">
{block:Posts}
{block:Text}
<div id="post_{PostID}" class="text frontpost grid_2">
{block:Title}
<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
{Body}
{block:More} {/block:More}
<div class="separator"></div>
</div>
{/block:Text}
{block:Photo}
<div id="post_{PostID}" class="photo frontpost grid_2">
<a href="{Permalink}"><img src="{PhotoURL-250}" width="auto" height="auto" alt="{PhotoAlt}"/></a>
{block:IfEnableFrontpageMediaText}
{block:Caption}
<p class="front-content">
{Caption}
</p>
{/block:Caption}
{block:More} {/block:More}
{/block:IfEnableFrontpageMediaText}
<div class="separator"></div>
</div>
{/block:Photo}
{block:Photoset}
<div id="post_{PostID}" class="photoset frontpost grid_2">
<div class="html_photoset">
<div class="slide"><a href="{Permalink}"></a></div>
<span class="element" data-name="embed" data-value="{URLEncodedPhotoset-250}" data-unescape="1"></span>
</div>
<div class="remove" style="width:0px; height:0px; display:none;">{Photoset-250}</div>
{block:IfEnableFrontpageMediaText}
<div class="photoset-caption">
{block:Caption}
{Caption}
{/block:Caption}
{block:More} {/block:More}
</div>
{/block:IfEnableFrontpageMediaText}
<div class="separator"></div>
</div>
{/block:Photoset}
{block:Video}
<div id="post_{PostID}" class="video frontpost grid_4">
<div class="video-con">
{Video-500}
<span class="vimeocolor" data-value="{color:VimeoControls}" ></span>
</div>
{block:IfEnableFrontpageMediaText}
{block:Caption}
{Caption}
{/block:Caption}
{block:More} {/block:More}
{/block:IfEnableFrontpageMediaText}
<div class="separator"></div>
</div>
{/block:Video}
{block:Chat}
<div id="post_{PostID}" class="chat frontpost grid_2">
{block:Title}
<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
<ul class="con">
{block:Lines}
{block:Label}
<li class="user">— {Label}</li>
{/block:Label}
<li class="line">{Line}</li>
{/block:Lines}
</ul>
{block:Caption}
<p class="front-content">
{Caption}
</p>
{/block:Caption}
{block:More} {/block:More}
<div class="separator"></div>
</div>
{/block:Chat}
{block:Link}
<div id="post_{PostID}" class="link frontpost grid_2">
<h1><a href="{URL}" class="link" {Target}>{Name}</a></h1>
{blockescription}
{Description}
{/blockescription}
{block:More} {/block:More}
<div class="separator"></div>
</div>
{/block:Link}
{block:Quote}
<div id="post_{PostID}" class="quote frontpost grid_2">
<div class="quote-box">
<div class="quote-con">
<a href="{Permalink}">{Quote}</a>
</div>
</div>
<div class="bubble-point"><img src="http://static.tumblr.com/fbpqdir/Y4flf32z6/bubble_point2.png" width="181"
height="26" alt="quote mask"/></div>
{block:Source}
<div class="quote-source"><a href="{Permalink}">— {Source}</a></div>
{/block:Source}
<div class="separator"></div>
</div>
{/block:Quote}
{block:Answer}
<div id="post_{PostID}" class="answer frontpost grid_2">
<div class="answer-box">
<div class="answer-con">
<a href="{Permalink}">{Question}</a>
</div>
</div>
<div class="bubble-point"><img src="http://static.tumblr.com/fbpqdir/Y4flf32z6/bubble_point2.png" width="181"
height="26" alt="answer mask"/></div>
<div class="answer-source"><a href="{Permalink}">— {Asker}</a></div>
{Answer}
{block:More} {/block:More}
<div class="separator"></div>
</div>
{/block:Answer}
{block:Audio}
<div id="post_{PostID}" class="audio frontpost grid_2">
<div class="album-art">
{block:AlbumArt}<img src="{AlbumArtURL}" alt="album art"/>{/block:AlbumArt}
<div class="audioplayercircle">
<div class="audioplayer">
{AudioPlayerBlack}
</div>
</div>
</div>
{block:IfEnableFrontpageMediaText}
{block:TrackName}
<h1><a href="{Permalink}">{TrackName}</a></h1>
{/block:TrackName}
{block:Artist}
<div class="artist">— {Artist}</div>
{/block:Artist}
{block:Caption}
{Caption}
{/block:Caption}
{block:More} {/block:More}
{/block:IfEnableFrontpageMediaText}
<div class="separator"></div>
</div>
{/block:Audio}
{/block:Posts}
</div>
<div id="returnbutton"><a href="{PreviousPage}"><span>Return</span></a></div>
{/block:IndexPage}
{block:PermalinkPage}
<div id="post">
{block:Posts}
{block:Text}
<div id="post_{PostID}" class="text post grid_6">
{/block:Text}
{block:Photo}
<div id="post_{PostID}" class="photo post grid_6">
{/block:Photo}
{block:Photoset}
<div id="post_{PostID}" class="photoset post grid_6">
{/block:Photoset}
{block:Video}
<div id="post_{PostID}" class="video post grid_6">
{/block:Video}
{block:Chat}
<div id="post_{PostID}" class="chat post grid_6">
{/block:Chat}
{block:Link}
<div id="post_{PostID}" class="link post grid_6">
{/block:Link}
{block:Quote}
<div id="post_{PostID}" class="quote post grid_6">
{/block:Quote}
{block:Answer}
<div id="post_{PostID}" class="answer post grid_6">
{/block:Answer}
{block:Audio}
<div id="post_{PostID}" class="audio post grid_6">
{/block:Audio}
<div class="post-meta grid_2">
{blockate}
<div class="post-date">
<p>Posted on</p>
<p><span>{DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix} {Year}</span></p>
</div>
{block:IfEnableTags}
{block:HasTags}
<div class="post-tags">
<p>Tagged as:</p>
<p>{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</p>
</div>
{/block:HasTags}
{/block:IfEnableTags}
{block:IfEnableNoteCount}
{block:NoteCount}
<div class="post-notes">
<p>This post has<p>
<p><span>{NoteCountWithLabel}</span></p>
</div>
{/block:NoteCount}
{/block:IfEnableNoteCount}
{block:IfEnableAuthor}
{block:GroupMembers}
<div class="post-author">
{block:Text}<p>Posted by<p>{/block:Text}
{block:Photo}<p>Posted by<p>{/block:Photo}
{block:Photoset}<p>Posted by<p>{/block:Photoset}
{block:Link}<p>Posted by<p>{/block:Link}
{block:Quote}<p>Posted by<p>{/block:Quote}
{block:Chat}<p>Posted by<p>{/block:Chat}
{block:Video}<p>Posted by<p>{/block:Video}
{block:Audio}<p>Posted by<p>{/block:Audio}
{block:Answer}<p>Answered by<p>{/block:Answer}
<p><a href="{PostAuthorURL}">{PostAuthorName}</a></p>
</div>
{/block:GroupMembers}
{/block:IfEnableAuthor}
{/blockate}
{block:RebloggedFrom}
<div class="post-reblogged">Reblogged via <br/><a href="{ReblogParentURL}">{ReblogParentName}</a></div>
{/block:RebloggedFrom}
</div>
<div class="post-content grid_4">
{block:Text}
{block:Title}
<h1>{Title}</h1>
{/block:Title}
{Body}
{/block:Text}
{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-400}" width="auto" height="auto" alt="{PhotoAlt}"/></a>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photo}
Last edited by sinditdomo; 07-27-2011 at 07:40 AM.. Reason: added HTML coding
sinditdomo is online now Add to sinditdomo's Reputation Report Post Edit/Delete Message Reply With Quote Multi-Quote This Message Quick reply to this message
Old 07-27-2011, 07:41 AM PM User | Report this post #6
sinditdomo
New to the CF scene
Join Date: Jul 2011
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
sinditdomo is an unknown quantity at this point
{block:Photoset}
<div class="html_photoset">
<div class="slide"><a></a></div>
<span class="element" data-name="embed" data-value="{URLEncodedPhotoset-400}" data-unescape="1"></span>
</div>
<div class="photoset-caption">
{block:Caption}
{Caption}
{/block:Caption}
</div>
{/block:Photoset}
{block:Video}
<div class="video-con">
{Video-500}
<span class="vimeocolor" data-value="{color:VimeoControls}" ></span>
</div>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Video}
{block:Chat}
{block:Title}
<h1>{Title}</h1>
{/block:Title}
<ul class="con">
{block:Lines}
{block:Label}
<li class="user">— {Label}</li>
{/block:Label}
<li class="line">{Line}</li>
{/block:Lines}
</ul>
{block:Caption}
<p class="front-content">
{Caption}
</p>
{/block:Caption}
{/block:Chat}
{block:Link}
<h1><a href="{URL}" class="link" {Target}>{Name}</a></h1>
{blockescription}
{Description}
{/blockescription}
{/block:Link}
{block:Quote}
<div class="quote-box">
<div class="quote-con">
<a href="{Permalink}">{Quote}</a>
</div>
</div>
<div class="bubble-point"><img src="http://static.tumblr.com/fbpqdir/kNAlflwil/bubble_point_large.png" width="385"
height="19" alt="quote mask"/></div>
{block:Source}
<div class="quote-source">— {Source}</div>
{/block:Source}
{/block:Quote}
{block:Answer}
<div class="answer-box">
<div class="answer-con">
<a href="{Permalink}">{Question}</a>
</div>
</div>
<div class="bubble-point"><img src="http://static.tumblr.com/fbpqdir/kNAlflwil/bubble_point_large.png" width="385"
height="19" alt="answer mask"/></div>
<div class="answer-source"><a href="{Permalink}">— {Asker}</a></div>
<p class="front-content">
{Answer}
</p>
{/block:Answer}
{block:Audio}
<div id="audio-con">
<div class="album-art">
{block:AlbumArt}
<img src="{AlbumArtURL}" alt="album art"/>
{/block:AlbumArt}
<div class="audioplayercircle">
<div class="audioplayer">
{AudioPlayerBlack}
</div>
</div>
</div>
<div class="audio-info">
{block:TrackName}
<p>Title:</p>
<p><span>{TrackName}</span></p>
{/block:TrackName}
{block:Artist}
<p>Artist:</p>
<p><span>{Artist}</span></p>
{/block:Artist}
{block:Album}
<p>Album:</p>
<p><span>{Album}</span></p>
{/block:Album}
</div>
</div>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Audio}
<div class="separator"></div>
{block:PostNotes}
<div id="notes">
{PostNotes}
</div>
{/block:PostNotes}
</div>
</div>
{/block:Posts}
</div>
{/block:PermalinkPage}
</div>
</div>
</div>
{block:Twitter}
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/{TwitterUsername}.json?callback=twitterCallback2&count=1"></script>
{/block:Twitter}
</body>
</html>