Editing A Theme For A Blog - Topic

Member

Posts: 1,505

Joined: Oct 25 2006

Gold: 1,073.00

Jul 28 2013 12:49pm

Right so I was looking for a new theme for the blog since most others are pretty terrible, found one I find agreeable.
The makers made two grid themes but unfortunately the 1 that I prefer has 3 coloumns and the other I'm no fan of, has the 4 that I needed and each post displayed is larger.

So simply put, I was looking where the right variables are to adjust the post's size (for link/video/text posts) to make them display larger, and also how to add 1 extra coloumn (thats it).
A tutorial mentioned elsewhere said you only need to increase the width of the page and it will add extra coloumns on its own automatically but I cannot find the appropriate indexpage variables for the width (even tried adjust everyone of them to see which one it is...didn't work).

So I'm a bit stuck, here's the code.

Main Grid Theme - http://themestatic.tumblr.com/post/49484575690/modern-grid
One that has 4 columns + Larger post size - http://themestatic.tumblr.com/post/35875604203/magazine-theme

Quote (Code)

<!DOCTYPE html>
<html>
<head>

<meta name="color:Body background" content="#262630" />
<meta name="color:Body links hover" content="#959697" />
<meta name="color:Body links" content="#eeebeb" />
<meta name="color:Body text" content="#d6d6d6" />
<meta name="color:Masthead background" content="#faf7f7" />
<meta name="color:Masthead plus button background" content="#ece9e9" />
<meta name="color:Masthead plus button links" content="#464747" />
<meta name="color:Masthead plus button text" content="#7e8080" />
<meta name="color:Masthead plus button" content="#d6d6d5" />
<meta name="color:Masthead site name" content="#202020" />
<meta name="color:Navigation bar background" content="#23232c" />
<meta name="color:Navigation bar links" content="#bbbcbd" />
<meta name="color:Text highlight" content="#80b3ec" />
<meta name="if:Alternate theme attribution" content="1"/>
<meta name="if:Fixed position pages bar" content="0"/>
<meta name="if:Invert icons" content="0"/>
<meta name="if:Masthead Tumblr avatar" content="1"/>
<meta name="if:Masthead site name" content="1"/>
<meta name="if:Permalink post navigation" content="0"/>
<meta name="if:Plus button People I Follow list" content="0"/>
<meta name="if:Plus button RSS link" content="1"/>
<meta name="if:Plus button archive pages link" content="1"/>
<meta name="if:Plus button search box" content="1"/>
<meta name="if:Post background" content="0"/>
<meta name="if:Post icons on hover" content="1"/>
<meta name="if:Infinite scroll" content="1"/>
<meta name="image:Background" content="" />
<meta name="image:Logo" content="" />
<meta name="image:Masthead" content="" />
<meta name="text:Disqus shortname" content="" />
<meta name="text:Font size" content='0.8em'/>
<meta name="text:Google Analytics ID" content=''/>
<meta name="text:Google Web Font for text" content='Source Sans Pro'/>
<meta name="text:Google Web Font for titles" content='Open Sans'/>
<meta name="text:Username on Facebook" content="" />
<meta name="text:Username on Flickr" content="" />
<meta name="text:Username on Foursquare" content="" />
<meta name="text:Username on Google Plus" content="" />
<meta name="text:Username on Instagram" content="" />
<meta name="text:Username on LastFM" content="" />
<meta name="text:Username on Linkedin" content="" />
<meta name="text:Username on Myspace" content="" />
<meta name="text:Username on Twitter" content="" />
<meta name="text:Username on Vimeo" content="" />
<meta name="text:Username on YouTube" content="" />
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{block:TagPage}{Tag} posts - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link href='http://fonts.googleapis.com/css?family={text:Google Web Font for titles}|{text:Google Web Font for text}' rel='stylesheet' type='text/css'>
<link href="http://static.tumblr.com/wgijwsy/z7vml84xj/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="http://static.tumblr.com/wgijwsy/iVlmoxqnz/modern_grid.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*Variables*/
::-moz-selection {
background: {color:Text highlight};
color: #fff;
}
::selection {
background: {color:Text highlight};
color: #fff;
}
html {
background: {color:Body background} url('{image:Background}');
font-family: '{text:Google Web Font for text}','Trebuchet MS', Helvetica, sans-serif;
font-size: {text:Font size};
}
h1, h2, h3, h4, h5, h6 {
font-family: '{text:Google Web Font for titles}','Trebuchet MS', Helvetica, sans-serif;
}
a {
color: {color:Body links};
}
a:hover {
color: {color:Body links hover};
}
body, .title a, .metadata a, #masthead #blog_title a {
color: {color:Body text};
}
.global_pages a {
color: {color:Navigation bar links};
}
.global_pages {
background: {color:Navigation bar background};
}
#masthead {
background: {color:Masthead background} url('{image:Masthead}');
}
#masthead #blog_title a {
border-bottom: 1px solid {color:Masthead site name};
color: {color:Masthead site name};
}
#show_more {
color: {color:Masthead background};
background: {color:Masthead plus button};
font-size: 37px;
}
.more {
background: {color:Masthead plus button background};
color: {color:Masthead plus button text};
}
.more a {
color: {color:Masthead plus button links};
}
{CustomCSS}
</style>
</head>
<body class="{block:IndexPage}index{/block:IndexPage} {block:PermalinkPage}permalink{/block:PermalinkPage} {block:IfNotInvertIcons}not_invert{/block:IfNotInvertIcons}{block:IfInvertIcons}invert{/block:IfInvertIcons}">
<header id="masthead">
{block:IfMastheadTumblrAvatar}
<div class="brand_asset">
<a href="/" title="{lang:Home}"><img src="{PortraitURL-128}" id="avatar"/></a>
</div>
{/block:IfMastheadTumblrAvatar}

