ISSUE WITH PICTURE LAYOUT

126 views

Skip to first unread message

madm...@gmail.com

unread,

Sep 16, 2012, 5:38:47 AM9/16/12

to tumblr...@googlegroups.com

Hi Everyone,

I have the star-aurora theme and I am having a small problem... When I edited the width of my post in the html code, only the text got wider. I want the pictures to be just as wide. They have a complex layout so I am not sure if maybe I have to do some major code changes but I really want them to appear with the same layout but just as wide as the text. The only time anything changes with the pictures is when I alter the number in "block:Photoset}{block:IndexPage}{Photoset-250}" (this appears near the bottom) but when I change the number 250 the photos simply dissappear, even if I just change it to 251. I have tried testing all types of numbers but none seem to fix this problem, or even affect the pictures of my post. Also, I bought the domain name volandovamos.com but it always re-routes to volandovamos.tumblr.com, how do I prevent .tumblr from appearing?

Here is my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>{Title}{block:SearchPage} | {SearchQuery}{/block:SearchPage}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title>

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

@import url(http://static.tumblr.com/jw8fmba/pXhlt5pzb/bebasneue.css);

html,body {

margin: 0;

font-size: 15px;

line-height: 160%;

height: 100%;

}

p {

text-shadow : 2px 2px 1px #000;

}

* {

font-family: Calibri, Helvetica, Arial, sans-serif;

color: {color:Body text};

}

a img {

border: none;

}

a {

color: inherit;

font-size: inherit;

}

blockquote {

margin: 0;

padding: 0 0 0 9px;

border-left: 1px #CCC dotted;

}

.header {

position: relative;

width: 1040px;

margin: 22px auto 25px auto;

text-align: center;

}

.header a {

text-decoration: none;

}

.header img {

max-width: 100%;

}

.header .title h1 {

margin: 0;

line-height: 100%;

font-family: 'BebasNeueRegular', Arial, sans-serif;

text-transform: uppercase;

font-weight: normal;

font-size: {text:Blog title size};

color: {color:Blog title};

}

.header p {

margin: 0;

}

.header .menu_item {

margin: 0 5px;

{block:IfMenuTextSize}font-size: {text:Menu text size}{/block:IfMenuTextSize}

}

.posts {

position: relative;

margin: 25px auto;

{block:IndexPage}

width: 1040px;

{/block:IndexPage}

{block:PermalinkPage}

width: 550px;

{/block:PermalinkPage}

height: 105%;

}

.post {

float: left;

position: relative;

margin: 5px;

}

.post h2 {

margin: 0;

font-size: 16px;

line-height: 18px;

letter-spacing: 1px;

font-weight: normal;

}

.post h2.quote {

font-family: Georgia, "Times New Roman", Times, serif;

letter-spacing: 0;

font-style: italic;

}

.post p,.post li {

line-height: 175%;

}

.post p {

margin: 10px 0 5px 0;

}

.post ol,.post ul {

margin: 3px 0;

padding: 0;

}

.post li {

margin: 2px 35px;

}

{block:IndexPage}.post .controls {

position: absolute;

top: 50%;

margin-top: -10px;

left: 0;

width: 100%;

text-align: center;

display: none;

}

.post:hover .controls {

display: block;

}

.post .controls .item {

display: inline-block;

position: relative;

vertical-align: middle;

}

.post .controls .like {

background-image: url('http://static.tumblr.com/jw8fmba/JQllum7dg/like.png');

width: 21px;

height: 20px;

margin-right: 5px;

}

.post .controls .reblog {

background-image: url('http://static.tumblr.com/jw8fmba/bPzlum7er/reblog.png');

width: 24px;

height: 20px;

}

.post .controls .note_count {

background-image: url('http://static.tumblr.com/jw8fmba/Iosm7ri3a/note_count_middle.png');

height: 16px;

color: #FFF;

font-weight: bold;

font-size: 11px;

padding: 2px 5px;

margin-left: 7px;

line-height: 1.6;

}

.post .controls .note_count:before {

content: '';

background-image: url('http://static.tumblr.com/jw8fmba/dIim7ri67/note_count_left.png');

height: 20px;

width: 5px;

position: absolute;

top: 0px;

left: -5px;

}

.post .controls .note_count:after {

content: '';

background-image: url('http://static.tumblr.com/jw8fmba/gtqm7ri8i/note_count_right.png');

height: 20px;

width: 2px;

position: absolute;

top: 0px;

right: -2px;

}{/block:IndexPage}

.post .photo {

position: relative;

overflow: hidden;

}

.post .photo .photo_info {

position: absolute;

top: 50%;

left: 0;

width: 100%;

height: 50px;

margin: -25px 0 0 0;

text-align: center;

z-index: 10;

opacity: 0;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

{block:PermalinkPage}

display: none;

{/block:PermalinkPage}

}

.post:hover .photo .photo_info {

opacity: 1;

}

.post .photo .photo_info a {

color: #FFF;

text-decoration: none;

}

.post .photo .photo_info h2 a {

margin: 0;

line-height: 100%;

font-family: 'BebasNeueRegular', Arial, sans-serif;

text-transform: uppercase;

font-size: 50px;

color: #FFF;

}

.post img.main_photo {

width: 100%;

float: left;

}

.post img {

max-width: 100%;

height: auto;

}

.post .photo img {

opacity: 1;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

margin: 0;

line-height: 0;

}

.post:hover .photo img {

{block:IndexPage}

opacity: 0.5;

{/block:IndexPage}

}

.post .player {

padding: 0 10px;

background: #FFF;

margin: 0;

}

.post .lines {

margin: 0 0 5px 0;

}

.post .lines .line {

padding: 5px 10px;

}

.post .lines .odd {

}

.post .lines .even {

background: {color:Body text};

color: {color:Background};

}

.post .lines .even * {

color: {color:Background};

}

.post ol.notes {

padding: 0;

list-style-type: none;

}

.post ol.notes li.note {

border-bottom: solid 1px #F6F6F6;

padding: 6px 0;

margin: 0 !important;

}

.post ol.notes li.note img.avatar {

vertical-align: -4px;

margin-right: 10px;

width: 16px;

height: 16px;

}

.post ol.notes li.note span.action {

}

.post ol.notes li.note .answer_content {

font-weight: normal;

}

.post ol.notes li.note blockquote {

border-color: #F6F6F6;

padding: 4px 10px;

margin: 10px 0px 0px 25px;

}

.post ol.notes li.note blockquote a {

text-decoration: none;

}

.pagination {

display: none;

}

body{background:url({image:Background}) {color:Background} fixed center 0}.post{width:{block:IndexPage}370{/block:IndexPage}{block:PermalinkPage}500{/block:PermalinkPage}px}

{CustomCSS}

</style>

</head>

{block:Pagination}<ul class="pagination">

<li>{block:NextPage}<a href="{NextPage}" class="pagination_nextlink">Next</a>{/block:NextPage}</li>

</ul>{/block:Pagination}

<a class="title" href="/">{block:IfHeaderImage}<img src="{image:Header}" />{/block:IfHeaderImage}{block:IfNotHeaderImage}<h1>{Title}</h1>{block:IfNotHeaderImage}</a>

<p>{block:AskEnabled}<a class="menu_item" href="/ask">{AskLabel}</a>{/block:AskEnabled}{block:SubmissionsEnabled}<a class="menu_item" href="/submit">{SubmitLabel}</a>{/block:SubmissionsEnabled}{block:HasPages}{block:Pages}<a class="menu_item" href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}{block:Pagination}{block:PreviousPage}<a {block:IfInfiniteScroll}style="display:none"{/block:IfInfiniteScroll} href="{PreviousPage}">{lang:Previous page}</a>{/block:PreviousPage}{block:NextPage}<a {block:IfInfiniteScroll}style="display:none"{/block:IfInfiniteScroll} href="{NextPage}">{lang:Next page}</a>{/block:NextPage}{/block:Pagination}<a class="menu_item" href="/archive">{lang:Archive}</a></p>

