Jump to content
New account registrations are disabed. This website is now an archive. Read more here.
Sign in to follow this  
Followers 0
Tenoukii

That HTML Shiznick

By Tenoukii, in Programming & Web Development

Recommended Posts

Tenoukii    0

Tenoukii
Posted

Hey :)

First off, dreadfully sorry if this is in the wrong section in in some way has something wrong with it, I don't think it does/is, but just in case.

 

Okay! So I'm so confused with HTML. (To get this out the way, I have tried to learn it but my brain just isn't functional enough :[)

So I'm using a Tumblr theme and I want to change a small thing on it. (Small to me, but it might not be. I don't know) Here's the code:

[/b]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{Title}{block:SearchPage}, {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta name="image:Logo" content="http://static.tumblr.com/jm20hzr/w5Jl8j8wh/logo.png"/>
<meta name="color:Background" content="#b9588f"/>
<meta name="image:Background" content="http://static.tumblr.com/jm20hzr/guel8j8zv/main-bg.jpg"/>
<meta name="text:Header Tagline" content="the way of existence"/>
<meta name="text:Footer Text" content="Mutchy © Copyright 2010. All Rights Reserved."/>
<meta name="if:Show People I Follow" content="1" />
<meta name="text:Facebook Username" content="" />
<meta name="text:Twitter Username" content="" />
<meta name="text:Flickr Username" content="" />
<meta name="if:Show Twitter Updates" content="1" />
<meta name="text:Twitter Title" content="Twitter Updates" />
<meta name="if:Show Tags" content="1" />
<meta name="text:Disqus Shortname" content="" />
<link rel="shortcut icon" href="{Favicon}" />
</head>
<!--

--.--               |         |         ,-.-.               |                              
 |  ,---.,-.-.,---.|    ,---.|--- ,---.| | |,---.,---.,---.|--- ,---.,---. ,---.,---.,-.-.
 |  |---'| | ||   ||    ,---||    |---'| | ||   ||   |`---.|    |---'|     |    |   || | |
 `  `---'` ' '|---'`---'`---^`---'`---'` ' '`---'`   '`---'`---'`---'`    o`---'`---'` ' '
              |                                                                           
-->

<style type="text/css">
body {
font: 100%/1.4 Georgia, "Times New Roman", Times, serif;
background: {color:Background} url('{image:Background}') center top no-repeat fixed;
margin: 0;
padding: 0;
color: #1f1f1f;
}
h1, h2, h3, h4, h5, h6, p, blockquote, form, ul, ol, dl {
margin: 0;
padding:0;
}
h2, h2 a {
font-size:19px;
margin-bottom:20px;
}
h3{
margin-top:10px;margin-bottom:10px;
}
a.postlink {
color:#000;
}
.caption {
overflow:hidden;
margin-top:10px;
padding-left:10px;
font-size:19px;
font-weight:bold;
}
a img {
border: none;
}
a {
color: #ca2b53;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
outline:none;
}
#twitter_div a:link, #twitter_div a:visited {
color:#eb9f0e;
text-decoration: none;
}
#twitter_div a:hover {
text-decoration:underline;
}
#twitter_div .twitterlink:link, #twitter_div .twitterlink:visited {
color:#000;
text-decoration: none;
}
#twitter_div .twitterlink:hover {
color:#ca2b53;
}
.container-top {
width: 925px;
height:899px;
margin: -58px auto 0 auto;
background:url(http://static.tumblr.com/jm20hzr/gwpl8owyh/columns-bg.png) 0 0 no-repeat;
}
.container {
width: 925px;
margin: 0 auto;
padding-bottom:20px;
background:url(http://static.tumblr.com/jm20hzr/LTXl8ox1z/columns-bg-tile.png) 0 0 repeat-y;
}
.container-bottom {
width: 925px;
height:16px;
margin: 0 auto;
background:url(http://static.tumblr.com/jm20hzr/SFtl8ox2m/columns-bg-bottom.png) 0 0 no-repeat;
}
.header {
overflow:hidden;
margin: 0 auto;
width: 925px;
}
#logo {
float:left;
margin-top:35px;
}
#tagline {
margin-top:93px;
margin-left:13px;
display:inline-block;
background:url(http://static.tumblr.com/jm20hzr/LYCl8smg8/tagline-bg.png) 13px bottom no-repeat;
padding-bottom:8px;
}
#tagline div {
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-opera-border-radius:4px;
color:#fff200;
font: 18px Georgia, "Times New Roman", Times, serif;
background:#98134d;
padding:2px 9px 4px;
}
#search-block {
width:345px;
height:74px;
background:url() 0 0 no-repeat;
margin-bottom:27px;
position:relative;
}
#search-block .searchform .s {
border:none;
background:transparent;
position:absolute;
top:25px;
left:45px;
width:210px;
}
#search-block .searchform .submit {
border:none;
background:transparent;
width:24px;
height:24px;
cursor:pointer;
background:url() 0 0 no-repeat;
display:block;
position:absolute;
top:20px;
right:60px;
}
#search-block .searchform {
}
#search-block .searchform .submit:hover {
background:url() 0 -24px no-repeat;
}
#searchresults {
padding-bottom:20px;
border-bottom: 1px solid #333;
margin-bottom:12px;
}
.search_query {
background:#ffd6e0;
font-style:italic;
padding:0 5px 2px;
color:#454545;
}
.sidebar {
float: right;
width: 330px;
padding-bottom: 10px;
margin-top:-1017px;
}
.sidebar .inn {
margin:0 36px;
}
.sidebar .section {
border-top:1px solid #333;
padding-top:25px;
margin-bottom:25px;
overflow:hidden;
}
.tags{
font-size:11px;
margin-top:10px;
color:#999;
}
.tags a {
color:#999;
margin-right:10px;
text-transform:lowercase;
font-style:italic;
text-decoration:none;
}
.tags a:hover{
text-decoration:underline;
}
#top-links {
overflow:hidden;
margin-bottom:50px;
margin-left:-8px;
margin-right:-8px;
}
#top-links li {
float:left;
font-size:12px;
}
#top-links li:first-child a {
border-left:none;
padding-left:0;
margin-left:0;
}
#top-links li a {
color:#FFF;
text-decoration:underline;
border-left:1px solid #fff;
padding-left:10px;
margin-left:10px;
padding-top:0;
padding-bottom:0;
}
#top-links li a:hover {
text-decoration:none;
}
#follow {
display:inline-block;
background:url(http://static.tumblr.com/jm20hzr/PNel8jbyr/icon-follow.png) 0 center no-repeat;
padding-left:44px;
color:#e27e0d;
font-size:17px;
text-decoration:none;
min-height:32px;
line-height:32px;
margin-bottom:16px;
}
#follow:hover {
text-decoration:underline;
}
#avatar {
width:96px;
height:96px;
float:left;
border:1px solid #000;
background:url('{PortraitURL-96}') 0 0 no-repeat;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-opera-border-radius:5px;
margin:4px 14px 0 0;
}
.description {
overflow:hidden;
font-size:12px;
line-height:18px;
color:#4a4a4a;
margin-top:18px;
}
#friends {
font-size:16px;
margin-left:-10px;
}
#friends li {
margin:4px 0;
float:left;
margin-left:10px;
}
#friends li a {
color:#4a4a4a;
width:30px;
height:30px;
display:block;
border:1px solid #888;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-opera-border-radius:5px;
text-indent:-99999px;
}
#social li {
display:inline;
margin-right:6px;
}
#social li a {
width:32px;
height:32px;
text-indent:-99999px;
display:inline-block;
}
#social li #twit {
background:url(http://static.tumblr.com/jm20hzr/Fkil8ufxx/icon-twitter.png) 0 0 no-repeat;
}
#social li #facebook {
background:url(http://static.tumblr.com/jm20hzr/Skzl8ufyt/icon-facebook.png) 0 0 no-repeat;
}
#social li #flickr {
background:url(http://static.tumblr.com/jm20hzr/tYTl8ufzb/icon-flickr.png) 0 0 no-repeat;
}
#social li #rss {
background:url(http://static.tumblr.com/jm20hzr/UnPl8ufzq/icon-rss.png) 0 0 no-repeat;
}
#twitter_update_list li {
font-size:12px;
margin-bottom:20px;
line-height:18px;
}
.content {
padding: 10px 0;
width: 534px;
float: left;
margin-top:-790px;
margin-left:35px;
}
ul.nav {
list-style: none;
padding-left:0;
margin-bottom:40px;
}
ul.nav li {
display:inline;
text-transform:uppercase;
padding: 15px;
border-left:1px solid #961309;
}
ul.nav li:first-child {
border-left:none;
padding-left:0;
}
ul.nav a {
width: 160px;
text-decoration: none;
color:#961309;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
text-decoration:underline;
}
/* ~~ The footer ~~ */
.footer {
width: 925px;
padding: 10px 0;
position: relative;
clear: both;
margin:0 auto;
color:#FFF;
min-height:50px;
}
.footer .nav {
float:left;
margin-left:36px;
margin-bottom:0;
}
.footer #copy {
float:right;
font-size:12px;
color:#ffeeee;
margin-right:36px;
margin-top:6px;
}
.footer .nav li {
text-transform:none;
padding: 0 16px;
border-left:1px solid #fff;
font-size:12px;
}
.footer ul.nav a {
color:#ffeeee;
text-decoration:underline;
}
.footer ul.nav a:hover {
text-decoration:none;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
}
.post h2 {
margin-top:10px;
padding-left:5px;
display:inline-block;
max-width:475px;
}
.box-top {
width:534px;
height:17px;
background:url(http://static.tumblr.com/jm20hzr/IA1l8ucdc/box-top.png) 0 0 no-repeat;
}
.box-bottom {
width:534px;
height:18px;
background:url(http://static.tumblr.com/jm20hzr/FYEl8qfss/box-bottom.png) 0 0 no-repeat;
}
.box-middle {
width:534px;
background:url(http://static.tumblr.com/jm20hzr/2zBl8qfs5/box-middle.png) 0 0 repeat-y;
}
.box-middle .cont {
margin:0 16px;
position:relative;
}
.post + .post {
margin-top:34px;
}
.post {
border-top:1px solid #333;
padding-top:12px;
}
.quote {
padding-top:24px;
}
.posts div.post:first-child, .posts div.quote:first-child {
border-top:none;
padding-top:0;
}
.post .meta ul, .post .meta ul li {
margin:0;
padding:0;
list-style:none;
}
.post .meta {
margin-top:18px;
}
.post .meta li {
height:28px;
float:left;
}
.post .meta li a {
display:block;
text-decoration:none;
font-size:14px;
color:#902628;
}
.post .meta li a span {
display:block;
height:26px;
margin-left:32px;
margin-right:5px;
padding:2px 7px 0 6px;
}
.post .meta li a:hover {
color:#f54f20;
}
.post .meta li.date {
background:url(http://static.tumblr.com/jm20hzr/ssdl8qkm3/icon-posted-on-l.png) 0 0 no-repeat;
margin-right:10px;
}
.post .meta li.date a {
background:url(http://static.tumblr.com/jm20hzr/tRrl8qkob/icon-posted-on-r.png) right 0 no-repeat;
}
.post .meta li.date a span {
background:url(http://static.tumblr.com/jm20hzr/CqRl8qkpa/icon-posted-on-m.png) 0 0 repeat-x;
}
.post .meta li.notescount {
background:url(http://static.tumblr.com/jm20hzr/4pVl8qknh/icon-notes-l.png) 0 0 no-repeat;
margin-right:10px;
}
.post .meta li.notescount a {
background:url(http://static.tumblr.com/jm20hzr/tRrl8qkob/icon-posted-on-r.png) right 0 no-repeat;
}
.post .meta li.notescount a span {
background:url(http://static.tumblr.com/jm20hzr/CqRl8qkpa/icon-posted-on-m.png) 0 0 repeat-x;
}
.notes {
font-size:12px;
list-style:none;
margin-top:20px;
margin-left:16px;
}
.notes li{
border-bottom:1px dotted #CCCCCC;
margin-bottom:10px;
padding-bottom:10px;
}
.notes li a {
color:#CA2B53;
text-decoration:none;
}
.notes li a:hover{
text-decoration:underline;
}
.notes .avatar {
margin-right:10px;
vertical-align:middle;
}
#disqus_thread{
margin:0 !important;
}
#dsq-content .dsq-pagination, #dsq-content #dsq-global-toolbar
{
margin:0 !important;
}
#dsq-content-stub {font-size:12px; margin-bottom:-10px;}
.type {
display:block;
height:50px;
margin-bottom:4px;
text-indent:-99999px;
width:50px;
float:left;
}
.link .type {
background:url(http://static.tumblr.com/jm20hzr/NkUl8jbei/icon-link.png) 0 center no-repeat;
}
.post .postlink {
text-decoration:none;
}
.post .postlink:hover {
color:#ca2b53;
}
.photo .type {
background:url(http://static.tumblr.com/jm20hzr/E92l8jbcz/icon-photo.png) 0 center no-repeat;
}
.video .type {
background:url(http://static.tumblr.com/jm20hzr/xv8l8jbds/icon-video.png) 0 center no-repeat;
}
.audio .type {
background:url(http://static.tumblr.com/jm20hzr/AYLl8jbao/icon-audio.png) 0 center no-repeat;
}
.chat .type {
background:url(http://static.tumblr.com/jm20hzr/xbyl8jbbg/icon-chat.png) 0 center no-repeat;
}
.audio_player {
height:26px;
margin:7px;
overflow:hidden;
width:26px;
}
.player {
background:url("http://static.tumblr.com/jm20hzr/EiEl91t3j/audio_circle.png") 0 0 no-repeat;
display:block;
height:41px;
left:32px;
position:absolute;
top:42px;
width:41px;
}
.album_art {
width:104px;
height:104px;
background:url(http://static.tumblr.com/jm20hzr/Bv0l91sp7/album-cover.jpg) 0 0 no-repeat;
float:left;
margin-right:10px;
margin-top:10px;
}
.quote .cont blockquote {
background:url(http://static.tumblr.com/jm20hzr/Y5Dl8jbho/icon-quote.png) 0 10px no-repeat;
padding-left:60px;
font-size:26px;
line-height:29px;
color:#f26522;
}
.quote .cont .author {
padding-left:60px;
padding-top:18px;
}
.chat {
font-size:12px;
}
.chat .label {
width:90px;
color:#a42356;
font-size:18px;
display:block;
float:left;
text-align:right;
padding-right:10px;
}
.chat .text {
width:345px;
display:block;
float:left;
padding-top:6px;
}
.chat .cont li {
overflow:auto;
}
.chat .cont li+li {
margin-top:18px;
}
.prop {
text-align:right;
color:#deac56;
font-size:16px;
vertical-align:top;
white-space:nowrap;
}
.val {
color:#ca2b53;
font-size:23px;
line-height:1.2;
}
.cont .url {
font-size:14px;
line-height:21px;
}
.text .type {
background:url(http://static.tumblr.com/jm20hzr/m2Hl8jbuz/icon-post.png) 0 center no-repeat;
}
p+p, blockquote+p, ul+p, p+ul, ol+p, p+ol, ul+ol, ol+ul, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top:18px;
}
p+blockquote {
margin-top:12px;
}
ul {
list-style:none;
}
.text .cont ul li {
background:url(http://static.tumblr.com/jm20hzr/sPyl8qfwa/bul.png) 0 5px no-repeat;
padding-left:20px;
}
.text .cont ol li {
margin-left:20px;
}
.text .cont {
font-size:12px;
line-height:18px;
}
.cont blockquote {
background:url(http://static.tumblr.com/jm20hzr/ThVl8qfvc/quote-mark.png) 0 0 no-repeat;
padding-left:36px;
font-size:18px;
padding-top:6px;
}
.text .cont img {
padding:14px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-opera-border-radius:5px;
border:1px solid #fff;
background-color:#f7f7f7;
box-shadow:1px 1px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.4);
}
.text .cont h2 {
font-size:29px;
color:#ca2b53;
display:block;
padding:0;
margin-top:18px;
line-height:36px;
}
.text .cont h3 {
font-size:22px;
color:#ca2b53;
margin-top:18px;
}
.text .cont h4 {
font-size:18px;
color:#000;
margin-top:18px;
}
.text .cont ul, .text .cont ol {
font-weight:bold;
margin-left:36px;
}
.pagination {
border-top:1px solid #333;
margin-top:20px;
text-align:center;
text-transform:lowercase;
font-size:21px;
}
.pagination a{
color:#666;
text-decoration:none;
}
.pagination a:hover{
text-decoration:underline;
}
{CustomCSS}
</style>
<!--[if IE 7]><style>#tagline,#follow{display:inline;}#follow{zoom:1;}</style><![endif]-->
<body>
<div class="header">
 <div id="logo"><a href="/"><img src="{image:Logo}" alt="{Title}" /></a></div>
 {block:IfHeaderTagline}
 <div id="tagline">
   <div>{text:Header Tagline}</div>
 </div>
 {/block:IfHeaderTagline}
 <!-- end .header --></div>
<div class="container-top"></div>
<div class="container">
 <div class="sidebar">
   <div id="search-block">
     <form action="/search" class="searchform" method="get">
       <input type="" onblur="if (this.value == '') {this.value = '';}" onfocus="if (this.value == 'Search keywords...') {this.value = '';}" value="" name="q" class="field s">
       <input type="submit" value="" name="submit" class="submit">
     </form>
   </div>
   <div class="inn">
     <ul id="top-links">
       <li><a href="http://www.tumblr.com/dashboard">Dashboard</a></li>
       <li><a href="http://www.tumblr.com/directory">Directory</a></li>
       <li><a href="http://www.tumblr.com/goodies">Goodies</a></li>
       <li><a href="http://www.tumblr.com/preferences">Account</a></li>
     </ul>
     <a id="follow" href="http://www.tumblr.com/follow/{Name}">Follow Sunshine Capital</a>
     <div class="section" style="min-height:130px;">
       <h2>About me</h2>
       <div id="avatar"></div>
       <div class="description">{Description}</div>
     </div>
     {block:IfShowPeopleIFollow}
         {block:Following}
         <div class="section">
           <h2>{lang:People I follow}</h2>
           <ul id="friends">
             {block:Followed}
             <li><a href="{FollowedURL}" title="{FollowedName} :: {FollowedTitle}" style="background-image:url({FollowedPortraitURL-30})"><img src="{FollowedPortraitURL-30}" /></a></li>
             {/block:Followed}
           </ul>
         </div>
         {/block:Following}
     {/block:IfShowPeopleIFollow}

     <div class="section">
       <ul id="social">
         <li><a id="rss" title="rss" href="{RSS}">rss</a></li>
         {block:IfFacebookUsername}<li><a id="facebook" title="facebook" href="http://www.facebook.com/{text:Facebook Username}">facebook</a></li>{/block:IfFacebookUsername}
         {block:IfFlickrUsername}<li><a id="flickr" title="flickr" href="http://www.flickr.com/photos/{text:Flickr Username}">flickr</a></li>{/block:IfFlickrUsername}
         {block:IfTwitterUsername}<li><a id="twit" title="twitter" href="http://twitter.com/{text:Twitter Username}">twitter</a></li>{/block:IfTwitterUsername}
       </ul>
     </div>

     {block:IfShowTwitterUpdates}
         {block:Twitter}
         <div class="section">
           <div id="twitter_div">
             <h2 class="sidebar-title"><a href="http://twitter.com/{TwitterUsername}" class="twitterlink">{text:Twitter Title}</a></h2>
             <ul id="twitter_update_list">
             </ul>
           </div>
           <script type="text/javascript">
           function twitterCallback2(twitters) {
             var statusHTML = [];
             for (var i=0; i<twitters.length; i++){
               var username = twitters[i].user.screen_name;
               var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
                 return '<a href="'+url+'">'+url+'</a>';
               }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
                 return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
               });
               statusHTML.push('<li><span>'+status+'</span> <br/><a style="color:#959595;" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');
             }
             document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
           }

           function relative_time(time_value) {
             var values = time_value.split(" ");
             time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
             var parsed_date = Date.parse(time_value);
             var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
             var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
             delta = delta + (relative_to.getTimezoneOffset() * 60);

             if (delta < 60) {
               return 'less than a minute ago';
             } else if(delta < 120) {
               return 'about a minute ago';
             } else if(delta < (60*60)) {
               return (parseInt(delta / 60)).toString() + ' minutes ago';
             } else if(delta < (120*60)) {
               return 'about an hour ago';
             } else if(delta < (24*60*60)) {
               return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
             } else if(delta < (48*60*60)) {
               return '1 day ago';
             } else {
               return (parseInt(delta / 86400)).toString() + ' days ago';
             }
           }
           </script> 
           <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/{TwitterUsername}.json?callback=twitterCallback2&count=5"></script> 
         </div>
         {/block:Twitter}
     {/block:IfShowTwitterUpdates}
     </div>
   <!-- end .sidebar1 --></div>
 <div class="content">
   <ul {block:HasPages}class="nav"{/block:HasPages}>
     {block:HasPages}
     {block:Pages}
     <li><a href="{URL}">{Label}</a></li>
     {/block:Pages}
     {/block:HasPages}
     {block:AskEnabled}
     <li><a href="/ask">{AskLabel}</a></li>
     {/block:AskEnabled}
     {block:SubmissionsEnabled}
     <li><a href="/submit">{SubmitLabel}</a></li>
     {/block:SubmissionsEnabled}
   </ul>
   {block:SearchPage}
   {block:SearchResults}
   <div id="searchresults">{lang:SearchResultCount results for SearchQuery 2}</div>
   {/block:SearchResults}

   {block:NoSearchResults}
   <div id="searchresults">{lang:No search results for SearchQuery 2}</div>
   {/block:NoSearchResults}
   {/block:SearchPage}
   <div class="posts"> {block:Posts}
     {block:Link}
     <div class="post link">
       <div class="postinfo"> <a href="{Permalink}" class="type">Link</a> </div>
       <!-- .postinfo -->
       <div class="caption"><a class="postlink" href="{Permalink}">{Name}</a> </div>
       <br class="clearfloat"/>
       <div class="box-top"></div>
       <div class="box-middle">
         <div class="cont" style="padding-bottom:5px;"><a class="url" href="{URL}" {Target}>{URL}</a> {block:Description}
           <div class="description">{Description}</div>
           {/block:Description} </div>
       </div>
       <div class="box-bottom"></div>
       <div class="meta">
         <ul>
           {block:Date}
           <li class="date"><a title="{lang:Posted on DayOfWeek Month DayOfMonthWithSuffix}" href="{Permalink}"><span>{TimeAgo}</span></a></li>
           {/block:Date}
           {block:NoteCount}
           <li class="notescount"><a href="{Permalink}#disqus_thread"><span>{NoteCountWithLabel}</span></a></li>
           {/block:NoteCount}
         </ul>
       </div>
       <br class="clearfloat"/>
       {block:IfShowTags}{block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IfShowTags}
     </div>
     {/block:Link}
     {block:Photo}
     <div class="post photo">
       <div class="postinfo"> <a href="{Permalink}" class="type">Photo</a> </div>
       <!-- .postinfo -->
       {block:Caption}<h2> <a class="postlink" href="{Permalink}">{Caption}</a> </h2>{/block:Caption}
       <br class="clearfloat" />
       <div class="box-top"></div>
       <div class="box-middle">
         <div class="cont" style="margin:0 16px;line-height:0">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}</div>
       </div>
       <div class="box-bottom"></div>
       <div class="meta">
         <ul>
           {block:Date}
           <li class="date"><a title="{lang:Posted on DayOfWeek Month DayOfMonthWithSuffix}" href="{Permalink}"><span>{TimeAgo}</span></a></li>
           {/block:Date}
           {block:NoteCount}
           <li class="notescount"><a href="{Permalink}#disqus_thread"><span>{NoteCountWithLabel}</span></a></li>
           {/block:NoteCount}
         </ul>
       </div>
       <br class="clearfloat"/>
       {block:IfShowTags}{block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IfShowTags}
     </div>
     {/block:Photo}
     {block:Photoset}
     <div class="post photo">
       <div class="postinfo"> <a href="{Permalink}" class="type">Photo</a> </div>
       <!-- .postinfo -->
       {block:Caption}<h2> <a class="postlink" href="{Permalink}">{Caption}</a> </h2>{/block:Caption}
       <br class="clearfloat" />
       <div class="box-top"></div>
       <div class="box-middle">
         <div class="cont" style="margin:0 16px;line-height:0">{Photoset-500}</div>
       </div>
       <div class="box-bottom"></div>
       <div class="meta">
         <ul>
           {block:Date}
           <li class="date"><a title="{lang:Posted on DayOfWeek Month DayOfMonthWithSuffix}" href="{Permalink}"><span>{TimeAgo}</span></a></li>
           {/block:Date}
           {block:NoteCount}
           <li class="notescount"><a href="{Permalink}#disqus_thread"><span>{NoteCountWithLabel}</span></a></li>
           {/block:NoteCount}
         </ul>
       </div>
       <br class="clearfloat"/>
       {block:IfShowTags}{block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IfShowTags}
     </div>
     {/block:Photoset}

     {block:Audio}
     <div class="post audio">
       <div class="postinfo"> <a href="{Permalink}" class="type">Audio</a> </div>
       <!-- .postinfo -->
       {block:Caption}<h2> <a class="postlink" href="{Permalink}">{Caption}</a> </h2>{/block:Caption}
       <br class="clearfloat" />
       <div class="box-top"></div>
       <div class="box-middle">
         <div class="cont">
         <div class="player">{AudioPlayer}</div>
          <div class="album_art">
           {block:AlbumArt}<img src="{AlbumArtURL}" alt="{block:Artist}{Artist}{/block:Artist}{block:TrackName} - {TrackName}{/block:TrackName}" width="104" height="104" />{/block:AlbumArt}
           </div>
           <table border="0" cellspacing="5" cellpadding="0">
             <tr>
               <td class="prop">artist/album:</td>
               <td class="val">{block:Artist}{Artist}{/block:Artist}/{block:Album}{Album}{/block:Album}</td>
             </tr>
             <tr>
               <td class="prop">track:</td>
               <td class="val">{block:TrackName}{TrackName}{/block:TrackName}</td>
             </tr>
             <tr>
               <td> </td>
               <td style="color:#deac56; font-size:21px;">{FormattedPlayCount} {lang:Plays}</td>
             </tr>
           </table>
         </div>
       </div>
       <div class="box-bottom"></div>
       <div class="meta">
         <ul>
           {block:Date}
           <li class="date"><a title="{lang:Posted on DayOfWeek Month DayOfMonthWithSuffix}" href="{Permalink}"><span>{TimeAgo}</span></a></li>
           {/block:Date}
           {block:NoteCount}
           <li class="notescount"><a href="{Permalink}#disqus_thread"><span>{NoteCountWithLabel}</span></a></li>
           {/block:NoteCount}
         </ul>
       </div>
       <br class="clearfloat"/>
       {block:IfShowTags}{block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IfShowTags}
     </div>
     {/block:Audio}
     {block:Text}
     <div class="post text">
       <div class="postinfo"> <a href="{Permalink}" class="type">Text</a> </div>
       <!-- .postinfo --> 
       {block:Title}
       <h2> <a class="postlink" href="{Permalink}">{Title}</a> </h2>
       {/block:Title}
       <div class="cont"> {Body} </div>
       <div class="meta">
         <ul>
           {block:Date}
           <li class="date"><a title="{lang:Posted on DayOfWeek Month DayOfMonthWithSuffix}" href="{Permalink}"><span>{TimeAgo}</span></a></li>
           {/block:Date}
           {block:NoteCount}
           <li class="notescount"><a href="{Permalink}#disqus_thread"><span>{NoteCountWithLabel}</span></a></li>
           {/block:NoteCount}
         </ul>
       </div>
       <br class="clearfloat"/>
       {block:IfShowTags}{block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IfShowTags}
     </div>
     {/block:Text}
     {block:Quote}
     <div class="post quote"> 
       <!-- .postinfo -->
       <div class="box-top"></div>
       <div class="box-middle">
         <div class="cont">
           <blockquote>{Quote}</blockquote>
           {block:Source}
           <div class="author">{Source}</div>
           {/block:Source} </div>
       </div>
       <div class="box-bottom"></div>
       <div class="meta">
         <ul>
           {block:Date}
           <li class="date"><a title="{lang:Posted on DayOfWeek Month DayOfMonthWithSuffix}" href="{Permalink}"><span>{TimeAgo}</span></a></li>
           {/block:Date}
           {block:NoteCount}
           <li class="notescount"><a href="{Permalink}#disqus_thread"><span>{NoteCountWithLabel}</span></a></li>
           {/block:NoteCount}
         </ul>

       </div>
       <br class="clearfloat"/>
       {block:IfShowTags}{block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IfShowTags}
     </div>
     {/block:Quote}
     {block:Video}
     <div class="post video">
       <div class="postinfo"> <a href="{Permalink}" class="type">Video</a> </div>
       <!-- .postinfo --> 
       {block:Caption}
       <div class="caption"><a class="postlink" href="{Permalink}">{Caption}</a></div>
       {/block:Caption} <br class="clearfloat"/>
       <div class="box-top"></div>
       <div class="box-middle">
         <div class="cont" style="margin:0 16px;line-height:0;">{Video-500}</div>
       </div>
       <div class="box-bottom"></div>
       <div class="meta">
         <ul>
           {block:Date}
           <li class="date"><a title="{lang:Posted on DayOfWeek Month DayOfMonthWithSuffix}" href="{Permalink}"><span>{TimeAgo}</span></a></li>
           {/block:Date}
           {block:NoteCount}
           <li class="notescount"><a href="{Permalink}#disqus_thread"><span>{NoteCountWithLabel}</span></a></li>
           {/block:NoteCount}
         </ul>
       </div>
       <br class="clearfloat"/>
       {block:IfShowTags}{block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IfShowTags}
     </div>
     {/block:Video}
     {block:Chat}
     <div class="post chat">
       <div class="postinfo"> <a href="{permalink}" class="type">Chat</a> </div>
       <!-- .postinfo --> 
       {block:Title}
       <h2><a class="postlink" href="{permalink}">{Title}</a></h2>
       {/block:Title}
       <br class="clearfloat" />
       <div class="box-top"></div>
       <div class="box-middle">
         <div class="cont">
           <ul>
             {block:Lines}
             <li>{block:Label}<span class="label">{Label}</span>{/block:Label}<span class="text">{Line}</span></li>
             {/block:Lines}
           </ul>
         </div>
       </div>
       <div class="box-bottom"></div>
       <div class="meta">
         <ul>
           {block:Date}
           <li class="date"><a title="{lang:Posted on DayOfWeek Month DayOfMonthWithSuffix}" href="{Permalink}"><span>{TimeAgo}</span></a></li>
           {/block:Date}
           {block:NoteCount}
           <li class="notescount"><a href="{Permalink}#disqus_thread"><span>{NoteCountWithLabel}</span></a></li>
           {/block:NoteCount}
         </ul>
       </div>
       <br class="clearfloat"/>
       {block:IfShowTags}{block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IfShowTags}
     </div>
     {/block:Chat}
     {block:PermalinkPage}
      {block:PostNotes} 
{PostNotes}
{/block:PostNotes}
      {block:IfDisqusShortname}
               <div class="separator secondary"></div>
               <div class="box-top"></div>
               <div class="box-middle">
                       <div class="cont" style="margin:0 16px; line-height:0;">
                           <div id="disqus_thread"></div>
                       </div>
               </div>
               <div class="box-bottom"></div>
               <script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script><noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">{lang:View the discussion thread}</a></noscript>
          {/block:IfDisqusShortname}

     {/block:PermalinkPage} 
     {/block:Posts}
     {block:Pagination}
     <div class="pagination">
           {block:PreviousPage}
               <a href="{PreviousPage}">«Previous</a>
           {/block:PreviousPage}

           {block:JumpPagination length="5"}
               {block:CurrentPage}
                   <span class="current_page">{PageNumber}</span>
               {/block:CurrentPage}

               {block:JumpPage}
                   <a class="jump_page" href="{URL}">{PageNumber}</a>
               {/block:JumpPage}
           {/block:JumpPagination}

           {block:NextPage}
               <a href="{NextPage}">Next»</a>
           {/block:NextPage}
       </div>    
       {/block:Pagination}
     </div>
   <!-- end .content --></div>
 <br class="clearfloat"/>
 <!-- end .container --></div>
<div class="container-bottom"></div>
<div class="footer">
 <ul class="nav">
   {block:HasPages}
   {block:Pages}
   <li><a href="{URL}">{Label}</a></li>
   {/block:Pages}
   {/block:HasPages}
   {block:AskEnabled}
   <li><a href="/ask">{AskLabel}</a></li>
   {/block:AskEnabled}
   {block:SubmissionsEnabled}
   <li><a href="/submit">{SubmitLabel}</a></li>
   {/block:SubmissionsEnabled}
 </ul>
 <div id="copy">{block:IfFooterText}{text:Footer Text}{/block:IfFooterText}<br style="line-height:1.6"/>Mutchy Theme by <a href="http://www.templatemonster.com">TemplateMonster.com</a></div>
 <!-- end .footer --></div>
</body>
</html>[b]

 

Here's a picture of what it looks like:

2qjzpsj.jpg

(Ignore the picture of the surfacing hippo and my gross comment about it)

But yeah! What I want to do is do a little rearrangement of the sidebar on the right.

I want to center the portrait picture and the "About Me" title and have the description text below it (instead of at the side of it) IF that makes any sense? I think it does.

If anyone has any advice or anything than I thank you muchly as it would make me quite happy.

Thank you very much! :)

Share this post

Link to post
Share on other sites

Chief    30

Chief
Posted

This is actually a problem that would be fixed with CSS. If you can't learn HTML, then you can't learn CSS... But really, HTML is the easiest thing. Its made especially for designers so its an extremely self explanitory 'language' thats super simple to learn.

Share this post

Link to post
Share on other sites

Marked    197

Marked
Posted

I can't open the spoiler :

 

Try applying the following styles to those elements:

.my-title{
text-align:center;
}
.my-image{
display:block;
margin:0 auto;
}

 

If there are columns however, which it looks like there may be, this won't work and I'd need to see the code. It would be so much easier if you posted the link so we could look at the source code in the browser.

 

And yeah that comment is kinda gross. From your about me page I think I see why you made it lol

Share this post

Link to post
Share on other sites

Tenoukii    0

Tenoukii
Posted

Hmm.. I can't open the spoiler either :s confuzzled.

The section I can find for those elements is this bit:

  <div class="section" style="min-height:130px;">
    <h2>About me</h2>
    <div id="avatar"></div>
    <div class="description">{Description}</div>
  </div>

 

So I'm slightly confused even more...

And Chief... I'm so useless with any kinds of code. I can do really really really simple stuff, but nothing else. I don't have the brain space to understand it.

 

Link: http://sunshinecapital.tumblr.com

 

And hah! It was the first thing I thought when I saw it. It's moved down a page or two now though XD

I have no idea what in my description gives you the indication of why I wrote it though o.o

Share this post

Link to post
Share on other sites

Marked    197

Marked
Posted

The contents of the spoiler are conflicting.

 

Ok firstly you need to search in your CSS for


#avatar {


background: url("http://29.media.tumblr.com/avatar_b67bccb69eaa_96.png") no-repeat scroll 0 0 transparent;
border: 1px solid #000000;
border-radius: 5px 5px 5px 5px;
float: left;
height: 96px;
margin: 4px 14px 0 0;
width: 96px;
}

And change it to this


#avatar {


background: url("http://29.media.tumblr.com/avatar_b67bccb69eaa_96.png") no-repeat scroll 0 0 transparent;
border: 1px solid #000000;
border-radius: 5px 5px 5px 5px;
display:block;
height: 96px;
margin: 0 auto;
width: 96px;
}

Then you should add a class to your h2

About me

And add this to your CSS

h2.about-me{
text-align:center;
}

 

Try that and see what happens. I can actually edit your CSS and HTML from my browser using firebug to see the effects.

b60b7a22610284c1c8ffb6defa681a51.png

Share this post

Link to post
Share on other sites

Tenoukii    0

Tenoukii
Posted

Feel stupid asking this.. But which bit does the last bit go in? ;/

And sorry if this is a pain, but which bit would I change to center the Description text?

Thank you ^^

Share this post

Link to post
Share on other sites

Marked    197

Marked
Posted

The last bit? Are you referring to adding the class to the h2 tag or adding the CSS? I dont know anything about tumblr so you gotta find your CSS. Looking at your source code you havn;t got it in a separate stylesheet, looks pasted right into your html

4ac57abe6a7b861ec8511f1e87a1c24c.png

 

So you know where you changed the #avatar thing? Just putting the .about-me class anywhere in that place will do, just so long as your defining the class. And similarly to center your description text, it already has a class applied to it, so just add this to your CSS anywhere:

.description{
text-align:center;
}

 

Got it?

 

you could pretty much just paste it all in once place

#avatar {
       background: url("http://29.media.tumblr.com/avatar_b67bccb69eaa_96.png") no-repeat scroll 0 0 transparent;
       border: 1px solid #000000;
       border-radius: 5px 5px 5px 5px;
       display:block;
       height: 96px;
       margin: 0 auto;
       width: 96px;
}
h2.about-me, .description{
text-align:center;
}

Share this post

Link to post
Share on other sites

Tenoukii    0

Tenoukii
Posted

Right! I have the text and picture centered, but for some reason, the About Me bit is still on the left and has lost it's boldness? I could just delete that bit and not have the heading.

It must be me doing something wrong :L

Share this post

Link to post
Share on other sites

Marked    197

Marked
Posted

Not necessarily. With CSS, if you have an ID (#) it will overwrite anything that a class (.) states, even if the class comes last in the CSS.

 

Therefore, attach an ID instead to h2 tag and see if it works then

<h2 id='about-me'>About Me</h2>

CSS:

#about-me{
font-weight:bold;
text-align:center;
}

Share this post

Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...