Journal Crunch

From MtTWiki

Jump to: navigation, search

Contents

Info

Journal Crunch is a Drupal theme based on WordPress' Jurnal Crunch theme, designed by Site5 and released for Smashing Magazine and its readers.

The theme is hosted and available for download at drupal.com.

Features

Installation

To install the Journal Crunch simply drop it into your drupal instance (sites/all/themes/journalcrunch).

Demo content

To reproduce our demostration site you need just to create some stories and pages in your installation. To make your life easier Journal Crunch theme is designed to work with default Drupal installation. No extra modules needed. Journal Crunch comes with predefined CSS rules for your content.

Note: If you need demo images use them form our demo site. Please download them first in your server.

User Guide: Drupal 7

The default Drupal 7 installation has the Image module activated, which provides image manipulation tools. This provides the possibility to attach an image upon creating a new article. On the path Configuration->Media->Image Styles (Configure styles that can be used for resizing or adjusting images on display), there is provided tha possibility to create or edit image styles. There are 3 pre-made image styles (thumbnail, medium, preview). The Thumbnail is used upon attaching the image, the Preview on the default front page and taxonomy pages and Large when viewing the article.

To achieve the look'n'feel shown in Journal Crunch 7 follow these steps:

1. Edit the Preview Image Style Effect to Scale and crop 430x290 - With this change we make sure all images in the articles on the front and the taxonomy pages won't exceed these dimensions (referring to sticky articles). - For the attached image of non-sticky articles on the fron and taxonomy pages, change dimensions (CSS based*) with Preview Image Style, according to the desired dimensions. 

*Line 318-Image div placeholder
.node-front div.field-type-image { display: block; height: 120px; overflow: hidden; }
 
*Line 311-Image width 
#content .node-front .nodeInner img { overflow: hidden; padding: 0; width: 255px; }

2. Editing the Large Image Style Effect to Scale and crop 593x348 - Desired dimension of attached image on a node page.

Demo Content

Pages

Simply create new pages and copy-paste the code.

About

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
<blockquote>This is a blockquote! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
<h2>Heading 2</h2>
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
<strong>Unordered List</strong>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<strong>Ordered List</strong>
<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>

Typography

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 
<blockquote>"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</blockquote>
 
<h2>Header 2</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
<h2><a href="#">Linked Header 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
<h3>Header 3</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
<h4>Header 4</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
<h2>Code snippet</h2>
 
<code>#header h1 a {<br />
display: block;<br />
height: 80px;<br />
width: 300px;<br />
}</code>
 
<h2>Messages</h2>
 
<div class="messages status">Sample status message. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="messages error">Sample error message. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="messages warning">Sample warning message. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
 
<h2>Paragraph With Links</h2>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Donec odio. Quisque volutpat mattis eros. <a href="#">Nullam malesuada</a> erat ut turpis. Suspendisse urna nibh, viverra 			non, semper suscipit, posuere a, pede.</p>
 
<h2>Ordered List</h2>
<ol>
<li>This is a sample <strong>Ordered List</strong>.</li>
<li>Lorem ipsum dolor sit amet consectetuer.</li>
<li>Condimentum quis.</li>
<li>Congue Quisque augue elit dolor.
<ol>
<li>Something goes here.</li>
<li>And another here</li>
<li>Then one more</li>
</ol>
</li>
<li>Congue Quisque augue elit dolor nibh.</li>
</ol>
 
<h2>Unordered List</h2>
<ul>
<li>This is a sample <strong>Unordered List</strong>.</li>
<li>Condimentum quis.</li>
<li>Congue Quisque augue elit dolor.
<ul>
<li>Something goes here.</li>
<li>And another here
<ul>
<li>Something here as well</li>      
<li>Something here as well</li>
<li>Something here as well</li>
</ul>
</li>
<li>Then one more</li>
</ul>
</li>
<li>Nunc cursus sem et pretium sapien eget.</li>
</ul>
 
<h2>Fieldset</h2>
<fieldset> <legend>Account information</legend> </fieldset>
 
<h2>Table</h2>
 
<table border="1">
 
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
 
<tr class="odd">
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
 
<tr class="even">
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
 
<tr class="odd">
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
 
</table>

Contact Us

<div id="contact">
This text is easy to set from the Theme's Options Page. Nam nec fringilla lectus. Suspendisse potenti. Ut fringilla, augue sit amet viverra pharetra, velit magna dapibus tortor, sit amet congue est neque eget lectus.
 
<form action="#" method="post" id="contactform">
 
<label for="name">Your name:*</label><input id="name" name="name" class="text"/>
 
<label for="email">Your email:*</label><input id="email" name="email" class="text"/>
 
<label for="subject">Your message:*</label><textarea id="message" name="message"></textarea>
 
<input type="submit" name="submit" id="submit" value="SEND MESSAGE"/>
 