{block:IfLogoImage}
<div class="brand_asset">
<a href="/" title="{lang:Home}"><img src="{image:Logo}"/ id="logo"></a>
</div>
{/block:IfLogoImage}

{block:IfMastheadSiteName}
<h1 id="blog_title">
<a href="/" title="{lang:Home}">{Title}</a>
</h1>
{/block:IfMastheadSiteName}

<p id="show_more">
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="25.265" width="25.354" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">

<path d="m10.354,0.2652,0,10-10,0,0,5,10,0,0,10,5,0,0-10,10,0,0-5-10,0,0-10-5,0z" fill-opacity="0.8" fill="#000"/>

<path fill="#FFF" d="m10,0,0,10-10,0,0,5,10,0,0,10,5,0,0-10,10,0,0-5-10,0,0-10-5,0z"/>

</svg>

</p>

<div class="more">
{block:IfPlusButtonPeopleIFollowList}
<div id="following">
{block:Following}
<h2>{lang:People I follow}</h2>
<ul>
{block:Followed}
<li>
<a href="{FollowedURL}"><img src="{FollowedPortraitURL-48}"/></a>
</li>
{/block:Followed}
</ul>
{/block:Following}
</div>
{/block:IfPlusButtonPeopleIFollowList}

<div id="description">
<p>{Description}</p>
</div>

<div id="submit">
{block:SubmissionsEnabled}
<a href="/submit" class="button">{SubmitLabel}</a>
{/block:SubmissionsEnabled}
{block:AskEnabled}
<a href="/ask" class="button">{AskLabel}</a>
{/block:AskEnabled}
</div>

{block:IfPlusButtonSearchBox}
<div id="search">
<form action="/search" method="get">
<input type="search" name="q" value="{SearchQuery}" type="search" id="search_box">
</form>
</div>
{/block:IfPlusButtonSearchBox}
<div>
<nav id="social_links">
<ul>
{block:IfUsernameOnFacebook}<li>
<a href="http://www.facebook.com/{text:Username on Facebook}" id="facebook" title="Facebook"></a>
</li>{/block:IfUsernameOnFacebook}

{block:IfUsernameOnFlickr}<li>
<a href="http://flickr.com/{text:Username on Flickr}" id="flickr" title="Flickr"></a>
</li>{/block:IfUsernameOnFlickr}

{block:IfUsernameonFoursquare}<li>
<a href="https://foursquare.com/{text:Username on Foursquare}" id="foursquare" title="Foursquare"></a>
</li>{/block:IfUsernameonFoursquare}

{block:IfUsernameOnGooglePlus}<li>
<a href="https://plus.google.com/{text:Username on Google Plus}" id="google" title="Google+"></a>
</li>{/block:IfUsernameOnGooglePlus}

{block:IfUserNameonInstagram}<li>
<a href="https://instagram.com/{text:Username on Instagram}" id="instagram" title="Instagram"></a>
</li>{/block:IfUserNameonInstagram}

{block:IfUserNameonLastFM}<li>
<a href="http://www.last.fm/user/{text:Username on LastFM}" id="lastfm" title="Last.fm"></a>
</li>{/block:IfUserNameonLastFM}

{block:IfUsernameOnLinkedin}<li>
<a href="http://www.linkedin.com/in/{text:Username on LinkedIn}" id="linkedin" title="LinkedIn"></a>
</li>{/block:IfUsernameOnLinkedin}

{block:IfUserNameonMyspace}<li>
<a href="http://myspace.com/{text:Username on Myspace}" id="myspace" title="Myspace"></a>
</li>{/block:IfUserNameonMyspace}

{block:IfUsernameOnTwitter}<li>
<a href="http://www.twitter.com/{text:Username on Twitter}" id="twitter" title="Twitter"></a>
</li>{/block:IfUsernameOnTwitter}

{block:IfUserNameonVimeo}<li>
<a href="http://vimeo.com/{text:Username on Vimeo}" id="vimeo" title="Vimeo"></a>
</li>{/block:IfUserNameonVimeo}

{block:IfUserNameonYouTube}<li>
<a href="https://youtube.com/{text:Username on YouTube}" id="youtube" title="YouTube"></a>
</li>{/block:IfUserNameonYouTube}

{block:IfPlusButtonRSSLink}<li>
<a href="{RSS}" id="rss" title="{lang:Subscribe via RSS}"></a>
</li>{/block:IfPlusButtonRSSLink}

{block:IfPlusButtonArchivePagesLink}<li>
<a href="/archive" id="archive" title="{lang:Archive}"></a>
</li>{/block:IfPlusButtonArchivePagesLink}
</ul>
</nav>
</div>
{block:IfAlternateThemeAttribution}
<div id="attribution">
<p><a href="http://moderngrid.tumblr.com/" title="{lang:Install this theme}">Modern Grid</a> by <a href="http://themestatic.tumblr.com/">Theme Static</a></p>
</div>
{/block:IfAlternateThemeAttribution}
</div>
</header>
{block:HasPages}
<nav class="global_pages {block:IfFixedPositionPagesBar}fixed_pages{/block:IfFixedPositionPagesBar}">
<ul>
{block:Pages}
<li><a href="{URL}">{Label}</a></li>
{/block:Pages}
{block:IfNotAlternateThemeAttribution}<li><a href="http://moderngrid.tumblr.com">Theme</a></li>{block:IfNotAlternateThemeAttribution}
</ul>
</nav>{/block:HasPages}
<div id="content">
{block:SearchPage}
<div class="alert">
{block:SearchResults}
<p class="results">{lang:Search results for SearchQuery 2}</p>
{/block:SearchResults}

{block:NoSearchResults}
<p class="results">{lang:Sorry no results for SearchQuery 2}</p>
{/block:NoSearchResults}
</div>
{/block:SearchPage}
{block:TagPage}
<div class="alert">
<p class="results">{lang:Showing posts tagged Tag 3}</p>
</div>
{/block:TagPage}
{block:Posts}
<article id="{PostID}" class=" {block:IfPostBackground}post_background{/block:IfPostBackground}">
{block:IndexPage}{block:Date}{block:IfPostIconsOnHover}
<div class="share_overlay overlay">
<ul>
<li><a href="{Permalink}" class="permalink_tester" title="{lang:Permalink}">
<svg id="svg3203" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="25" width="25" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">

