Help & Support
We can't provide support for custom code and modifications, but can refer you to one of our JobBoard.io community experts for help. Email [email protected] for more information. You can also trade tips on our Facebook group.
What can I change?
JobBoard has lots of options for customizing your Job Board, including:
- A custom header - this fully replaces the logo and navigation with your custom code if populated
- A custom footer - you can add your own footer text here, or any external scripts you'd like to refer to. Keep these async if possible to avoid slowing down the website
- A custom sidebar - you can edit many of the sidebars throughout the website, including on the main page and purchase pages
- Ads - you can add custom advertising code in several places.
- Avoid using JQuery selectors to change elements - these may change in future.
Why does my CSS change the rest of the site?
This is generally an issue with CSS specificity. CSS Specificity is one of the toughest concepts in learning how stylesheets work and relates to how browsers interpret the CSS you write.
In order for the CSS you write to not affect the rest of the styling on the page, you need to understand how specificity works. In most cases, such problems are caused by the simple fact that your CSS is too general, and you need to define a more specific selector.
CSS specificity is a not a simple issue, but you can follow a two rules to avoid it happening on JobBoard.io
The first rule is that when writing custom HTML, always use specific classes or IDs. In the incorrect example, all your bullet points will disappear. In the correct example, only the bullet points in your new code will disappear.
<!--Incorrect Example-->
<ul>
<li>First Item</li>
<li>Second Item</li>
</ul>
<style>
ul{
list-style-type:none;
}
</style>
<!--Correct Example-->
<ul id="MyCustomList">
<li>First Item</li>
<li>Second Item</li>
</ul>
<style>
#MyCustomList{
list-style-type:none;
}
</style>
This example proves the second rule too - You should always try to use IDs to increase the specificity as ID selectors have a higher specificity than attribute selectors.
So, to avoid CSS conflicts, keep your CSS very specific by using IDs or refer to the selector examples below, copied from here.
A selector is the element that is linked to a particular style. E.g. p in
<style>p { padding: 10px; }</style>
A class selector is a selector that uses a defined class (multiple per page). E.g. p.section in
<style>p.section { padding: 10px; }</style>
An ID selector is a selector that uses an individually assigned identifier (one per page). E.g. p#section in
<style>#section { padding: 10px; }</style>
<p id="section">Text</>
A contextual selector is a selector that defines a precise cascading order for the rule. E.g. p span in
<style>p span { font-style: italic; }</style>
defines that all span-elements within a p-element should be styled in italics.
An attribute selector matches elements which have a specific attribute or its value. E.g. p span in
<style>p[title] { font-weight: bold; }</style>
matches all p-elements which have a title attribute.
Pseudo-classes are special classes that are used to define the behavior of HTML elements. They are used to add special effects to some selectors, which are applied automatically in certain states. E.g. :visited in
<style>a:visited { text-decoration: underline; }</style>
Pseudo-elements provide designers a way to assign style to content that does not exist in the source document. Pseudo-element is a specific, unique part of an element that can be used to generate content “on the fly”, automatic numbering and lists. E.g. :first-line or :after in
<style>
p:first-line { font-variant: small-caps; }
a:link:after { content: " (" attr(href) ")"; }
</style>
My Javascript/Query doesn't work...or...my JQuery breaks things
Adding your own custom JavaScript may conflict with existing code on some pages. For example, the WYSIWYG editor for jobs.
You can avoid this by not adding an additional JQuery library (its already included) or, where possible, just vanilla Javascript. There is a excellent tutorial on doing this here.. For most modifications, plain Javascript will be sufficient and avoid a lot of errors!
Other common problems include
1. The file is not there or does not exist
Before you do anything, navigate to any external files and check that it is exactly where it should be.
2. Script load order
Check JQuery is being loaded first.
3. Plugin isn't working
Sometimes plugins you find online just won't work. If its hosted on Github, check the error tracker, or try and find another plugin that will work.
4. Conflicts
Keep it simple. Try and just use JQuery online, or just native javascript if you can.
5. Javascript disabled/not supported by browser
Make sure if Javascript is off, your page doesn't break. If it will, make sure you include the following code. This will only appear if Javascript is turned off.
<noscript>
<div style="width:100%;margin:0 auto; text-align:center;margin-top:5px;">
<div class="alert alert-info"> This website best with Javascript enabled. Please follow these <a href="http://www.enable-javascript.com">simple instructions</a> or <a href="/contactus">contact us for more information.</a></div>
</div>
</noscript>
Embedding with existing websites
JobBoard.io is a hosted solution, so its best if you customize your job board to match your existing website. This is a better experience for the user, visitor and much easier to implement for you.
Debugging Responsiveness
When making changes, be sure to test on a wide range of screen sizes. JobBoard.io uses several utility classes to hide content depending on screen resolution, all prefixed by hidden, such as the class .hidden-xs.
Where can I get additional support?
We can't provide support for custom code and modifications, but can refer you to one of our JobBoard.io community experts for help. Email [email protected] for more information. You can also trade tips on our Facebook group.