# (32) Elevate Your Rakosell Store Design with Simple Coding Tricks

Rakosell is an excellent e-commerce platform that allows you to effortlessly create and manage your online store. This article introduces some simple programming tricks for Rakosell users to beautify web pages in the backend website design, enhancing the user experience. These techniques only require basic knowledge of HTML and CSS, without the need for advanced programming skills.

<figure><img src="/files/fi46u9Of1Me5pA2VdjY0" alt=""><figcaption></figcaption></figure>

In the Rakosell backend under "Site Settings," you can input various custom codes in Custom HTML to effectively optimize your website. Below are some commonly used codes by the editor (it is recommended to paste the code within the \<head> tags):

1. **Making the Navigation Bar Transparent**

To make your Navigation Bar transparent, you can use the following code:

<mark style="background-color:purple;">\<style></mark>\ <mark style="background-color:purple;">body .rs-merchant-navbar {</mark>\ <mark style="background-color:purple;">box-shadow: none !important;</mark>\ <mark style="background-color:purple;">}</mark>\ <mark style="background-color:purple;">.bg-nav, .rs-member-nav-bar, .rs-nav-placeholder {</mark>\ <mark style="background-color:purple;">background-color: unset !important;</mark>\ <mark style="background-color:purple;">}</mark>\ <mark style="background-color:purple;">.rb-sticky-top.rs-nav-placeholder {</mark>\ <mark style="background-color:purple;">display:none !important;</mark>\ <mark style="background-color:purple;">}</mark>\ <mark style="background-color:purple;">\</style></mark>

2. **Hiding the Footer**

If you want to hide the Footer section, you can use the following code:

<mark style="background-color:purple;">\<style></mark>\ <mark style="background-color:purple;">.footer-top {</mark>\ <mark style="background-color:purple;">display:none !important;</mark>\ <mark style="background-color:purple;">}</mark>\ <mark style="background-color:purple;">\</style></mark>

3. **Hiding the Navigation Bar**

If you want to completely hide the Navigation Bar, you can use the following code:

<mark style="background-color:purple;">\<style></mark>\ <mark style="background-color:purple;">body .rs-merchant-navbar {</mark>\ <mark style="background-color:purple;">display:none !important;</mark>\ <mark style="background-color:purple;">}</mark>\ <mark style="background-color:purple;">.rb-sticky-top.rs-nav-placeholder {</mark>\ <mark style="background-color:purple;">display:none !important</mark>\ <mark style="background-color:purple;">}</mark>\ <mark style="background-color:purple;">\</style></mark>

4. **Customizing Dropdown Menu Colors**

To customize the background color of the Dropdown Menu, you can use the following code:

<mark style="background-color:purple;">\<style></mark>\ <mark style="background-color:purple;">.custom-dropdown-item-list{</mark>\ <mark style="background-color:purple;">background-color: {{ COLOR }} !important;</mark>\ <mark style="background-color:purple;">}</mark>\ <mark style="background-color:purple;">\</style></mark>

In this code snippet, you can replace {{ COLOR }} with your desired specific color (e.g., Red, Blue, etc.), which will change the background color of the Dropdown Menu.

Please note that the !important style rules in these code snippets ensure that your settings take precedence over other styles. By using these simple programming tricks, you can easily enhance the aesthetics of your Rakosell backend pages to meet your design needs. Hope these tips are helpful to you!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rakosell.gitbook.io/rakosell-setup-tutorials/32-elevate-your-rakosell-store-design-with-simple-coding-tricks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