</form>
</div>

Stories

Sticky

Create 2 "sticky" stories:

Don't forget to select "Sticky at top of lists" in publishing options for those

Using the html fragments bellow. For teaser and rest of body text use "split summary at cursor" button. Required images can either uploaded into "/sites/default/files" or just attached to the stories.

Pellentesque dapidus ullamcorper leo'

teaser text: 

<img src="sites/default/files/sample8.jpg" width="430px" height="290px" class="node-front-image"/>
 
Te usu causae efficiendi. Nusquam percipitur cotidieque ut vis. 
An est vocent fabellas platonem, eu dico elitr feugait per. Et veri posse everti vix.

rest of body: 

<img src="sites/default/files/sample8.jpg"/>
 
Elcvne commune elaboraret his, mea amet luptatum at. Modo aeterno propriae ius id. 
Viris definiebas reprehendunt ad eam. In mea melius commodo.
 
Te usu causae efficiendi. Nusquam percipitur cotidieque ut vis. An est vocent fabellas 
platonem, eu dico elitr feugait per. Et veri posse everti vix, te reque option corpora nam, 
vim audire molestiae necessitatibus ad. Quis soleat mei eu, tale epicurei consequat 
ne nec, ad ius erant graeco commune.
 
Cras mi lacus, adipiscing vitae aliquet eu, imperdiet sit amet risus. Pellentesque at quam 
purus, sed consequat dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam neque 
diam, ultrices ut viverra non, vehicula quis tellus. Pellentesque dapibus ullamcorper leo 
ornare pulvinar. Sed vel dui ipsum. Pellentesque sit amet felis turpis. Nunc lacinia pretium 
mauris, vitae lacinia magna lobortis ultrices. Maecenas vel luctus magna. Integer nec venenatis 
risus. Phasellus condimentum, tortor vel venenatis viverra, nunc enim adipiscing justo, id 
tincidunt dolor magna at nunc. Morbi euismod mi facilisis metus porta ac malesuada enim luctus.

image to attach:

http://demo.drupalizing.com/journalcrunch/sites/default/files/sample8.jpg

Elcvne commune elaboraret his, mea amet luptatum

teaser text: 

<img src="sites/default/files/sample9.jpg" width="430px" height="290px"  class="node-front-image"/>
Elcvne commune elaboraret his, mea amet luptatum at. Modo aeterno propriae ius id. Viris definiebas 
reprehendunt ad eam. In mea melius commodo.

rest of body: 

<img src="sites/default/files/sample9.jpg"/>
Te usu causae efficiendi. Nusquam percipitur cotidieque ut vis. An est vocent fabellas platonem, 
eu dico elitr feugait per. Et veri posse everti vix, te reque option corpora nam, vim audire 
molestiae necessitatibus ad. Quis soleat mei eu, tale epicurei consequat ne nec, ad ius erant 
graeco commune.
 
Cras mi lacus, adipiscing vitae aliquet eu, imperdiet sit amet risus. Pellentesque at quam purus, 
sed consequat dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam neque diam, 
ultrices ut viverra non, vehicula quis tellus. Pellentesque dapibus ullamcorper leo ornare pulvinar. 
Sed vel dui ipsum. Pellentesque sit amet felis turpis. Nunc lacinia pretium mauris, vitae lacinia 
magna lobortis ultrices. Maecenas vel luctus magna. Integer nec venenatis risus. Phasellus 
condimentum, tortor vel venenatis viverra, nunc enim adipiscing justo, id tincidunt dolor magna 
at nunc. Morbi euismod mi facilisis metus porta ac malesuada enim luctus.
 
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies 
in, diam. Sed arcu. Cras consequat. Vivamus magna. Cras in mi at felis aliquet.

image to attach:

http://demo.drupalizing.com/journalcrunch/sites/default/files/sample9.jpg

More stories

Create 3 more stories:

Using the html fragments bellow:

Nusquam percipitur cotidieque ut vis

teaser text: 

<img src="sites/default/files/timthumb.png" class="node-front-image" style="background:none; padding:10px 0 10px 0;"/>
Elcvne commune elaboraret his, mea amet luptatum at. Modo aeterno propriae ius id. Viris definiebas 
reprehendunt ad eam. In mea melius commodo.

rest of body: 

Te usu causae efficiendi. Nusquam percipitur cotidieque ut vis. An est vocent fabellas platonem, 
eu dico elitr feugait per. Et veri posse everti vix, te reque option corpora nam, vim audire 
molestiae necessitatibus ad. Quis soleat mei eu, tale epicurei consequat ne nec, ad ius erant graeco commune.
 
