diff --git a/404.tpl b/404.tpl index 583b2f7..2784d40 100644 --- a/404.tpl +++ b/404.tpl @@ -1 +1 @@ - \ No newline at end of file + diff --git a/README.md b/README.md index e112b0d..7fa01ff 100644 --- a/README.md +++ b/README.md @@ -9,3 +9,39 @@ This theme is meant to be as simple as possible. It contains just two CSS files example of how to use a web font from http://www.fontsquirrel.com/ in a Newscoop theme. Like Newscoop, 'The Stun' theme is © Sourcefabric 2013 and released under the GNU General Public License, version 3. + +Please note that the 'Download this repository as a zip file' button on GitHub exports Newscoop theme files within a folder, whereas a working Newscoop theme should have its main template files in the zip file root. + +How it works +============ + +Let's take a look at The Stun's front page template, front.tpl - under 50 lines of code including whitespace, and the biggest block of that code is for creating the list of article authors with the proper punctuation (given that we can't guess how many authors there might be for a dynamically generated article). + +This template starts by including _header.tpl from the _tpl folder of sub-templates (there are just three sub-templates in The Stun). Thanks to this sub-template we don't have to deal with the <HEAD> element of HTML, open a <BODY> tag, fiddle with the masthead or deal with navigation buttons. It's all taken care of, so we can focus on front page design. + +{{ include file='_tpl/_header.tpl' }} + +Next, we'll list articles from the "Front page" featured article playlist, a sequence of the day's most significant stories which has been created by the newspaper's editor in the Newscoop administration interface. All we have to do is tell Newscoop to list the article that the editor has made the top item in this particular playlist, by using a list length of "1": + +{{ list_playlist_articles name="Front page" length="1" }} + +The next part of the code is for the article headline, which we put in a <div> because we want to style it with CSS. The id of this div should make its function pretty obvious when we are editing the general.css file, found in the _css folder. + +<div id="frontpage-headline"> + + <a href="{{ uri options="article" }}"><h1>{{ $gimme->article->name }}</h1></a> + +</div> + +See how we're using two sets of curly brackets on the line above? Within the element created by the <h1> and </h1> tags we are asking Newscoop for the article name to create our headline, which could be any line of text the editor wants to put there at that moment. We're also wrapping the <h1> element with an <a> element, but this time we're using the curly brackets to get the URI of this article. So we now have a styled headline, and a link to the article inside the publication. + +Typically we may wish to provide a shortened version of the story on the front page, and give the full article a different design treatment. This is very easy to do in Newscoop since we have a separate template for full articles, by default called article.tpl (although you can call this file anything you want). There is also a template for listing articles in the sections that the editor has created, such as Politics or Sports. The section template is called section.tpl by default, and just as with front.tpl or article.tpl you can re-use the header, footer or any other sub-template that you have created. You'll soon appreciate how much maintenance time is saved by the efficiency of this approach. + +In The Stun, 404.tpl is an empty file. You can put any message to readers that you want in this template, but with an empty 404 template Newscoop will re-direct all requests for non-existent pages to the publication front page, which may be what you wanted anyway. + +We hope you have fun playing with The Stun, and if you create new versions of it, please let us take a look at what you've come up with! + +Further reading +=============== + +The reference text for creating Newscoop themes is the Newscoop Cookbook. If you would like to contribute your tips and tricks to this book, please contact Sourcefabric. diff --git a/_css/general.css b/_css/general.css index ba5d66c..8ffbd5d 100644 --- a/_css/general.css +++ b/_css/general.css @@ -1,298 +1,307 @@ -#wrapper { -position:relative; -width:960px; -margin:0 auto 20px; -} - -/************ MASTHEAD STYLES */ - -#masthead { -position:absolute; -width:460px; -height:120px; -top:0; -left:0; -background-color:#c00; -padding:0; -} - -#masthead a { -color:#fff; -text-decoration: none; -text-shadow:2px 2px #000; -} - -#masthead p { -position:absolute; -left:10px; -top:-158px; -font-size:150px; -font-family:UtilityBoldCondensed, Helvetica, Arial, sans-serif; -font-style:italic; -letter-spacing:4px; -} - -#topimg { -position:absolute; -left:492px; -top:5px; -width:130px; -height:125px; -} - -#advert { -position:absolute; -left:625px; -top:-60px; -color:#bbb; -text-decoration:none; -font-family:UtilityBoldCondensed, Helvetica, Arial, sans-serif; -font-size:60px; -line-height:90%; -text-shadow:3px 3px #000; -margin:5px 10px; -} - -/************ STRAPLINE STYLES */ - -#strapline { -position:absolute; -width:960px; -height:30px; -top:120px; -left:0; -background-color:#bee2ea; -} - -#strapline p { -position:absolute; -top:-12px; -left:20px; -font-size:18px; -font-family:UtilityBoldCondensed, Helvetica, Arial, sans-serif; -font-style:normal; -letter-spacing:4px; -} - -/************ NAVIGATION STYLES */ - -#nav { -position:absolute; -top:151px; -font-family:UtilityBoldCondensed, Helvetica, Arial, sans-serif; -font-size:20px; -font-style:italic; -letter-spacing:4px; -} - -#nav ul { -list-style-type:none; -margin:0; -padding:0; -} - -#nav li { -display:inline; -} - -.navlinks { -color:#FFF; -text-decoration:none; -background-color:#c00; -border-radius:0 0 15px 15px; -padding:5px 10px; -} - -a.navlinks:hover { -background-color:#bbb; -} - -a.current_page_item { -background-color:#0c0; -} - -/************ FRONT PAGE STYLES */ - -#frontpage-headline h1 { -position:absolute; -top:130px; -left:480px; -font-family: UtilityBoldCondensed, Helvetica, Arial, sans-serif; -font-size:100px; -font-weight: normal; -line-height:90%; -text-transform: uppercase; -} - -#frontpage-headline a { -color:#000; -text-decoration: none; -} - -#frontpage-image img { -position:absolute; -left:0px; -top:150px; -z-index:-1; -} - -#frontpage-image p#caption { -position:absolute; -top:575px; -left:10px; -font-family:UtilityBoldCondensed, Helvetica, Arial, sans-serif; -font-size:32px; -color:#FFF; -text-shadow:2px 2px #000; -} - -#frontpage-deck { -position:absolute; -top:630px; -font-family:Helvetica, Arial, sans-serif; -font-size:24px; -font-weight:bold; -line-height:95%; -margin:10px 0px 10px 0px; -} - -#frontpage-authors { -position:absolute; -top:690px; -font-family:Helvetica, Arial, sans-serif; -font-size:18px; -font-weight:bold; -margin:10px; -} - -#frontpage-authors a { -color:#000; -text-decoration: none; -} - -#frontpage-body { -position:absolute; -top:730px; -font-family:Helvetica, Arial, sans-serif; -font-size:18px; -} - -/************ SECTION STYLES */ - -#sectionpage-title h1 { -position:absolute; -top:150px; -left:0px; -font-family: Helvetica, Arial, sans-serif; -font-size:60px; -font-weight: bold; -text-transform: uppercase; -} - -#sectionpage-items { -position:absolute; -top:260px; -left:0px; -font-weight:normal; -} - -#sectionpage-items a { -color:#000; -text-decoration:none; -} - -#sectionpage-items span.time { -font-size:16px; -font-family:Helvetica, Arial, sans-serif; -} - -#sectionpage-items span.header { -font-size:30px; -font-family:Helvetica, Arial, sans-serif; -text-transform:uppercase; -} - -#sectionpage-items span.desc { -font-size:16px; -font-family:Helvetica, Arial, sans-serif; -} - -#sectionpage-items img { -margin-top:0px; -margin-left:10px; -margin-bottom:10px; -float:right; -} - - -/************ ARTICLE STYLES */ - -#article-headline p { -position:absolute; -top:135px; -left:0px; -font-family: UtilityBoldCondensed, Helvetica, Arial, sans-serif; -font-size:60px; -font-weight: normal; -line-height:90%; -text-transform: uppercase; -} - -#article-mainimage img { -position:absolute; -left:180px; -top:310px; -} - -#article-mainimage p#caption { -position:absolute; -top:640px; -left:190px; -font-family:UtilityBoldCondensed, Helvetica, Arial, sans-serif; -font-size:32px; -color:#FFF; -text-shadow:2px 2px #000; -} - -#article-deck { -position:absolute; -top:710px; -left:0px; -font-family:Helvetica, Arial, sans-serif; -font-size:18px; -font-weight:bold; -margin:10px 0px 10px 0px; -} - -#article-authors { -position:absolute; -top:770px; -font-family:Helvetica, Arial, sans-serif; -font-size:16px; -font-weight:bold; -margin:10px; -} - -#article-authors a { -color:#000; -text-decoration: none; -} - -#article-body { -position:absolute; -top:830px; -font-family:Helvetica, Arial, sans-serif; -font-size:16px; -} - -/************ LIST STYLES */ - -ul { -list-style-type:none; -margin:0; -padding:0; -} - -li { -display:inline; -} +#wrapper { +position:relative; +width:960px; +margin:0 auto 0 auto; +} + +/************ MASTHEAD STYLES */ + +#masthead { +position:absolute; +width:460px; +height:120px; +top:0; +left:0; +background-color:#c00; +padding:0; +} + +#masthead a { +color:#fff; +text-decoration: none; +text-shadow:2px 2px #000; +} + +#masthead p { +position:absolute; +top:-155px; +left:10px; +font-size:150px; +font-family:UtilityBoldCondensed, Helvetica, Arial, sans-serif; +font-style:italic; +letter-spacing:4px; +line-height:150px; +} + +#topimg { +position:absolute; +left:492px; +top:5px; +width:130px; +height:125px; +} + +#advert { +position:absolute; +left:625px; +top:-60px; +color:#bbb; +text-decoration:none; +font-family:UtilityBoldCondensed, Helvetica, Arial, sans-serif; +font-size:60px; +line-height:90%; +text-shadow:3px 3px #000; +margin:5px 10px; +} + +/************ STRAPLINE STYLES */ + +#strapline { +position:absolute; +width:960px; +height:30px; +top:120px; +left:0; +background-color:#bee2ea; +} + +#strapline p { +position:absolute; +top:-12px; +left:20px; +font-size:18px; +font-family:UtilityBoldCondensed, Helvetica, Arial, sans-serif; +font-style:normal; +letter-spacing:4px; +} + +/************ NAVIGATION STYLES */ + +#nav { +position:absolute; +top:155px; +font-family:UtilityBoldCondensed, Helvetica, Arial, sans-serif; +font-size:20px; +font-style:italic; +letter-spacing:4px; +line-height:20px; +} + +#nav ul { +list-style-type:none; +margin:0; +padding:0; +} + +#nav li { +display:inline; +} + +.navlinks { +color:#FFF; +text-decoration:none; +background-color:#c00; +border-radius:0 0 15px 15px; +padding:5px 10px; +} + +a.navlinks:hover { +background-color:#bbb; +} + +a.current_page_item { +background-color:#0c0; +} + +/************ FRONT PAGE STYLES */ + +#frontpage-headline h1 { +position:absolute; +top:130px; +left:480px; +font-family: UtilityBoldCondensed, Helvetica, Arial, sans-serif; +font-size:100px; +font-weight: normal; +line-height:90%; +text-transform: uppercase; +} + +#frontpage-headline a { +color:#000; +text-decoration: none; +} + +#frontpage-image img { +position:absolute; +left:0px; +top:150px; +z-index:-1; +} + +#frontpage-image p#caption { +position:absolute; +top:575px; +left:10px; +font-family:UtilityBoldCondensed, Helvetica, Arial, sans-serif; +font-size:32px; +color:#FFF; +text-shadow:2px 2px #000; +} + +#frontpage-deck { +position:absolute; +top:630px; +font-family:Helvetica, Arial, sans-serif; +font-size:24px; +font-weight:bold; +line-height:95%; +margin:10px 0px 10px 0px; +} + +#frontpage-authors { +position:absolute; +top:690px; +font-family:Helvetica, Arial, sans-serif; +font-size:18px; +font-weight:bold; +margin:10px; +} + +#frontpage-authors a { +color:#000; +text-decoration: none; +} + +#frontpage-body { +position:absolute; +top:730px; +font-family:Helvetica, Arial, sans-serif; +font-size:18px; +} + +/************ SECTION STYLES */ + +#sectionpage-title h1 { +position:absolute; +top:150px; +left:0px; +font-family: Helvetica, Arial, sans-serif; +font-size:60px; +font-weight: bold; +text-transform: uppercase; +} + +#sectionpage-items { +position:absolute; +top:260px; +left:0px; +font-weight:normal; +} + +#sectionpage-items a { +color:#000; +text-decoration:none; +} + +#sectionpage-items span.time { +font-size:16px; +font-family:Helvetica, Arial, sans-serif; +} + +#sectionpage-items span.header { +font-size:30px; +font-family:Helvetica, Arial, sans-serif; +text-transform:uppercase; +} + +#sectionpage-items span.desc { +font-size:16px; +font-family:Helvetica, Arial, sans-serif; +} + +#sectionpage-items img { +margin-top:0px; +margin-left:10px; +margin-bottom:10px; +float:right; +} + + +/************ ARTICLE STYLES */ + +#article-headline p { +position:absolute; +top:135px; +left:0px; +font-family: UtilityBoldCondensed, Helvetica, Arial, sans-serif; +font-size:60px; +font-weight: normal; +line-height:90%; +text-transform: uppercase; +} + +#article-mainimage img { +position:absolute; +left:180px; +top:310px; +} + +#article-mainimage p#caption { +position:absolute; +top:640px; +left:190px; +font-family:UtilityBoldCondensed, Helvetica, Arial, sans-serif; +font-size:32px; +color:#FFF; +text-shadow:2px 2px #000; +} + +#article-deck { +position:absolute; +top:710px; +left:0px; +font-family:Helvetica, Arial, sans-serif; +font-size:18px; +font-weight:bold; +margin:10px 0px 10px 0px; +} + +#article-authors { +position:absolute; +top:770px; +font-family:Helvetica, Arial, sans-serif; +font-size:16px; +font-weight:bold; +margin:10px; +} + +#article-authors a { +color:#000; +text-decoration: none; +} + +#article-body { +position:absolute; +top:830px; +font-family:Helvetica, Arial, sans-serif; +font-size:16px; +} + +#article-debate { +position:absolute; +top:310px; +font-family:Helvetica, Arial, sans-serif; +font-size:16px; +} + +/************ LIST STYLES */ + +ul { +list-style-type:none; +margin:0; +padding:0; +} + +li { +display:inline; +} diff --git a/_tpl/_footer.tpl b/_tpl/_footer.tpl index 911f66d..3b4444d 100644 --- a/_tpl/_footer.tpl +++ b/_tpl/_footer.tpl @@ -1,3 +1,4 @@ - - - + + + + diff --git a/_tpl/_header.tpl b/_tpl/_header.tpl index a1c9d93..4be1cb0 100644 --- a/_tpl/_header.tpl +++ b/_tpl/_header.tpl @@ -1,38 +1,38 @@ - - - - -The Stun! - - - - - - - - - -
- -
-

