HTMLHelp Forums [Powered by Invision Power Board]

Posted by: Mellow Fisherman May 18 2012, 02:29 AM

I don't know how else to call it. Basically, these things:

IPB Image

I want to add it to one of the free themes I'm currently using, which looks like this:

I just want to add the bars on the side. I really have no experience with html coding whatsoever, so here's the code for the theme:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="color:Background" content="#2e3b44" />
<meta name="color:Headings" content="#3ea3b5" />
<meta name="color:Text" content="#1a2228" />
<meta name="color:Notes" content="#232e36" />
<meta name="image:Background" content="http://static.tumblr.com/nbxilpo/8uqkz74z6/header-bg.jpg" />
<meta name="color:Pagination" content="#fff" />
<meta name="text:BackgroundRepeat" content="no-repeat" />

<meta name="description" content="{MetaDescription}" />

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />

<style type="text/css">

body {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
background:{color:background} url({image:background}) no-repeat center top;
background-repeat:{text:BackgroundRepeat};
background-attachment: fixed;
}

h1,h2,h3,h4,h5,h6 {
color: {color:Headings};
}

h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 35px;
margin: 0;
}

h2 a, h2 {
text-decoration: none;
color: {color:Headings};
}

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

p, h5 {

margin-bottom: 1em;
line-height: 22px;
text-align:left;
color:{color:Text};

}

a {
color: white;
text-decoration: none;
}

a:hover {
text-decoration: none;
}

ul li, ol li {
line-height: 25px;
}

blockquote {
margin: 0;
}

blockquote p {
font-family: Arial;
font-size:20px;
color: #000;
margin-top: 0;
}

.quote p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size:28px;
color: {color:Headings};
margin-top: 0;
font-weight:bold;
}

/* MAIN */

#container {
width: 770px;
margin: 70px auto;
overflow: hidden;
}

#container h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
margin-bottom: 60px;
}

/* HEADER */

#header {
margin: -10px 0 0 125px;
overflow: hidden;

}

#header h1 a {
font-size:50px;
color: white;
display: block;
text-decoration: none;

}

/* POST */

.link, .photo, .text, .video, .audio, .chat, .quote {
overflow: hidden;
margin-bottom: 40px;
position:relative;

}

.post {
float: left;
margin-left: 121px;
position: relative;
width: 522px;
padding: 20px 20px 40px 25px;
background: #fff;
color: {color:Text};

min-height:100px;
}