Cras mi lacus, adipiscing vitae aliquet eu, imperdiet sit amet risus. Pellentesque at quam purus, 
sed consequat dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam neque diam, 
ultrices ut viverra non, vehicula quis tellus. Pellentesque dapibus ullamcorper leo ornare pulvinar. 
Sed vel dui ipsum. Pellentesque sit amet felis turpis. Nunc lacinia pretium mauris, vitae lacinia 
magna lobortis ultrices. Maecenas vel luctus magna. Integer nec venenatis risus. Phasellus 
condimentum, tortor vel venenatis viverra, nunc enim adipiscing justo, id tincidunt dolor magna 
at nunc. Morbi euismod mi facilisis metus porta ac malesuada enim luctus.

image to attach:

http://demo.drupalizing.com/journalcrunch/sites/default/files/timthumb.png

Morbi in sem quis dui placerat ornare

teaser text: 

<img src="sites/default/files/sample7.jpg" width="255px" height="90px" class="node-front-image" style="background:none; padding:10px 0 10px 0;"/>
Vide choro eos an, utamur fastidii sea ne. An his porro assum vidisse, vis ut everti suscipit, 
partem placerat at pro. Pri fierent posidonium sadipscing ut, aperiri adversarium nam ut.

rest of body: 

Ei affert ignota numquam qui, sed id elitr nonumy commune. Cum elitr tation ne, usu puto posse 
conclusionemque ei, impetus commune gloriatur et pri.
 
<img src="sites/default/files/sample7.jpg"/>
 
Sensibus elaboraret quaerendum qui ea. Ut justo possit mei. Ceteros similique eum eu, vix 
scriptorem appellantur te. Cu per solet conclusionemque, odio ponderum molestiae per no. 
Vix mentitum conceptam reprehendunt ne, vim feugiat iudicabit adversarium ut, lucilius 
probatus signiferumque id eam. Pro libris propriae expetendis ut.
 
Qui zzril philosophia cu, mel ut melius meliore iracundia, ad pri nisl voluptua. 
Vis maiorum civibus voluptaria id, esse bonorum convenire vix an, qui eu novum placerat. 
Ei vis eros fabulas elaboraret, fugit nulla eloquentiam te usu. Mea sumo dicta 
perfecto at, sonet partiendo conclusionemque nam in.

images to attach:

http://demo.drupalizing.com/journalcrunch/sites/default/files/sample7.jpg

Pellentesque dapibus ullamcorper leo

teaser text: 

<img src="sites/default/files/sample8.jpg" width="255px" height="90px" class="node-front-image" style="background:none; padding:10px 0 10px 0;"/>
Te usu causae efficiendi. Nusquam percipitur cotidieque ut vis. An est vocent fabellas platonem, 
eu dico elitr feugait per. Et veri posse everti vix, te reque option corpora nam, vim audire molestiae necessitatibus ad.

rest of body: 

<img src="sites/default/files/sample8.jpg"/>
 
Elcvne commune elaboraret his, mea amet luptatum at. Modo aeterno propriae ius id. Viris 
definiebas reprehendunt ad eam. In mea melius commodo.
 
Te usu causae efficiendi. Nusquam percipitur cotidieque ut vis. An est vocent fabellas platonem, 
eu dico elitr feugait per. Et veri posse everti vix, te reque option corpora nam, vim audire 
molestiae necessitatibus ad. Quis soleat mei eu, tale epicurei consequat ne nec, ad ius erant graeco commune.
 
Cras mi lacus, adipiscing vitae aliquet eu, imperdiet sit amet risus. Pellentesque at quam purus, 
sed consequat dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam neque diam, 
ultrices ut viverra non, vehicula quis tellus. Pellentesque dapibus ullamcorper leo ornare 
pulvinar. Sed vel dui ipsum. Pellentesque sit amet felis turpis. Nunc lacinia pretium mauris, 
vitae lacinia magna lobortis ultrices. Maecenas vel luctus magna. Integer nec venenatis risus. 
Phasellus condimentum, tortor vel venenatis viverra, nunc enim adipiscing justo, id tincidunt 
dolor magna at nunc. Morbi euismod mi facilisis metus porta ac malesuada enim luctus.

image to attach:

http://demo.drupalizing.com/journalcrunch/?q=node/4

Vocabularies and terms

Create a vocabulary named Content. Select "Tags" in vocabulary settings.

Select any of the following word as tags for your posts

Blocks

Footer

They are four regions available there. Your can put some predefined blocks as

You can also put a menu or a custom html block like:

Side bar

{tbd}

Retrieved from "http://wiki.morethanthemes.com/index.php/Journal_Crunch"
Personal tools
Namespaces
Variants
Actions
Main Menu
Premium Themes
Toolsets
Freebies
Navigation
Toolbox
This wiki is hosted by morethanthemes.com, creators of top quality premium and free themes for Drupal 6 and 7, as well as HTML and PSD themes.
Find out more
for Drupal 6 & 7