You can customize your superblog with the “Custom CSS” feature.
Superbloggers are having a fun time playing with the look and feel of their superblogs.

Take a look at some of the beautiful and playful customizations. Also, the code is provided for you to take inspiration from.

1. Menu items in the header are centered

superblog center menu items in navigation header

CSS

ul.menu {
  font-size: 12px !important;
  color: rgb(51 65 85) !important;
  flex-grow: 1;
}
ul.menu>li:last-child {
  flex-grow: 1;
}
.logo-sec {
  flex-grow: 1;
}
.logo-sec>a {
  margin-right: auto;
}
#menu-cta>button {
  color: #FFFFFF !important;
  float: right;
                 
}
superblog change color of header and footer

CSS

.header {
    background-color: #1f398a;
}
button#nav-cta {
    background-color: white;
    color: #1f398a;
}
.nav-links {
    color: #ffffff !important;
}
.navicon,
.navicon:before,
.navicon:after {
    background-color: white !important;
}
.menu-btn:checked ~ .menu-icon .navicon {
    background: transparent !important;
}
* .footer {
    background-color: #1f2937 !important;
}
.footer .menu-item > a,
.footer .menu-item > a:hover {
    color: white !important;
}
.footer .rights-text {
    color: white !important;
}
ul.menu {
    background-color: #1f398a !important;
}​​

3. Who doesn't love a lazy panda on the home page?

superblog add image to homepage

Code

This is actually the Custom JS feature. Paste the below code in Misc Scripts section.

<script>
const executeCode = () => {
  const div = document.querySelector(".text-header-container");
  const img = document.createElement("img");
  img.src = "https://content.lazyapply.com/panda1.webp";
  img.style.marginBottom = "20px";
  img.style.width = "300px";
  div.prepend(img);
  const images = document.querySelectorAll("img");
  images.forEach((i) => {
    if (i.src.includes("https://superblog.ai/images/logo_bolt_micro.png")) {
      i.parentNode.style.display = "none";
    }
  });
  const anchor = document.querySelectorAll("a");
  anchor.forEach((i) => {
    if (
      i.href.includes(
        "https://chrome.google.com/webstore/detail/lazyapply/pgnfaifdbfoiehcndkoeemaifhhbgkmm?hl=en"
      )
    ) {
      i.childNodes[0].innerText = "Add Lazyapply To Chrome";
    }
  });
};
window.addEventListener("load", () => {
  executeCode();
});
</script>
<style>
  .post-container{
box-shadow: 0 0.5px 20px 1px white!important;
padding: 10px!important;
}
                                  
</style>

4. Of course, the dark mode!

superblog dark mode

CSS

No code is required for this! Just Visit settings>basic and pick Dark Mode.​

5. Smaller fonts and a cute WhatsApp widget

superblog reduce font size

CSS

.sun-editor-editable {
    font-size : 16px;
}
.sun-editor-editable h3 {
    font-size : 1em;
}
.sun-editor-editable li{
   margin-bottom : 8px;
}
.sun-editor-editable p{
line-height : 1.625;
           
}

6. Beautiful combination of colors to separate the header section

superblog customize header section with different color

CSS

body>.root {
  background: #F7F5F4!important;
}
.nav-header {
 background: #F7F5F4!important;
  height: 75px;
}
.text-header-container {
  margin-bottom: 0!important;
width: 100%!important;
    background: #F7F5F4!important;
    max-width: 100%!important;
}
.header-title {
  color: #312658!important;
}
.header-caption {
  color: #312658!important;
  font-weight: 400;
  padding-left: 5%;
  padding-right: 5%;
padding-bottom: 40px;
}
.content {
  background: #FFFFFF!important;
}
.content-container {
  background: #FFFFFF!important;
}
.wrapper {
  padding-top: 75px!important;                
}


Well, this is a custom code that needs to match with your own branded website. 

This superblog user replaced the header and footer element of superblog with their nextjs app's components.


Read about more features in superblog docs.

What are you waiting for? Give superblog a try.