Forum    Members    Search    FAQ

Board index » Your Things » Multimedia




Post new topic  Reply to topic  [ 3 posts ] 
 
Author Message
 Post subject: Tumblr Theme help?
 Post Posted: Thu Sep 28, 2017 4:24 pm 
User avatar
This user is a Tool! Pin-up Calendar and New Art Team Supporter This user has been published! Here for the 10th Anniversary Has collected at least one unit Erfworld Bicycle® Playing Cards supporter This user got funny with a rodent Armored Dwagon Monthly Winner
Offline
Joined: Sun Feb 10, 2013 2:59 pm
Posts: 192
Website: http://jadesage.tumblr.com/
Location: Behind you!
Hello all, I don't know if this is the right place for it, but I have a Tumblr theme that I'm working on. It's been such a long time since I've done html that I don't know how to fix my problem. Basically I want my sidebar that I use for navigation to scroll up and down, but to have the white background of the sidebar to continue down the page.

My Tumblr: http://jadesage.tumblr.com/

Code:
Code:
<!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" xml:lang="en" lang="en">
<head>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}

<!--
BASE HTML/CSS/TUMBLR CODE BY EXCOLO [ excolo.tumblr.com ]
-->

<style type="text/css">
body {
font-family:Lucida Sans Unicode, Lucida Grande, Arial, sans serif;
font-size:12px;
color:#3a853d;
height:100%;
margin:0px;
padding:0px;
background:#3a853d;
}

a {
color:#3a853d;
text-decoration:none;
}

a:hover {
color:#72cd76;
}

hr {
  border: 0;
  border-top: 1px dashed #3a853d;
}

#container {
width:890px;
margin:20px 0px 20px 100px;
}

#sidebar {

width:250px;
height:100%;
position: fixed;
top:0px;
bottom:0px;
left: 50px;
background:#FFFFFF;
padding:10px;
}

#sidebar h1 {
text-align: center;
font-size:20px;
margin:0px 0px;
}

.description {

}

.links {

}

#content {
width:550px;
float:right;
}

.post {
background:#FFFFFF;
padding:10px;
margin:0px 0px 20px 0px;
border-radius: 10px;

}

.post .tags {
text-align:left;
}

.post .meta {
text-align:right;
}

#postnotes {
   
}

{CustomCSS}
</style>


</head>

<body>
<div id="container">

<div id="sidebar">
<a href="http://thejadedsage.tumblr.com/"><img src="https://images.imgbox.com/77/0c/LGXANLeA_o.png"></a>
<h1>{Title}</h1>
<hr>

{block:Description}
<div class="description">
{Description}
</div>
<p>
{/block:Description}



<div class="pagnition">
{block:PreviousPage}<a href="{PreviousPage}">&#171; Previous</a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}">Next &#187;</a>{/block:NextPage}
</div>
</div>

<div id="content">
{block:Posts}
<div class="post">
{block:Text}
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}

{Body}         
{/block:Text}

{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}

{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:Photo}

{block:Photoset}
{Photoset-500}

{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:Photoset}

{block:Quote}
"{Quote}"

{block:Source}
<div class="source">{Source}</div>
{/block:Source}
{/block:Quote}

{block:Link}
<a href="{URL}" class="link" {Target}>{Name}</a>

{block:Description}
<div class="description">{Description}</div>
{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}

<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}

{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}

{block:Video}
{Video-500}

{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:Video}

{block:Audio}
{AudioPlayerBlack}

{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:Audio}

<div class="tags">
<hr>
 {block:HasTags}
 {block:Tags}<a href="{TagURL}"> {Tag} </a>
{/block:Tags}
 {/block:HasTags}
<p>
</div>


<div class="meta">
{block:Date}
{DayOfWeek}, {Month} {DayOfMonth}, {Year}
{/block:Date}

{block:NoteCount}<a href="{Permalink}#postnotes"> {NoteCountWithLabel}</a>{/block:NoteCount}
</div>

{block:PermalinkPage}
{block:PostNotes}
<div id="postnotes">
{PostNotes}
</div>
{/block:PostNotes}
{/block:PermalinkPage}
</div>

 
{/block:Posts}
</div>

</div>
</body>
</html>


If anyone with a fresh memory of html knows how to fix it, I'd appreciate it :D

_________________
Master Class Lurkamancer!


Feel free to browse my Erfworld Fan Art!
Adventures in WonderErf Part 1 Part 2 | Velveteen Bunny | Fan Comic
Titanic Tools (NSFW): Ansom

  • Tip this post

    Make Anonymous
  • Top 
       
     Post subject: Re: Tumblr Theme help?
     Post Posted: Sat Nov 11, 2017 3:19 pm 
    User avatar
    This user is a Tool! This user was a Tool before it was cool This user has been published! Pin-up Calendar and New Art Team Supporter Armored Dwagon Monthly Winner Has collected at least one unit Here for the 10th Anniversary Shiny Red Star Erfworld Bicycle® Playing Cards supporter
    Offline
    Joined: Wed Dec 15, 2010 6:48 am
    Posts: 572
    Add this to #sidebar selector:

    #sidebar

    overflow:scroll;

    So it looks like this:

    Code:
    #sidebar {
        width: 250px;
        height: 100%;
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 50px;
        background: #FFFFFF;
        padding: 10px;
        overflow: scroll;
    }


    Either that or make picture smaller/use smaller picture so you do not need scroller, because the current one is 500px tall and pushes the text down. If you wrap it in a div, you could change the size of your image in css.

    As if for #content tag, I advise you use floating:left and margin-left:500px, but thats just one man's opinion.

    _________________
    Don't click on this link, you might feel cheated if you do.
    Hint:
    Spoiler: show
    It's my fanfiction. :)


    My erf PC game (first test version): Jack Attack Give it a go.

  • Tip this post

    Make Anonymous
  • Top 
       
     Post subject: Re: Tumblr Theme help?
     Post Posted: Thu Nov 16, 2017 12:11 am 
    User avatar
    This user is a Tool! Pin-up Calendar and New Art Team Supporter This user has been published! Here for the 10th Anniversary Has collected at least one unit Erfworld Bicycle® Playing Cards supporter This user got funny with a rodent Armored Dwagon Monthly Winner
    Offline
    Joined: Sun Feb 10, 2013 2:59 pm
    Posts: 192
    Website: http://jadesage.tumblr.com/
    Location: Behind you!
    Thank you so much for your help! I was wondering though, is there a way to have the navigation be visible as you scroll down the page? Like before, the navigation content was fixed in place, so any text past the screen couldn't be seen; but what I'd like it to be is that as a user is scrolling down to view the rest of the blog, the lower half of the navigation would be visible. Sorry if I'm not wording it right :-/

    Also, do you know how to keep content within the designated area? I want the posts to stay in the white boxes, but when I reblog content that's been responded to by many people, the texts or pictures will push out way past that white box.

    _________________
    Master Class Lurkamancer!


    Feel free to browse my Erfworld Fan Art!
    Adventures in WonderErf Part 1 Part 2 | Velveteen Bunny | Fan Comic
    Titanic Tools (NSFW): Ansom

  • Tip this post

    Make Anonymous
  • Top 
       
    Display posts from previous:  Sort by  
     
    Post new topic  Reply to topic  [ 3 posts ] 

    Board index » Your Things » Multimedia


    Who is online

    Users browsing this forum: No registered users and 1 guest

     
     

     
    You cannot post new topics in this forum
    You cannot reply to topics in this forum
    You cannot edit your posts in this forum
    You cannot delete your posts in this forum
    You cannot post attachments in this forum

    Search for:
    Jump to: