How to Change Basic Appearance in Median UI Template ?

How to Change Basic Appearance in Median UI Template

Hello Everyone, on this occasion I will share How to Change Basic Appearance in Median UI Template. Median UI has finally arrived in version 1.5 with various improvements and additional features. It is done with different ideas as per the demands of its users.

Although the structure is still the same as before, this update can be said to be more elegant and more dynamic.

Apart from these benefits, there are many other features and services provided in purchase email. One of these features is the provision of two additional layouts.

Style 2 in Median UI v1.5 :-

For this second style, the header, navigation menu, and footer sections will appear to blend with the gray background color. In addition, the main part of the writing will be given an effect in the form of a curve on the top left and bottom left.

.Style-2{transition:var(--transition-1)}
.Style-2,.Style-2 header,.Style-2 .mainMenu,.Style-2 .htmlMenu .close,.Style-2 #LinkList002{background-color:#fafafc;border:0}
.Style-2 .htmlMenu .close,.Style-2 #LinkList002{width:calc(var(--nav-width))}
.Style-2 .mainInner:before{content:"";display:block;position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fefefe;z-index:-1;border-radius:15px 0 0 15px;transition:var(--transition-1);box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%)}
.Style-2 .htmlMenu .link,.Style-2 .htmlMenu>li li a{width:calc(100% - 20px);border-radius:0 20px 20px 0; padding-right:0}
.Style-2 .navInput:checked~.mainWrapper .htmlMenu .link,.Style-2 .navInput:checked~.mainWrapper .htmlMenu>li li a{}
.Style-2.darkMode .mainInner:before,.Style-2.darkMode .postRelated h3,.Style-2.darkMode .postRelated h4,.Style-2.darkMode .postRelated b,.Style-2.darkMode .post .tabsHead>*:after,.Style-2.darkMode .tableOfContainer,.Style-2.darkMode .tableOfHeader{background-color:var(--dark-bgSec)}
.Style-2.darkMode .downloadInfo,.Style-2.darkMode .postAuthors{background-color:var(--dark-bgAlt)}
@media screen and (max-width:896px){
.Style-2 .mainInner:before,.darkMode.Style-2 .mainInner:before{background-color:transparent;box-shadow:none}
.Style-2 .htmlMenu .close,.Style-2 #LinkList002{background-color:var(--nav-bg)}
.Style-2.darkMode .postRelated h3,.Style-2.darkMode .postRelated h4,.Style-2.darkMode .postRelated b,.Style-2.darkMode .post .tabsHead>*:after{background-color:var(--dark-bg)}
.Style-2.darkMode .downloadInfo,.Style-2.darkMode .postAuthors{background-color:var(--dark-bgSec)}
}

Style 3 in Median UI v1.5 :-

For this third style, not much has changed. The navigation menu will be made more prominent with a gray background color and a few outlines. In addition, the header section is made to appear more integrated with the main body of the article.

.Style-3,.Style-3 .headerDiv{transition:var(--transition-1)}
.Style-3 header,.Style-3.darkMode header{background-color:transparent;border:0}
.Style-3 .mainMenu,.Style-3 .htmlMenu .close,.Style-3 #LinkList002{background-color:#fafafc}
.Style-3 .htmlMenu .close>*{opacity:0;visibility:hidden}
.Style-3 .htmlMenu .link,.Style-3 .htmlMenu>li li a{width:calc(100% - 20px);border-radius:0 20px 20px 0;padding-right:0}
.Style-3.darkMode,.Style-3.darkMode .headerRight,.Style-3.darkMode .tableOfContainer,.Style-3.darkMode .tableOfHeader,.Style-3.darkMode .postRelated h3,.Style-3.darkMode .postRelated h4,.Style-3.darkMode .postRelated b,.Style-3.darkMode .post .tabsHead>*:after{background-color:var(--dark-bgSec)}
.Style-3.darkMode .downloadInfo,.Style-3.darkMode .postAuthors{background-color:var(--dark-bgAlt)}
.Style-3 .headerRight{background-color:var(--body-bg)}
.Style-3 .navInput:checked~.mainWrapper #header-widget{display:none}
.Style-3 .navInput:checked~.mainWrapper .headerLeft{width:68px}
@media screen and (max-width:896px){
.Style-3 .navInput:checked~.mainWrapper #header-widget{display:block}
.Style-3 .navInput:checked~.mainWrapper .headerLeft{width:var(--nav-width)}
.Style-3.darkMode,.Style-3.darkMode .headerRight{background-color:var(--dark-bg)}
.Style-3.darkMode .postRelated h3,.Style-3.darkMode .postRelated h4,.Style-3.darkMode .postRelated b,.Style-3.darkMode .post .tabsHead>*:after{background-color:var(--dark-bg)}
.Style-3.darkMode .downloadInfo,.Style-3.darkMode .postAuthors{background-color:var(--dark-bg)}
}

To change the look of the page, you need to place the above css above the //]]></b:skin> tag in your template.

How to Change Basic Appearance in Median UI v1.5 :-

Step 1 :- First Go To Blogger.Com.
Step 2 :- Then Click on Theme Menu.
Step 3 :- After Click on Edit Html.
Step 4 :- Paste the above CSS above the //]]></b:skin> Tag.
Step 5 :- Then Find And Change The <body class='' id='mainContent'> By Adding Style-2 or Style-3 .
  • Style 2 :-
  • <body class='Style-2' id='mainContent'>
  • Style 3 :-
  • <body class='Style-3' id='mainContent'>

Note :- This Tutorial only For Median UI v1.5 User.

Conclusion :-

So here's how to install additional layouts on the latest mean UI template. Even better, the script used is CSS only, so you don't need to worry about speed.

In this post I have explained How to Change Basic Appearance in Median UI Template. I Hope this tutorial can be useful for you. Thank You for Visiting Our Website.

Refrence :
Www.SmartTechMukesh.Online

Read Also :