The Stun!

- -
- - - -
-

Quality independent tabloid journalism since 2013

-
- - - - + + + + +The Stun! + + + + + + + + + +
+ +
+

The Stun!

+ +
+ + + +
+

Quality independent tabloid journalism since 2013

+
+ + + + diff --git a/_tpl/_section_teaser.tpl b/_tpl/_section_teaser.tpl index bf84c06..009bf89 100644 --- a/_tpl/_section_teaser.tpl +++ b/_tpl/_section_teaser.tpl @@ -1,4 +1,18 @@
+ +{{ if $gimme->section->name == "Dialogue" }} + + + {{ $article['time'] }} + +
+ + + {{ $article['title'] }} + + +{{ else }} + {{ $article['img_alt'] }} @@ -13,8 +27,11 @@ - + {{ $article['deck'] }} + +{{ /if }} +
diff --git a/article.tpl b/article.tpl index 1d508d0..e0b171d 100644 --- a/article.tpl +++ b/article.tpl @@ -1,43 +1,59 @@ -{{ include file='_tpl/_header.tpl' }} - -
- -
-

{{ $gimme->article->name }}

-
- -
- {{ image rendition="articlebig" }} -

{{ $image->caption }}

-

{{ $image->caption }}

- {{ /image }} -
- -
- {{ $gimme->article->deck }} -
- -
-