.postMeta {
float: left;
width: 50px;
height: 75px;
padding: 10px 0 5px 0;
margin: 0 -120px 0 70px;
color: white;
background: url(http://static.tumblr.com/nbxilpo/F9Skz6qzs/date-bg.png) no-repeat;

}

.postMeta li {
    font-size: 11px;
    line-height: 5px;
    text-align: center;
    list-style: none;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-transform: uppercase;
}

.postMeta li span {
font-size: 29px;
color:{color:Headings};
    line-height: 40px;

}

.postTop {
background: url(http://static.tumblr.com/nbxilpo/qEYl559l2/post-top.png) no-repeat;
margin-left: 112px;
width: 585px;
height: 43px;
margin-top:10px;
margin-bottom:-15px;
position:relative;


}

.postBottom {
background: url(http://static.tumblr.com/nbxilpo/sfQl559gh/post-bottom.png) no-repeat;
margin-left:112px;
width: 585px;
height: 66px;
margin-top:-50px;
margin-bottom:30px;
}

.notes {
float:right;
position:absolute;
left:360px;
top:-123px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:bold;
color: {color:Notes};
font-size:30px;
display:block;
width:220px;
text-align:right;
letter-spacing: -.08em;

}

.notes a {
text-decoration: none;
}

/* POST TAGS */

.tags {

clear: both;
font-size: 12px;
float:right;
margin-right:25px;
margin-top:-17px;
padding: 3px 5px 3px 5px;

}

.tags a {
color: #4d4d4d;
}

.tags li {

display: inline;
margin-right: 7px;
line-height: 15px;
color: #3ea3b5;

}

.post h2, .post h2 a  {
color: {color:Headings};
margin: 00px 0 0 0px;
}

.post a {
color: {color:Text};
}

/* POST ICONS */

.audioIcon {
background: url(http://static.tumblr.com/nbxilpo/NV6kz6lnf/audio.png) no-repeat;
position: absolute;
top:100px;
margin-left:-17px;
width: 27px;
height: 118px;
position:absolute;
}

.linkIcon {
background: url(http://static.tumblr.com/nbxilpo/LeWkz6lns/link.png) no-repeat;
position: absolute;
top:100px;
margin-left:-17px;
width: 25px;
height: 83px;

}

.photoIcon {
background: url(http://static.tumblr.com/nbxilpo/DuTkz6lo1/photo.png) no-repeat;
position: absolute;
top:100px;
margin-left:-17px;
width: 28px;
height: 127px;

}

.quoteIcon {
background: url(http://static.tumblr.com/nbxilpo/rX5kzbz9g/quote.png) no-repeat;
position: absolute;
top:100px;
margin-left:-17px;
width: 31px;
height: 129px;

}

.textIcon {
background: url(http://static.tumblr.com/nbxilpo/NvXkz6lot/text.png) no-repeat;
position: absolute;
top:100px;
margin-left:-17px;
width: 26px;
height: 92px;

}

.videoIcon {
background: url(http://static.tumblr.com/nbxilpo/GCZkz6lp6/video.png) no-repeat;
position: absolute;
top:100px;
margin-left:-17px;
width: 27px;
height: 128px;

}

.chatIcon {
background: url(http://static.tumblr.com/nbxilpo/ivakzbz3p/chat.png) no-repeat;
position: absolute;
top:100px;
margin-left:-17px;
width: 27px;
height: 128px;

}

.quote .post {
background: url(http://static.tumblr.com/nbxilpo/DNXkzt67k/quote.png) #fff no-repeat top left;
}

/* PHOTO */

.photo .post {
text-align: center;
}

.photo .post ul {
text-align: left;
}

.photo img {
padding: 5px;
background: #e3e3e3;
border: 1px solid #d2d1d1;
width: 500px;
}

/* CHAT */
/* GET RID OF? */
.chat .post h5 {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #dddddd;
}

.chat .post ul {
padding-left: 0;
}

.chat .post li {
list-style: none;
margin-bottom: 10px;
padding: 7px;
}

.chat .label {
font-weight: bold;
font-size: 1.1em;
}

.chat li p {
display: inline;
}

.chat .even {
background: #e3e3e3;
}

.chat .odd {
background: #f1f1f1;
}

/* AUDIO */

div.audio_player {
background: #e4e4e4;
margin-bottom: 10px;
}

/* FOOTER */

.footer {
  width:585px;
margin: 20px 0 0 125px;
}

.footer a, .footer p {
color: #4d5c68;
text-align: center;
font-size: 10px;
text-decoration: none;
}

/* SIDEBAR STYLING */

#sidebar {
    position:absolute;
    top:20px;
    left:0;
        display: none;
        border-top: 0px solid white;
        border-right: 0px solid white;
background: url(http://static.tumblr.com/nbxilpo/Ycrkzcejg/sidebar-bg.png);
/* background: -moz-linear-gradient (top, #ebebeb, white);
background: -webkite-gradient(linear, left top, left bottom, from(#ebebeb), to(white));*/
padding: 30px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
color: #fff;
width: 300px;
}

#sidebar a {
color:#FFFFFF;
}

#sidebar h2 {
line-height: 45px;
color:#FFFFFF;
margin-top: 30px;
margin-bottom: 10px;
}

img#portrait {
float: left;
margin-right: 20px;
margin-bottom: 20px;
}

#sidebarButton {
    position: absolute;
    top:0px;
    right: -14px;
    cursor: pointer;
margin: 0 -21px 0 0;

}

#sidebar ul#following {
    padding-left: 0;
    background: red;
    overflow: hidden;
}

#sidebar ul#following li {
    float: left;
    list-style: none;
    padding: 0 10px 10px 0;

}

/* GENERIC */

#container .first, #sidebar .first {
    margin-top: 0;
}

.permalink {
padding-top:20px;
padding-left:35px;
font-size: 10px;
font-style:none;
display:block;
width:50px;

}

.permalink a {
color:#b1b1b1;

}

/* Pagination */

.pagination {
    text-align:center;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight:bold;
    color: {color:Pagination};
    font-size:30px;
    letter-spacing: -.08em;

}

{CustomCSS}

.quote1 { overflow: hidden;
margin-bottom: 40px;
position:relative;
}
</style>

</head>

<body>


    <div id="container">
    <div id="headerBg"></div>
        <div id="header">

        <h1> <a href="/">{Title}</a></h1>

        </div> 

            {block:Posts}

            {block:Text}

            <div class="postTop"> <div class="textIcon">{block:NoteCount}  <a href="{Permalink}"><div class="notes">{NoteCount} Notes</div> </a>{/block:NoteCount}</div></div>

            <div class="text">

            {block:Date}
            <ul class="postMeta">
            <li><a href="{Permalink}">{ShortMonth}</a></li>
            <li><span><a href="{Permalink}">{DayofMonth}</a></span></li>
            <li><a href="{Permalink}">{Year}</a></li>
            </ul>

            {/block:Date}





            <div class="post">
                {block:Title}
                    <h2> <a href="{Permalink}">{Title}</a></h2>
                {/block:Title}

                {Body}


            </div>

            </div> 

            <div class="postBottom">
            <div class="permalink"><a href="{Permalink}">permalink</a></div>
            {block:HasTags}

                 <ul class="tags">
                 <li><strong>Tags: </strong></li>
                 {block:Tags} <li><a href="{TagURL}">{Tag}</a></li>    {/block:Tags}
                 </ul>

                 {/block:HasTags}

            </div>

            {/block:Text}

            {block:Photo}
            <div class="postTop"><div class="photoIcon">
            {block:NoteCount}<a href="{Permalink}"><div class="notes">{NoteCount} Notes</div> </a>{/block:NoteCount}
            </div></div>
            <div class="photo">
            {block:Date}
            <ul class="postMeta">
            <li><a href="{Permalink}">{ShortMonth}</a></li>
            <li><span><a href="{Permalink}">{DayofMonth}</a></span></li>
            <li><a href="{Permalink}">{Year}</a></li>
            </ul>

            {/block:Date}



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



              </div>

           </div> 
           <div class="postBottom">
           <div class="permalink"><a href="{Permalink}">permalink</a></div>
                            {block:HasTags}

                 <ul class="tags">
                 <li><strong>Tags: </strong></li>
                 {block:Tags} <li><a href="{TagURL}">{Tag}</a></li>    {/block:Tags}
                 </ul>

                 {/block:HasTags}

           </div>

            {/block:Photo}



            {block:Chat}
            <div class="postTop"><div class="chatIcon">
            {block:NoteCount} <a href="{Permalink}"><div class="notes">{NoteCount} Notes</div> </a> {/block:NoteCount}
            </div></div>
            <div class="chat">

            {block:Date}
            <ul class="postMeta">
            <li><a href="{Permalink}">{ShortMonth}</a></li>
            <li><span><a href="{Permalink}">{DayofMonth}</a></span></li>
            <li><a href="{Permalink}">{Year}</a></li>
            </ul>

            {/block:Date}




            <div class="post">
                {block:Title}
                    <h2> <a href="{Permalink}">{Title}</a></h2>
                {/block:Title}

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

                    <p>{Line}</p>

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


            </div>


            </div> 
            <div class="postBottom">
            <div class="permalink"><a href="{Permalink}">permalink</a></div>
            {block:HasTags}

                 <ul class="tags">
                 <li><strong>Tags: </strong></li>
                 {block:Tags} <li><a href="{TagURL}">{Tag}</a></li>    {/block:Tags}
                 </ul>

                 {/block:HasTags}
            </div>

            {/block:Chat}

            {block:Video}
            <div class="postTop"><div class="videoIcon">
            {block:NoteCount} <a href="{Permalink}"><div class="notes">{NoteCount} Notes</div> </a> {/block:NoteCount}
            </div></div>
            <div class="video">

            {block:Date}
            <ul class="postMeta">
            <li><a href="{Permalink}">{ShortMonth}</a></li>
            <li><span><a href="{Permalink}">{DayofMonth}</a></span></li>
            <li><a href="{Permalink}">{Year}</a></li>
            </ul>

            {/block:Date}




            <div class="post">



            {Video-500}
            {block:Caption}
            <p> {Caption} </p>
            {/block:Caption}




            </div>





            </div>

            <div class="postBottom">
            <div class="permalink"><a href="{Permalink}">permalink</a></div>
            {block:HasTags}

                 <ul class="tags">
                 <li><strong>Tags: </strong></li>
                 {block:Tags} <li><a href="{TagURL}">{Tag}</a></li>    {/block:Tags}
                 </ul>

                 {/block:HasTags}
            </div>

             {block:Video}


            {block:Audio}

            <div class="postTop"><div class="audioIcon">
            {block:NoteCount} <a href="{Permalink}"><div class="notes">{NoteCount} Notes</div> </a>{/block:NoteCount}
            </div></div>

            <div class="audio">


            {block:Date}
            <ul class="postMeta">
            <li><a href="{Permalink}">{ShortMonth}</a></li>
            <li><span><a href="{Permalink}">{DayofMonth}</a></span></li>
            <li><a href="{Permalink}">{Year}</a></li>
            </ul>

            {/block:Date}




            <div class="post">

            {AudioPlayerGrey}
            {FormattedPlayCount} Plays

            {block:Caption}

            <div class="caption">{Caption}</div>


            {/block:Caption}



            </div>




            </div> 
            <div class="postBottom">
            <div class="permalink"><a href="{Permalink}">permalink</a></div>
             {block:HasTags}

                 <ul class="tags">
                 <li><strong>Tags: </strong></li>
                 {block:Tags} <li><a href="{TagURL}">{Tag}</a></li>    {/block:Tags}
                 </ul>

                 {/block:HasTags}

            </div>
            {/block:Audio}


            {block:Quote}
            <div class="postTop"><div class="quoteIcon">
            {block:NoteCount} <a href="{Permalink}"><div class="notes">{NoteCount} Notes</div> </a>{/block:NoteCount}
            </div></div>
            <div class="quote" id="blockquote">
            {block:Date}
            <ul class="postMeta">
            <li><a href="{Permalink}">{ShortMonth}</a></li>
            <li><span><a href="{Permalink}">{DayofMonth}</a></span></li>
            <li><a href="{Permalink}">{Year}</a></li>
            </ul>

            {/block:Date}




            <div class="post">
                <blockquote>


                <p> {Quote} </p>
                {block:Source}
                <cite> {Source} </cite>

                {/block:Source}

                </blockquote>




            </div>

            </div> 
            <div class="postBottom">
            <div class="permalink"><a href="{Permalink}">permalink</a></div>
            {block:HasTags}


                 <ul class="tags">
                 <li><strong>Tags: </strong></li>
                 {block:Tags} <li><a href="{TagURL}">{Tag}</a></li>    {/block:Tags}
                 </ul>

                 {/block:HasTags}


            </div>

            {/block:Quote}


            {block:Link}

      <div class="postTop"><div class="linkIcon">
            {block:NoteCount} <a href="{Permalink}"><div class="notes">{NoteCount} Notes</div> </a> {/block:NoteCount}
            </div></div>
        <div class="link"> {block:Date}
          <ul class="postMeta">
            <li><a href="{Permalink}">{ShortMonth}</a></li>
            <li><span><a href="{Permalink}">{DayofMonth}</a></span></li>
            <li><a href="{Permalink}">{Year}</a></li>
          </ul>
          {/block:Date}
  <div class="post">
    <h2> <a href="{URL}"> {Name} </a></h2>
    {block:Description}
    <p>{Description}</p>
    {/block:Description} </div>
        </div>
        <div class="postBottom">
        <div class="permalink"><a href="{Permalink}">permalink</a></div>
        {block:HasTags}

                 <ul class="tags">
                 <li><strong>Tags: </strong></li>
                 {block:Tags} <li><a href="{TagURL}">{Tag}</a></li>    {/block:Tags}
                 </ul>

      {/block:HasTags}   </div>


            {/block:Link}

            {/block:Posts}

        <div class="pagination">
                {block:Pagination}
            {block:PreviousPage}
                <a href="{PreviousPage}">Previous</a>
            {/block:PreviousPage}
��
            {block:NextPage}
                <a href="{NextPage}">Next</a>
            {/block:NextPage}
        {/block:Pagination}
</div>

    <div class="footer">

    
   <p> a free <a href="http://www.brandbuildsell.com/category/free-templates/free-tumblr-templates/">tumblr theme</a> designed by <a href="http://www.brandbuildsell.com">brand. build. sell.</a></p>
   






    </div> 


</div>

    </div> 

<div id="sidebar">

<div id="aboutInner">

<img src="{PortraitURL-64}" alt="" id="portrait" />

<h2 class="first"> {Title} </h2>
<p> {Description} </p>

  <h2> Search </h2>

<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" />
<input type="submit" value="Submit" />
</form>

{block:HasPages}
<h2> Pages </h2>

<ul id="nav">
    <li> <a href="/"> Home </a> </li>
    {block:Pages}
    <li> <a href="{URL}"> {Label} </a> </li>
    {/block:Pages}

</ul>
    {/block:HasPages}
<h2> <a href="/archive"> Archive </a> </h2>
<p> <a href="/archive"> View All Postings </a>  </p>

{block:Twitter}
    <div id="twitter" style="display:none;">
        <h2><a href="http://twitter.com/{TwitterUsername}">Latest Tweets</a></h2>

        <div id="tweets"></div>
    </div>

    <script type="text/javascript">
        function recent_tweets(data) {
            for (i=0; i<data.length; i++) {
                document.getElementById("tweets").innerHTML =
                    document.getElementById("tweets").innerHTML +
                    '<a href="http://twitter.com/{TwitterUsername}/status/' +
                    data[i].id + '"><div class="content">' + data[i].text +
                    '</div></a>';
            }
            document.getElementById("twitter").style.display = 'block';
        }
    </script>
{/block:Twitter}


{block:IfShowWhoIFollow}

<h2> Following </h2>

    {block:Following}
<ul id="following">
{block:Followed}
<li>
<a href="{FollowedURL}">
<img src="{FollowedPortraitURL-30" alt="{FollowedTitle}" />
</a>
</li>
{/block:Followed}
</ul>
{/block:Following}

{/block:IfShowWhoIFollow}

<img src="http://static.tumblr.com/jbsroa6/DnIlv8450/btn-see-more__1_.png" alt="" id="sidebarButton" />

</div> 

</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>

<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>

<script type="text/javascript">
    (function sidebar() {

        var sidebar = $('#sidebar').show(),
            sidebarButton = $('#sidebarButton', sidebar),
            w = sidebar.outerWidth();

        sidebar.css('left', '-' + w + 'px');

        sidebarButton.toggle (

            function() {
                sidebar.css('left', 0).show('slide', { easing: 'easeOutBounce' }, 1000, function() {
                    sidebarButton.css('right', '-14px');
                });
            },

            function() {
                sidebar.animate({ left: '-' + w + 'px' }, 1000, 'easeOutBounce');
                sidebarButton.css('right', '-14px');
            }

        );

    }());
</script>

{block:Twitter}
    <script type="text/javascript" src="/tweets.js"></script>
{/block:Twitter}

<script type="text/javascript" src="http://static.tumblr.com/nbxilpo/vpTkzwq6w/cufon-yui.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/nbxilpo/JSZkzwqls/rockwell_400-rockwell_700.font.js"></script>
<script type="text/javascript"> Cufon.now(); </script>
<script type="text/javascript">  Cufon.replace('h2, .quote p, #container h1, .postMeta li, .notes, .pagination');
</script>
</body>
</html>

If someone knows how I can add the bars, it'd be greatly appreciated!

Posted by: Mellow Fisherman May 18 2012, 07:43 PM

Nevermind, I've figured it out. It's actually called the blockquote.

The problem now is that it appears on my quote posts as well. What change should I add?

CODE

blockquote {
margin: 10px 0px 0px 25px;
border-left: 5px solid #eee;
font-family: Arial;
font-size:15px;
color: #000;
margin-top: 0;
padding: 0px 0px 0px 8px;
}

blockquote p {
padding: 0
}

.quote p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size:28px;
color: {color:Headings};
margin-top: 0;
font-weight:bold;
}

Posted by: Mellow Fisherman May 18 2012, 10:24 PM

I've figured it out again! Please close this thread.

Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Web Site Functionality _ [Tumblr] Reblog Bar (?)

Posted by: Mellow Fisherman May 18 2012, 02:29 AM

Posted by: Mellow Fisherman May 18 2012, 07:43 PM

Posted by: Mellow Fisherman May 18 2012, 10:24 PM