The tips in this article are only suitable if you are familiar with Custom CSS. Custom CSS is not enabled by default on your account. Send an email to support@momice.com to have it activated free of charge.
You can fully style the Momice event website yourself using the existing widgets and pages. But would you like to go beyond the standard design options? Then you can make use of the Custom CSS functionality. Where to adjust this: In the Website Module under ‘Design’ you will find the ‘Custom CSS’ tab.
We have created a few examples for you, where you can simply copy the code. More information about Custom CSS can be found here: https://www.w3schools.com/.
Please note: CSS is very error-sensitive. A small mistake in text, {}, or punctuation will cause all the code to stop working. So make sure to thoroughly check that your design works properly across different screen sizes (mobile, tablet, and desktop).
Color transition
With the codes below, you can adjust the gradient of, for example, buttons, the program widget, the top bar, and the footer on your website.
Code:
background: linear-gradient(338deg, #b5818b, #4c7a9f);
- 338deg → Represents the angle in degrees
- #b5818b, #4c7a9f → These are the color codes
#topbar{
background: linear-gradient(338deg, #80a6b5, #ffffff);
}
background: linear-gradient(338deg, #273f52, #4c7a9f);
}
{}!Header widget
With the code below, you can align the text in the header widget of the homepage to the left. By default, it is centered.
Align title and subtitle to the left
.header-title-container{
text-align: left!important;
}
.header-subtext-container{
text-align: left!important;
}
.header{
min-height: 450px!important;
}
Example with header widget where the title and text are aligned to the left:
Program widget
With the code below, you can adjust the background and border colors of the program widget on the homepage.
Background color of blocks & border colors
This is the background color of the entire program:
html body .inner {
background-color: #ffffff00!important;
}
This is the background color of a program item + the border color:
html body .inner .item{
background-color: #ffffff00!important;
border-color: #000000!important;
}
* The # color code defines the color, and the 00 at the end indicates the transparency. You can also assign it another color or, for example, make it 50% transparent by replacing 00 with 50.
This is the background color of the top block containing the date:
html body .inner div.day-header.active{
background-color: #ffffff!important;
}
This is the border color of the top block containing the date:
.day-container{
border-color: #ffffff!important;
}
In the example above, the following has been applied:
The background color of the items has been made fully transparent, and the background of the entire program has been set to 80% transparency.
The border colors are fully transparent.
The program top bar has a gradient with two colors.
Button styles
With the codes below, you can adjust the style of the buttons in Momice.
Types of buttons to style:
a.btn = all buttons
.btn-1, .btn-2, .btn-3 = the individual buttons.
* Each of these can be styled separately with CSS.
Different types of button styles:
a.btn{
color:#000000!important;
background-color: #000000!important;
border-color: #46a8bf!important;
border: 5px solid;
border-radius: 25px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
padding: 10px 25px;
}
From top to bottom:
Text color
Button background color
Border color
Border thickness
Corner radius (rounding of the corners)
Shadow
Padding top/bottom & left/right
Knop 01
html body .btn{
background-color: #f1f4f6!important;
color:#b5818b!important;
border-color: #4c7a9f!important;
}
html body .btn{
background-color: #f1f4f6!important;
color:#4c7a9f!important;
border-color: #4c7a9f!important;
}
html body .btn{
background-color: #4c7a9f!important;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
border-radius: 25px
}
html body .btn{
border-radius: 25px
padding: 10px 25px;
border: 0px;
background: linear-gradient(338deg, #4c7a9f, #b5818b);
}
Text
With the code below, you can change text that is shown in uppercase by default to lowercase. For example, in buttons or in the countdown timer.
Lowercase or uppercase (Add the following piece of code to, for example, the buttons or countdown timer). In Momice, the text below the countdown timer and the text in the buttons is automatically set to uppercase.
Uppercase:
- text-transform: uppercase;
Lowercase:
- text-transform: lowercase;
Capitalize each word:
- text-transform: capitalize;
- text-transform: none;
Countdown timer colors
With the code below, you can change the colors of the countdown timer without affecting other colors on the website.
Large number:
span.number{
color:#b5818b;
}
Text below the number:
.widget-countdown .label-countdown.unit{
color:#46a8bf;
}
Pause button:
.countdown-toggle{
border-color:#46a8bf!important;
}