Customization Guide

Getting started

In the latest update, we have made optimizations to make it easier for users to customize the theme they are using, now some basic colors, font size, component length can be adjusted through the Blogger Theme Editor. We will continue to work to enhance this feature with every update.

Blogger theme Editor

Open the Blogger Theme Editor, click here if you forgot how.

Change address bar color (mobile only)

In the first group with 'Address bar' title you can change the color bar on mobile browsers, for now the supported browsers are only Chrome and Safari, we don't know if other browsers support this feature or not.

When the default color scheme is Dark, the address bar color will also change, this cannot be avoided.

Change default font-size and link color

In the advanced tab, you will find the 'Basic and color' group which collects all the basic settings including font size and color of text, links, background as well as border color. We use a base font-size of 14px with a maximum of 18px, try to customize the color according to your taste.

Change background-color

The background colors are separated into groups, each component has its own background color, changes to one component will not affect the others.

Change darkMode color scheme

This may not seem that important, but not everyone has the same taste in colors, so we open up the opportunity for those of you who want to try changing the color of Dark Mode. We recommend colorhunt.co for color scheme reference.

Change the width/height component

Not only colors, you can also change the width or height of components such as Header height, Sidebar width, Post width, etc. All are collected in different groups based on the component type.

Resize header logo image

Now you don't have to complain about small header image size, you don't need to edit HTML to adjust the header image size, go to the 'Logo' group and set the maximum image size according to your taste.

Change the post layout style

This is the best part of our improvements, we've had a lot of questions about how to change the style of posts. In response, we're giving users flexibility to customize the appearance according to their own tastes.

First of all, head over to 'Post: Style' group, you will find several options such as changing padding or background color. To make it easier for you to understand how this works, here we explain the function of each option:

  1. Post padding, to set space around the element content, within the specified borders.
    Post padding
  2. Post padding (mobile only), the same as the first option but only works for mobile displays, conveniently the first option will be replaced with this when the page is accessed through mobile.
  3. Post content padding, sets the space between content and the side of components, unlike the first option, this option only sets the distance for text content, not for thumbnails.
    Content padding
  4. Post color, to specify the text color.
  5. Post background, to set the background color.
  6. Post border-width, to set the border thickness with a range of 1-2px, the default is 0px.
    Post border
  7. Post border-radius, to set the corner radius of the component, the maximum value for this option is 20px.
    Post border-radius
  8. Post border-color, to set the border color, this option doesn't work if the border-width value is 0px.
  9. Post box-shadow, to set the shadow color of the component, it's recommended to use a light gray color.
    Post box-shadow
  10. Post box-shadow(hover), sets the shadow color when the cursor hovers over the component, it's recommended to enable this option if the box-shadow option is active.

With the right customization you can create a variety of post styles, here are some examples of post styles that can be created:

Post style

CSS Variable

Not all customizations are available on the Blogger Theme Editor, most of them have to be edited via HTML such as default text, post font size, etc. AMP version also doesn't support editing via Theme Editor, so you have to go to Edit HTML for more complete customizations.

Take a look at the CSS section of the theme, you will find similar variable code below:

