Theme Customizations for Prime UI Blogger Theme

Changing Favicon

Go to Favicon Generator and upload your big favicon logo. The site will generate different version of icons. Upload all those images on blogger and place them in following code. 

You can create a blogger post and upload all your images there. You can get image address from there. 

Do not publish that post. Please place proper images to proper sizes.

<link href='#' rel='apple-touch-icon' sizes='57x57'/>
<link href='#' rel='apple-touch-icon' sizes='60x60'/>
<link href='#' rel='apple-touch-icon' sizes='72x72'/>
<link href='#' rel='apple-touch-icon' sizes='76x76'/>
<link href='#' rel='apple-touch-icon' sizes='114x114'/>
<link href='#' rel='apple-touch-icon' sizes='120x120'/>
<link href='#' rel='apple-touch-icon' sizes='144x144'/>
<link href='#' rel='apple-touch-icon' sizes='152x152'/>
<link href='#' rel='apple-touch-icon' sizes='180x180'/>
<link href='#' rel='icon' sizes='192x192' type='image/png'/>
<link href='#' rel='icon' sizes='32x32' type='image/png'/>
<link href='#' rel='icon' sizes='96x96' type='image/png'/>
<link href='#' rel='icon' sizes='16x16' type='image/png'/>

Changing Fonts 

By default, we use font-family:Inter and font-family:Times New Roman and we use 400, 500, 700 weights. 

Loading Fonts

You can load your custom fonts directly using <link/>or using @font-face. 

/* Font Body and Heading */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

changing css font-family

Look for this code and apply your font-family.

--fontF1: 'Inter', -apple-system, BlinkMacSystemFont, Roboto, roboto slab, droid serif, segoe ui, system-ui, Arial, sans-serif;
--fontW1-reg: 400;
--fontW1-med: 500;
--fontW1-bold: 700;
--fontF2: 'Inter', -apple-system, BlinkMacSystemFont, Roboto, roboto slab, droid serif, segoe ui, system-ui, Arial, sans-serif;
--fontW2-bold: 700;

Change Theme Colors

We have some predefined theme background colors and text colors. You can change them from here:

	--bodyB: #F7F7F7;
    --bodyC: #1B1B1B;
    --headfootB: #F7F7F7;
    --headfootC: #1B1B1B;
    --headerB: #F7F7F7;
    --headerC: #1B1B1B;
    --accent-color: #6E35A7;
    --linkColor: #6E35A7;
    --searchC: #1B1B1B;
    --searchB: #2b2d31;
    --searchHoverB: #34363a;
    --border-one: #d9d9d8;
    --shade-one: #e8e8e6;
    --shade-one-hover: #d9d9d8;
    --shade-two: #F7F7F5;
    --accent-button-color: #f7f7f7;
    --color1: #EFE5F9;
    --color2: #FACCDD;
    --color3: #C4FAE5;
    --color4: #F8D3D4;
    --color5: #D8D2DA;
    --color6: #D5C6E9;
    --color7: #C7D3E4;
    --color8: #E2ADEB;
    --color9: #EEEAE8;
    --color10: #CBC9DF;
    --colorCommentBox: rgba(155, 155, 155, 0.2);

Customizing Navigation Bar

Navigation menus cannot be customized from Layout.

Search for following code in your theme to change Navbar menus.

<li>
    <a href='/search'>Blog</a>
</li>
<li>
    <a href='#'>About Us</a>
</li>
<li>
    <a href='#'>Contribute</a>
</li>

To customize the Dropdown menu look for the following code and change accordingly.

<div class='more-dropdown bdr-rads' id='more-dropdown'>
    <a href='#'>Tags</a>
    <a href='#'>Authors</a>
    <a href='#'>Donate</a>
</div>

Customizing Footer Links

To change the footer links you have to do it using EDIT HTML in your theme

Search for following code in your theme to change Footer menus.

<div class='footer-details'>
    <div class='footer-section'>
        <h2>Pages</h2>
        <ul class='footer-links'>
            <li>
                <a href='/search'>Blog</a>
            </li>
            <li>
                <a href='https://prime-ui.blogspot.com/p/contact.html'>Contact Us</a>
            </li>
            <li>
                <a href='#'>About Us</a>
            </li>
            <li>
                <a href='#'>Contribute</a>
            </li>
        </ul>
    </div>

    <div class='footer-section'>
        <h2>Labels</h2>
        <ul class='footer-links'>
            <li>
                <a href='#'>🎯 Guides</a>
            </li>
            <li>
                <a href='#'>💻 Plugins</a>
            </li>
            <li>
                <a href='#'>✈️ SEO</a>
            </li>
            <li>
                <a href='#'>⭐ Themes</a>
            </li>
            <li>
                <a href='#'>💡 Customization</a>
            </li>
        </ul>
    </div>

    <div class='footer-section'>
        <h2>Resources</h2>
        <ul class='footer-links'>
            <li>
                <a href='https://prime-ui.blogspot.com/p/disclaimer.html'>Disclaimer</a>
            </li>
            <li>
                <a href='https://prime-ui.blogspot.com/p/privacy-policy.html'>Privacy Policy</a>
            </li>
            <li>
                <a href='#'>Tags</a>
            </li>
            <li>
                <a href='#'>Authors</a>
            </li>
            <li>
                <a href='#'>Archive</a>
            </li>
        </ul>
    </div>
</div>

Some other theme customizations

There are some other customizations that can be changed from the theme as well.

Changing sub heading on Hero Header

<h1 class='tagline'>
    <span class='tagline-bold'>Distributing</span>
    Themes, Plugins, and Ideas 
    <span class='tagline-bold'>FREE</span>
</h1>
<p class='tagline-subtitle'>
    Prime UI is a modern, minimal, and aesthetically designed Blogger theme crafted for an exceptional user experience.
</p>

Latest Post Title

<h2>Explore latest<br/>
    <span class='articles-grid-title-bold'>contents</span>
</h2>

Newsletter sub tagline

<p>Be the first to get access to latest contents and updates.</p>

Footer tagline

<p>Prime UI is a modern, minimal, and aesthetically designed Blogger theme crafted for an exceptional user experience.</p>