The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Tumblr theme HTML - adding borders around post images, but excluding borders from text post images?
geth
post Jul 28 2015, 04:35 PM
Post #1





Group: Members
Posts: 3
Joined: 28-July 15
Member No.: 23,159



so my theme's html has borders for post images, which I like, but it also adds borders around text post images, which I dislike. I could just remove the section for borders but I really like the borders around the post images

I can't figure out any way to change this, if there is a way. help?

my blog: http://mistergutsy.tumblr.com/
screenshot of what I'm talking about: http://www.awesomescreenshot.com/showImage?img_id=442549

here's what I think is the relevant section

CODE
#post img {
max-width: 100%;
height: auto;
outline: 1px solid {color:border};}
}


the full code

CODE
<html>
<head>
<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}

<!--
                              Flat OS
                      made by softwaring.tumblr.com
                avaliable at jubileethemes.tumblr.com
                     do not remove theme credits
-->
<a href="http://jubileethemes.tumblr.com" title="theme" style="position: fixed; top: 10px; left: 10px; background: transparent; padding: 2px; text-transform: uppercase; font-size: 14px;">👽</a>
<meta name="color:background" content="#FFF"/>
<meta name="color:post background" content="#FFF"/>
<meta name="color:text" content="#000"/>
<meta name="color:links" content="#000"/>
<meta name="color:borders" content="#000"/>

<meta name="if:show tags" content="1"/>
<meta name="if:sidebar avatar" content="0"/>
<meta name="if:sidebar" content="0"/>
<meta name="if:two column" content="1"/>
<meta name="if:three column" content="0"/>

<meta name="image:background" content=""/>
<meta name="image:avatar" content="http://static.tumblr.com/mqkrxog/vFrn6zfbx/halftone.png"/>

<meta name="text:caption background opacity" content="0.8" />
<meta name="text:post background opacity" content="1" />
<meta name="text:links title" content="links.zip" />
<meta name="text:popup info" content="more info here" />
<meta name="text:Link 1 title" content="I" />
<meta name="text:Link 1 url" content="" />
<meta name="text:Link 2 title" content="II" />
<meta name="text:Link 2 url" content="" />
<meta name="text:Link 3 title" content="III" />
<meta name="text:Link 3 url" content="" />
<meta name="text:Link 4 title" content="IV" />
<meta name="text:Link 4 url" content="" />
<meta name="text:Link 5 title" content="V" />
<meta name="text:Link 5 url" content="" />
<meta name="text:Link 6 title" content="VI" />
<meta name="text:Link 6 url" content="" />

<meta name="color:SP Player Colour" content="" />
<meta name="color:SP Progress Buffer Colour" content="" />
<meta name="color:SP Progress Song Colour" content="" />
<meta name="color:SP Text Colour" content="" />

<meta name="if:SP Enable Autoplay" content="0" />
<meta name="if:SP Enable Cross Page Playback" content="1" />
<meta name="if:SP Enable ID3 Audio Captions" content="1" />
<meta name="if:SP Enable Shuffle" content="0" />
<meta name="if:SP Enable Transparency" content="0" />
<meta name="if:SP Show Click To Play Button" content="0" />
<meta name="if:SP Show Fullscreen Button" content="0" />
<meta name="if:SP Show Playlist Menu" content="1" />
<meta name="if:SP Show Playlist On Play" content="0" />
<meta name="if:SP Show Plays Counter" content="1" />
<meta name="if:SP Show Popout Button" content="1" />
<meta name="if:SP Show LastFM Button" content="1" />
<meta name="if:SP Show Repeat Button" content="1" />
<meta name="if:SP Show Shuffle Button" content="1" />
<meta name="if:SP Show Unplayable Tracks" content="0" />
<meta name="if:SP Show Volume Controls" content="1" />

<meta name="select:SP Buttons Colour" content="white-gray" />
<meta name="select:SP Buttons Colour" content="white-black" />
<meta name="select:SP Buttons Colour" content="black-gray" />
<meta name="select:SP Buttons Colour" content="black-white" />
<meta name="select:SP Buttons Colour" content="blue-white" />

<meta name="text:SP API Blog URL" content="" />
<meta name="text:SP Click To Play Text" content="" />
<meta name="text:SP Dont Play Songs Tagged" content=""/>
<meta name="text:SP Play Songs Tagged" content=""/>
<meta name="text:SP Playlist Menu Height" content="" />


