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.

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).

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:

1. make a new row and write any dummy text (e.g. table)
2. highlight the text and chose DIV
3. replace the "table" by real table of your choise.
4. add data into the table
5. 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.

NEWSBOX 10

Changelog

Tata, 07.02.2024

© 2024 by Tata"newspaper" version 1.2
A template for CMSimple_XH 1.7.x

Simple template for a "multinewsboxed" newspaper.

• 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.

If you have any comments, leave a message here: