Menu FOLIOPAGES
Close

Getting Started

Themes & Styling

Page Management

Getting Started with FolioPages CMS

Requirements

Foliopages was built using a server with the following specs:
  • Apache 2.4
  • PHP 7.2
  • MariaDB 10.4 + PDO
  • PHP GD library (for FolioGallery)
  • jQuery javascript library 3.4+

Installation

  1. Download and unzip the FolioPages package.
  2. Create an empty database for FolioPages on your web server. The database must have a user with all privileges.
  3. Edit "includes/db-connect.php" file and enter your database information.
  4. Upload FolioPages files to your server.
  5. Visit install.php in a web browser where you uploaded the files and follow instructions, ie. http://mywebsite.com/install.php.
  6. !IMPORTANT after installation is complete, delete the install.php file from your server.

File and Directory Structure

First level directories on root:
  • cp - most admin files
  • images - user avatars and website logo images, requires write permission
  • includes - config files
  • modules - plugins and modules
  • PHPMailer - open source software that sends out email using smtp
  • themes - each theme is a subfolder in this directory
  • uploads - all files/folders uploaded using the builtin file manager go here, requires write permission
Main configuration files
  • .htaccess - configuration file for Apache web server.
  • includes/config.php - important settings for advanced users.
  • includes/db-connect.php - credentials for connecting to database.
  • includes/functions.php - most php functions are located in this file.
  • includes/language.php - holds messages for system actions.
  • includes/smtp.php - used for configuring an smtp server to send out system emails (ie. user signups).

Modules

FolioPages includes builtin modules in the "modules" directory. You can modify the existing modules or create your own if you are familiar with PHP and MariaDB.

Slides

A slide is a block of content that can be added from the "Slides" section of admin dashboard. The purpose of a slide is to be able to re-use the same content in various pages without repetition. Simply create a slide and paste its shortcode into a page where you want it to appear. Creating a slide is much like creating a page, only with fewer options. If you want to make the slide scrollable horizontally, add more than one block of content to it. Each slide can be given a unique class name, which can be styled from the theme's CSS file.

File Manager

The builtin file manager enables creating local folders and uploading files to them. The file manager is also integrated with the editor and can be used to insert images into the WYSIWYG editor directly. You can paste a shortcode into a page to display a gallery or album from existing folder(s). The gallery shortcode is located at the top of each folder in file manager. Please refer to Shortcodes section in this page for more details.

Users

User sign up can be enabled or disabled. The reason you may want to enable user sign up might be to:
  • Limit access to certain page(s) to signed in users only.
  • Accept comments from signed in users only, although anonymous commenting can be turned on for desired pages.
  • Send private messages to your users.
  • Grant admin or editor userlevels to certain users.
  • Administrators can have access to content, settings and user permissions.
  • Editors can add/edit pages and do not have access to user data or website configuration elements.
  • Page comments can only be moderated by an administrator or the author of the page.

Menu Builder

  • A menu builder is included in admin's dashboard.
  • Each menu item can be a URL (entered manually) or can have sub-menu items from existing pages or custom URLs.

Theme Structure And Styling

Each theme is a sub-directory within the "themes" directory.
To create your own theme:
  1. Create a sub-folder in "themes" directory, for example "mytheme".
  2. Copy content from the default theme "foliopages" to "mytheme".
  3. Visit the settings page in the admin section and select "mytheme" as the active theme.
  4. Modify file(s) in "mytheme" sub-folder to your liking.
Unless you want to modify the underlying code, all you need to do to style your theme is to modify "css/style.ccs" file located in your active theme directory.

Page Structure

<body>
   <header>
	  <a class="site-logo">
	  <a class="site-logo-text"> 
	  <nav>
   <main>
	  <article>
		 <aside class="left">
		 <aside class="right">
			<h1>
			<div class="head-section">
			   <div class="head-subsection">
			<div class="content">
   <footer>

Category Page CSS Classes

.article-list{}
.article-list .list-item{}
.article-list .list-item .thumb{}
.article-list .list-item .text{}
.article-list .list-item .text-fw{}
.article-list .list-item .fade{}
.article-list .list-item .bottombar{}
.article-list .list-item .bottombar .box-left{}
.article-list .list-item .bottombar .box-right{}
.pagination{}

Slide CSS Classes

.sliderotator{}
.sliderotator-inner{}
.sliderotator .mainslide{}
.sliderotator .mainslide .textcontainer{}
.sliderotator .mainslide .textcontainer-inner{}
.slideleft{}
.slideright{}

Module CSS Classes

Modules either have their own CSS file located in the module's direcoty or are styled from the "cp/css/style.css" file, which also holds other classes used in the dashboard section.

Styling Elements in a Page

  1. Edit a page and assign a unique class to it.
  2. Style elements under this class in active theme's CSS file.
For example, assign "mystyle" class to a page, then modify desired elements in this page under this class.

As an example the following elements:
article{
   width:80%;
}
.article-list{
   max-width:700px;
}
Can be styled like so:
.mystyle article{
   width:100%;
   background:red;
}
.mystyle .article-list{
   max-width:800px;
}

Page Management

Add/Edit a Page

  1. Login to dashboard as an administrator or editor.
  2. Click the "New Page" button at the top.
  3. Enter a title for your page and proceed to edititng the page.
  4. To edit an existing page, in dashboard click on desired page from the list and proceed.

Page Elements

The following elements or features can be enabled/disabled or configured in a page. Each element is either self explanatory or has an info icon for more details:
  • Page Title.
  • Page Alias.
  • Page Content editor - for docs refer to Trumbowyg.
  • Page Title Tag.
  • Page Meta Tags.
  • Publish checkbox.
  • Visible To Public checkbox.
  • Show Share Icons checkbox - displays contents of share-icons.php file, which must be edited manually.
  • Show Title Details checkbox - shows/hides page title, date, author at the top of the page.
  • Sort Order - page order when list of pages are displayed in a category.
  • Page Class box.
  • Page Categories checkboxes.
  • Enable comments and other comment variable checkboxes.
  • Page Authors box.

Shortcodes

  • [siteurl] - Enter this shortcode in the editor as the URL of website.

  • [pageslide id=SLIDE_ID] - Displays a slide in a page. Replace SLIDE_ID with the id of the slide you want to display. Find shortcode for each slide in "Slides" section of dashboard.

  • [foliogallery id=ID_OF_FOLDERS] - Displays folder contents as a gallery or album in a page. Replace ID_OF_FOLDERS with id(s) of folder(s) you want to embed. For multiple folders replace ID_OF_FOLDERS with comma separated ids of folders. Find ID for each folder in "Files" section of dashboard.

  • [pagelist cat=CAT_ID limit=NUM] - Displays a list of pages within a category. Replace CAT_ID with the category ID and NUM with number of pages you wish to display. Replace NUM with 0 for unlimited number of pages. Find category ID in "Categories" section of dashboard.
    TIP: to display pages in specific order, edit the page and enter desired order in the "Sort Order" box.