<style type="text/css">
body { background: {color:background} url({image:background})top left fixed repeat; background-size: cover; font-size: 10px; font-family: 'Open Sans', sans-serif; color: {color:text}; letter-spacing: 1px; line-height: 12px; text-align: center;}
/** only works in chrome **/
::selection { background: transparent; color: transparent; text-shadow: 2px 2px rgba({RGBcolor:links}, 1); }
::-moz-selection { background: transparent; color: transparent; text-shadow: 2px 2px rgba({RGBcolor:text}, 0.7);  }
::-webkit-selection { background: transparent; color: transparent; text-shadow: 2px 2px rgba({RGBcolor:text}, 0.7); }
#wrapper { width: 300px;{block:iftwocolumn} width: 590px; {block:iftwocolumn} {block:ifthreecolumn} width: 860px; {block:ifthreecolumn} {block:ifsidebar}margin: 50px auto auto auto;{/block:ifsidebar} {block:ifnotsidebar}margin: 150px auto auto auto;{/block:ifnotsidebar}}
#post { width: 400px; margin: 50px 10px 75px 10px; {block:iftwocolumn} margin: 10px; {block:iftwocolumn} {block:ifthreecolumn} margin: 10px; {block:ifthreecolumn}  padding: 0px 5px 5px 5px; border: 1px solid {color:borders}; background: rgba({RGBcolor:post background}, {text:post background opacity});; overflow: hidden; color: {color:text}; {block:PermalinkPage} width: 500px; {/block:PermalinkPage}}
{block:ifnotsidebar}
#side {{block:IndexPage} width: 390px; {block:iftwocolumn} width: 522px; {block:iftwocolumn} {block:ifthreecolumn} width: 804px; {block:ifthreecolumn} {/block:IndexPage}  {block:PermalinkPage} width: 490px; {/block:PermalinkPage} margin: 10px; padding: 5px; border: 1px solid {color:borders}; background: rgba({RGBcolor:post background}, {text:post background opacity});  overflow: hidden;  position: fixed; margin-top: -120px; z-index: 999;}{/block:ifnotsidebar}{block:ifsidebar}
#side { width: 150px; margin: 10px; padding: 5px; border: 1px solid {color:borders}; background: rgba({RGBcolor:post background}, {text:post background opacity}); overflow: hidden;  position: fixed; margin-top: 250px; margin-left: -195px;  z-index: 999;}{/block:ifsidebar}
#post img {
max-width: 100%;
height: auto;
outline: 1px solid {color:border};}
}
{outline: 1px solid {color:borders};}
.audio {  background: white; padding: 5px;  color: black; text-transform: uppercase; outline: 1px solid {color:borders};}
.posttitle { background: transparent;  padding: 10px; text-transform: uppercase; }
.body {  text-align: justify; padding: 10px;}
a {  color: {color:links}; text-decoration: none;
}
blockquote {  text-align: justify; padding: 5px; margin: 0px;}
ul, li { padding: 5px;   margin: 10px;  text-align: justify;}
.titlebar { padding: 6px; margin: 5px 0px 0px 0px; text-transform: uppercase; text-align: left; font-size: 9px; }
.tags { padding: 5px; background: {color:permalink}; margin: 5px 0px 0px 0px; text-transform: none; text-align: center; font-size: 9px; }
.permaa { text-transform: uppercase; padding-top: 5px;}
.blogtitle { text-transform: uppercase;  font-size: 14px; padding-bottom: 10px; }
ol.notes img { display:none; }
.photoset { text-align: center; border-top: 1px solid {color:borders}; }
.caption { position: absolute; padding: 10px; width: 370px; max-height: 250px; overflow: auto; background: rgba({RGBcolor:background}, {text:caption background opacity}); {block:PermalinkPage} display: none; {/block:PermalinkPage} outline: 1px solid {color:borders}; margin-top: 5px; margin-left: 5px; opacity: 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; }
#post:hover .caption { opacity: 1; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; }
.poplight { text-transform: uppercase; }
#fade { display: none; background: {color:background} url({image:background})top left fixed repeat;  background-size: cover; position: fixed; left: 0; top: 0; opacity: 0.95; width: 100%; height: 100%; z-index: 9999; }
.popup_block{ display: none; padding: 10px; border: 1px solid {color:borders}; background: {color:post background}; overflow: hidden; float: left; position: fixed; top: 40%; left: 51.5%; z-index: 99999; }
.popup_block a { padding: 15px; }
img.btn_close { display: none; }
*html #fade { position: absolute; }
*html .popup_block { position: absolute; }
.pnotes { height: 250px; overflow-y: auto; margin-left: -5px; }
#s-m-t-tooltip { z-index: 99999999; letter-spacing: 1.5px; padding: 5px 15px; text-align:center; color: {color:text};  word-break: break-word; font-family: consolas; max-width: 150px; font-size: 10px; text-transform:uppercase; display:block; margin:10px 10px 10px 15px; border: 1px solid {color:borders}; background: {color:post background}; }
.ava {position: fixed; width: 160px; padding: 5px; border: 1px solid {color:borders}; margin-left: -195px; {block:ifnotsidebaravatar}display: none;{/block:ifnotsidebaravatar} background: {color:transparent}; }
.ava img { width: 100%; outline: 1px solid {color:borders}; } }
{CustomCSS}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('.x').click(function() {
             $('#side').hide() });
         $('.x1').click(function() {
             $('.ava').hide() });
    });