{{ list_article_authors }} - - {{ if $gimme->current_list->at_beginning }}By {{ /if }} - - {{ if $gimme->current_list->at_end }} - {{ if $gimme->current_list->index > 1 }} and {{ /if }} - - {{ else }} - - {{ if $gimme->current_list->index > 1 }}, {{ /if }} - {{ /if }} - - {{ if $gimme->author->user->defined }}{{ /if }} - {{ $gimme->author->name }}{{ if $gimme->author->user->defined }}{{ /if }}{{ if $gimme->current_list->at_end }}. {{ /if }} - - {{ /list_article_authors }}

-
- -
- {{ $gimme->article->full_text }} -
- -{{ include file='_tpl/_footer.tpl' }} +{{ include file='_tpl/_header.tpl' }} + +
+ +
+

{{ $gimme->article->name }}

+
+ +{{ if $gimme->article->type_name == "debate" }} + +
+

PRO: {{ $gimme->article->pro_title }}

+
{{ $gimme->article->pro_text }}
+ +

CONTRA: {{ $gimme->article->contra_title }}

+
{{ $gimme->article->contra_text }}
+
+ +{{ else }} + +
+ {{ image rendition="articlebig" }} +

{{ $image->caption }}

+

{{ $image->caption }}

+ {{ /image }} +
+ +
+ {{ $gimme->article->deck }} +
+ +
+