<path id="path4347" d="M12.517,0c-6.9436,0-12.517,5.5587-12.517,12.483,0,6.944,5.5733,12.517,12.517,12.517,6.924,0,12.483-5.573,12.483-12.517,0-6.9243-5.559-12.483-12.483-12.483zm7.2678,6.1575c0.3452-0.01989,0.64766,0.10782,0.79076,0.37012,0.24797,0.41966,0,1.0216-0.55514,1.3459l-7.4697,4.2901v6.393c0,0.47689-0.39798,0.87483-0.87484,0.87483-0.49607,0-0.87484-0.39794-0.87484-0.87483v-6.7799c0-0.05723,0-0.11102,0.0165-0.16824v-0.01682c0-0.05723,0.0318-0.09418,0.0508-0.1514,0.0954-0.24799,0.28583-0.46763,0.57196-0.63931l7.7053-4.4583c0.20743-0.1216,0.43211-0.1731,0.63922-0.18506z" fill-rule="nonzero" {block:IfNotInvertIcons}fill="#000000"{/block:IfNotInvertIcons}{block:IfInvertIcons}fill="#ffffff"{/block:IfInvertIcons}/>

</svg>
</a></li>
{block:IfNotInvertIcons}
<li>{ReblogButton color="black" size="27"}</li>
<li>{LikeButton color="black" size="27"}</li>
{/block:IfNotInvertIcons}
{block:IfInvertIcons}
<li>{ReblogButton color="white" size="27"}</li>
<li>{LikeButton color="white" size="27"}</li>
{/block:IfInvertIcons}
</ul>
</div>
{/block:IfPostIconsOnHover}{/block:Date}{/block:IndexPage}

{block:Text}
<div class="text post">
{block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
<div class="inner">
{Body}
{block:More}<a href="{Permalink}" class="button">{lang:Read more}</a>{/block:More}
</div>
{/block:Text}

{block:Photo}
<div class="photo post">
{block:IndexPage}
<div class="photo_url">
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
</div>
{/block:IndexPage}

{block:PermalinkPage}
<div class="photo_url">
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}
</div>
{/block:PermalinkPage}

{block:Caption}
<div class="inner">
{Caption}
</div>
{/block:Caption}
{/block:Photo}

{block:Photoset}
<div class="photoset post">
<div class="photoset-grid" data-layout="{PhotosetLayout}">
{block:Photos}
<img src="{PhotoURL-500}" {block:Caption}alt="{Caption}"{/block:Caption} />
{/block:Photos}
</div>

{block:Caption}
<div class="inner">
{Caption}
</div>
{/block:Caption}
{/block:Photoset}

{block:Quote}
<div class="quote post">
<blockquote class="title">
<span class="unicode">“</span>{Quote}<span class="unicode">”</span>
</blockquote>
{block:Source}
<div class="inner">
<p>{Source}</p>
</div>
{/block:Source}
{/block:Quote}

{block:Link}
<div class="link post">
<h1 class="title"><a href="{URL}">{Name}</a></h1>
{block:Description}
<div class="inner">
{Description}
</div>
{/block:Description}
{/block:Link}

