3 Replies - 615 Views - Last Post: 24 February 2014 - 12:16 PM

#1 kkslider55  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 19-February 11

Border questions, having trouble with Tumblr.

Posted 20 February 2014 - 01:44 AM

Hey guys, so I'll preface this with two things.

-I'm really, really new to HTML and CSS and web-design in general. Like, a puppy without it's eyes open-level new.

-I'm not that new to code and programming, I do a lot of Java and Ruby, and I'm getting into C++

Which is why this language is driving me up the wall! I've never had a language make me feel so stupid before! I have a ton of respect for you guys, this stuff is not easy in the least bit!

But the point stands, I can hopefully at least use common sense to get this fixed with your guy's help, and I feel like it's probably the most simple solution.


Okay, so for me personally, one of the best ways to learn after grasping the basics, is to take something somebody else has programmed, and fiddle around with it. ESPECIALLY with a visual language like CSS. You know, add lines, delete lines, see what disappears where, and what appears where, and such.

I found this fantastic theme for my Tumblr, and it's been helping a lot. But one thing I just can't figure out is the borders that appear around the picture posts. I would love to have them appear around EVERY post, not just when I upload and caption a picture.

Here's the code for the Theme.

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="if:Show People I Follow" content="0"/>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
<meta name="viewport" content="width=820" />
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}

<title>{Title}</title>

<style type="text/css">
body {
background:url('http://static.tumblr.com/vwgpptv/Jdtljzm7g/sethpipboy.png') bottom right no-repeat,
url('http://static.tumblr.com/vwgpptv/Qgpljzfhc/sethsbackground.png') center no-repeat;
background-attachment: fixed;
color:#47ae47; 
overflow-x:hidden;
}

img {border: none;}

#wrapper {
width: 100%;
}

.container {
width: 900px; 
height:auto;
padding: 1px;
font-family: Courier New;
font-size : 12pt;
text-align: justify;
line-height : 10px;
vertical-align: top;
-webkit-transition: opacity 0.5s linear; 
opacity: 0.70;
}


.content {
position: absolute;
top: 42px !important;
margin-top: 0px !important;
left: 200px;
width: 700px;
padding: 10px;
line-height: 100%;
vertical-align: top;
}

.content img {
max-width: 660px;
height: auto;
}

.title {
top: 0px;
left: 0px;
height: 32px;
width: 900px;
line-height: 32px;
padding: 1px;
padding-left: 6px !important;
display: block;
font-size: 28pt;
font-weight: bold;
background-image:url('http://static.tumblr.com/vwgpptv/vaBljzfw0/sethtitlebg.png');
background-position: top right;
background-repeat: no-repeat;
text-transform: uppercase;
text-shadow: 2px 2px 4px #000000;
}


.sidebar {
position: relative;
width: 165px;
left: 0px;
top: 0px;
padding: 10px;
}

.pic {
width: 150px; 
margin: 0 auto;
padding-left: 13px; 
padding-top: 8px; 
padding-bottom:8px; 
border: 1px solid;
background-image:url('http://static.tumblr.com/vwgpptv/CHVljzhi4/sethlinkbg2.png');
}

.pic img {
margin-left: 5px;
}


h1 {
text-align : left;
line-height : 22px;
font-weight:bold;
padding-top:0px;
padding-bottom:0px;
margin: 0px;
font-size : 18pt;
letter-spacing : -2pt;
text-decoration: none;
border-top: 2px solid;
border-right: 2px solid;
text-shadow: 2px 2px 4px #000000;
}

a.post:link, a.post:hover, a.post:active, a.post:visited {
display: block;
text-align : left;
line-height : 22px;
font-weight:bold;
font-size : 18pt;
letter-spacing : -2pt;
color:#47ae47;
text-decoration: none;
border-top: 2px solid;
border-right: 2px solid;
text-shadow: 2px 2px 4px #000000;
}

h2 {
letter-spacing : -1pt;
font-weight : bold;
line-height : 18px;
text-align : left;
padding-top:0px;
text-decoration: none;
padding-bottom:0px;
margin: 0px;
font-size : 14pt;
border-top: 1px solid;
border-right: 1px solid;
text-shadow: 2px 2px 4px #000000;
}

.description {
text-align: left;
font-size: 10pt;
}

.date a{
padding: 0px;
display: block;
line-height: 100%;
text-transform: lowercase;
font-size: 9pt;
color: #555555;
text-align: right;
}

.asker {
font-size: 14pt;
font-weight: bold;
text-transform: lowercase;
line-height: 100%;
min-height: 25px;
}

.asker a {
border: 0px !important;
}

.answer {
margin-top: -10px !important;
font-style: italic;
line-height: 100%;
}

.photo {
border: 2px solid;
background-image:url('http://static.tumblr.com/vwgpptv/CHVljzhi4/sethlinkbg2.png');
padding: 15px;
font-size: 10pt;
line-height: 12px;
}


.qt{
font-weight: bold;
padding: 2px;
font-size: 14pt;
letter-spacing: 1pt;
border-top: 2px solid;
border-right: 2px solid;
}

.source {
font-style: italic;
size: 10pt;
display: block;
text-align: right;
padding-right: 3px;
line-height: 14px;
}

a:link, a:visited, a:active {
color:#999999;
text-decoration: none;
}

a:hover {
font-style: normal:
color:#0bbf5e;
}

a.nav, a.nav:active, a.nav:link, a.nav:visited {
font-size : 10pt;
color:#47ae47;
text-transform : lowercase;
font-weight : bold;
text-decoration : none;
display : block !important ;
line-height : 15px;
text-align : left;
margin: 0;
padding-left: 14px !important; 
padding: 2px;
background-image:url('http://static.tumblr.com/vwgpptv/Aotljzhc7/sethlinkbg.png');
background-repeat: no-repeat;
background-position: center left;
}

