While Smartjobboard is one of the most flexible job board softwares out there, we get a few requests here and there for customizations that are not available. This is where CSS can save the day. With a little CSS knowledge you can take control of the way your job site looks and feels.
Adding custom CSS code
To add a CSS code to your job site, navigate to Appearance > Customize theme > Custom CSS. Next,write or paste in the CSS code you'd like to run.
What is CSS?
CSS or Cascading Style Sheets allows you to customize the way your web page appears. It is called "cascading" style sheets because you can add as many as you'd like as long as they do not conflict with one another. You're welcome to browse w3schools CSS Guide or any other tutorial for more information.
CSS Syntax
In our tutorial, we cannot discuss in details every single aspect of CSS. However, below please find some basics that you need to know in order to modify your job site's look and feel:
Selector: This is the HTML element that you're looking to style. This is generally a class or id.
Property: This is similar to an HTML tag, it is what defines how the styles in your CSS should look to the web.
If you're adding multiple CSS styles, be sure to end each value with a semi colon and separate your property and value with a colon.
.selector {
property:value;
property:value;
property:value;
}How to find the CSS selector
Right click the element you want to find the selector for (in our example, it is featured companies title), and select Inspect Element.
Then depending on the browser you're using, either FireBug (Firefox), WebDevelopers (for Chrome or Firefox) or any other web developer console should automatically highlight the div class. This is how you determine what element you'll need to use as your selector. In our instance it is .featured-companies__title.
In our example, we'll change the color of the featured companies title into green. To do so, in Smartjobboard admin interface add featured companies selector and add the green color. Again you can refer to w3schools color picker to find the color you wish.
When finish click Save and head over to frontpage to double check whether css has been successfully applied.
What can I do with CSS?
The possibilities are endless. Choose your own adventure! Below are some small example customizations that we have come across.
Example One: Sticky top menu
Copy and paste the below CSS code if you wish your top menu navigation stay visible while scrolling down.
body {
padding-top: 80px;
}
.navbar {
position: fixed;
width: 100%;
top: 0;
}Example Two: Parallax scrolling (top/main banner)
.main-banner {
background-position: 0 80px;
background-size: 100%;
background-attachment: fixed;
}@media all and (max-width: 1350px) {
.main-banner {
background-size: auto 380px;
}
Example Three: Background of the search box
.quick-search__wrapper {
background: #a7a7a8;
border: none;
}Example Four: Navigation menu item color
.navbar-left .navbar__item:nth-child(5) a {
color: #ff6a50 !important;
}where 5 is the place of an item
Example Five: The whole site background
body {
background: #cecece;
}.quick-search {
background-color: #cecece;
}
Example Six: Footer background
.footer {
background-color: #cecece;
}
Additional reference materials
If you google "CSS tutorials", you will find tons of good reference materials. Some of them:
Teamtreehouse - is a great place for beginners to start learning and actually practicing CSS and HTML.
Lynda - here you can find a lot of amazing online video tutorials and trainings.
And here is a youtube video showing how to use FireBug to edit CSS styles. Hope you'll enjoy it.