The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> tumblr theme help ◕ ‿ ◕, border around imageee
bbboring
post Aug 24 2011, 01:33 AM
Post #1





Group: Members
Posts: 2
Joined: 24-August 11
Member No.: 15,235
I need to figure out how to add a border around just the --image-- on my tumblr theme ?
(i already edited my theme ALOT)

and how to add a background image to it? so it's not just a gray background? and i don't want the background to repeat

helpppp (◡‿◡✿)




<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<body oncontextmenu="return false;"> <body oncontextmenu="return false;">


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="if:Show about" content="1"/>
<meta name="if:Show RSS" content="1"/>
<meta name="if:Show archive" content="1"/>
<meta name="if:Show ask me" content="1"/>
<meta name="color:Page background" content="#A9E3C8">

<title>{Title}</title>
<link rel="shortcut icon" type="image/x-icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<script src="http://static.tumblr.com/2fqlbo1/FNOllt5fw/mootools-core-1.3.1-full-compat.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/2fqlbo1/3VMllt5gm/mootools-more-1.3.1.1.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/2fqlbo1/Ri0lpb4si/slasher.js" type="text/javascript"></script>

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

<script type="text/javascript">
</script>

<STYLE type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow-x: hidden; color: #2D2828}
#container {width: 800px; margin-left: auto; margin-right: auto;}
#blood {position: absolute; margin-top: 0px; margin-left: 0px; padding: 0; z-index: 200; width: 100%;}
#about {position: absolute; height: 0px; width: 100%; background-color: #D6AFAE; z-index: 200; overflow: hidden;}
#header {margin-top: 0px; letter-spacing: 5px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 80px; color: #2D2828; text-align: center; font-weight: 900; text-transform: uppercase;}
#menu {text-align: center; margin-top: 0px; padding-bottom:20px; font-family: "Courier New", Courier, Sans-serif; letter-spacing: 2px; font-size: 15px; color: #2D2828; cursor: default;}
.links {font-family: "Courier New", Courier, Sans-serif; font-size: 15px; letter-spacing: 2px; color: #2D2828; cursor: pointer; text-decoration: none;}
.text {font-family: "Courier New", Courier, Sans-serif; letter-spacing: 2px; font-size: 15px; color: #2D2828; cursor: default;}
#description {width: 500px; margin-left: auto; margin-right: auto;}
#menu_box {position: absolute; margin-left: -60px; padding: 0; margin-top: -90px; z-index: 250; width: 800px;}
a {color: #2D2828; background-color: transparent; text-decoration: none;}
a:hover {background-color:#000000; text-decoration: none;}

a img { border-width: 0px; }


#posts {
width: 700px;
margin-left: -60px;
position: absolute;
}

#posts .post {
margin: 98px 0 0 0;
font-family: "Courier New", Courier, Sans-serif;
font-size: 15px;
letter-spacing: 2px;
}

#posts .post img {
max-width: 700px;
}

#posts .post h3 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #2D2828;
text-transform: uppercase;
font-weight: 900;
font-size: 25px;
margin: 0;
}

#posts .post a.h3 {
color: #2D2828;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
text-transform: uppercase;
font-weight: 900;
padding: 2px;
font-size: 25px;

margin: 0;
}


#posts .post a.h3.link {
text-decoration: none;
}

#posts .post a.h3.link:hover {
background-color: #D6AFAE;
}

#posts .post blockquote {
border-left: 2px solid #2D2828;
padding: 0 0 0 15px;
margin-left: 0px;
}

#photo {width: 700px; overflow: hidden;}

#posts .post table {
margin: 10px 0 0 0;
border-collapse: collapse;
}

#posts .post table tr {
margin: 1px 0;
}

#posts .post table tr td {
padding: auto;
vertical-align: top;
}

#posts .post table tr td.name {
text-align: right;
padding: 1px 15px;
}

#posts .post table tr td.words {
width: 100%;
text-align: left;
padding: 1px;
}