a.nav:hover {
font-style: normal;
background-image:url('http://static.tumblr.com/vwgpptv/CHVljzhi4/sethlinkbg2.png');
border: 1px solid;
padding: 2px;
padding-left: 2px !important;
text-transform: uppercase;
}

b, strong {
font-size: 14pt;
font-weight: bold;
}

i, em {
color:#0bbf5e;
}

.following {
width: 163px;
overflow: hidden;
border: 1px solid;
background-image:url('http://static.tumblr.com/vwgpptv/CHVljzhi4/sethlinkbg2.png');
padding-top: 5px;
padding-bottom: 5px;
}	

{CustomCSS}
</style>

<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>

</head>
<body>
<div id="wrapper">
<div class="container">
<span class="title">{Title}</span>

<div class="sidebar">
<div class="pic">
<img src="{PortraitURL-128}"></div>

<p>
<h2>Information</h2>
<div class="description">
{block:Description}
{Description}
{/block:Description}
</div>

<p>
<h2>Navigate</h2>
<a href="/index" class="nav">Home</a>
<a href="/archive" class="nav">Archive</a>
<a href="{RSS}" class="nav">Feed</a>
{block:AskEnabled}
<a href="/ask" class="nav">{AskLabel}</a>
{/block:AskEnabled}
{block:HasPages} 
{block:Pages} 
<a href="{URL}" class="nav">{Label}</a>
{/block:Pages}
{/block:HasPages}
<a href="http://heyhobo.tumblr.com" class="nav">Theme</a>


{block:IfShowPeopleIFollow}
<p>
<h2>Following</h2>
{block:Following}
<div class="following"><center>
{block:Followed}<a href="{FollowedURL}"><img src="{FollowedPortraitURL-24}" border="0"></a>{/block:Followed} </center></div>
{/block:Following}
{/block:IfShowPeopleIFollow}
</div>

<div class="content">
<div class = "autopagerize_page_element" >
{block:Posts}

{block:Text}
{block:Title}<h1>{Title}</h1>{/block:Title}
{Body}
{/block:Text}

{block:Link}
<a href="{URL}" class="post">{Name} ?</a>
{/block:Link}

{block:Photo}
<div class="photo">
{LinkOpenTag}<center><img src="{PhotoURL-500}" alt="{PhotoAlt}" border="0" width="700"></center>{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Photo}

{block:Quote}
<div class="qt">
<quote>"{Quote}"
</div>
<div class="source">
{block:Source}
-{Source}
{/block:Source}</div>
</quote>
{/block:Quote}

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

{block:Audio}
<div class="photo">
<center>{AudioPlayerblack}</center><br>
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Audio}

{block:Video}
<div class="photo">
<center>
{Video-500}
</center>
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Video}

{block:Answer}
<div class="asker"><img src="{AskerPortraitURL-24}" align="left" alt="Asker" style="margin-right: 5px;" /> {Asker}: {Question}</div><br>
<div class="answer">{Answer}</div>
{/block:Answer}

<div class="date"><a href="{permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>

{block:PostNotes}{PostNotes}{/block:PostNotes}
<p>
{/block:Posts}
</div>
</div>
</div>
</div>
</body>
</html>



Here's the code for the pictures in particular:

.photo {
border: 2px solid;
background-image:url('http://static.tumblr.com/vwgpptv/CHVljzhi4/sethlinkbg2.png');
padding: 15px;
font-size: 10pt;
line-height: 12px;
}


And I'm just not sure! I can't find any class that seems to be controlling the text-based post. I've tried altering every single paragraph, I'm just stumped!

Here's the link to my Tumblr if you need a visual reference: My Blog

And if I can ask two things. Firstly, if I'm doing anything wrong or if you need any more information, please let me know so I can provide it/do better next time I ask a question.

And secondly, please try and explain it to me in I guess, "Stupid-people terms." I am really struggling with CSS, but I have a huge desire to learn!

Thank you very m!uch

Is This A Good Question/Topic? 0
  • +

Replies To: Border questions, having trouble with Tumblr.

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9073
  • View blog
  • Posts: 34,115
  • Joined: 12-June 08

Re: Border questions, having trouble with Tumblr.

Posted 20 February 2014 - 09:40 AM

You can either set the border size in the img itself, or use CSS.

http://css-tricks.co...-image-borders/

In your example your images with the border are in a div class called 'photo'. The ones that do not have a border are not.

I don't know what you are doing in your code or how you have it dynamically assign borders or not, but that's the issue.
Was This Post Helpful? 1
  • +
  • -

#3 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Border questions, having trouble with Tumblr.

Posted 20 February 2014 - 03:41 PM

The text based posts don't appear to have their own class in your tumblr theme. The text is being styled by the .container class in your theme.
{block:Text}
{block:Title}<h1>{Title}</h1>{/block:Title}
{/block:Text}


To style the text posts, add a div and create your own css class, such as:
{block:Text}
<div class="text-post">
{block:Title}<h1>{Title}</h1>{/block:Title}
</div>
{/block:Text}


And the CSS..
.text-post {
 font: 'Arial', sans-serif;
 font-size: 1em;
}


I hope this helps.
Was This Post Helpful? 0
  • +
  • -

#4 kkslider55  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 19-February 11

Re: Border questions, having trouble with Tumblr.

Posted 24 February 2014 - 12:16 PM

Sorry about the delay in response!

Thanks a ton guys! It didn't work when plugged directly into Tumblr's HTML, but you guys have steered me in the right direction enough that I feel with some reading and research, I'll be able to figure this out!

Thanks again, I live Dream in Code, and all of it's awesome users. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1