</script>
<script>
$(document).ready(function() {
//
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://png.findicons.com/files/icons/1714/dropline_neu/24/dialog_close.png" class="btn_close" title="Close" alt="Close" /></a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
<!-- this is jquery it makes the theme work, leave this alone -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>
<!-- this is a hosted font from google -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- font awesome to change the font awesome icons go to http://fontawesome.io/icons/ -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div class="ava"><i class="fa fa-picture-o" style="font-size: 14px; float: left;"></i> <a class="x1" style="cursor:pointer;" title="close"><i class="fa fa-times" style="margin-top: -2px;
    padding: 1px; font-size: 12px;
    float: right;
    margin-bottom: 10px;"></i></a>
    <img src="{image:avatar}"/>
</div>
<div id="side" style="text-align: justify; padding: 10px;">   <a class="x" style="cursor:pointer;" title="close"><i class="fa fa-times" style="margin-top: -5px;
    padding: 1px; font-size: 12px;
    float: right;
    margin-bottom: 10px;"></i></a>
<div class="blogtitle"><i class="fa fa-user"></i> <a href="/">{title}</a><br></div>
   <div class="body" style="padding: 5px;">{description}</div>
   <center><a href="#?w=500" rel="03" class="poplight"><i class="fa fa-th-list"></i> {text:links title}</a></center>
</div>
<div id="03" class="popup_block"><i class="fa fa-file-word-o" style="font-size: 14px; float: left;" ></i> <br><br>
{block:iflink1title}<a href="{text:link 1 url}">{text:link 1 title}</a>{/block:iflink1title}{block:iflink2title}<a href="{text:link 2 url}">{text:link 2 title}</a>{/block:iflink2title}{block:iflink3title}<a href="{text:link 3 url}">{text:link 3 title}</a>{/block:iflink3title}{block:iflink4title}<a href="{text:link 4 url}">{text:link 4 title}</a>{/block:iflink4title}{block:iflink5title}<a href="{text:link 5 url}">{text:link 5 title}</a>{/block:iflink5title}{block:iflink6title}<a href="{text:link 6 url}">{text:link 6 title}</a>{/block:iflink6title}<br><br>
{text:popup info}
</div>
{block:Posts}
<!-- the area below removes the VIA and SOURCES of posts -->
{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}
<div id="post">
<div class="titlebar">
          {block:Text}<i class="fa fa-pencil-square-o" style=" float: left; margin-top: -1px;  font-size: 14px; margin-right: 5px;"></i> Notepad{/block:Text}
          {block:Photoset}<i class="fa fa-folder-open-o" style=" float: left; margin-top: -1px;  font-size: 14px; margin-right: 5px;"></i> Photo Folder{/block:Photoset}
          {block:Quote}<i class="fa fa-pencil-square-o" style=" float: left; margin-top: -1px;  font-size: 14px; margin-right: 5px;"></i> Notepad{/block:Quote}
          {block:Link}<i class="fa fa-pencil-square-o" style=" float: left; margin-top: -1px;  font-size: 14px; margin-right: 5px;"></i> Notepad{/block:Link}
          {block:Video}<i class="fa fa-folder-open-o" style=" float: left; margin-top: -1px;  font-size: 14px; margin-right: 5px;"></i> Video File{/block:Video}
          {block:Audio}<i class="fa fa-music" style=" float: left; margin-top: -1px;  font-size: 14px; margin-right: 5px;"></i> Audio.MP3{/block:Audio}
          {block:Photo}<i class="fa fa-picture-o" style=" float: left; margin-top: -1px;  font-size: 14px; margin-right: 5px;"></i> Photo File{/block:Photo}
          {block:Panorama}<i class="fa fa-picture-o" style=" float: left; margin-top: -1px;  font-size: 14px; margin-right: 5px;"></i> Panorama.PNG{/block:Panorama}
          {block:Chat}<i class="fa fa-comments-o" style=" float: left; margin-top: -1px;  font-size: 14px; margin-right: 5px;"></i> Yahoo! Chat{/block:Chat}
          {block:Answer}<i class="fa fa-thumbs-o-up" style=" float: left; margin-top: -1px;  font-size: 14px; margin-right: 5px;"></i> Unknown File{/block:Answer}<br>
  <a href="{Permalink}" title="{NoteCountwithLabel}"><i class="fa fa-times" style="margin-top: -18px;
    padding: 1px; font-size: 12px;
    float: right;
    margin-bottom: 10px;"></i></a>
</div>

{block:Text}
{block:Title}<div class="posttitle">{title}</div>{/block:Title}
<div class="body">{body}
</div>
{/block:Text}

{block:Link}
<div class="posttitle"><a href="{URL}" class="link" {Target}>{Name}</a></div>
{block:Description}
<div class="body">{Description}</div>
{/block:Description}
{/block:Link}

{block:Panorama}
    {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />{LinkCloseTag}
{/block:Panorama}
                
{block:Quote}
<div class="body">
{Quote}
{block:Source}
<p>— {Source}</p>
{/block:Source}</div>
{/block:Quote}

{block:Answer}
<div class="body">
<big>{Question}</big><br>- {Asker}<br> {Answer}
</div>
{/block:Answer}

{block:Photo}
{block:IndexPage}<div class="caption">
<a href="{ReblogURL}" target="_blank" class="details" title="reblog" style="float: right;" ><i class="fa fa-times-circle" style="margin-top: -3px; font-size: 14px;"></i></a>
<i class="fa fa-exclamation-triangle" style=" font-size: 14px; float: left;"></i>

    {block:caption}{caption}{/block:caption}
    <div class="permaa"><br>
    <a href="{Permalink}">{block:Date} {ShortMonth} {DayofMonth} {ShortYear} {/block:Date}</a>
</div>


</div>{/block:IndexPage}
{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img src="{PhotoURL-HighRes}"  alt="{PhotoAlt}"/>
{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
{block:IndexPage}</a>{/block:IndexPage}
{/block:Photo}

{block:Chat}
<div class="body">
{block:Title}
{Title}
{/block:Title}
{block:Lines}
{block:Label}
<b>{Label}</b>
{/block:Label}
{Line}<br>
{/block:Lines}

</div>
{/block:Chat}

{block:Video}
{Video-400}
{/block:Video}

{block:Photoset}
{block:IndexPage}<div class="photoset">
<div class="caption">
<a href="{ReblogURL}" target="_blank" class="details" title="reblog" style="float: right;" ><i class="fa fa-times-circle" style="margin-top: -3px; font-size: 14px;"></i></a>
<i class="fa fa-exclamation-triangle" style=" font-size: 14px; float: left;"></i>

    {block:caption}{caption}{/block:caption}
    <div class="permaa">
    {block:Date} {ShortMonth} {DayofMonth} {ShortYear} {/block:Date}
</div>


</div>
{Photoset-400}</div>{/block:IndexPage}
{block:PermalinkPage} {Photoset-500} {/block:PermalinkPage}
{/block:Photoset}
        
{block:Audio}
<div class="audio">
{block:AlbumArt}<img src="{AlbumArtURL}" style="outline: 0;">{/block:AlbumArt}
{AudioPlayerWhite}
{block:Artist}{Artist}{/block:Artist} - {block:TrackName}{TrackName}{/block:TrackName}
</div>
{/block:Audio}


{block:HasTags}{block:ifshowtags}
<div class="tags"><i class="fa fa-tags" style="float: left; font-size: 14px;"></i>
{block:Tags}<a href="/tagged/{Tag}" target="blank">#{Tag}</a> {/block:Tags}
</div>{/block:ifshowtags}
{/block:HasTags}

{block:PermalinkPage}
Posted {TimeAgo} with {NoteCountWithLabel}<br>{block:RebloggedFrom}Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br>Originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
{block:PostNotes}
<div class="pnotes">{PostNotes}</div>{/block:PostNotes}
{/block:PermalinkPage}
</div>

{/block:Posts}
{block:NextPage}<div id="page-nav"><a href="{NextPage}"></a>{/block:NextPage}</div>
</body>
</html>


This post has been edited by geth: Jul 28 2015, 04:36 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
geth
post Jul 28 2015, 06:29 PM
Post #2





Group: Members
Posts: 3
Joined: 28-July 15
Member No.: 23,159



here's the screenshot if you don't wanna make an account, sorry

http://i.imgur.com/tRZLctf.png
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 19th March 2024 - 02:25 AM