</div>

{block:Posts}

<div class="post {block:IfInfiniteScroll}load{/block:IfInfiniteScroll}" id="post_{PostID}">{block:IndexPage}<div class="controls" {block:Photo}style="display: none"{/block:Photo}><a class="like item" onclick="LikePost('{PostID}','{ReblogURL}',this); $(this).css('background-image', 'url(http://assets.tumblr.com/images/iframe_like_active_alpha.png)')"></a><a href="{ReblogURL}?redirect_to=http%3A%2F%2F{Name}.tumblr.com%2Fpage%2F{CurrentPage}" class="reblog item" target="_blank"></a><a href="{Permalink}"><div class="note_count item" id="note_count_{PostID}">{NoteCount}</div></a> </div>{/block:IndexPage}{block:Text}{block:Title}<h2>{Title}</h2>{/block:Title}{Body}{block:More}<h3><a href="{Permalink}">{lang:Read more}</a></h3>{/block:More}{/block:Text}{block:Answer}<p><strong>{lang:Asker asked}: {Question}</strong></p><p>{Answer}</p>{/block:Answer}{block:Chat}{block:Title}<h2>{Title}</h2>{/block:Title}<div class="lines">{block:Lines}<div class="line {Alt}">{block:Label}{Label}{/block:Label} <em>{Line}</em></div>{/block:Lines}</div>{/block:Chat}{block:Quote}<h2>"{Quote}"</h2>{block:Source}<p>- {Source}</p>{/block:Source}{/block:Quote}{block:Link}<h2><a href="{URL}" {Target}>{Name}</a></h2>{block:Description}{Description}{/block:Description}{/block:Link}{block:Photo}<div class="photo"><div class="photo_info"><h2><a href="{Permalink}">{NoteCount}</a></h2></div>{LinkOpenTag}<img src="{block:IndexPage}{PhotoURL-250}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-500}{/block:PermalinkPage}" alt="{PhotoAlt}" class="main_photo" />{LinkCloseTag}</div>{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:Photo}{block:Photoset}{block:IndexPage}{Photoset-250}{/block:IndexPage}{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}{block:Video}{block:IndexPage}{Video-250}{/block:IndexPage}{block:PermalinkPage}{Video-500}{/block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:Video}{block:Audio}{block:AlbumArt}<a href="{Permalink}"><img src="{AlbumArtURL}" class="main_photo" /></a>{/block:AlbumArt}<div class="player">{AudioPlayerWhite}</div>{block:Caption}{Caption}{/block:Caption}{/block:Audio}</div>