{{ list_article_authors }} + + {{ if $gimme->current_list->at_beginning }}By {{ /if }} + + {{ if $gimme->current_list->at_end }} + {{ if $gimme->current_list->index > 1 }} and {{ /if }} + + {{ else }} + + {{ if $gimme->current_list->index > 1 }}, {{ /if }} + {{ /if }} + + {{ if $gimme->author->user->defined }}{{ /if }} + {{ $gimme->author->name }}{{ if $gimme->author->user->defined }}{{ /if }}{{ if $gimme->current_list->at_end }}. {{ /if }} + + {{ /list_article_authors }}

+
+ +
+ {{ $gimme->article->full_text }} +
+ +{{ /if }} + +
+ +{{ include file='_tpl/_footer.tpl' }} diff --git a/front.tpl b/front.tpl index e893feb..f8592f3 100644 --- a/front.tpl +++ b/front.tpl @@ -1,49 +1,49 @@ -{{ include file='_tpl/_header.tpl' }} - -
- -{{ list_playlist_articles name="Front page" length="1" }} - - - -
- {{ image rendition="headline-right" }} - {{ $image->caption }} -

{{ $image->caption }}

- {{ /image }} -
- -
- {{ $gimme->article->deck }} -
- -
-

{{ list_article_authors }} - - {{ if $gimme->current_list->at_beginning }}By {{ /if }} - - {{ if $gimme->current_list->at_end }} - {{ if $gimme->current_list->index > 1 }} and {{ /if }} - - {{ else }} - - {{ if $gimme->current_list->index > 1 }}, {{ /if }} - {{ /if }} - - {{ if $gimme->author->user->defined }}{{ /if }} - {{ $gimme->author->name }}{{ if $gimme->author->user->defined }}{{ /if }}{{ if $gimme->current_list->at_end }}. {{ /if }} - - {{ /list_article_authors }}

