You are not logged in.
- Topics: Active | Unanswered
#1 2009-01-12 07:01:37
- u_no_hu
- Member
- Registered: 2008-06-15
- Posts: 453
Need help with HTML/CSS for Archnews(Unofficial)
I am searching for a grid based layout [More news,less scrolling] theme for Archnews. http://boxfactory.tumblr.com/ looks pretty good but the color scheme needs to be changed to Arch scheme. And if its possible to move that header to the top that would be great. My HTML/CSS sucks and my color sense sucks more..
So if anybody with good web dev skill has got some time to spare, it would be great.
Thanks in advance .
<html>
<head>
<title>{Title}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="/rss">
<style type="text/css">
/* General */
* {margin:0;padding:0;}
body {background-color:#fff;}
body, td, h1, h2, h3, h4, h5, h6 {font-size:11px;font-weight:normal;line-height:16px;font-family:'Lucida Grande',Verdana,Helvetica,Arial,sans-serif;color:#333;}
a {text-decoration:none;color:#333;border-bottom:1px dotted #333;}
a img {border:0 !important;}
#container {width:930px;margin:0 auto;}
/* Header box */
#header {background-color:#333;background-image:url(http://hr1v.com/remote/box-factory/title-bg.gif);background-repeat:repeat-y;color:#999;width:245px;height:230px;padding:10px;padding-right:25px;}
#header h1 {text-transform:uppercase;letter-spacing:.2em;font-size:120%;font-weight:bold;margin-bottom:.5em;}
#header h1 a {border:0;}
#header a {color:#fff;border:0;}
#header ul {list-style:none !important;margin:0 !important;}
#header ul#links {text-align:right;padding-bottom:.5em;border-bottom:1px solid #999;}
#header ul#links a {border:0;}
#header ul#links li {display:inline;margin-left:.5em;}
#description {margin-top:.5em;}
/* Filter title (tag page, date page) */
#filter-title {font-size:200%;background-color:#ccc;padding-right:0;margin-right:30px;}
#filter-title a {border:0;}
#filter-title .post {line-height:250px;text-align:center;}
#filter-title .prev-day, #filter-title .next-day {position:absolute;text-align:center;display:block;height:1em;line-height:1em;width:265px;}
#filter-title .prev-day {top:80px;padding-right:.6em;}
#filter-title .next-day {bottom:80px;padding-left:.6em;}
/* Posts */
#posts {margin:20px 0;}
.post-container {width:265px;height:250px;float:left;margin:15px;overflow:hidden;overflow-y:auto;padding-right:15px;}
.post {position:relative;}
.post p {margin:.5em 0 1em 0;}
.post blockquote {margin-left:2em;}
.post ol, .post ul {margin-left:2em;margin-bottom:1em;}
/* Post meta */
.post-meta ul.tags li:after, .post-meta-off ul.tags li:after {content:", ";}
.post-meta ul.tags li:last-child:after, .post-meta-off ul.tags li:last-child:after {content:"";}
.post-meta, .post-meta-off {margin-top:.5em;color:#999;padding-right:15px;border-top:1px solid #ccc;}
.post-meta ul, .post-meta-off ul {display:inline;}
.post-meta ul.tags li, .post-meta-off ul.tags li {display:inline;}
.post-meta a, .post-meta-off a {border:0;}
.post-meta-off {color:#fff !important;border-color:#fff !important;}
.post-meta-off a {color:#fff !important;}
/* Chat post */
.chat table.chat-table {width:100%;line-height:18px;}
.chat table.chat-table td {padding:3px 6px;vertical-align:top;}
.chat table.chat-table td.chat-label {text-align:right;font-weight:bold;padding-right:10px;padding-left:10px;text-transform:uppercase;letter-spacing:1px;}
.chat table.chat-table td.chat-line {text-align:left;}
/* Text post */
.text h3 {margin-bottom:16px;}
.text h3 a {font-size:22px;line-height:32px;}
/* Link post */
.link h3 {margin-bottom:16px;}
.link h3 a.link {font-size:22px;line-height:32px;}
/* Quote post */
.quote h4 {line-height:1.2;margin-bottom:.5em;}
.quote h4.short {font-size:2.8em;}
.quote h4.medium {font-size:1.8em;}
.quote h4.long {font-size:1.4em;}
/* Photo post */
.photo .caption {margin-top:1em;}
.photo img.photo-500 {display:none;}
.photo div.the-photo a {border:0;padding:0;}
.photo .the-image a {border:0;}
/* Video post */
.video .video-500 {display:none;}
/* Pagination */
#pagination {background-color:#fff;font-size:300%;line-height:2em;text-align:center;}
#pagination a {color:#333;padding:0 1em;border:0;}
/* Footer */
div#footer {color:#999;clear:both;width:100%;line-height:2.5;background-color:#333;text-align:center;}
div#footer a {color:#fff;}
/* Permalink page */
{block:PermalinkPage}
/* Pagination */
#pagination {width:500px;margin-right:105px;float:right;}
/* Post meta */
.post-meta, .post-meta-off {margin-top:2em !important;}
.post-meta-off {color:#999 !important;border-top:1px solid #ccc !important;}
.post-meta-off a {color:#333 !important;}
.post-meta span.year {display:inline !important;}
.post-container {width:500px;height:auto;}
.permalink {display:none !important;}
/* Header box */
#header {height:auto !important;}
/* Photo post */
.photo-250 {display:none;}
.photo-500 {display:block !important;}
/* Video post */
.video-250 {display:none;}
.video-500 {display:block !important;}
/* Quote post */
.quote h4.short {font-size:5em;}
.quote h4.medium {font-size:4em;}
.quote h4.long {font-size:3em;}
{/block:PermalinkPage}
/* End permalink page */
</style>
<script type="text/javascript">
function showMeta (postID) {
document.getElementById(postID).className = 'post-meta';
}
function hideMeta (postID) {
document.getElementById(postID).className = 'post-meta-off';
}
</script>
</head>
<body>
<div id="container">
<div id="posts">
<!-- Header box -->
<div id="header" class="post-container">
<div class="post">
<h1><a href="/" title="Home">{Title}</a></h1>
<ul id="links">
<li>/<a href="http://feeds.feedburner.com/arch_news">rss</a></li>
<li>/<a href="/mobile">mobile</a></li>
<li>/<a href="/archive">archive</a></li>
<li>/<a href="/random">random</a></li>
</ul>
<div id="description">
{block:Description}{Description}{/block:Description}
</div>
</div>
</div>
<!-- Tag page -->
{block:TagPage}
<div id="filter-title" class='post-container'>
<div class='post'>
<strong>{Tag}:</strong>
</div>
</div>
{/block:TagPage}
<!-- Day page -->
{block:DayPage}
<div id="filter-title" class='post-container'>
<div class='post'>
{block:DayPagination}
{block:PreviousDayPage}
<div class="prev-day">
<a href="{PreviousDayPage}" title="Previous Day">
« prev
</a>
</div>
{/block:PreviousDayPage}
{block:NextDayPage}
<div class="next-day">
<a href="{NextDayPage}" title="Next Day">
next »
</a>
</div>
{/block:NextDayPage}
{/block:DayPagination}
<strong>{Month} {DayOfMonth}, {ShortYear}</strong>
</div>
</div>
<style type="text/css">li.post-date {display:none !important;}</style>
{/block:DayPage}
{block:Posts}
<div class="post-container" onmouseover="showMeta('{PostID}')" onmouseout="hideMeta('{PostID}')">
{block:Text}
<div class="post text {TagsAsClasses}">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
</div>
{/block:Text}
{block:Photo}
<div class="post photo {TagsAsClasses}">
<div class="the-image">{LinkOpenTag}<img src="{PhotoURL-250}" alt="{PhotoAlt}" class="photo-250" /><img src="{PhotoURL-500}" alt="{PhotoAlt}" class="photo-500" />{LinkCloseTag}</div>
{block:Caption}
<div class="caption">
{Caption}
</div>
{/block:Caption}
</div>
{/block:Photo}
{block:Quote}
<div class="post quote">
<h4 class="{Length}">"{Quote}"</h3>
{block:Source}
<div class="source">—{Source}</div>
{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="post link {TagsAsClasses}">
<h3><a href="{URL}" class="link" {Target}>{Name} »</a></h3>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="post chat {TagsAsClasses}">
{block:Title}
<h2><a href="{Permalink}">{Title}</a></h2>
{/block:Title}
<div class="the-chat">
<table class="chat-table" cellspacing="0" cellpadding="0">
{block:Lines}
<tr>
<td class="label {Alt} user_{UserNumber} chat-label">
{block:Label}{Label}{/block:Label}
</td>
<td class="chat-line user_{UserNumber}">{Line}</td>
</tr>
{/block:Lines}
</table>
</div>
</div>
{/block:Chat}
{block:Video}
<div class="post video {TagsAsClasses}">
<div class="the-video video-250">
{Video-250}
</div>
<div class="the-video video-500">
{Video-500}
</div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}
{block:Audio}
<div class="post audio">
<div class="audio-player">{AudioPlayerWhite}</div>
{block:Caption}
<div class="caption">
{Caption}
</div>
<div>Play count: {FormattedPlayCount}</div>
{/block:Caption}
</div>
{/block:Audio}
<div class="post-meta-off" id="{PostID}">
<ul class="meta-list">
<li class="permalink">
<!-- If you're using comments, you can replace the following line
with the comment count (e.g. "3 comments") code -->
∞ <a href="{Permalink}">permalink</a>
</li>
<li class="post-date">posted <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/" class="date">{DayOfMonth} {ShortMonth}<span class="year"> {Year}</span></a></li>
{block:HasTags}
<li>tags:
<ul class="tags">
{block:Tags}
<li><a href="{TagURL}">{Tag}</a></li>
{/block:Tags}
</ul>
</li>
{/block:HasTags}
{block:RebloggedFrom}
<li>via <a href="{ReblogParentURL}">{ReblogParentName}</a></li>
{/block:RebloggedFrom}
</ul>
</div>
</div>
{/block:Posts}
<!-- Permalink page comment code starts here -->
<!-- Permalink page comment code ends here -->
<br style="clear:both;" />
{block:Pagination}
<div id="pagination">
{block:PreviousPage}
<a href="{PreviousPage}" class="prev-link" title="Previous Page">«</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}" class="next-link" title="Next Page">»</a>
{/block:NextPage}
<br style="clear:both;" />
</div>
{/block:Pagination}
{block:PermalinkPagination}
<div id="pagination">
{block:PreviousPost}
<a href="{PreviousPost}" class="prev-link" title="Previous Post">«</a>
{/block:PreviousPost}
{block:NextPost}
<a href="{NextPost}" class="next-link" title="Next Post">»</a>
{/block:NextPost}
<br style="clear:both;" />
</div>
{/block:PermalinkPagination}
</div>
</div>
<div id="footer">
Powered by <a href="http://tumblr.com/">Tumblr</a> | <a href="http://boxfactory.tumblr.com/">Theme</a> by <a href="http://heather-rivers.com/">Heather Rivers</a>
</div>
</body>
</html>Offline
#2 2009-01-12 07:06:15
- Ghost1227
- Forum Fellow
- From: Omaha, NE, USA
- Registered: 2008-04-21
- Posts: 1,422
- Website
Re: Need help with HTML/CSS for Archnews(Unofficial)
Way too many scrollboxes in boxfactory... I'd say your current design would be good if you widened the column a little, changed the color scheme to match ours a bit and maybe added a calendar or some such to make finding old articles easier.
Offline