Design Modification Guidelines

From Smart Job Board help

Smart Job Board Help > Design Modification Guidelines
Jump to: navigation, search

Contents

This section will provide you with the general guidelines for modifying front-end design.

Making a Theme current

First of all, make sure that the needed software Theme is set to be current via Admin Panel. Since any changes you make to the design will be applied to the current Theme only.

Theme page is located in the Admin Panel > Templates > Themes.

There you will see all the Themes existing in the software displayed in the tabular format:

           Themes table.png

And also you can see if the needed Theme is set to be Current one or not.

If you want to make changes for another Theme you just need to click on the “Make current” link opposite this Theme.
Then that Theme will be set as the Current one and all the changes you make further for the front-end design will be applied to this particular Theme.


Highlight Template function

To easily find and modify the template of a certain front-end component you can use the Highlight Template on front-end function.

To enable it you need to go to Admin Panel > Templates > Edit Templates.
There you will see the “Highlight Templates on Front-end” function:

           File:Highlight templates admin panel.jpg

To enable this function you simply need to select ‘enable’ from the drop-down list and press the “Save” button.

Once the "Highlight Templates" funtion enabled you will see the templates being highlighted on the front-end.
The picture below displays the way templates will be highlighted ('edit templates' icon is marked out with the red circle on the picture below):

         Homepage highlighted.png


On the example of the "Sign in" form you can see the way "highlight template" function works when mouse pointer is over the icon.
I.e. the whole template will be highlighted with grey color and a tip showing the name and location of this particular template will appear.

To edit a certain template you just need to click on the "edit template" icon, like show on the picture below:

              Highlight icon clicked.png


Then you will see the "Template" dialog box opened with the Template Name  and location specified.

If it is the template you need to edit - click on the blue Edit this Template icon located on the form.

There will be "Edit Template" dialog box opened, where you can modify the template code the way you need.

              Edit template dialog box.png


You can also see the “Module”, “Function” and “Parameters” options on the top of the opened dialog box.

Each module contains one or more functions that can be used.

From the drop-down lists you can select ‘Module’, needed ‘Function’ and ‘Parameters’ to be inserted to the template. Once a Module is selected, in “Function” drop-down list you will see the functions relative to this particular Module appeared.
To add the selected Module and Function to the template you need to click on the “Insert” link located above the “Module” drop-down list.

After you clicked on the ‘Insert’ link you will see the appropriate line added to the template code in the wide text-area below.

 Note: New code line will be inserted to a place in the code where you set your mouse pointer.

Once you made the desired changes - make sure to press the "Save" button.
The changes will be immediatelly applied and displayed.

Thus using the "Highlight Templates on the front-end" function you can quickly and easily find and edit a template of any front-end component.


Site URL

There is a principle described further that you need to follow when your site URL should be specified in the templates code.

{$GLOBALS.site_url} – this function substitutes the site URL specified in the system settings.

So why is it better to use this function instead of specifying the URL directly e.g. http://YourSite.com/?

One of the main reasons is the following:
If later you decide to change your domain (e.g. to the http://YourNewSite.com) – then consequently you will have to change the old URL to the new one manually everywhere it is used in the templates
But if {$GLOBALS.site_url} function used – the system will automatically substitute the new URL (which you will only need to put once to the appropriate field of the System Settings)

Or if you decided to move your job board to the subdirectory /jobs/ -
http://yoursite.com/jobs/ - then again without {$GLOBALS.site_url} function you would have to change the site URL manually in all templates.


Make sure to use this function any time site URL should be specified in the templates code.

E.g. link to My Account page should be the following:

<td><a href="{$GLOBALS.site_url}/my_account/">My Account</a></td>

So when you want to define a link - you simply put the {$GLOBALS.site_url} instead of site domain name and then specify the name of a certain page e.g. /my_account/.
After than in the square brackets put the text of a link.

 Note: More instructions and tips on front-end customization you can find in the Tutorial section of the Manual.
Personal tools

User Manual for the latest version

Toolbox