/* Variable color */ :root, :root .lgT:not(.drK), :root .theme0:not(.drK){/* Theme */ --themeC: #482dff; /* Body */ --headC: #08102b; --bodyC: #08102b; --bodyCa: #989b9f; --bodyB: #fdfcff; /* Link */ --linkC: #482dff; --linkB: #482dff; /* Wave */ --waveB: #C6DAFC; /* Icon */ --iconC: #08102b; --iconCa: #08102b; --iconCs: #767676; /* Header */ --headerC: #343435; --headerT: 18px; --headerW: 400; /* write 400(normal) or 700(bold) */ --headerB: #fffdfc; --headerL: 1px; --headerI: #08102b; --headerH: 60px; --headerHi: -60px; --headerHm: 60px; --headerR: 30px; /* Notif */ --notifH: 60px; --notifU: #e8f0fe; --notifC: #01579b; /* Content */ --contentB: #fffdfc; --contentL: #e6e6e6; --contentW: 1280px; --sideW: 300px; --transB: rgba(0,0,0,.05); /* Page */ --pageW: 780px; --pageW: 780px; --postT: 36px; --postF: 16px; --postTm: 28px; --postFm: 15px; /* Widget */ --widgetT: 15px; --widgetTw: 400; /* write 400(normal) or 700(bold) */ --widgetTa: 25px; --widgetTac: #989b9f; /* Nav */ --navW: 230px; --navT: #08102b; --navI: #08102b; --navB: #fffdfc; --navL: 1px; /* Search */ --srchI: #48525c; --srchB: #fffdfc; /* Mob Men */ --mobT: #08102b; --mobHv: #f1f1f0; --mobB: #fffdfc; --mobL: 2px; --mobBr: 60px; /* Footer */ --fotT: #08102b; --fotB: #fffdfc; --fotL: 1px; /* Font family */ --fontH:'Josefin Sans', sans-serif; --fontB: 'Josefin Sans', sans-serif; --fontBa: 'Josefin Sans', sans-serif; --fontC: 'Josefin Sans', sans-serif; /* Trans */ --trans-1: all .1s ease; --trans-2: all .2s ease; --trans-3: all .3s ease; --trans-4: all .4s ease; /* Synx */ --synxBg: #f6f6f6; --synxC: #2f3337; --synxOrange: #b75501; --synxBlue: #015692; --synxGreen: #54790d; --synxRed: #f15a5a; --synxGray: #656e77; /* Border Radius */ --buttonR: 50px; --greetR: 25px;  --iconHr: 15px;  --thumbEr: 15px; --srchMr: 20px; --srchDr : 20px; /* Dark */ --darkT: #fffdfc; --darkTa: #989b9f; --darkU: #41B375; --darkW: #343435; --darkB: #1e1e1e; --darkBa: #2d2d30; --darkBs: #252526; --btnBr: 12px ; --notifL: #154c79;--shadB: rgb(100 100 111 / 20%) 0px 7px 29px 0px ;--shadBa: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;--shadBs: rgba(0, 0, 0, 0.07) 0px -1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;--border-color: #fafafa;--border-color: rgba(255,255,255,0.05);--stepC: #3740ff ;--stepHover: #fffdfc ;--iconWidth: 35px ;--iconHeight: 35px ;--contentPadding: 22px ;--contentPadding-minus: -22px ;--contentPadding-box: 15px ;--vHeight: 100vh ;--tDuration: .1s ease ;--tShowHide: opacity var(--tDuration), visibility var(--tDuration) ;--contentPop-maxWidth: 768px ;--contentBd-color: var(--themeBd-color) ;--contentBd-radius: 4px ;--contentBg: var(--themeBg) ;--themeBg-pop: var(--lightBg-pop) ;}
/* Dark Mode */ :root .drK{/* Theme */ --themeC: #1e1e1e;}
/* Theme 1 - Red */ :root .theme1:not(.drK){/* Theme */ --themeC: #D32F2F; /* Body */ --bodyB: #FFFCFD; /* Link */ --linkC: #F44336; --linkB: #F44336; /* Header */ --headerB: #FFEBEE; /* Notif */ --notifU: #FFEBEE; --notifC: #B71C1C; /* Search */ --srchB: #FFEBEE; /* MobMn */ --mobB: #FFEBEE; /* Wave */ --waveB: #FFEBEE;}
/* Theme 2 - Green */ :root .theme2:not(.drK){/* Theme */ --themeC: #00796B; /* Body */ --bodyB: #FCFFFC; /* Link */ --linkC: #009688; --linkB: #009688; /* Header */ --headerB: #E0F2F1; /* Notif */ --notifU: #E0F2F1; --notifC: #00796B; /* Search */ --srchB: #E0F2F1; /* MobMn */ --mobB: #E0F2F1; /* Wave */ --waveB: #E0F2F1;}
/* Theme 3 - Blue */ :root .theme3:not(.drK){/* Theme */ --themeC: #1565C0; /* Body */ --bodyB: #FBFEFF; /* Link */ --linkC: #1976D2; --linkB: #1976D2; /* Header */ --headerB: #E3F2FD; /* Notif */ --notifU: #E3F2FD; --notifC: #1565C0; /* Search */ --srchB: #E3F2FD; /* MobMn */ --mobB: #E3F2FD; /* Wave */ --waveB: #E3F2FD;}
/* Theme 4 - Yellow */ :root .theme4:not(.drK){/* Theme */ --themeC: #FFC107; /* Body */ --bodyB: #FFFEFA; /* Link */ --linkC: #FF8F00; --linkB: #FF8F00; /* Header */ --headerB: #FFF8E1; /* Notif */ --notifU: #FFF8E1; --notifC: #FF8F00; /* Search */ --srchB: #FFF8E1; /* MobMn */ --mobB: #FFF8E1; /* Wave */ --waveB: #FFF8E1;}
/* Theme 5 - Pink */ :root .theme5:not(.drK){/* Theme */ --themeC: #C2185B; /* Body */ --bodyB: #FFFCFD; /* Link */ --linkC: #D81B60; --linkB: #D81B60; /* Header */ --headerB: #FCE4EC; /* Notif */ --notifU: #FCE4EC; --notifC: #C2185B; /* Search */ --srchB: #FCE4EC; /* MobMn */ --mobB: #FCE4EC; /* Wave */ --waveB: #FCE4EC;}
/* Theme 6 - Orange */ :root .theme6:not(.drK){/* Theme */ --themeC: #E64A19; /* Body */ --bodyB: #FBFEFF; /* Link */ --linkC: #F4511E; --linkB: #F4511E; /* Header */ --headerB: #FBE9E7; /* Notif */ --notifU: #FBE9E7; --notifC: #E64A19; /* Search */ --srchB: #FBE9E7; /* MobMn */ --mobB: #FBE9E7; /* Wave */ --waveB: #FBE9E7;}
/* Theme 7 - Blue Grey */ :root .theme7:not(.drK){/* Theme */ --themeC: #455A64; /* Body */ --bodyB: #FBFEFF; /* Link */ --linkC: #546E7A; --linkB: #546E7A; /* Header */ --headerB: #ECEFF1; /* Notif */ --notifU: #ECEFF1; --notifC: #455A64; /* Search */ --srchB: #ECEFF1; /* MobMn */ --mobB: #ECEFF1; /* Wave */ --waveB: #ECEFF1;}
/* Theme 8 - Brown */ :root .theme8:not(.drK){/* Theme */ --themeC: #5D4037; /* Body */ --bodyB: #FBFEFF; /* Link */ --linkC: #5D4037; --linkB: #5D4037; /* Header */ --headerB: #EFEBE9; /* Notif */ --notifU: #EFEBE9; --notifC: #5D4037; /* Search */ --srchB: #EFEBE9; /* MobMn */ --mobB: #EFEBE9; /* Wave */ --waveB: #EFEBE9;}
/* Theme 9 - Purple */ :root .theme9:not(.drK){/* Theme */ --themeC: #7B1FA2; /* Body */ --bodyB: #FBFEFF; /* Link */ --linkC: #8E24AA; --linkB: #8E24AA; /* Header */ --headerB: #F3E5F5; /* Notif */ --notifU: #F3E5F5; --notifC: #7B1FA2; /* Search */ --srchB: #F3E5F5; /* MobMn */ --mobB: #F3E5F5; /* Wave */ --waveB: #F3E5F5;}
/* Theme 10 - Indigo */ :root .theme10:not(.drK){/* Theme */ --themeC: #283593; /* Body */ --bodyB: #FBFEFF; /* Link */ --linkC: #3949AB; --linkB: #3949AB; /* Header */ --headerB: #E8EAF6; /* Notif */ --notifU: #E8EAF6; --notifC: #283593; /* Search */ --srchB: #E8EAF6; /* MobMn */ --mobB: #E8EAF6; /* Wave */ --waveB: #E8EAF6;}

You can change the font type in variable /* var: Font */, custom text /* var: Custom text */, icon size /* var: Icons */, thumbnail size /* var: Post thumbnail */ even transition duration /* var: Transition */ and many other things.