The template is fully responsive. Using mediaquerries in the stylesheet, there are set break points:
full width (over 1450px) with 4 columns in a row - (column width = 25%)
@media screen and (max-width: 1450px) with 3 columns in a row (column width = 33.333%)
@media screen and (max-width: 1200px) with 2 columns in a row (column width = 50%)
@media screen and (max-width: 700px) with 1 column in a row (column width = 100%)
All images and media are also fully responsive.
NEWSBOX 01
Template "newspaper"
author, dd.mm.yyyy
The name of the template newspaper explains what purpose is the template ment for. Very simply maintainable e-newspaper, e-broshure, e-bulleting, e-campain, e-manual etc. are the targets for this template.
It may be freely extended by other plugins (as long as the content of the pages fits into newsboxes. All these e-materials may be very attractive if saturated by images, sounds and other media.
NEWSBOX 02
Description
author, dd.mm.yyyy
The template newspaper is built of 12 newsboxes. Minimum is 1 newsbox in a column as the basic structure is of 4 columns. It has no user navigation and acts as a newspaper. The template is prepared for CMSimple_XH pages. It may be rextended simply copying/pasting the newsboxes incl. the necessary scripts. The scripts controle the content of each newsbox and if there is no content, the newsbox is hidden. The only mandatory feature is the naming of pages (e.g. News##) both in the content and respective newsboxes in template.
On the pages (News##) may be added any content (texts with headings, bolckquotes, lists, tables, images of any standard formats (jpg, jpeg, png, jpg, gif,bmp, svg etc.).
But also media of any valid format (video: mp4, ogg, webm; audio: mp3, m4a).
There is no need to use any special plugin. However, plugins may be used in newsbox as well (this is not tested wit all possible plugins, so some discrepancies are possible).
To place any image and/or media the built in editor (tinymce4 or 5) are fully functional.
NEWSBOX 03
The pages
author, dd.mm.yyyy
Each newspaper article shall be written on one single page and the page shall then be show in respective newsbox.
news01
news02
news03
news04
...
Standardly, the page has:
H6 heading with the name of the page for better orientation while editting.
H1 heading for the page title
H5 heading for the author and date of publishing
The publishing date may be added aically from the editor functions
These H1 and H5 headings are wisible only in admin mode. In admin mode there is also visible the navigation.
The title of an article is assigned as H1 heading. H2 heading is formated as a subtitle for internal splitting of an article. If more headings are needed, they may be specified in the stylesheet.
NEWSBOX 04
More media
author, dd.mm.yyyy
Sound files may be also inserted on any page withou any further plugins.
H2 Subtitle
Any visual or voice content may be inserted on any place within a page.
H2 Subtitle
Only standard and regular formats of medias are supported.
NEWSBOX 05
Template
author, dd.mm.yyyy
Template is built of newsboxes. The newsboxes are placed into 4 columns in a row. The column may contain optional number of newsboxes.
row
column
column
column
column
newsbox
newsbox
newsbox
newsbox
newsbox
newsbox
newsbox
newsbox
newsbox
newsbox
newsbox
newsbox
/column
/column
/column
/column
/row
Each page (News##) is shown in one newsbox.
If the page has no content (except of the H2 page name), the respective newsbox is hidden.
There is a test script for each newsbox in the template checking the length of the content.
<!-- NEWSBOX 01 --> <?php /* test the content of newsbox, if the content is longer than 9 characters, show the newsbox. Else hide the newsbox */ $test = strip_tags(newsbox('news01')); $test = str_replace(array(" ", "\r","\n", " "), '', $test); if(strlen($test) > 9) { ?> <?php echo '<div class="newsbox">'.newsbox('news01').'</div>';?> <?php }else { ?> <?php echo '<div class="hide">'.newsbox('news01').'</div>';?> <?php } ?>
NEWS 06
Responsivity
author, dd.mm.yyyy
The template is fully responsive. Using mediaquerries in the stylesheet, there are set break points:
full width (over 1450px) with 4 columns in a row - (column width = 25%)
@media screen and (max-width: 1450px) with 3 columns in a row (column width = 33.333%)
@media screen and (max-width: 1200px) with 2 columns in a row (column width = 50%)
@media screen and (max-width: 700px) with 1 column in a row (column width = 100%)
All images and media are also fully responsive.
NEWSBOX 07
Inserting tables
author, dd.mm.yyyy
Tables may also be inserted on pages. They bay be of any width. In the newsbox the, the overlapping content of a table is hidden, but the table is movable (scrollable left/right).
Year
Members
Men
Women
Children
2000
250
120
100
30
2001
360
140
140
80
2002
590
230
190
170
There is one requirement, however. If a table shall overlap the qidth of the column, it shall be put into its own DIV container. To do so, follow the steps:
make a new row and write any dummy text (e.g. table)
highlight the text and chose DIV
replace the "table" by real table of your choise.
add data into the table
save
Scrolling table
Click into the table and use either a mouse or arrow keys to move the table.
NEWSBOX 08
Using plugins
author, dd.mm.yyyy
hi-fancybox
All images in this template are zoomable. It is the feature of the hi-fancybox plugin.
Using this plugin requiers to link inserted image to its original and assign the link with zoom class. The class shall be (it is added in this stylesheet) added in the stylesheet. The class may be formated (border, padding, background, other effects) or it may be left empty.
Using the zoom_g class you may assign more images on the same site (in the newsbox) and show them as a controlled slideshow.
Using the zoom_i class you may show any external page or document in a stand-alone lightbox.
slideshow
slideshow by Christoph M. Becker facilitates displaying a scrolling slideshow of images (optionally with links and with a description). It has no back-end functionality to manage the galleries. Instead the images have to be uploaded via FTP or the CMSimple_XH file manager. Additional information for the links and the description has to be entered manually in a special text file.
NEWSBOX 09
Download
author, dd.mm.yyyy
The template is widely adjustable. Feel free to make any extension or modification to match it to your needs. I would be thankfull for any comments and even more, if you send me your modified copy.
Also, I would be happy to konow, if you use this template and if you let me know the URL at info[at]cmsimple.sk.
To use the template, you need to add images in ./templates/newspaper/images. If using any plugins, read carefully attached help files of the plugins.
The template doesn't require any additional plugins and has no navigation for a user.
The navigation is only available in admin mode.
Pages are named in a sequence e.g. News01, News02,... These names ar mandatory, as they are used in the newsbox funktions in the template.
Page content is split into four columns and is fully responsive.
The news in newsboxes may contain texts, images, video, sound and/or another plugin calls.
It is recommended to keep the images in rational dimensions (e.g. max. width 800px).
However, the template may offer even more sexi page using the hi-fancybox. In this case it is recommended to use two sets of images (e.g. r_img.jpg / 600px and z-img - 1200px).
The z-images may then be used as the targets to "zoom" images zoomed by hi-fancybox plugin.
Number of newsboxes is unlimitted - the only necessary step is to copy the entire newsbox code block and extend any of the columns in the template.
It is also to consider the number and leght of newsbox content so the lenght of all columns will have about the same value. This is important for narrower displays, where the columns are placed on the beginning of next row.
CHANGELOG
changed font
added "To the TOP" button
set max-height to newsbox; added "Read more..." hvoer-field
corrected small bugs and tipos in template and styesheet
NEWSBOX 11
Title of NEWS 11
author, dd.mm.yyyy
Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
NEWSBOX 12
Title of NEWS 12
author, dd.mm.yyyy
Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.
Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.