Help with Tumblr HTML- want to create border and separation between boxes |
Help with Tumblr HTML- want to create border and separation between boxes |
smartremark102 |
May 1 2011, 12:43 PM
Post
#1
|
Group: Members Posts: 2 Joined: 1-May 11 Member No.: 14,453 |
Here is a preview of this theme:
http://safe.tumblr.com/theme/preview/28771 Link to the them: http://www.tumblr.com/theme/28771 As you may be able to tell, all the pictures/text are located in one big square (but its actually four boxes touching each other), and i wanted to see if i could make the boxes separate and even put borders around them. Is this possible? And also, is there a way that i could move this them to the right a bit? thanks so much! Sorry if this was confusing, i am very new to html. And here is the HTML codes for this theme: <!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"> <!-- Killin' Hoes --> <head> <!-- DEFAULT VARIABLES --> <meta name="color:background" content="#F0E1DE" /> <meta name="image:background" content="http://static.tumblr.com/9u2zteh/Q5klj69ew/bg.jpg" /> <meta name="color:text" content="#C2AEAE"> <meta name="color:title" content="#B9AAAA" /> <meta name="color:link" content="#C0B2B2" /> <meta name="color:link hover" content="#967676" /> <meta name="color:posts" content="#FAEFE3" /> <meta name="color:bars" content="#F7E4DE" /> <meta name="font:body" content="georgia" /> <meta name="image:Sidebar" content=""/> <meta name="if:show sidebar image" content="0"/> <meta name="text:Custom Link One" content="" /> <meta name="text:Custom Link One Title" content="" /> <meta name="text:Custom Link Two" content="" /> <meta name="text:Custom Link Two Title" content="" /> <meta name="text:Custom Link Three" content="" /> <meta name="text:Custom Link Three Title" content="" /> <meta name="text:Custom Link Four" content="" /> <meta name="text:Custom Link Four Title" content="" /> <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} <style type="text/css"> img{ -webkit-transition: opacity 0.7s linear; opacity: 1;} img:hover{ -webkit-transition: opacity 0.7s linear; opacity: 0.8; } img { border-style: none; } body{ color:{color:Text}; background-color:{color:background}; background-image:url({image:background}); background-postition:center; background-attachment: fixed; background-repeat: repeat; font-family:{font:body}; font-size:9px; letter-spacing: px; line-height: 12px; text-align:justify; } a:link, a:visited, a:active{color:{color:link}; text-decoration:none; line-height:16px; -webkit-transition-duration: .5s;} #container{ background-color:transparent; padding-bottom:5px; width:96%; position:absolute; left:0%; top:0%; } a:hover{color:{color:link hover}; text-decoration:italics; } #center{ margin-top:-13px; margin-bottom:0px; margin-left:323px; } #entry{ float:left; width:450px; height:350px; overflow:hidden; background-color:{color:posts}; text-align:; padding:0px; padding-bottom:0px; margin-bottom:0px; } div.navigate a{ text-align: center; padding:3px; padding-right:5px; padding-left:5px; padding-top:-5px; letter-spacing: 3px; color: {color:text}; background-color: {color:background}; border:1px solid #C4B29F; margin:1px; margin-left:-1px; position:relative; width: 70px; height: 12px; display: inline-block; } div.navigate a:hover{ font-weight: bold; letter-spacing: 0px; background:{color:posts}}; display:block; padding:0px 0; border: 0px solid #000000; z-index:2; } #perma{ color:{color:link}; background-color:{color:link hover}; opacity:0; position:top; -webkit-transition-duration: 0.4s; padding:4px; } #notes{ display:block; width:400px; float:center; padding:3px; margin:5px; } #entry:hover #perma {display: block; opacity:1; } .textposts { padding:20px; } .audio {width: 490px; background-color:#E4E4E4; padding:3px; -webkit-box-shadow: 3px 3px 3px #dcdcdc; } .title {color:{color:title}; font-family:Angsana New; font-size:32px; line-height:10px; letter-spacing:px; text-align:center; text-transform:; padding-top:3px; padding-bottom:5px; } #side{ float: left; position: fixed; top: 0px; left: 10px; width:300px; height:100%; -moz-border-radius:0px; -webkit-border-radius:0px; background-color:{color:posts}; border-left: 0px dotted {color:text}; border-right: 0px solid {color:text}; padding-left:8px; padding-right:6px; padding-bottom:3px; padding-top:3px; } div.killinhoes{ z-index:9; font-size:9px; display:block; position: fixed; right:0px; padding:5px; padding-right:15px; padding-left:15px; background-color: {color:posts}; } .bottomstrip{ width:1025px; margin-left:-7px; position:fixed; padding:1px; bottom:0px; background:{color:background}; text-transform:none; word-spacing:10px; text-align:center; z-index:3; } .right { margin: 0 0 px 0; overflow:hidden; text-align: left;} .totalright {float:right; margin-top:0px;} ol.notes {margin-left: 70px; width: 450px;} ol.notes a:hover {font-style:italic;} ol.notes li.note {padding: px; border-bottom:1px solid {color:link hover}; list-style-type:none;} ol.notes li.note img.avatar {vertical-align:-4px ; margin-right:2px ;width: 6px;height: 6px;} ol.notes li.note img.avatar:hover {-webkit-transform: scale(1);} ol.notes li.note blockquote {font-size: 1.1em; letter-spacing: -1px; margin-left: -1px; margin-top: -1px; margin-bottom: -1px;} ol.notes li.note .answer_content {font-size: 1.1em; letter-spacing: -1px; margin-left: -1px;margin-top: -1px; margin-bottom: -1px; display: block;} .label {font-weight: bold; letter-spacing: 1px;} ul.chat {list-style-type:none;} </style> <script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script> <style type="text/css">{CustomCSS]</style> </head> <body> <div id="container"> <div id="center"> <div id="side"> <div class="title"><a href=""><i>{Title}</i></a></div> <BR> <center> <div class="navigate"> <div style="word-spacing:10px"> <a href="/">home</a> <a href="/ask">ask</a> {block:IfCustomLinkOneTitle} <a href="{text:Custom Link One}"> {text:Custom Link One Title}</a> {/block:ifCustomLinkOneTitle} {block:ifCustomLinkTwoTitle} <a href="{text:Custom Link Two}"> {text:Custom Link Two Title}</a> {/block:ifCustomLinkTwoTitle} {block:ifCustomLinkThreeTitle} <a href="{text:Custom Link Three}"> {text:Custom Link Three Title}</a> {/block:ifCustomLinkThreeTitle} {block:ifCustomLinkFourTitle} <a href="{text:Custom Link Four}">{text:Custom Link Four Title}</a> {/block:ifCustomLinkFourTitle}</div> </center> <BR><BR> <center> {block:ifshowsidebarimage}<a href="/"><img src="{image:sidebar}" width=280px></a>{/block:ifshowsidebarimage} {block:Description} {Description}{/block:Description}</center> </div> <BR> <div class = "autopagerize_page_element"> {block:Posts} <div id="entry"> {block:Text} <div class="textposts"> <div id="perma"><a href="{Permalink}" title="{NoteCountWithLabel}">{24Hour}:{Minutes} - {NoteCountWithLabel}</a></div> <BR> {block:Title}<div style="border-bottom:1px solid #CCC; font-family:Bell MT; font-size:16px;"><i>{Title}</i></div>{/block:Title}{Body} </div> {/block:Text} {block:Photo}<BR><div id="perma"><a href="{Permalink}" >{24Hour}:{Minutes} - {NoteCountWithLabel}</a></div> {LinkOpenTag}<a href="{Permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" title="{PhotoAlt}" width="440px"/></a>{LinkCloseTag} {/block:Photo} {block:Photoset}{Photoset-450}{/block:Photoset} {block:Quote} <div class="textposts"> <span style="font-size:20px;">“</span> <span style="font-family:times new roman; font-size:11px; line-height:14px; "><i>{Quote}</i></span> <BR>{block:Source}—<span style="text-transform:uppercase;">{Source}</span>{/block:Source} </div> <div id="perma"><a href="{Permalink}" >{24Hour}:{Minutes} - {NoteCountWithLabel}</a></div> {/block:Quote} {block:Link} <a href="{URL}" {Target}>{Name}</a>{block:Description}{Description}{/block:Description} <div id="perma"><a href="{Permalink}" >{24Hour}:{Minutes} - {NoteCountWithLabel}</a></div> {/block:Link} {block:Chat} <div class="textposts"> {block:Title}{Title}{/block:Title} <div class="lines">{block:Lines}<div class="line {Alt}">{block:Label}<b>{Label} </b>{/block:Label}{Line}</div>{/block:Lines}</div> </div> <div id="perma"><a href="{Permalink}" >{24Hour}:{Minutes} - {NoteCountWithLabel}</a></div> {/block:Chat} {block:Audio} <div class="audio">{AudioPlayerGrey}</div> <center>{block:Caption}{Caption}{/block:Caption}</center> <div id="perma"><a href="{Permalink}" >{24Hour}:{Minutes} - {NoteCountWithLabel}</a></div> {/block:Audio} <div class="video"> {block:Video}{Video-450} {Caption}<div id="perma"><a href="{Permalink}" >{24Hour}:{Minutes} - {NoteCountWithLabel}</a></div>{/block:Video} </div> {block:Answer} <div class="textposts"> <div style="background-color:{color:box}; padding:1px; text-transform:uppercase;"> {Asker}: {Question}</div> <div style="padding:3px; background-color:{color:link hover}; -moz-border-radius:0px; -webkit-border-radius:5px;"><i>{Answer}</i></div> </div> <div id="perma"><a href="{Permalink}" >{24Hour}:{Minutes} - {NoteCountWithLabel} </a></div> {/block:Answer} <BR><BR><BR> </div> <div class="killinhoes"> <b></b> <a href="http://killinhoes.tumblr.com"><font color="{color:text}">Theme</font></a> </div> {/block:Posts} </div> </div> <center>{block:PostNotes} {Caption} {PostNotes}{/block:PostNotes}</center> </div> </body> </html> Thanks again!! |
Lo-Fi Version | Time is now: 29th March 2024 - 05:38 AM |