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
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding sidebar problem

    Hello all!

    I need help with some coding and appreciate any help!

    I would very much like to add a tagboard to the right side of my blog's preset template but don't know how with my very rudimentary knowledge of html and css. I tried looking at the code and can only conclude that the body width is 500px and don't know how to add a column on the right beyond that.

    Below is the coding for my blog. The blog in question is gnette.tumblr.com .

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <!--
    Theme: The Minimalist v1.
    Design: The Minimalist (http://minimalist.co)
    -->

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>{Title}{block:PostSummary} | {PostSummary}{/block:PostSummary}{block:SearchPage} | {lang:Search results for SearchQuery}{/block:SearchPage}</title>
    <meta name="description" content="{MetaDescription}" />
    <meta name="if:Show description" content="1" />
    <meta name="if:Show search" content="1" />
    <meta name="text:Twitter name" content="" />
    <meta name="textisqus Shortname" content="" />
    <meta name="text:Google Analytics ID" content="" />
    <link rel="shortcut icon" href="{Favicon}" />
    <link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" />

    <!-- Styles -->

    <link rel="stylesheet" href="http://static.tumblr.com/f1whv92/Mp9l6ewcg/reset.css" />
    <style type="text/css">

    /*----- GENERAL -----*/

    header, footer, section, article, nav, aside {
    display: block;
    }

    body {
    background: #ffffff;
    color: #222;
    font: 12px/20px Georgia, "Times New Roman", Times, serif;
    padding-top: 25px;
    text-align: center;
    width:500px;
    margin: 0 auto;
    }

    h1, h2, h3, hQ {
    font-family: Cufon;
    }

    h1 {
    font-size: 50px;
    line-height: 50px;
    }

    h2 {
    font-size: 31px;
    line-height: 37px;
    }

    h3 {
    font-size: 21px;
    line-height: 27px;
    }

    a:link, a:visited {
    color: #222222;
    font-weight: bold;
    text-decoration: none;
    }

    a:hover, a:active {
    text-decoration: underline;
    }

    hr{
    border:0 #ccc solid;
    border-top-width:1px;
    clear:both;
    height:0;
    }

    ol{list-style:decimal}

    ul{list-style:disc}

    li{margin-left:30px}

    p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:15px}

    #main {
    padding: 0px;
    }

    /*----- MASTHEAD -----*/

    .noMeta > div {
    padding: 0px;
    }

    #masthead {
    margin-bottom: 0px;
    }

    #masthead h1 {
    margin-bottom: 0;
    }

    #masthead h1 a:link, #masthead h1 a:visited {
    text-transform: Uppercase;
    color: #222;
    text-decoration: none;
    }

    #masthead h1 a:active {
    outline: 0;
    }

    #masthead p {
    font-family: Georgia, serif;
    font-size: 20px;
    color: #fff;
    margin-bottom: 0;
    }

    #masthead a:link, #masthead a:visited {
    color: #fff;
    }

    #siteDescription{
    font-size: 13px;
    color: #222;
    text-transform: Uppercase;
    border-top: 1px solid #222;
    margin-top: 20px;
    margin-bottom: -5px;
    padding: 15px 0 0 0;
    font-family: Cufon;
    }

    /*----- SEARCH FORM -----*/

    #frmSearch {
    padding-top: 20px;
    display: none;
    }

    #txtSearch {
    background: url(http://static.tumblr.com/bpryy0m/6lRl6gmys/search.jpg) left no-repeat;
    width: 225px;
    padding: 2px 0 0 20px;
    font: 12px/12px Georgia, "Times New Roman", Times, serif;
    color: #222;
    border: 0px;
    }

    /*----- MAIN HEADER NAV STRIP -----*/

    #mainNav {
    border-top: 1px solid #222;
    border-bottom: 2px solid #222;
    margin-top: 20px;
    padding: 15px;
    font-family: Cufon;
    }

    #mainNav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    #mainNav li {
    margin: 5px;
    display: inline;
    padding: 0;
    }

    #mainNav a:link, #mainNav a:visited {
    padding: 0;
    font-size: 14px;
    line-height: 14px;
    margin: 0 2px;
    text-decoration: none;
    color: #222;
    text-transform: Uppercase;
    }

    #mainNav a:hover, #mainNav a:active {
    outline: none;
    text-decoration: none;
    border-bottom: 1px solid #222;
    }

    #mainNav a.active {
    text-decoration: none;
    border-bottom: 1px solid #222;
    }

    /*----- ARTICLE META INFO -----*/

    #designline {
    margin-top: 50px;
    }

    h5{
    position: relative;
    top: -35px;
    margin-bottom: 0px;
    font-family: Georgia, serif;
    font-size: 10px;
    color: #bca474;
    text-decoration: none;
    text-transform: Uppercase;
    font-weight: bold;
    border-bottom: 1px solid #bca474;
    background: #fff;
    }

    h5 a:link, .line a:visited{
    font-family: Georgia, serif;
    font-size: 10px;
    color: #bca474;
    text-decoration: none;
    text-transform: Uppercase;
    font-weight: bold;
    }

    h5 a:hover{
    text-decoration: underline;
    }

    h5 abbr{
    display: inline-block;
    position: relative;
    margin: 0 auto;
    padding: 0 8px;
    background: #fff;
    top: 10px;
    }

    h5.postDate a{
    color: #bca474;
    }

    /*----- ARTICLE -----*/

    article {
    background: #fff;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    }

    article img {
    border: none;
    margin-bottom: 15px;
    max-width: 500px;
    }

    article p img {
    margin: 0;
    }
    article > div {
    padding: 0px;
    overflow: hidden;
    }
    article .searchPage {
    margin: 35px 0 0 0;
    }

    .searchPageText {
    margin: 0 0 30px 0;
    }

    article .meta a:link, article .meta a:visited {
    text-decoration: none;
    }

    article .meta a:hover, article .meta a:active {
    text-decoration: underline;
    }

    article h2 {
    text-align: center;
    color: #222222;
    }

    article h2 a:link, article h2 a:visited {
    text-transform: Uppercase;
    color: #222;
    text-decoration: none;
    }

    article h2 a:hover, article h2 a:active {
    text-decoration: none;
    border-bottom: 1px solid #222;
    }

    blockquote {
    border-left: 2px solid #bca474;
    margin-left: 0;
    padding-left: 1em;
    }

    #quoteSource{
    margin: 0 auto;
    text-align: left;
    }

    #quoteText h2 {
    text-align: left;
    color: #222222;
    }

    article .chat {
    list-style: none;
    padding: 0;
    margin: 0;
    }

    article .chat li {
    margin: 0 0 2px;
    padding: 2px 0 2px 0;
    }

    .photoCaption {
    text-align: center;
    }

    /*----- AUDIO PLAYER -----*/

    .audio {
    height: 28px;
    width: 26px;
    overflow: hidden;
    margin: auto;
    padding-top: 7px;
    }

    .audioc {
    background-image:url('http://static.tumblr.com/f1whv92/9iCl6bfgp/audiocircle.png');
    background-repeat: no-repeat;
    height: 41px;
    width: 41px;
    }

    .audioCaption {
    margin-top: 1px;
    }

    .audioleft {
    width: 41px;
    float: left;
    }

    .audioright {
    width: 444px;
    float: right;
    }

    .audioContainer {
    margin-top: 5px;
    }

    .audioClear {
    clear:both;
    }

    /*----- ARTICLE NOTES -----*/

    .notes {
    border-top: 1px solid #bca474;
    list-style: none;
    padding: 20px 0 5px 0;
    margin: 30px 0 0 0;
    }
    .notes li {
    margin: 0;
    }

    .notes .avatar {
    margin: 0 5px 0 0;
    position: relative;
    top: 5px;
    }

    .notes blockquote {
    margin: 10px 0 0 35px;
    padding-left: 10px;
    border-left: 2px solid #222222;
    }

    .media {
    width: 500px;
    margin-bottom: 20px;
    }

    /*----- PAGE NAVIGATION -----*/

    #pageNav {
    margin-top: 20px;
    border-top: 1px solid #222;
    }

    #pageNav ul {
    list-style: none;
    padding: 10px 15px;
    margin: 10px 0;
    }

    #pageNav li {
    margin: 0;
    display: inline;
    }

    #pageNav a:link, #pageNav a:visited {
    font: 11px Georgia, "Times New Roman", Times, serif;
    padding: 0;
    margin: 0 2px;
    background: #34hdf5;
    color: #222;
    text-decoration: none;
    }

    #pageNav a:hover, #pageNav a:active, #pageNav a.active:link, #pageNav a.active:visited {
    text-decoration: underline;
    }

    #pageNavOlder:after {
    content: " »";
    font-size: 10px;
    }

    #pageNavNewer:before {
    content: "« ";
    }

    /*----- FOOTER META -----*/

    #sitemeta {
    border-top: 2px solid #222;
    color: #222;
    padding: 20px 0 32px 0;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 11px;
    }

    #sitemeta p {
    margin: 0;
    }

    #sitemeta a:link, #sitemeta a:visited {
    color: #222;
    font-weight: bold;
    }

    {CustomCSS}
    </style>

    <!-- Scripts -->

    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://static.tumblr.com/q9z1v7k/dgEkijh8r/cufon-yui.js" type="text/javascript"></script>
    <script src="http://static.tumblr.com/f1whv92/fgIl65bo1/cufon_300.font.js" type="text/javascript"></script>

    <script type="text/javascript">
    Cufon.replace('h1',{ fontFamily: "Cufon" });
    Cufon.replace('h2',{ fontFamily: "Cufon" });
    Cufon.replace('h3',{ fontFamily: "Cufon" });
    Cufon.replace('#mainNav',{ fontFamily: "Cufon" });
    Cufon.replace('#siteDescription',{ fontFamily: "Cufon" });
    </script>

    <script>
    $(function() {
    var search = $("#txtSearch").val();
    var placeholder = "Search...";
    var fadeToOpacity = 0.4;
    $("#txtSearch").fadeTo("normal", fadeToOpacity);
    if (search == "") {
    $("#txtSearch").val(placeholder);
    }
    $("#txtSearch").blur(function() {
    search = $("#txtSearch").val();
    if (!(search != "" && search != placeholder)) {
    $("#txtSearch").val(placeholder);
    }
    $("#txtSearch").fadeTo("normal", fadeToOpacity);
    });
    $("#txtSearch").focus(function() {
    search = $("#txtSearch").val();
    if (search == placeholder) {
    $("#txtSearch").val("");
    }
    $("#txtSearch").fadeTo("normal", 1);
    });
    $("#btnSearch").click(function() {
    $("#frmSearch").slideToggle("normal");
    $(this).toggleClass("active");
    // $("#txtSearch").focus();
    });
    });
    </script>

    </head>
    <body>

    <header id="masthead" class="clearfix">
    <div id="thehead">
    <h1 class="cufon"><a href="/">{Title}</a></h1>
    <form action="/search" method="get" id="frmSearch">
    <input type="text" id="txtSearch" name="q" value="{SearchQuery}" />
    </form>

    {blockescription}
    <div id="siteDescription">{Description}</div>
    {blockescription}

    <nav id="mainNav">
    {block:HasPages}
    {block:Pages}<li><a href="{URL}">{Label}</a></li>{block:Pages}
    {/block:HasPages}
    {block:AskEnabled}<li><a href="/ask">Ask</a></li>{/block:AskEnabled}
    {block:SubmissionsEnabled}<li><a href="/submit">Submit</a></li>{/block:SubmissionsEnabled}
    <li><a href="/archive">Archive</a></li>
    <li><a href="/random">Random</a></li>
    <a href="{RSS}"></a>
    <li><a href="javascript:;" id="btnSearch">Search</a></li>
    {block:IfTwitterName}
    <li><a href="http://twitter.com/{text:Twitter name}">Twitter</a></li>
    {/block:IfTwitterName}
    </nav>
    </div>
    </header>
    The second half of the coding is in the next post as it was too long to fit in one post.

    Please please help as I tried reading up on adding sidebars or columns but can't really seem to get any of them to work... :c

    Thanks for reading,
    Jeanette

  • #2
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is the second half of the coding:
    <section id="main" class="clearfix">
    <div class="layout">
    {block:SearchPage}
    <article>
    <div>
    <div class="searchPage">
    <h2>Search results for <a href="{URLSafeSearchQuery}">{SearchQuery}</a></h2>
    </div>
    {block:NoSearchResults}
    <div class="searchPageText">
    <p>I’m sorry, but we couldn't find anything matching "<b>{SearchQuery}</b>". Suggestions:</p>
    <ul>
    <li>Make sure all words are spelled correctly.</li>
    <li>Try different keywords.</li>
    <li>Try more general keywords.</li>
    </ul>
    </div>
    {/block:NoSearchResults}
    </div>
    </article>
    {/block:SearchPage}

    {block:TagPage}
    <article>
    <div>
    <div class="searchPage">
    <h2>Posts tagged <a href="{TagURL}">{Tag}</a></h2>
    </div>
    </div>
    </article>
    {/block:TagPage}

    {block:Posts}
    <div id="designline">
    <h5 class="postDate">
    <abbr>{blockate}<a href="{Permalink}">{DayOfMOnth}{DayOfMonthSuffix} {ShortMonth} {Year}</a>{/blockate}{block:NoteCount} | <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}
    </abbr>
    </h5>
    </div>

    <article>
    <div>
    {block:Text}
    {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
    {Body}
    {/block:Text}

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

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

    {block:Quote}
    <div id="quoteText"><h2>{Quote}</h2></div>
    {block:Source}<div id="quoteSource"><p>&mdash;{Source}</p></div>{/block:Source}
    {/block:Quote}

    {block:Link}
    <h2><a href="{URL}" {Target}>{Name}</a></h2>
    {blockescription}
    <div>{Description}</div>
    {/blockescription}
    {/block:Link}

    {block:Chat}
    {block:Title}<h2>{Title}</h2>{/block:Title}
    <ul class="chat">
    {block:Lines}
    <li>{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</li>
    {/block:Lines}
    </ul>
    {/block:Chat}

    {block:Audio}
    <div class="audioleft">
    <div class="audioc">
    <div class="audio">{AudioPlayerBlack}</div>
    </div>
    </div>
    <div class="audioright">
    <div class="audioCaption">{block:Artist}<b>{Artist}</b>{/block:Artist}
    <p>&mdash;{block:TrackName}{TrackName}{/block:TrackName}</p>
    </div>
    </div>
    <div class="audioClear"></div>
    <div class="audioContainer">
    {block:Caption}{Caption}{/block:Caption}
    </div>
    {/block:Audio}

    {block:Video}
    <div class="media">{Video-500}</div>
    {block:Caption}<div>{Caption}</div>{/block:Caption}
    {/block:Video}

    {block:Answer}
    <h3>{Asker} asked: {Question}</h3>
    {Answer}
    {/block:Answer}

    {blockate}

    {block:IfDisqusShortname}
    <script type="text/javascript">
    //<![CDATA[
    (function() {
    var links = document.getElementsByTagName('a');
    var query = '?';
    for(var i = 0; i < links.length; i++) {
    if(links[i].href.indexOf('#disqus_thread') >= 0) {
    query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
    }
    }
    document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{textisqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
    })();
    //]]>
    </script>
    {/block:IfDisqusShortname}

    {block:PostNotes}
    {PostNotes}
    {/block:PostNotes}

    {blockate}

    </div>
    </article>
    {/block:Posts}

    {block:PermalinkPagination}
    <nav id="pageNav">
    <ul class="clearfix">
    {block:PreviousPost}<li><a href="{PreviousPost}" id="pageNavNewer">Previous</a></li>{/block:PreviousPost}
    {block:NextPost}<li><a href="{NextPost}" id="pageNavOlder">Next</a></li>{/block:NextPost}
    </ul>
    </nav>
    {/block:PermalinkPagination}

    {block:Pagination}
    <nav id="pageNav">
    <ul class="clearfix">
    {block:PreviousPage}<li><a href="{PreviousPage}" id="pageNavNewer">Newer</a></li>{/block:PreviousPage}
    {block:JumpPagination length="5"}
    {block:CurrentPage}<li><a href="{URL}" class="active">{PageNumber}</a></li>{/block:CurrentPage}
    {block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
    {/block:JumpPagination}
    {block:NextPage}<li><a href="{NextPage}" id="pageNavOlder">Older</a></li>{/block:NextPage}
    </ul>
    </nav>
    {/block:Pagination}

    {blockayPagination}
    <nav id="pageNav">
    <ul class="clearfix">
    {block:PreviousDayPage}<li><a href="{PreviousDayPage}">&laquo; {DayOfMonth} {ShortMonth}</a></li>{/block:PreviousDayPage}{block:NextDayPage}|<li><a href="{NextDayPage}">{DayOfMonth} {ShortMonth} &raquo;</a></li>{block:NextDayPage}
    </ul>
    </nav>
    {/blockayPagination}

    </div><!-- END layout -->
    </section>

    <footer id="sitemeta">
    <div class="clearfix">
    <div class="thefooter">
    <p><a href="http://www.tumblr.com/theme/12051">The Minimalist Theme</a> designed by <a href="http://minimalist.co">The Minimalist</a> | Powered by <a href="http://tumblr.com">Tumblr</a></p>
    </div>
    </div>
    </footer>

    {block:IfGoogleAnalyticsID}
    <script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker=_gat._getTracker("{text:Google Analytics ID}");pageTracker._trackPageview()}catch(err){}</script>
    {block:IfGoogleAnalyticsID}

    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •