PLEASE READ THIS POST.
This is a minimalist responsive theme for Blogger. It will not work on other plataforms, such as WordPress, Ghost, Wix, etc. Please, don't ask for adaptations.
If you want to know how the typography on this theme works, you can check it here.
There's also an example page here.
Vidro is a highly customizable theme
Customizability is a very important concept for me, so I made sure this theme can be highly customized to satisfy your needs! Here's a list of all the things you can customize:
- Font, size and color of body text;
- Text selection color;
- Links color;
- Page background color;
- Navigation bar background color;
- Navigation bar font, size and text color;
- Header background color;
- Header border color;
- Description (tagline) color;
- Post title font and color;
- Post footer color;
- Gadget title font, color and background color;
- Popular posts title color;
- Labels list background and border color;
- Input background color (search box, archive dropdown menu).
Setting up the navigation menu
Unfortunately, Blogger menu options are limited, so you need to edit the menu directly on the code. Look for the code <!-- Navigation links --> and change the bold parts for your information:
<nav class='navbar2 navbar2-expand-lg'>
<!-- Toggler/collapsibe Button -->
<button class='navbar2-toggler navbar2-light' data-target='#collapsibleNavbar' data-toggle='collapse' type='button'>
<span class='navbar2-toggler-icon'/>
</button>
<!-- Navbar links -->
<div class='collapse navbar2-collapse justify-content-center' id='collapsibleNavbar'>
<ul class='navbar2-nav'>
<li class='nav-item'>
<a class='nav-link' expr:href='data:blog.homepageUrl'>Home</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='LINK-URL-HERE'>PAGE TITLE HERE</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='LINK-URL-HERE'>PAGE TITLE HERE</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='LINK-URL-HERE'>PAGE TITLE HERE</a>
</li>
</ul>
</div>
</nav>
You can add as many page links you want, just repeat the code since <li class='nav-item'> to </li> before the </ul>. Also, the navigation bar is responsive. If you use a dark background on the navigation bar, remember to change the navbar2-light in the code above to navbar2-dark. DON'T REMOVE THE NUMBER 2, otherwise the responsive menu will not work!
Setting up the profile widget
If you want to set the theme up yourself, you need to know how to customize the profile so it looks the same it does in the preview.
The code for the profile widget is this one:
<center>
<img src="PROFILE IMAGE URL" style="-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 90%; margin-bottom: 15px;" />
</center>
<p style="text-align:center;">YOUR PROFILE TEXT GOES HERE.</p>
<center>
<ul class="socialmedia">
<a href="TWITTER LINK HERE" title="Twitter" target="_blank"><li class="icone"><i class="fa fa-twitter"></i></li></a>
<a href="INSTAGRAM LINK HERE" title="Instagram" target="_blank"><li class="icone"><i class="fa fa-instagram"></i></li></a>
<a href="FACEBOOK LINK HERE" title="Facebook" target="_blank"><li class="icone"><i class="fa fa-facebook"></i></li></a>
<a href="PINTEREST LINK HERE" title="Pinterest" target="_blank"><li class="icone"><i class="fa fa-pinterest"></i></li></a>
</ul>
</center>
It's highly recommended you delete all your widgets before uploading this theme, so it won't overlap with pre-existing widgets that may mess up the code.
Displaying post images correctly
If you want the post images to look the same as they do in the preview, remember to always use them in the original size after upload. Also delete this code Blogger adds automatically (delete only the bold part):
<div class="separator" style="clear: both; text-align: center;"><a href="IMAGE URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="IMAGE URL GOES HERE" /></a></div>Contact me if you need any help
If you have any questions about how to set up the theme or need any other kind of support, please feel free to contact me at alkhimmasha@gmail.com