{block:Chat}
<div class="chat post">
<ul>
{block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</label></span>{/block:Label} {Line} </li>{/block:Lines}
</ul>
{/block:Chat}

{block:Audio}
<div class="audio post">
{block:AlbumArt}
<div class="album_art">
<img src="{AlbumArtURL}"/>
</div>
{/block:AlbumArt}

<div class="player">{AudioPlayerBlack}</div>

{block:TrackName}
<h1 class="title"><a href="{Permalink}">{TrackName}</a></h1>
{/block:TrackName}

{block:Caption}
<div class="inner">
{Caption}
</div>
{/block:Caption}
{/block:Audio}

{block:Video}
<div class="video post">
<div class="video-player">
{Video-700}
</div>

{block:Caption}
<div class="inner">
{Caption}
</div>
{/block:Caption}
{/block:Video}

{block:Answer}
<div class="answer post">
<h1 class="title">{Question}</h1>

<div class="inner">
<div class="user">
<img src="{AskerPortraitURL-96}"/>
<p>{Asker}</p>
</div>
{Answer}
</div>
{/block:Answer}
</div>
{block:Date}
{block:IndexPage}
{block:ContentSource}
<div class="metadata">
<a href="{SourceURL}">{lang:Source}: {block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}
{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}</a>
</div>
{/block:ContentSource}

{block:IfNotPostIconsOnHover}
<div class="data_perma metadata">
<a href="{Permalink}"> <time>{DayOfMonth} {Month} {Year}</time> </a>
</div>
{block:IfNotPostIconsOnHover}
{/block:IndexPage}
{/block:Date}

{block:PermalinkPage}{block:Date}

<footer class="slider metadata">
<nav class="selector">
<li class="about">{lang:About}</li>
{block:HasTags}<li class="tags">{lang:Tags}</li>{/block:HasTags}
{block:PostNotes}<li class="post_notes">{lang:Notes}</li>{/block:PostNotes}
<li class="share">{lang:Share this}</li>
{block:IfDisqusShortname}<li class="disqus">{lang:View comments}</li>{/block:IfDisqusShortname}
</nav>

<div class="item about">
<p>{lang:Posted on DayOfMonth Month Year}</p>
{block:ContentSource}
<p><a href="{SourceURL}">{lang:Source}: {block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}
{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}</a></p>
{/block:ContentSource}
</div>

{block:HasTags}
<div class="item tags">
<ul>
{block:Tags}<li> <a href="{TagURL}">{Tag}</a> </li>{/block:Tags}
</ul>
</div>
{/block:HasTags}

{block:PostNotes}
<div class="item post_notes">
{PostNotes}
</div>
{/block:PostNotes}

<div class="item share">
<ul>
<li class="tumblr"><a href="{ReblogURL}" class="reblog">Tumblr</a></li>
<li class="facebook"><a href="https://www.facebook.com/sharer.php?u={Permalink}">Facebook</a></li>
<li class="twitter"><a href="https://twitter.com/intent/tweet?url={ShortURL}">Twitter</a></li>
<li class="google"><a href="https://plusone.google.com/_/+1/confirm?hl=en&url={Permalink}">Google+</a></li>
</ul>
</div>

{block:IfDisqusShortname}
<div class="item disqus">
<script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>
<div id="disqus_thread"></div>
<script type="text/javascript">
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://{text:Disqus shortname}.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="/?ref_noscript={text:Disqus shortname}">comments powered by Disqus.</a></noscript>
<a href="" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
{/block:Permalink}
<script type="text/javascript">
var disqus_shortname = '{text:Disqus shortname}';
(function () {
var s = document.createElement('script'); s.async = true;
s.src = 'http://{text:Disqus shortname}.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
</div>
{/block:IfDisqusShortname}
</footer>
{/block:Date}{/block:PermalinkPage}
</article>
{/block:Posts}
</div>

{block:Pagination}<nav id="pagination">
<ul>
{block:PreviousPage}<li><a href="{PreviousPage}" id="prev_page">{lang:Previous}</a></li>{/block:PreviousPage}

{block:JumpPagination length="5"}
{block:CurrentPage}<li><span id="current_page">{PageNumber}</span></li>{/block:CurrentPage}
{block:JumpPage}<li><a class="jump_page" href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
{/block:JumpPagination}

{block:NextPage}
<li><a href="{NextPage}" id="next_page">{lang:Next}</a></li>
{/block:NextPage}
</ul>
</nav>{/block:Pagination}

{block:IfPermalinkPostNavigation}{block:PermalinkPagination}
<div id="post_selector">
{block:PreviousPost}<a href="{PreviousPost}" id="prev_post"><</a>{/block:PreviousPost}
{block:NextPost}<a href="{NextPost}" id="next_post">></a>{/block:NextPost}
</div>
{/block:PermalinkPagination}{block:IfPermalinkPostNavigation}

<script>
var theme_options = {
{block:IfInfiniteScroll}infinite_scroll: true{/block:IfInfiniteScroll}
{block:IfNotInfiniteScroll}infinite_scroll: false{/block:IfNotInfiniteScroll}
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/kGVml7yoz/plugins.js"></script>
<script src="http://static.tumblr.com/wgijwsy/7z6moxq0g/modern_grid.min.js"></script>
<script>
var _gaq=[['_setAccount','{text:Google Analytics ID}'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>