{block:PostNotes}<div class="post">

{block:NoteCount}<h2>{NoteCountWithLabel}</h2>{/block:NoteCount}

{PostNotes}

</div>{/block:PostNotes}

{/block:Posts}

</div>

{block:IndexPage}

$(function(){var $container = $('.posts').css({ opacity: 0 }); $container.imagesLoaded(function(){ $container.animate({ opacity: 1 }); $container.masonry({itemSelector:'.post',columnWidth: 260});});$container.infinitescroll({navSelector:'.pagination',nextSelector:'.pagination li a.pagination_nextlink',itemSelector: '.load',loading: {img:'http://static.tumblr.com/glziqhp/eRkls6pz6/white-90perc-opacity.png',donetext:''}},function( newElements ) { var $newElems = $( newElements ).css({ opacity: 0 });$newElems.imagesLoaded(function(){$newElems.animate({ opacity: 1 });$container.masonry( 'appended', $newElems, true );});});});

</script>

{/block:IndexPage}

</body>

</html>

Any help would be greatly appreciated!

Kind Regards,

Rod

Sean Zhu

unread,

Sep 17, 2012, 6:46:31 PM9/17/12

to tumblr...@googlegroups.com, madm...@gmail.com

{Photoset-251} doesn't work because Photoset blocks come in fixed sizes of 700, 500, 400, and 250. Any other size will not render.

I also answered your question in your other post: groups.google.com/d/msg/tumblr-themes/zyP6vOTvTEc/cybROYCK2ZYJ

Sean Zhu

unread,

Sep 17, 2012, 6:47:44 PM9/17/12

to tumblr...@googlegroups.com, madm...@gmail.com

To change your URL to a custom domain, see here: tumblr.com/docs/en/custom_domains

On Sunday, September 16, 2012 2:38:47 AM UTC-7, madm...@gmail.com wrote:

madm...@gmail.com

unread,

Sep 17, 2012, 7:20:14 PM9/17/12

to tumblr...@googlegroups.com, madm...@gmail.com

Thank you SEAN!!!

Reply all

Reply to author

Forward

0 new messages