Responsive template editing (HTML & CSS)

Contents

1. CSS editing tips
2. Homepage layout change
3. Editing CSS via admin
4. Updating CSS styles & header/footer customization
5. Changing background for website

CSS editing tips

1. Use browser developer tools in IE, Chrome or Mozilla (or additional plugin Firebug) to spot styles required. See the demo
2. Example of CSS editing: Changing background for website
3. Full guides for CSS and HTML editing can be found on various tutorial sites, such as W3schools.
4. Clear cache of the browser to see changes (usually Ctrl-F5/Command-R on your keyboard).

Homepage layout change

Can be easily customized:

Only boxes’ content can be updated via admin (not boxes positioning):

  • Main content layout (search box, featured jobs, employers, browse by categories, welcome box, right banner zone, latest jobs, etc.).

If options provided do not suffice:
Contact your JobMount job board account manager to request custom development for the homepage or inside pages layout.

Editing CSS via admin

Your job board software CSS file is available for review by following URL:

www.your_jobboard_domain.com/css/template.css

CSS file abstract:

html, body {
width: 100%;
height: 100%;
}
html {
overflow-y: scroll;
}
body {
font-size: 80%; font-family: Arial, Helvetica, sans-serif; color: #000;
margin: 0; padding: 0;
background: #f4f4f4;
text-align: center;
/* overflow-y: scroll;*/
}

To edit HTML or CSS, navigate in admin to

Settings: Appearance: Themes

Find the Theme you want to edit, i.e. usually it’s the one called Responsive unless you’ve created several different themes. More info on HTML/CSS editing can be found in the next section or by clicking here.

Steps to follow:

1. Navigate admin section of your job board software:

Settings: Appearance: Themes

Themes in admin

Important note:

  • Responsive template – default job board theme which can be updated. Be sure to make a back-up of this theme before editing it, so you could easily restore it if something goes wrong. You can also create several templates with arbitrary names.

2. Click Edit button to access the code management area;

There are 5 areas to edit:

  • Home Page Header – header area of the home page
  • Home Page Footer – footer area of the home page
  • Inner Page Header – header area for all internal pages
  • Page Footer – footer area for all internal pages
  • CSS – styles

You can use following variables to display functional areas:

Homepage variables

CSS Styles:

CSS styles

3. After the changes are done, click the Save button and check the updates on the website’s front end.

Additional info:

Theme color feature on the initial theme selection screen allows you to easily change the site’s overall color scheme, including all buttons and links, to your desired color in one click. Click on the box, select a color (or type the HEX code of your desired color) click Save. Then click the Set Active button for changes to take effect.

Select theme color

Changing background for website

Override default CSS style setting:

body,html {
height: 100%;
margin: 0;
}

OR

body {
font-family: robotothin,sans-serif;
position: relative;
z-index: 1;
}

by adding following line in CSS styles in your active theme (Responsive by default):

body {background-color: #FFFFF0;}
in APPEARANCE: LOOK & FEEL

    This site is protected by reCAPTCHA, Google Privacy Policy and Terms of Service apply.