tumblr theme help ◕ ‿ ◕, border around imageee |
tumblr theme help ◕ ‿ ◕, border around imageee |
bbboring |
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}— {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} <font color="#2D2828"></font> {MonthNumber}-{DayOfMonth}-{ShortYear}{block:Date} {block:NoteCount} <font color="#2D2828"></font> {NoteCountWithLabel} {/block:NoteCount}{/block:Date}</p> </div> {/block:Posts} <div class="footer"> {block:PreviousPage}<a href={PreviousPage}>newer</a> {/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> |
Darin McGrew |
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/ |
42Hoopy |
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. |
Lo-Fi Version | Time is now: 19th April 2024 - 05:24 PM |