Site icon Osclass Documentation & Knowledge Base

How to create theme

admin

Osclass allows you to use themes in order to change the appearance of your site and make it unique. This page will explain the process to create a theme for your site. Themes must be placed inside oc-content/themes/ folder.

What is GUI?

GUI is a fallback theme, included in Osclass, if you mess up and delete your themes folder, you will still show the default theme. Every file you need to modify is in the gui folder (yoursite.com/oc-includes/osclass/gui). You do not need to modify those files, they are only there as a security measure.

Where to start?

We include a default theme with Osclass, the bender theme. The easiest way to start creating your own theme, is modifying an existing one. Copy your bender folder and rename it to mytheme. You can name it whatever you want, but for this tutorial, we’ll be using mytheme, replacing it when needed.


When modifying the index file of your newly created theme, you should find this code:

/*
  Theme Name: Osclass Bender Theme
  Theme URI: http://www.osclass.org/
  Description: This is the Osclass bender theme
  Version: 3.0
  Author: Osclass team
  Author URI: http://www.osclass.org/
  Theme update URI: 
*/


replace with this one:

/*
  Theme Name: My Custom Theme
  Theme URI: http://www.mywebsite.com
  Description: This is my theme
  Version: .0
  Author: Me
  Author URI: http://www.mywebsite.com/
  Theme update URI: 
*/

You can fill the variables as you want, but make sure to place the same name of the folder on the function {name_of_the_folder}_theme_info. Please, make sure you have not included any white spaces in the name of your folder. You are ready to go!

Modify your files

Once you have copied the theme and have your own files, you need to replace all references to the previous theme (bender) in your new files with the name (again, no white spaces) of your theme. Most files will have text that should be translated and each string has a reference to the theme. For example, in main.php you will find this:

<h1><strong><?php _e('Latest Listings', 'bender') ; ?></strong></h1>

which have to be changed to

<h1><strong><?php _e('Latest Listings', 'your_theme') ; ?></strong></h1>


Also, pay attention to files such as functions.php and admin/settings.php , where you will find other type of references. For example in functions.php some functions start with “bender_” in the name

function bender_add_body_class_construct($classes){

have to be changed to

function your_theme_add_body_class_construct($classes){


In admin/settings.php you will find something like this :

<form action="<?php echo osc_admin_render_theme_url('oc-content/themes/bender/admin/settings.php'); ?>" method="post" class="nocsrf">

have to be changed to

<form action="<?php echo osc_admin_render_theme_url('oc-content/themes/your_theme/admin/settings.php'); ?>" method="post" class="nocsrf">


Best way to do this find&replace is to use an IDE like Netbeans, Intellij IDEA or Eclipse that allows you to perform a find&replace over several files at the same time. Just be sure you are working on the correct folder of the theme and not on the whole folder of Osclass


You’re free to modify the files. Our advice is that you install Osclass in your localhost or in a test server, copy the the modern theme, rename it and start working. Then you install your theme and start modifying it, so you could see the changes directly.

Files

Theme files have very explanatory names, but here’s a more detailed list of the file and what it does.