-
- -
- {{ $gimme->article->full_text }} -
- -{{ /list_playlist_articles }} - -
- -{{ include file='_tpl/_footer.tpl' }} +{{ include file='_tpl/_header.tpl' }} + +
+ +{{ list_playlist_articles name="Front page" length="1" }} + + + +
+ {{ image rendition="headline-right" }} + {{ $image->caption }} +

{{ $image->caption }}

+ {{ /image }} +
+ +
+ {{ $gimme->article->deck }} +
+ +
+

{{ list_article_authors }} + + {{ if $gimme->current_list->at_beginning }}By {{ /if }} + + {{ if $gimme->current_list->at_end }} + {{ if $gimme->current_list->index > 1 }} and {{ /if }} + + {{ else }} + + {{ if $gimme->current_list->index > 1 }}, {{ /if }} + {{ /if }} + + {{ if $gimme->author->user->defined }}{{ /if }} + {{ $gimme->author->name }}{{ if $gimme->author->user->defined }}{{ /if }}{{ if $gimme->current_list->at_end }}. {{ /if }} + + {{ /list_article_authors }}

+
+ +
+ {{ $gimme->article->full_text }} +
+ +{{ /list_playlist_articles }} + +
+ +{{ include file='_tpl/_footer.tpl' }} diff --git a/section.tpl b/section.tpl index 4ae0c2a..b5b24fe 100644 --- a/section.tpl +++ b/section.tpl @@ -1,43 +1,43 @@ -{{ include file='_tpl/_header.tpl' }} - -
- -
-

