Home Page

Content Management System

The highly flexible Hero Section is being used.

Join me as I build a Content Management System from the ground up.

This is the place where I come to record what's being done while I design and build the Home Page CMS. 

Login  |  Register

Content Slider


Demo Slide One

Click The Images To Open The Light Box

23.jpg (243 KB) footer.jpg (58 KB) backtwo.jpg (94 KB)

Demonstration of the Content Slider. There can be any kind of content placed in the slider.


Demo Slide Two

Click The Images To Open The Light Box

1.jpg (190 KB) 2.jpg (30 KB) 3.jpg (394 KB)

Content Slider Demo Two


Website Builder

Spectra CMS is now available for download. Read about it HERE and download it HERE.

If you are interested in using Home Page, click the Contact link and let me know. Also to offer up suggestions and ideas for improvement.

This is the place where I display all of the things I have added to the build. The content doesn't make sense because it's dummy content. I have plans to offer Home Page for download once I have completed the basic build. There will also be several add-on modules available for download.  And, if it catches on I will continue adding more features. I don't expect to see much interest in Home Page but we'll see.

cms.png (235 KB)
This is going to be a basic blog builder that has all the features needed to build a website.
    Some of the features are:
  • Auto installer
  • Secure membership/login
  • User account management
  • Content Builder
  • Content repositioning
  • TinyMCE 7 WYSIWYG editor
  • elFinder 2.1.65 media manager
  • Admin direct editing feature
  • Unique visitor counter
  • Plugins to support the content
  • Theme builder/editor
  • Modules

I integrated TinyMCE 7 and elFinder 2.1.65 to work seamlessly and provide a way to build content on the index page, as you can see here.

When the Admin is logged in, the Direct Editing icon can be seen at the bottom of the articles and sidebar blocks. Click on the icon and have the direct editing window pop up. It allows for editing this content without leaving the page.

The articles and sidebar blocks can be repositioned by clicking the arrow icon. When the window opens simply drag the content item into its new position. If the dropdown menus are being used, links can also be repositioned within the dropdown link container or for the single links assigned to the menubar.


Features Explained

Home Page has features built in to assist you when building content using the TinyMCE editor.

I will add more to the list below.

This is an example of a table layout using 2 table data cells.

When viewed on a mobile device the data cells remain side-by-side.

Classes can be used to add a certain look to images and text.

For images, the classes radius, and boxshadow can be added to the img tag.

Other classes are border, center, left, right, and spacer.

The result (radius and boxshadow)


2.jpg (29 KB)


Columns Explained

Using the preset columns to lay out the content is easy. Just use the CSS class of column1 through column6. See the code shown below for an example of how to do this.

This is an example of a 3-column layout using CSS class column3.

When viewed on a mobile device the columns fall below each other for better viewing. And it is much better than using a table.

2.jpg (29 KB)
cms.png (235 KB)

Lightbox Demonstration

I've added some dummy content to show how flexible the content builder is. View the source code to see how I built this page.

Click on the pictures to open the lightbox gallery.

Lorem Ipsum Dolar

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1.avif (81 KB)

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum Dolar

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1.jpg (33 KB)

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum Dolar

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

2.jpg (62 KB)

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Additional Content Can Be Added Here.

I added these images to the lightbox.

Lorem Ipsum

backtwo.jpg (94 KB)

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum

23.jpg (243 KB)

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum

footer.jpg (58 KB)

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

IP: 3.236.116.27