You got the Reseller plan and have started building your Chatbot Building Platform. Awesome !!

Now, you’re ready to take your reseller website to the next level and make it your own! Customizing your White label Reseller website CSS is a powerful tool. As a reseller, you can adjust CSS to personalize your website’s landing page, login page, and dashboard. This blog guides you in creating a website that reflects your brand’s unique identity and excites and engages your customers.

What is CSS Customization and How does it work?

But you may wonder what CSS is and how it works right! CSS is used to style web pages like a makeup kit for a website. It controls the look and feel of a site by defining how HTML elements should be displayed in the browser window. Don’t worry this isn’t as complicated as it sounds. Implementing Custom CSS for your reseller website will be easy after you finish reading this blog. Before you start customizing the CSS of your reseller website, there are three important things you need to know.

In CSS, there are symbols used to select specific options or functions; these symbols are called selectors, such as “:” “.” and “#” have specific meanings that allow you to style HTML elements based on different criteria. Let’s break down these three examples in more detail.

     1. Pseudo class uses colon “:”

In CSS a pseudo class starts with a colon. It is used to manipulate style based on a specific state of an element. For Example :root is the highest class used to set or change styles globally all over the main website HTML file. Another example is :hover which is like a condition based styling of an element; it only works when the user hovers over it with the mouse pointer.

    2. Class Selector with a period “.”

A class selector starts with a period “.” and selects elements with a specific class name. For example .ud-about-wrapper, this will apply styles to any HTML element with the class name "ud-about-wrapper". This is useful when you want to apply the same styles to multiple elements on a page.

   3. ID Selector with hashtag “#”

ID begins with a hash symbol “#” and is used to style a specific element with a unique id name. For instance, #sidebar targets an HTML element with id name "sidebar". ID is commonly used for unique page components like headers or sidebars, which need specific styles that don't apply to other elements.

How to start CSS Customization ?

After logging in to your BotSailor reseller panel, navigate to Settings > Style section on your reseller dashboard. Here you will find three options for the below pages:

1. Landing
2. Sign In
3. Dashboard

In this image, the reseller panel setting is on the right side, and a Notepad code editor is on the left. Some numbers and arrows indicate the options.

From the right side, you can see the Dashboard, Sign in, and Landing options (1)  you can select and download the pre-given CSS from the Sample CSS button (2). When you click the button your browser will download the file according to the page

you have selected as an example dashboard_sample.css (3). After the download is complete you have to open the .css file in a notepad or a code editor (6) which you can see on the left side. After the editing is done you then have to copy the code and paste it into the editing field (4) of the reseller panel and click the save button (5) to upload the code to the server. You have to reload the specific page to see the effect caused by changing the CSS code after customization.

Now, let’s start customizing those three pages. The landing page or homepage of the reseller website is the most important. It is the first page users visit, so it must attract visitors and bring their interest to the platform. Therefore, it's crucial to give it a professional appearance and ensure its colors align with the brand. After that, we will start changing the remaining two pages.

Customizing the landing page

When you download and open the sample CSS file for the landing page. To change the main color of your site, find the :root section, which looks like this :root { --primary-color: #642dbd; } (1) This color will appear across the whole website. You can change the hex code #642dbd to any other color to match your brand. Following the pseudo class, .ud-about-wrapper(2) and .ud-header(3) are regular CSS classes for the feature section of the homepage and the top navigation bar, respectively. Inside the curly braces { } any properties you add will apply to the connected website element. You can put any code for further manipulation, such as color gradient, animation, etc.  The hex color code #0dcaf0 is customizable—you can change it to match your brand. Finally, the !important attribute ensures that even if a pseudo-class sets a different color, this class with !important will override it. let's try it practically and change the color of the Landing page to make it cool and match your brand profile. First, with the primary theme color.

As mentioned earlier this #642dbd hex code is used to set the color, here this is Deep Violet  . 

In the left tab, you can see the landing page is opened and on the right the setting panel, now select the page(1) which you wanna edit change the color(2) and click the save button(3) you will see a Successful message(4) on the setting panel then when you reload the landing page (5) you will see the color changes to different one. 

Next, .ud-about-wrapper(2) & .ud-header(3) these CSS classes used to change the feature section color and navigation bar color. The navigation bar is used to navigate through the Home, Pricing, and Doc pages.

If you change the hex code you will see the changes after reloading the home page as before; for example, after changing the color the home page looks like the below screenshot:

Sign-In Page Customization

After the landing page, the next step is to edit the sign In page. As described earlier, download the sample CSS file for the sign In page from your reseller panel.

The primary element for styling the Sign In and password reset page is the #auth ID(1); it controls the background color and other aspects of the login and password reset pages you can set it to a solid color by changing the hex code or can use an image as background.  As usual, the !important attribute is used to override the primary theme color that we discussed earlier.

To change the background color of the header section where the username and password input fields are located, you need to modify the .card class(2) under the #auth ID. As per example #9fd5ff applies a light grey color to the header, ensuring it stands out from the rest of the page.

The login button is the main element on the Sign-In page that people interact with. You can change how it looks by adjusting a few things. Use .btn-primary {background} (3) to change the button's background color.

Adding a hover effect to the login button can enhance user experience by providing visual feedback. And to change the background color when the user hovers over the button you have to change the color of  this .btn-primary:hover (4) class.

To customize the color of the text on the login button, To change the color of the text on the login button, and find the part labeled .btn-primary { color: #eb1313; !important } (5). You can change it to any color you like by using another hex code.

By default, you might see all colors are set to #ffffff (white) or others. However, you can change these to any color or apply advanced CSS code to customize the page, ensuring it matches your brand’s color profile. After customization, the sign-in page will look like this you can use the number to identify each option we edited; Bellow image is only for example, remember you can add background image, and do more with those classes inside the #auth ID. 

Customizing the Dashboard CSS

Once the CSS customization for the Sign In and Landing pages is complete, we move on to the main dashboard, where users will spend most of their time. Customizing the dashboard allows you to create a cohesive and branded experience for your users and also for you. 

To modify the background color of the sidebar and ensure it blends with your website's theme, you need to change the hex color code associated with the #sidebar ID. Inside the curly braces, you can make various adjustments for the .sidebar-wrapper(1) class. Instead of only using text (for color name), you can apply any hex color, from black to any color you choose for the background.

The .navbar-header (2) class changes the header color of your reseller dashboard, and you can customize it to match your brand, in this section, you can put color gradients, animation, and other effects.

This line targets the sidebar header and applies a black background color to it by specifying #sidebar .sidebar-wrapper .sidebar-header (3), ensuring that only the header within the sidebar wrapper is styled. The !important tag overrides any other conflicting styles, which we mentioned several times, guaranteeing the header background stays black.

Similarly, the line that sets the text color for sidebar items to white targets the span element within sidebar item links .sidebar-item a span(4). Within these classes, many other manipulations can be done to customize colors, fonts, padding, and other styling aspects to achieve the desired look and feel.

Now let's see after manipulating the dashboard How does it look like;

Wrapping Up

Customizing the CSS for your White Label Reseller website is one of the ways to create a unique experience for your end users. We have discussed how the CSS works in a small context and how to personalize those CSS elements of landing, sign-in, and dashboard page. You can manipulate further more from the colour schemes to button effects and animation etc. With a few tweaks of the sample CSS file, you’ll have a professional and cohesive website that stands out from others. We have also added further Customization Templates for CSS (click to view), which we will keep updated. We are excited to hear your thoughts on how we could improve the pre-given website for our reseller; let us know your thoughts in the comments.