Disclaimer
- We will not be responsible for any broken website, you should be able to read and understand what you are going to paste into your editor before copying any snippet, this document is not intended to people first approaching CSS editing, it just wants to be an incentive to CSS basic properties editing.
- We do not guarantee that those CSS snippets will work on your website, what we can tell you is that we took them from my Flatsome working websites. Sometimes you can find a note written below the snippet title, explaining which setting in Flatsome’s options you will need to set in order to have the snippet working.
- The snippets basically contain fixes and basic customization for the most important elements like menu, header, columns, slider… To edit the colours you will need to enter your custom color HEX codes (you can pick them from https://tools.sitekit.id/color-converter), to edit borders, spacings, font sizes you will need to enter the value in pixels or em. For some snippets you won’t have to touch any property (e.g. snippets to disable some feature). To be sure that you know which snippets you have to modify the values, you will find on the right of the property a note saying e.g. “change color”, if not you will just have to paste it as it is.
- We have divided the document in two main sections, the first one: “All screens” contains all the snippets that apply to all the breakpoints, they should be pasted and edited in the first section of Flatsome Custom CSS, then the second one “Tablet and Below” contains all the snippets which will edit the tablet and mobile specific CSS and should be edited or pasted in the second or third section depending on where you want to apply the styles.
How to use them?
Just check for the snippet you are interested for, read it carefully, check which properties you will have to edit and paste it in the right CSS editor section. Then edit it and preview it in your browser. In case you are interested in more snippets, do the same, just read, past and edit it one by one. Why? Because in case you have issues, you know which snippet is responsibile and you can easily identify and remove it. You can also paste them directly in your broweser inspection and try them live without modifying your current theme settings.
Do not copy paste the entire document in your text editor, you will break your design 100%
ALL SCREEN
CUSTOM FONTS
First upload your fonts via FTP, then include them in your CSS and apply them. In this case we used the same font family with two different weights, bold is identified by “700”, so basically we have uploaded two separate files per weight and declared them with the same font-family name and a different weight property. In case you want to upload three or more weights of the same family, you will need to declare them one by one with the same name and relative weight (you can check the weights at https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight), then apply the desired weight to your elements.
/* Fonts declaration */
@font-face {
font-family: Karla;
src: url(https://yourwebsite.com/fonts/Karla-Regular.woff);
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: Karla;
src: url(https://yourwebsite.com/fonts/Karla-Bold.woff);
font-weight: 700;
font-display: swap;
}
/* Apply the new fonts */
/* Body, buttons and paragraphs */
body, p {
font-family: "Karla", Arial, sans-serif;
font-weight: 400;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: "Karla", Arial, sans-serif;
font-weight: 700;
}
/* Desktop Menu */
.nav > li > a {
font-family: "Karla", Arial, sans-serif;
font-weight: 700;
}
/* Mobile Menu */
.off-canvas-center .nav-sidebar.nav-vertical > li > a {
font-family: "Karla", Arial, sans-serif;
font-weight: 700;
}
DISABLE BORING SOCIAL ICONS TOOLTIP
/***************************** DISABLE BORING SOCIAL ICONS TOOLTIP *****************************/
.tooltipster-base {
display: none !important;
}
HEADER
- Increase the maximum menu items spacing
- Just set from the theme settings the maximum spacing option available then, paste the code and then increase the second value (30px) as maximum as you wish
/* Increase the maximum menu items spacing */
/* Just set from the theme settings the maximum spacing option available then, paste the code and then increase the second value (30px) as maximum as you wish */
.nav-spacing-xlarge > li {
margin: 0 30px; /* Increase the second value */
}
- Add a smooth color transition when hovering menu items
- You can change the ms by increasing or decreasing the .3s value, e.g. 500ms = .5s
/* Add a smooth color transition when hovering menu items */
/* You can change the ms by increasing or decreasing the .3s value, e.g. 500ms = .5s */
.nav > li {
-webkit-transition: background-color .3s; /* Increase or decrease the timing */
-o-transition: background-color .3s; /* Increase or decrease the timing */
transition: background-color .3s; /* Increase or decrease the timing */
}
- Increase menu items text size
- Note: this code will work if you set from the theme settings the maximum menu items spacing available.
/* Increase menu items text size */
/* Note: this code will work if you set from the theme settings the maximum menu items spacing available. */
.nav-size-xlarge > li > a {
font-size: 1.1em; /* Increase or decrease size */
}
DROPDOWN MENU
- perfectly position the arrow at the right of the menu item
/* perfectly position the arrow at the right of the menu item */
.has-dropdown .icon-angle-down {
opacity: 1; /* You can decrease the opacity if you prefer, maximum opacity, no transparency is 1 */
margin-top: 3px;
margin-left: 6px;
}
- Increase or decrease dropdown menu width
/* Increase or decrease dropdown menu width */
.nav-dropdown {
min-width: 230px; /* Increase or decrease the width */
}
- Remove the default extra margin for the last dropdown menu item
/* Remove the default extra margin for the last dropdown menu item */
.nav-dropdown > li:last-child:not(.nav-dropdown-col) > a {
margin-bottom: 0;
}
- Change the dropdown menu item color and background hover color
/* Change the dropdown menu item color and background hover color */
.nav-dropdown > li > a:hover {
color: #4600ad; /* Change color */
background-color: #fceff8 !important; /* Change color */
}
- Change the dropdown menu active link color
/* Change the dropdown menu active link color */
.nav-dropdown li.active > a {
color: #ff25c0; /* Change color */
}
STICKY HEADER
/*************** STICKY HEADER ***************/
.header-wrapper.stuck {
box-shadow: none; /* Remove shadow */
background-color: white; /* Change background color */
border-bottom: 1px solid #d3d3d3; /* Change border bottom color */
}
FOOTER STYLING
/***************************** FOOTER STYLING *****************************/
/* Permanently hide the absolute (copyright) footer */
.absolute-footer {
display: none;
}
/* Remove footer default top border */
.footer-1, .footer-2 {
border-top: 0;
}
ACCORDION STYLING
- Move the arrow to the right
/***************************** ACCORDION STYLING *****************************/
/* Move the arrow to the right */
.accordion .toggle {
left: unset;
right: 0;
}
- Set a better accordion inner padding
/***************************** ACCORDION STYLING *****************************/
/* Set a better accordion inner padding */
.accordion-inner {
padding: 10px 40px 0 5px; /* You can change them if you want, but I think this is just perfect */
}
- Style the accordion title
/***************************** ACCORDION STYLING *****************************/
/* Style the accordion title */
.accordion-title {
border-top: 1px solid #ddd; /* Change border color and width */
padding: 15px 40px 15px 0; /* You can change them if you want, but I think this is just perfect */
}
- Style the accordion active title
/***************************** ACCORDION STYLING *****************************/
/* Style the accordion active title */
.accordion-title.active {
background-color: transparent; /* Add an HEX color instead of transparent if you want a coloured background */
border-color: #ff25c0; /* Change border color */
color: #ff25c0; /* Change text color */
font-weight: 700; /* Change font weight */
border-top: 3px solid #ff25c0; /* Change border color */
padding-left: 5px; /* Change left padding, 5px is just fine */
}
MARKER
- Change marker background color and text color, when used from the text editor
/***************************** MARKER *****************************/
/* Change marker background color and text color, when used from the text editor */
mark {
background-color: #39cccc; /* Change background color */
color: #fff; /* Change text color */
}
SLIDER
- Add border radius to slider’s images, increase or decrease the value as you wish
/***************************** SLIDER *****************************/
/* Add border radius to slider's images, increase or decrease the value as you wish */
.flickity-viewport {
border-radius: 10px; /* Increase or decrease the radius as you wish */
}
- Change previous/next arrow color
/* Change previous/next arrow color */
.flickity-prev-next-button svg, .flickity-prev-next-button .arrow {
fill: #777; /* Change the color */
}
- Change dots color and size
/* Change dots color and size */
.flickity-page-dots .dot.is-selected {
background-color: #00acad; /* Change the color */
}
.flickity-page-dots .dot {
border: 3px solid #00acad; /* Change color border */
width: 16px; /* Increase or decrease size */
height: 16px; /* Increase or decrease size */
}
LIGHTBOX
- Make lightbox fullscreen (without paddings)
/***************************** LIGHTBOX *****************************/
/* Make lightbox fullscreen (without paddings) */
.mfp-container {
padding: 0 !important;
}
- Hide lightbox counter
/* Hide lightbox counter */
.mfp-counter {
display: none;
}
EMBED VIDEO
/***************************** EMBED VIDEO *****************************/
.video-fiw {
border-radius: 10px !important; /* Set border radius */
border: 3px solid #ff25c0; /* Set border width and color */
}
REMOVE BORING DIVIDER BETWEEN WIDGETS, PRODUCTS AND BLOG POST TITLES AND DESCRIPTION
/***************************** REMOVE BORING DIVIDER BETWEEN WIDGETS, PRODUCTS AND BLOG POST TITLES AND DESCRIPTION *****************************/
.is-divider {
display: none;
}
ADD A CUSTOMIZED TEXT BOX BETWEEN POST FEATURED IMAGE AND POST TITLE IN THE POST STEAM
/***************************** ADD A CUSTOMIZED TEXT BOX BETWEEN POST FEATURED IMAGE AND POST TITLE IN THE POST STEAM *****************************/
.box-text h5::before {
content: "ARTICLE"; /* Change the text */
font-size: 12px; /* Change the font size */
background-color: #00c980; /* Change the background color */
padding: 5px 10px; /* Adjust box paddings */
position: absolute;
margin-top: -35px; /* Adjust box top margin */
color: #fff; /* Change the text color */
border-radius: 5px; /* Increase or decrease the box radius */
}
COOKIE BAR NOTICE BUTTON STYLING
/***************************** COOKIE BAR NOTICE BUTTON STYLING *****************************/
.flatsome-cookies__more-btn {
background-color: #4600ad !important; /* Change the color */
border-radius: 100px; /* Set the border radius you prefer */
}
.flatsome-cookies__accept-btn {
background-color: #ff25c0 !important; /* Change the color */
border-radius: 100px; /* Set the border radius you prefer */
}
TABLETS AND DOWN
LAYOUT
Flatsome has a default value for right/left padding of 20px, which in many cases can’t be enough, the first value represents the top padding, the second value (30px) represents the left-right padding, the last the bottom padding, you can increase or decrease it as you prefer, personally I would only tourch the second value related to the left-right padding, basically they are the margins of your container and that’s what I always needed to modify.
/***************************** LAYOUT *****************************/
/* Flatsome has a default value for right/left padding of 20px, which in many cases can't be enough,
the first value represents the top padding, the second value (30px) represents the left-right padding, the last the bottom padding,
you can increase or decrease it as you prefer, personally I would only tourch the second value related to the left-right padding, basically they are the margins
of your container and that's what I always needed to modify. */
.col {
padding: 0 30px 20px;
}
LOGO
/***************************** LOGO *****************************/
/* Force the desidered logo width on tablets/mobile */
#logo {
width: 120px; /* Increase or decrease size */
}
MOBILE MENU
/***************************** MOBILE MENU *****************************/
/* Add an icon before each menu entry */
/* Inspect your mobile menu with your browser, each menu item has an unique HTML ID (in my case is 44), then replace it and add your own svg icon,
you will need to paste again the code for each menu item you want an icon applied, when you create your icon with illustrator remember to design it
with a specific width and height (in my case is 26px) then, replace the values to match your size. If you delete that menu item from Menu > Appearance,
you will need to inspect again the menu with your browser and replace the ID. */
#menu-item-44::before {
margin-left: 30px;
display: block;
content: ' ';
background-image: url('https://yourwesite.com/svg/people.svg'); /* Change with your URL */
background-size: 26px 26px; /* Increase or decrease size */
height: 26px; /* Increase or decrease size */
width: 26px; /* Increase or decrease size */
}
- Increase or decrease hamburger icon size and change color
/* Increase or decrease hamburger icon size and change color */
.nav > li > a > i.icon-menu {
font-size: 1.8em; /* Increase or decrease size */
color: #ececec; /* Change color */
}
- Change close icon color
/* Change close icon color */
.mfp-ready .mfp-close {
opacity: 1; /* Decrease opacity */
color: #000 !important; /* Change color */
}
- Increase or decrease mobile menu social icons size
/* Increase or decrease mobile menu social icons size */
.html .social-icons {
font-size: 1.6em; /* Increase or decrease size */
}
- Increase mobile menu items font size
/* Increase mobile menu items font size */
.nav > li > a {
text-transform: none;
font-size: 1.1em; /* Increase or decrease font size */
}
- Change menu entries text color
/* Change menu entries text color */
.nav > li > a, .links > li > a {
color: color: #39cccc; /* Change color */
}
- Menu entries hover and active text color
/* Menu entries hover and active text color */
.nav > li > a:hover, .nav > li.active > a {
color: #39cccc !important; /* Change color */
}
- Menu entries background color on hover
/* Menu entries background color on hover */
.nav-sidebar.nav-vertical > li.menu-item:hover {
background-color: #eff0ef; /* Change color */
}
- Dropdown entries hover color
- This snippet will only work if you are using a sidebar menu appearing from right
/* Dropdown entries hover color */
/* This snippet will only work if you are using a sidebar menu appearing from right */
.nav-vertical > li > ul li a:hover {
color: #39cccc; /* Change color */
}
- Align menu items to the left
- This snippet will only work if you are using a fullscreen menu
/* Align menu items to the left */
/* This snippet will only work if you are using a fullscreen menu */
.off-canvas-center .text-center {
text-align: left; /* Change the alignment, you can set "right" as well */
}
- Change fullscreen menu color and opacity
- This snippet will only work if you are using a fullscreen menu
/* Change fullscreen menu color and opacity */
/* This snippet will only work if you are using a fullscreen menu */
.mfp-bg.off-canvas-center:not(.dark) {
background-color: #fff; /* Change color */
opacity: 1; /* Decrease opacity */
}
- Remove the overlay for the mobile menu
- This snippet will work only if you are using a sidebar menu
/* Remove the overlay for the mobile menu */
/* This snippet will work only if you are using a sidebar menu */
.main-menu-overlay {
background-color: transparent; /* Set a color or leave transparent */
}
OTHERS
FLATSOME COOKIES / POPUP
/*************** FLATSOME COOKIES / POPUP ***************/
.flatsome-cookies {
width: fit-content;
border-radius: 10px;
margin: auto;
right: 0;
left: 0;
font-size: 90%;
}
.flatsome-cookies--active {
margin-bottom:20px;
}
.flatsome-cookies__buttons>a {
margin-right: 0px;
}
Checkout Page: Flat One Checkout
/*This CSS Code will help you to make your checkout as one page but don't hesitate to follow our tutorials on flatzone.cc.*/
.checkout_coupon {
display: block !important;
}
.woocommerce-info {
display:none;
}
/** END - Open automatically Checkout Coupon **/
/** START - Cart on Checkout **/
.woocommerce .cart-auto-refresh {
max-width: 100%;
flex-basis: 100%;
}
.woocommerce .cart-collaterals {
display:none;
}
.continue-shopping .button-continue-shopping {
display: none;
}
.woocommerce-checkout-review-order-table .cart_item {
display:none;
}
.woocommerce-checkout-review-order-table thead {
display:none;
}
#order_review_heading {
display:none;
}
/** END - Cart on Checkout **/
/** Customize Fields of Chechout **/
.fl-labels .form-row input:not([type="checkbox"]), .fl-labels .form-row textarea, .fl-labels .form-row select {
border-radius: 5px;
box-shadow: none;
border-color: #dcdcdc;
}
/** Cart Customize **/
.is-form, button.is-form, input[type='submit'].is-form, input[type='reset'].is-form, input[type='button'].is-form {
border-radius: 10px;
}
/** END - Cart Customize **/
Product Gallery: Flat Rounded Thumbnail
/** Rounded Thumbnails on the Product Page **/
.product-thumbnails a:hover, .product-thumbnails .is-nav-selected a {
border-color: #c0c0c0;
border-radius: 40%; /** Change percentage **/
}
.product-thumbnails img {
border-radius: 40%; /** Change percentage **/
}