{{ $gimme->section->name }}

-
- -{{ $articles = array() }} - -{{ list_articles length="50" columns="1"}} - - {{ $article = array() }} - {{ $article['sub_category'] = $gimme->article->section->name }} - {{ $article['sub_category_url'] = $gimme->article->section->url_name }} - {{ $article['time'] = $gimme->article->publish_date|camp_date_format:"%H:%i, %D %M %Y" }} - {{ $article['title'] = $gimme->article->title }} - {{ $article['deck'] = $gimme->article->deck->first_paragraph|strip_tags }} - {{ $article['url'] = $gimme->article->url }} - - {{ image rendition="sectionthumb" }} - {{ $article['img'] = $image->src }} - {{ $article['img_alt'] = $image->caption }} - {{ /image }} - - {{ $articles[] = $article }} - -{{ /list_articles }} - -
- - {{ for $i=0 to count($articles) }} - {{ $article = $articles[$i] }} - {{ if $article != null }} - {{ include file='_tpl/_section_teaser.tpl' }} - {{ /if }} - {{ /for }} - -
- -
- -{{ include file='_tpl/_footer.tpl' }} +{{ include file='_tpl/_header.tpl' }} + +
+ +
+

{{ $gimme->section->name }}

+
+ +{{ $articles = array() }} + +{{ list_articles length="50" columns="1"}} + + {{ $article = array() }} + {{ $article['sub_category'] = $gimme->article->section->name }} + {{ $article['sub_category_url'] = $gimme->article->section->url_name }} + {{ $article['time'] = $gimme->article->publish_date|camp_date_format:"%H:%i, %D %M %Y" }} + {{ $article['title'] = $gimme->article->title }} + {{ $article['deck'] = $gimme->article->deck->first_paragraph|strip_tags }} + {{ $article['url'] = $gimme->article->url }} + + {{ image rendition="sectionthumb" }} + {{ $article['img'] = $image->src }} + {{ $article['img_alt'] = $image->caption }} + {{ /image }} + + {{ $articles[] = $article }} + +{{ /list_articles }} + +
+ + {{ for $i=0 to count($articles) }} + {{ $article = $articles[$i] }} + {{ if $article != null }} + {{ include file='_tpl/_section_teaser.tpl' }} + {{ /if }} + {{ /for }} + +
+ +
+ +{{ include file='_tpl/_footer.tpl' }} diff --git a/theme.xml b/theme.xml index d7fc3e0..ff16697 100644 --- a/theme.xml +++ b/theme.xml @@ -1,5 +1,5 @@ - + This is a tabloid newspaper theme!