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.
- 404.php: This is the error page, some if something went wrong (we hope this doesn’t happen!)
- alert-form.php: This is the alert form, shown on search page to subscribe to the search
- contact.php: Contact page to send a message to the admin of the website
- custom.php: This is a launcher for custom pages (of plugins), you could modify it but be sure of include the following line <?php osc_render_file(); ?>
- footer.php: Footer, shown at the end of the page
- functions.php: This file will be included, place here custom functions of your theme
- head.php: Head part of the HTML
- header.php: Shown at the begining of the page
- inc.search.php: This file is not required, but it’s available on modern theme. This include the search bar on top of the header
- index.php: You already know this file! This file holds the information of the theme (name, version, description,…)
- item.php: This is the page of the detailed item view
- item-contact.php: Page to contact the seller of an item
- item-edit.php: Form to edit the item
- item-post.php: Form to publish the item
- item-send-friend.php: Send a friend form
- main.php: The homepage of your site
- page.php: Launcher for custom pages, you could modify it but be sure of include the following line <?php echo osc_static_page_title(); ?> to show the title and <?php echo osc_static_page_text() ; ?> to show the description of the custom page
- screenshot.png: This is an image file to show a preview of your theme. Not really necessary but useful if you want to share your theme
- search.php: This is the search page, this only shows the search bar and filters. You could use two different views, as gallery or as a list
- search_gallery.php: Gallery view of search items (only items, search filters are located on search.php)
- search_list.php: List view of search items (only items, search filters are located on search.php)
- user-alerts.php: Users’ panel to manage users’ alerts
- user-change_email.php: Users’ panel to change email
- user-change_password.php: Users’ panel to change password
- user-dashboard.php: Users’ dashboard (the page they see when they log in)
- user-forgot_password.php: Form when the user forgot it password
- user-items.php: Users’ panel to manage users’ items
- user-login: Page to log in (in modern theme, you could log-in directly from the header, but this file is required and useful if login failed)
- user-profile: Page that shows the user profile (to edit it)
- user-recover: Page to recover the password
- user-register: Form to register
- Other files: located in folders css,images,js,languages,… they’re not required, but useful as you made the theme