Creating a website through Obio is easy, and no coding skills are required– but sometimes you can spruce up your page even more with CSS.

In this article you will find a compiled list of CSS we have gathered from Obior users. The list is sorted by theme because not all CSS will work with every theme.

Just go to Design Editor > Custom, copy and paste the code, then paste it in CSS field.

Ballard

  • You can take off the "Menu Background" at the top of the page

Code: body #nav {background-color:transparent  !important}

Marquee

  • You can add a "Call to Action" button as a menu item and modify how it looks with colors

  • First to go Page > Add a Page > Link > Under Page Info > Name, insert the name of your menu item like "Buy Tickets"> Under Link URL, either insert the link to your webshop or you can link to an internal page on your website that you already have– like events or news.
  • After you've created the Link Page, go to Design Editor > CSS > and paste the below code in Custom CSS
  • NOTE: The colors given in this code will make your button purple and yellow. Replace the bolded numbers after '#' with your own color codes. You can find codes here: https://material.io/guidelines/style/color.html#

Code: 

#nav  .navbar-nav  .nav-item:last-child .nav-link{
  background-color: #693c90;
  color:  #f0de00  !important;
  padding-left:12px;
  padding-right:12px;  
  border-radius:20px;
  transform:  2s  ease-in-out;}

#nav  .navbar-nav  .nav-item:last-child .nav-link:hover{
  background-color: #3B2150;
  color:  #f0de00  !important;}

Did this answer your question?