By popular demand, the long awaited dashboard customisation guide is finally here! We’re super excited to share with you some tips and tricks along with a readily customisable CSS template that can be easily modified to impress your clients.
Quick side note: if you want to skip the guide and just grab the FREE complete CSS styles for you to add into your settings page — and thereby completely transform your agency’s platform — then scroll to the bottom of the article where the full styling is listed for you to simply copy and paste 🙂
Why should you customise your Hike dashboard?
Brand association and experience is pretty important for your business. Maintaining brand consistency across your products and services will earn trust from your customers, which can include Hike’s SEO platform.
There has never been a better time to offer your SEO services to help businesses recover. During the Coronavirus pandemic, we’ve seen explosive growth in the digital space. Businesses that didn’t have an online presence began investing in websites to sell products or services online and to increase visibility in order to stay afloat and recoup losses. With the immunisation program going full steam, the economy will be reignited. Customising your Hike platform with your own brand will enable you to stand out from competing SEO contractors who are scrambling to take their share of the growing market.
The advantage of Hike’s Agency package is the ability to completely white-label the platform, taking a well refined product and making it your own, giving the appearance that you developed the platform and impressing your customers.
When your account has white-labelling enabled you’ll see settings for the following:
> Lead generation SEO reports (the SEO audit tool)
> Platform branding settings, which we’ll be covering in this article
> Pricing settings
> Custom product upsells
> Domain settings
> Image settings
While most of the settings are simple to set up, the most challenging part would be the Custom CSS under Platform Branding. It’s here that you’ll have amazing control over the appearance of the platform. In this tutorial, we’ll walk you through customising virtually every aspect of the platform using CSS. Let’s get started!
Where to look for design inspiration
Before we start customising the platform you should have a pretty good idea how it should look. The platform should match the look-and-feel of your website as closely as possible for consistency. If you haven’t got a website yet or open to having a quick refresh, there’s lots of great resources to look for inspiration. You can skip this step if you already know how your Hike should look.
Typography
Choosing the right font pairings can have a great impact on visual hierarchy and legibility. Most websites have a different font for headings and paragraphs. We recommend using Google Fonts because they’re the easiest to import into your Hike account.
Here are some great resources to find great pairings.
Google Fonts
Fonts from Google are free to use by anybody. If you find a heading that you like, it’ll suggest font pairings, saving you a lot of time figuring out which pairs work best.
To explore font pairings on Google Fonts, click on any font and then click on the Pairings tab to see combinations.
Typespiration
Created by Rafal Tomal, an award-winning designer. You’ll find excellent predetermined Google Fonts pairings along with colour palette ideas.
You could have a quick Google around for typography/font pairings from other resources to find something you like.
Design
A great design can improve user experience. The design, layout and colour palette should align and resonate with your brand. There are great resources to look for what’s current.
Dribbble
Dribbble is a fantastic eye candy resource where designers show off their best work ranging from branding, illustration, web design, use of colours and more. Visit the web design category to see what the latest web design trends are, or type “web app” in the search and use filters to find cool dashboard designs. To view any showcase, you will need to sign up for a free account.
Behance
Behance from Adobe is similar to Dribbble. You can narrow down your search using the handy filters.
Putting it together
By now, hopefully you will have a pretty good idea of what sort of fonts, design and colour palette you’re going for! It’s time to bring them into your Hike dashboard.
The desired design
In this tutorial, we’ll explain step-by-step how to achieve the look-and-feel in the screen grab below:
This will serve as a base for you to further customise on your own, or you can grab the template code at the end of the tutorial for a much more customised version that you can adjust.
How will we use CSS and what tools will we need to get the job done?
In order to customise Hike, you’ll need to brush up on a little CSS knowledge if you’ve never used it before.
What is CSS and how does it work?
CSS stands for Cascading Style Sheets. In simple terms, HTML defines the structure of a web page. CSS can be used to control the layout and style of these structures.
Let’s take a look at the following basic HTML page example to see how CSS works:
If you wanted to add a coloured background to the page, then you’d need to target the <body> HTML tag and declare a background colour property using the following css selector: body { background-color: black; }. When doing this, you would not be able to see the heading or paragraph anymore because by default, they’re black, blending into the background. We’ll now need to target the heading and paragraph selectors to make them white and legible: h1 { color: white; } p { color: white; }. Now you have a page with a black background and white text! We can even align the text by using the text-align property.
That’s how CSS works in general. You’ll be able to customise Hike’s platform with this understanding, and by overwriting the existing Hike CSS styles to achieve the look-and-feel you desire.
W3School’s CSS tutorial is a great place to learn more about CSS. They provide examples in each chapter along with a live HTML/CSS editor that will allow you to experiment with different styles.
CSS tools
The first step in customising any Hike page using CSS is to know what CSS selectors within Hike’s platform you will be targeting. We’ll need tools to help us identify the selectors and then write the necessary CSS to affect them.
Browser tools
Browsers like Google’s Chrome and Firefox offer in-built Inspector tools so you can inspect HTML code and CSS values of any website.
The majority of developers like to use browser Inspector tools because they have the necessary experience to see what CSS is doing to which elements and read things pretty well. There are plenty of tutorials available to learn how to use browser inspector tools. This isn’t the best way to start learning if you’re new to CSS. Thankfully, there’s a nifty tool called Hoverify that’s much easier to use! Once you’ve got the hang of Hoverify, you should be able to familiarise with the browser Inspector tools pretty quickly.
Hoverify Chrome extension
Hoverify is a great Chrome extension that does a lot of things! They keep adding features so it’ll get more powerful in time. You can grab a license for just $30. It can do the following:
> Inspect HTML and CSS
> An eyedropper for capturing colour values anywhere on a page
> Find out what technologies a website uses
> Observe how a webpage looks on different mobile devices
> Grab a page’s assets such as images and video
> Take screenshots
> Display the outlines of a webpage’s structure
We will focus on the Inspect and Eyedropper tools in this tutorial, but you are free to give Hoverify a spin in any way you like! You can see it in action by watching a YouTube demonstration: https://youtu.be/HJwh2umRFlk.
To start using Hoverify, you’ll need Google’s Chrome browser installed. If you haven’t done so, go ahead and install Chrome and then activate the Hoverify extension and your license.
Hoverify is straightforward to use. Clicking on the Hoverify icon in the extension menu on the browser will bring up its menu.
The Inspect option will display computed and selector based CSS styles and class names in a panel from any HTML element of a webpage where your mouse hovers. Whenever you find an HTML element on the page that you want the CSS values for, you can click or hit space to dock the panel and drag it around for easy reference. Editing the computed values allows you to see the effects of your changes on the page in real-time and help determine which selector you’re meant to target for overriding.
Sometimes elements on a page can have nested HTML tags, so you might not pick up the HTML elements you want right away. The best way to access the correct element from nested regions is to hover over a target region and then press the up/down arrows on your keyboard to move a level up or down until you’ve found the right selector and then hit space or click on it to dock the panel. To get rid of all the panels and exit Hoverify, simply hit ESC on your keyboard. It takes a little getting used to how Hoverify works!
Computed styles are fetched by Hoverify’s JavaScript engine, which is being continually improved and therefore not always 100% accurate. If the computed styles doesn’t seem right, then you can click on the stylesheet option to find the specific CSS values you need.
Once you’ve found the target element along with its styles, simply use the Copy Selector option on the docked panels to copy the selector class and then paste it into Hike’s white label Custom CSS editor.
Alternatively, you can copy and paste the class from the field, which is what we’re doing often.
You can then modify property values for any selector to achieve the desired style you want. The Copy Selector option copies the computed style, so if it isn’t working correctly when manipulating property values, then you’d want to highlight the block of code in the Style Sheet output instead and then paste it.
Be sure to highlight both the selector and CSS values when copying. You might want to get rid of other CSS values that you don’t need, only keeping the value you want to control, for example, the font weight values and not the line height values.
Customising the Hike platform step-by-step
Now that we’ve covered the basics of how Hoverify works, it’s time to customise the Hike platform using it! We’ll work from the top down, starting with importing custom typography, styling the header (navigation) and then the main content (page). We’ll do this by adding global and page-specific CSS styles. After this tutorial, you should be able to customise your Hike to whatever extent you want.
Google Chrome browser workflow
When modifying the Hike platform and reviewing the changes, we recommend that you log in to your https://my.hike.marketing account to make the necessary CSS changes in one tab. Navigate to the CSS editor when logged in and keep this open.
Open a separate, new tab or browser window and log into your Hike via your custom domain. This is where you’ll be monitoring your CSS changes since you won’t see any CSS changes on the https://my.hike.marketing side.
In your custom domain tab or window, right-click anywhere on the page and select ‘Inspect’.
This will bring up the Chrome DevTool inspector as a split-screen. We’ll need this open because it enables the ‘Empty cache and hard reload’ feature. Every time you write some CSS into the CSS Editor in your Hike White Label Settings, the changes may not always be visible. This is because the browser sometimes caches stylesheets and so needs clearing to see the latest changes. Press and hold the reload button in the browser while the DevTools inspector is open, and select the ‘Empty cache and hard reload’ option to clear the stylesheet cache and view the latest CSS changes.
If they still aren’t showing, be sure you check the CSS for any syntax errors, it only takes a mistype to break it! To check the validity of your CSS, paste it into a CSS validator under the ‘By direct Input’ tab here: https://jigsaw.w3.org/css-validator/.
The best time to do it
If you don’t have any active client accounts, then you can make the changes any time!
If your Hike account already has active client accounts, then you might want to make the changes during off-peak hours, when clients are least likely to be logged in to avoid disruption.
If you’re making changes during off-peak hours and feel pressured to complete the changes and don’t feel you’d be able to finish in time, then copy the code, clear the editor and store the code away safely to continue another time. No pressure!
Organising your CSS
CSS code can get really long, making it hard to figure out what each style does and find them. Organisation is key, so we recommend using comments to help explain each style as you write them.
Let’s break down the structure this way:
> Styles that apply everywhere
> Styles that apply to specific pages
Here’s an example of how you could organise it:
/*GLOBALS*/
/*FONTS*/
/*Import Poppins and Open Sans from Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
/*BODY*/
/*Apply Open Sans to the body so it's being used everywhere*/
body {
font-family: 'Open Sans', sans-serif!important;
}
/*PAGE-SPECIFIC OVERRIDES*/
/*DASHBOARD PAGE*/
/*Add rounded border radius to keyword ideas card*/
div.keywords {
padding: 30px!important;
border-radius: 30px!important;
background-color: #f7faff!important;
}We have divided global styles into /*GLOBALS*/ and page-specific overwrites into /*PAGE SPECIFIC OVERRIDES*/, with further categorisation for each. To see how we’ve structured ours, you can refer to the tutorial’s template style sheet. Now that you know how to organize your CSS, we can start adding some global CSS.
Importing and using Google Fonts
We recommend importing Google Fonts because it’s super easy to do. In this tutorial, we’ll use Poppins paired with Open Sans.
CSS identifies font weights (boldness) by a scale of 100 up to 900. Each of them can have styles, such as normal, italic or oblique. We’ve chosen Poppins Bold (font weight 700, normal style) for headings and Open Sans Light (font weight 300, normal style) for paragraphs. We’ll explain later on why the weights and styles are important.
You can choose any font you like, but here’s how we did it for Poppins and Open Sans.
- Search for the Poppins font in Google Fonts and click ‘Select this style’ for Bold (700) font weight to add it to the Selected Families panel
- Navigate back to the browse fonts page to find Open Sans and click on ‘Select this style’ for the Light font weight to add it to the Selected Families panel
- With the two fonts now added in the panel; under the ‘Use for web’ section, select the @import option and copy the code without the <style></style> tags and paste it into the top of the CSS editor in your account white label settings. Don’t forget to organise the code with comments!
Importing and using self-hosted fonts
You might want to use fonts that aren’t found in Google Fonts. In order to import self-hosted fonts into Hike, you’ll need to have these fonts hosted somewhere, typically on your website server’s font folder. Instead of using the @import rule, we’ll need to use @font-face:
@font-face {
font-family: “Title of your font”;
src: url(“https://your-domain.com/your-font-folder/custom-font-file.woff2”), format(“woff2”), url(“https://your-domain.com/your-font-folder/custom-font-file.woff”), format(“woff”);
}To generate the Woff formats of your font, we recommend Font Squirrel’s Webfont Generator. First you’ll need to upload your font file and then download the generated Zip file. You’ll find the @font-face rules pre-written in the stylesheet.css ready for pasting into the CSS Editor in your Hike white label settings. Don’t forget to upload the generated woff and woff2 files to your website’s font folder so the @font-face rules can fetch the fonts!
We have now imported custom fonts into the Hike account! Next, we’ll implement them.
Setting the body and paragraph font
Because we want to have Open Sans everywhere, we’ll target the <body> HTML tag which wraps around the entire body of the website. When clicking on ‘Select this style’ in Google fonts to grab the @import link earlier, further down the same panel you’ll find the CSS rules for specifying the font family. This is what we’ll use to apply the font to the body selector in the CSS editor.
/*BODY*/
/*Apply Open Sans to the body so it's being used everywhere*/
body {
font-family: 'Open Sans', sans-serif!important;
} If you’re using a custom font other than Google Fonts, you’ll need to use the same Font Family title from the @font-face rule:
/*BODY*/
/*Apply custom font to the body so it's being used everywhere*/
body {
font-family: 'Title of your font'!important;
} We’ve added a comment (/**/) to clarify what each CSS code does. Remember to leave each style a comment, you’ll be glad you did as it grows larger!
We’re using the !important property because if we don’t, then we won’t always be able to overwrite Hike’s existing body font. We’ll need to use !important for every selector and property here on out in order to force an overwrite of Hike’s CSS. When reloading the page and checking all pages, we now should see Open Sans all over. We’ll tackle the headings next.
/*Apply Poppins to headings*/
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif!important;
font-weight: 700!important;
letter-spacing: -1px!important;
} Setting the font for all Headings
We’ll use Poppins fonts for all headings to create a clear visual hierarchy. HTML headings are defined by the following tags: <H1>, <H2>, <H3>, <H4>, <H5> and <H6>. We’ll use the element selector as a group to target these tags. We chose the bold (font weight 700) variant of the Poppins font earlier, so it needs to be declared. A letter spacing of -1 pixel is also declared to group the letters closer together, which you can freely adjust.
You should check as many pages as you can after declaring CSS that affects all pages to see if anything is amiss. For example, if we look at the Keyword Ideas and Sitemap pages, we can see that the page title does not use the Poppins font.
Because the page title doesn’t use an HTML heading tag, the Poppins font isn’t applied.
/* Some page titles aren't using an HTML heading tag so we'll apply the Poppins font to them by targeting the class selector */
.desc-heading {
font-family: 'Poppins', sans-serif!important;
font-weight: 700!important;
letter-spacing: -1px!important;
} After refreshing the browser window and checking all pages, we can confirm all headings/page titles now have the Poppins font. We can now proceed to setting the background colour!
Changing the background colour
We want to change Hike’s platform site-wide background color from its current light grey to white. You can choose any colour you like, so long as it has the correct HEX or RGBA values for colours. To find out the colour values you need you can grab them from W3School’s colour picker. The HEX value for white is #ffffff, so we will use that in our body element selector to use it site-wide:
/*Change background colour to white everywhere*/
body {
background-color: #ffffff;
} Next we’ll style the header and work our way down to the main content.
Styling the Header (navigation)
Hike’s navigation stays where it is as you scroll down. We’ll remove that effect, change the font and remove menu text dividers and icons for a cleaner look!
Removing the “sticky” effect
Using Hoverify, highlight the entire navigation element by moving the mouse to its outermost area, not the inner parts of it, and then hit space to dock the Hoverify panel. If you’re unable to highlight the entire navigation, highlight any element of the navigation and keep pressing the up arrow on your keyboard until the navigation element is highlighted.
In the Hoverify’s panel we need to look for clues as to what’s causing the navigation to stay stuck while we scroll the page. We’ll need to look in the stylesheet tab if there aren’t any clues in the computed styles. This is an example where the Hoverify JavaScript isn’t always able to pick computed styles up.
We can see that the position: fixed value is causing the header to stay stuck on page scrolls. To find out what we can do with this property we’ll need to head over to CSS Tricks, a super-helpful resource that explains what you can do with CSS very well, often with demos and examples! Click on the search icon on the CSS Tricks website to open the search panel and enter ‘position’ and click through to the position property page. On this page you’ll find all the values you can have with the position property.
The Static value will work, but it doesn’t have the flexibility that the Relative value does to nudge elements around with other property values, which we might need. Inherit will work also, but it depends what position value the parent tag has which we’ll need to dig into, wasting our time. The other values will be doing the opposite of what we’re intending to do. It’s a good idea to experiment with different values to understand how they affect the header if you’re new to CSS.
Let’s remove this effect:
/*NAVIGATION*/
/*Remove sticky effect*/
.nav-bar {
position: relative!important;
} Fixing the page content shift
The page content shifts down when you save the changes and reload the page. Originally the header was in a fixed position, so the page’s content was tucked beneath it. This was compensated by increasing the amount of padding at the top. The page content still maintained excess padding values when we added a relative position to the header. We’ll need to rectify that.
Using Hoverify we’ll need to locate the selector for the page content. If you are unsure which selector you’re meant to be targeting, you can always edit the computed values and see how they change, to identify the culprit. Don’t forget to add !important at the end of any value you input into the Hoverify panel to see the changes!
In the stylesheet tab we’ve identified the selector with the excess padding so we can overwrite it.
/*PAGE CONTENT*/
/*Fix excess padding*/
.main-content {
padding: 15px!important;
} You can adjust the pixel values until you’re happy. We’ve opted for 15px all around. Now we’ve got the page content back to normal and everything’s consistent, we can continue editing the header styles!
Removing the menu text dividers
The border CSS property must be set to zero in order to remove the existing border dividers from the navigation. In this instance, Hoverify’s JavaScript engine doesn’t manage to pick up the computed border styles. To find the element and class that has the border property, we will need to keep traversing the elements by using the up/down arrow keys on the keyboard and checking the stylesheet tab to find the border values and grab the class for it.
There are multiple elements with classes that have borders. Firstly, these are the links that do not have a dropdown effect. The second are menu links with a dropdown effect. Finally, the Websites menu item has a border to the left of it. You’ll be able to grab all of these classes with Hoverify!
/*Remove menu text dividers*/
.nav-bar__item {
border-right: 0!important;
}
.nav-bar__dropdown {
border-right: 0!important;
}
.nav-bar__item--left-border {
border-left: 0!important;
} Removing navigation bottom border
There is a bottom border spanning across the entire navigation element. To remove it, we will need to add a zero value to the bottom border style of the .navbar class. Since we already have the .navbar class to add a relative positioning to it, we’ll expand from it. We’ll also update the comment to reflect the additional change too.
/*NAVIGATION*/
/*Remove sticky effect. Remove bottom border.*/
.nav-bar {
position: relative!important;
border-bottom: 0!important;
} The result is a cleaner menu without borders! We will remove the menu icons next.
Removing menu icons
Using Hoverify, we’ll move the mouse over the home icon and dock the panel in order to copy the class. We’ll add a display: none value to make it disappear, although it would technically still be there as HTML code which we don’t have control over. Keep doing this for all menu icons except the cog. The reason we shouldn’t hide the cog icon is because there is no text link for it, so your clients won’t be able to edit settings for their website!
You can group the classes together, separating them with commas and declare a display: none to apply the same rule across all icons to keep the CSS code compact.
/*Remove all icons from menu except the cog*/
I.fad.fa-home-lg-alt.text-primary.xs-mr-5, i.fad.fa-bullseye-pointer.text-info.xs-mr-5, i.fad.fa-tasks.text-success.xs-mr-5, i.fad.fa-store.text-gmb.xs-mr-5, i.fad.fa-link.text-danger.xs-mr-5, i.fad.fa-analytics.text-primary.xs-mr-5, i.fas.fa-graduation-cap, i.fad.fa-browser.text-primary.xs-mr-5, i.fad.fa-users.text-danger.xs-mr-5 {
display:none!important;
} Adding Poppins/custom font to the navigation links
In the same way we’ve applied the Open Sans font to the body of the Hike platform pages, we’ll target the navigation selectors this time. Don’t forget that there are two classes, one for links without a dropdown and another for dropdowns. You can group them to keep the code compact.
/*Apply Poppins font to menu links*/
.nav-bar__item, .nav-bar__dropdown .dropbtn {
font-family: ‘Poppins’, sans-serif!important;
font-weight: 700!important;
font-size: 16px!important;
} The navigation looks very different now! A few finishing touches could be applied, such as removing the dropdown icons, shadow and hover backgrounds.
Next, we’ll tackle the page content!
Styling the page content
Next, we will align the content of the page with the clean look-and-feel of the header. Most pages share a common card layout, so modifying the appearance of a card layout should affect the cards on the other pages. Remember site-wide styles should be categorised as comments under a group, while styles that affect only a particular page should be categorised separately. This helps you quickly locate and change styles that affect site-wide and styles that affect particular pages.
Let’s begin styling the ‘Get started here’ card by applying a more rounded border, subtler shadow and border. Hike’s stylesheet already applies a shadow, so we need to look for the CSS property that is generating the shadow. Using Hoverify, we can identify the correct class by hovering over the card and then pressing up on the keyboard until the shadow CSS property appears.
There’s a cool resource to generate smooth shadows on this website https://shadows.brumm.af/. We’ve generated ours but you’re free to play with the settings until you’ve got the shadow you want.
/*Apply smooth shadow on cards*/
.card {
border-radius: 30px!important;
box-shadow:
0 0px 8.4px rgba(0, 0, 0, 0.003),
0 0px 20.2px rgba(0, 0, 0, 0.004),
0 0px 38.1px rgba(0, 0, 0, 0.005),
0 0px 67.9px rgba(0, 0, 0, 0.006),
0 0px 127px rgba(0, 0, 0, 0.007),
0 0px 304px rgba(0, 0, 0, 0.01)!important;
} Refreshing the page will show subtle, smooth shadows on all cards. This may seem a bit much. To make it more clean, we could target only the outermost ‘main’ cards and have the smaller cards inside of it to not have a shadow. Instead of pressing up on the keyboard to reach the .card class, we’ll target the .card-body.xs-mb-0 class this time.
/*Apply smooth shadow on outermost cards*/
.card-body.xs-mb-0 {
border-radius: 30px!important;
box-shadow:
0 0px 8.4px rgba(0, 0, 0, 0.003),
0 0px 20.2px rgba(0, 0, 0, 0.004),
0 0px 38.1px rgba(0, 0, 0, 0.005),
0 0px 67.9px rgba(0, 0, 0, 0.006),
0 0px 127px rgba(0, 0, 0, 0.007),
0 0px 304px rgba(0, 0, 0, 0.01);
} Using Hoverify to identify the inner cards classes, we can then remove their shadows, add a thinner, softer grey border and background colour. We needed to press up on the keyboard this time to get to the class selector.
/*Remove shadow on the inner cards, add thinner light border and a soft background colour*/
.card.card-bordered.xs-mb-0.xs-mt-5 {
box-shadow: none!important;
border: 1px solid #e6ecf5!important;
background-color: #f7faff!important;
} The ‘Get started here’ card is shaping up nicely! Just to add a couple of finishing touches, we need to increase the padding and the border roundness so it’s evenly spaced and nicely rounded!
/*Add custom padding to all cards*/
.card-body {
padding: 30px!important;
}
/*Make cards have rounded border radius*/
.card {
border-radius: 30px!important;
} The inner cards under ‘Website performance’ were not affected in the same way as the ‘Get started here’ card. So we’ll need to identify the class selector and apply the same thing to it.
We’ve identified the other inner card class to be .card.card-bordered. We’ll add it as a group to the previous style and update the CSS:
/*Remove shadow on the inner cards, add thinner light border and a soft background colour*/
.card.card-bordered.xs-mb-0.xs-mt-5, .card.card-bordered {
box-shadow: none!important;
border: 1px solid #e6ecf5!important;
background-color: #f7faff!important;
} At this point, with almost everything rounded and soft, the one thing that sticks out and looks out of place are the buttons! Let’s style the buttons so they’re aligned with the rest of the page.
/*BUTTONS*/
/*Add rounded border to all buttons*/
.btn {
border-radius: 30px!important;
}
/*Remove button shadows*/
.btn {
box-shadow: none!important;
} Everything is much more aligned now! By now, you should know how to use Hoverify and some useful CSS resources to be able to manipulate Hike’s existing CSS by overwriting them with your own. Next, we’ll cover page-specific CSS which are styles that only apply to specific pages.
Page-specific CSS targeting
If we look at the Dashboard page, we can look for elements that only exist on this page, like for example, the ‘Add keywords’ button within the ‘Quick tips’ card. Using Hoverify, we can find the class for it and add a rounded border to line it up with the other buttons.
/*PAGE-SPECIFIC OVERRIDES*/
/*DASHBOARD PAGE*/
/*Make the keywords ideas button rounded and more like the other buttons*/
.keyword-ideas-button {
border-radius: 30px!important;
width: 100%!important;
text-align: center!important;
margin-top: 20px!important;
padding: 10px 15px!important;
margin-left: 0px!important;
font-weight: bold!important;
} It still doesn’t look quite right, we’ll need to style it so it appears more like the inner cards with a background colour.
/*Add rounded border radius and background colour to keyword ideas card*/
div.keywords {
padding: 30px!important;
border-radius: 30px!important;
background-color: #f7faff!important;
} Another example of page-specific CSS styling could be the link scoring boxes on the Backlinks page. These boxes don’t appear anywhere else on the platform, so you can create comments that categorise styles for such things.
You’re now ready to customise your Hike dashboard to your hearts’ content! We’ve provided along with this tutorial an in-depth stylesheet full of lots of customisations that you can easily use as a base, or modify to your needs. We’ll continually keep this stylesheet updated! Happy editing!
BONUS – Extended CSS File Sheet
For those of you who want the entire CSS styles in one place, then look below! Simply copy and paste the code below into your Custom CSS settings box within your white-label settings page and you’re good to go!
/* EXTENDED TEMPLATE CSS STYLES */
/*GLOBALS*/
/*FONTS*/
/*Import Poppins and Open Sans fonts from Google Fonts*/@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Poppins:wght@700&display=swap');
/*BODY*/
/*Apply Open Sans to the body so it's being used everywhere*/
body { font-family: 'Open Sans', sans-serif!important;}
/*Apply Poppins to all headings*/
h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif!important; font-weight: 700!important; letter-spacing: -1px!important;}
/* Some page titles aren't using an HTML heading tag so we'll apply the Poppins font to them by targeting the class selector */
.desc-heading { font-family: 'Poppins', sans-serif!important; font-weight: 700!important; letter-spacing: -1px!important;}
/*Change background colour to white everywhere*/body { background-color: #ffffff;}
/*BUTTONS*//*Add rounded border to all buttons and remove shadow*/
.btn { border-radius: 30px!important; box-shadow: none!important;}
/*Remove button shadows*/.btn { box-shadow: none!important;}
/*NAVIGATION*//*Remove sticky effect. Remove bottom border. Make it full width. Add padding to line up with main content padding. Add top border.*/.nav-bar { position: relative!important; border-bottom: 0!important; padding: 0 15px!important; width: 100%!important; border-top: 10px solid #009aff!important; height: 120px!important;}
/*Remove menu text dividers*/.nav-bar__item { border-right: 0!important;}
.nav-bar__dropdown { border-right: 0!important;}
.nav-bar__item--left-border { border-left: 0!important;}
/*Remove all icons from menu except the cog*/I.fad.fa-home-lg-alt.text-primary.xs-mr-5, i.fad.fa-bullseye-pointer.text-info.xs-mr-5, i.fad.fa-tasks.text-success.xs-mr-5, i.fad.fa-store.text-gmb.xs-mr-5, i.fad.fa-link.text-danger.xs-mr-5, i.fad.fa-analytics.text-primary.xs-mr-5, i.fas.fa-graduation-cap, i.fad.fa-browser.text-primary.xs-mr-5, i.fad.fa-users.text-danger.xs-mr-5 { display:none!important;}
/*Apply Poppins font to menu links*/.nav-bar__item, .nav-bar__dropdown .dropbtn {font-family: ‘Poppins’, sans-serif!important;font-weight: 700!important;font-size: 16px!important;}
/*Make dropdown menus background same colour as the menu hover colour and remove shadow*/
.dropdown-content { background-color: #f7faff!important; box-shadow: none; border: 0!important;}
.dropdown-content a:hover { background-color: #e6ecf5!important;}
/*Remove icons from dropdown*/
.nav-bar__dropdown ul li i { display: none!important;}
/*PAGE CONTENT*/
/*Fix excess padding*/.main-content {padding: 15px!important;}
/*Make subheadings seen above and outside cards use Poppins and add underline*/
h3.font-size-24 { font-family: 'Poppins', sans-serif!important; font-weight: 700!important; letter-spacing: -1px!important; font-size: 35px!important; border-bottom: 8px solid #0099ff; margin-bottom: 30px; line-height: 1.3; width: fit-content;}
/*Apply smooth shadow on outermost cards*/.card-body.xs-mb-0 { border-radius: 30px!important; box-shadow: 0 0px 8.4px rgba(0, 0, 0, 0.003), 0 0px 20.2px rgba(0, 0, 0, 0.004), 0 0px 38.1px rgba(0, 0, 0, 0.005), 0 0px 67.9px rgba(0, 0, 0, 0.006), 0 0px 127px rgba(0, 0, 0, 0.007), 0 0px 304px rgba(0, 0, 0, 0.01);}
/*Remove shadow on the inner cards, add thinner light border and a soft background colour*/.card.card-bordered.xs-mb-0.xs-mt-5, .card.card-bordered { box-shadow: none!important; border: 1px solid #e6ecf5!important; background-color: #f7faff!important;}
/*Add custom padding to all cards*/.card-body { padding: 30px!important;}
/*Make cards have rounded border radius*/.card { border-radius: 30px!important;}
/*Make titles of each card use Open Sans and in uppercase*/
h5.font-size-20 { font-family: 'Open Sans', sans-serif!important; font-weight: 300!important; text-transform: uppercase!important; font-size: 15px!important; margin-bottom: 15px!important;}
/* Add bottom margin to cards */
.xs-mb-10 { margin-bottom: 30px!important;}
/*Make the action info boxes borders rounded like the cards*/
div.action.action-high { padding: 30px!important; border-radius: 30px!important;}
/*Make the action borders the same as the inner card borders and not red*/
.action-high { border: 1px solid #e6ecf5!important; background-color: #f7faff!important;}
/*Vertically align progress bars by removing bottom margin and make it rounded*/
.progress { border-radius: 30px!important; margin-bottom: 0!important;}
/*Make all labels and tags have a rounded border*/
.label, .tag { border-radius: 30px!important;}
/*PAGE-SPECIFIC OVERRIDES*/
/*DASHBOARD PAGE*/
/*Welcome name*/
h4.font-size-28.xs-mb-5 { letter-spacing: -1px!important; font-size: 45px!important;}
/*Make the keywords ideas button rounded and more like the other buttons*/.keyword-ideas-button { border-radius: 30px!important; width: 100%!important; text-align: center!important; margin-top: 20px!important; padding: 10px 15px!important; margin-left: 0px!important; font-weight: bold!important;}
/*Add rounded border radius and background colour to keyword ideas card*/
div.keywords { padding: 30px!important; border-radius: 30px!important; background-color: #f7faff!important;}