ol.notes {
margin: 0 0 50px 0;
padding: 0 0 0 0;
}

ol.notes img {
display: none;
}

.footer {
padding:50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #2D2828;
text-transform: uppercase;
font-weight: 900;
font-size: 15px;
letter-spacing: 2px;
}





{CustomCSS}




</STYLE>
</head>


<div id="about" onclick="closeAbout()">
<div id="description">
{block:Description}<p class="text" style="margin-top: 70px;">{Description}</p>{/block:Description}
</div>
</div>

<div id="container">
<p id="header"></p>
<div id="menu_box">


<p id="menu">{block:IfShowabout}<a onclick="showAbout()" style="cursor: pointer"></a>{/block:IfShowabout}{block:IfShowarchive}<a class="links" href="/archive"></a>{/block:IfShowarchive}{block:IfShowRSS}<a class="links" href="{RSS}"></a>{/block:IfShowRSS}{block:IfShowaskme}<a class="links" href="/ask"></a>{/block:IfShowaskme}{block:HasPages}{block:Pages}<a class="links" /{Label}/</a>{/block:Pages}{block:HasPages}</p>
<p class="links" style="padding-bottom: 20px; margin-top: -20px; text-align: center;"> </a></p>
</div>

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

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

{block:Photo}
<div id="photo">
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{LinkCloseTag}
<p>{block:Caption}{Caption}{/block:Caption}</p>
</div>
{/block:Photo}

{block:Quote}
<h3>“{Quote}”</h3>
<p>{block:Source}&mdash; {Source}{/block:Source}</p>
{/block:Quote}

{block:Chat}
{block:Title}<a href="#" class="h3">{Title}</a>{/block:Title}
<table>
{block:Lines}
<tr>
{block:Label}<td class="name">{Label}</td>{block:Label}
<td class="words">{Line}</td>
</tr>
{/block:Lines}
</table>

{/block:Chat}

{block:Audio}
{AudioPlayerBlack}
{block:Caption}{Caption}{/block:Caption}
{/block:Audio}

{block:Video}
{Video-500}
{block:Caption}{Caption}{/block:Caption}
{/block:Video}
<p><a href="{Permalink}">{block:Date}

{24Hour}:{Minutes}&nbsp;&nbsp;<font color="#2D2828"></font>

{MonthNumber}-{DayOfMonth}-{ShortYear}{block:Date}

{block:NoteCount}&nbsp;<font color="#2D2828"></font>&nbsp;{NoteCountWithLabel}

{/block:NoteCount}{/block:Date}</p>

</div>

{/block:Posts}

<div class="footer">




{block:PreviousPage}<a href={PreviousPage}>newer</a>&nbsp;{/block:PreviousPage}{block:NextPage}<a href={NextPage}>///</a>{/block:NextPage}</div>
</div>

</div>




<style type="text/css">
A:link {background: #9A3467; text-decoration: none}
A:visited {background: #9A3467; text-decoration: none}
A:active {background: #9A3467; text-decoration: none}
A:hover {background: orange; font-weight:bold; color: green;}
</style>

















</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Aug 24 2011, 02:00 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Do you mean something like this?
http://meyerweb.com/eric/css/edge/complexspiral/demo.html

Or something like this?
http://www.alistapart.com/articles/customcorners/
http://www.alistapart.com/articles/customcorners2/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
42Hoopy
post Sep 23 2011, 03:53 AM
Post #3





Group: Members
Posts: 6
Joined: 23-September 11
Member No.: 15,464
For the background image, locate the body section of your CSS and add this to it:
background:url(http://image url here);
background-repeat:no-repeat;
Other background CSS attributes are listed here: http://www.w3schools.com/css/css_background.asp

As for the borders around your images, I assume you mean your photo posts. You can change the CSS line...
a img { border-width: 0px; }
to have anything higher than 0 and a border will appear around your photo posts.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 06:50 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC