Important CSS Code
CSS file above code for php stylesheet:
/*Theme Name: Ruhultheme
Version: 1.0
Description: This is the test theme of Ruhul.
Author: Ruhul
Author URI: www.alamincomputer.com
*/
/* Basic css code: */
*{margin:0;padding:0}
body{
font-family:sans-sarif, Arial;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
a{
text-decoration:none;
}
h1, h2, h3, h4, h5, h6{
font-weight: normal;
margin-top: 10px;
margin-bottom: 10px;
}
p{
line-height:150%;
margin-bottom:2em;
}
.fix{
overflow:hidden;
}
.container_full{
width:100%;
}
.container{
width:980px;
display:block;
margin:0 auto;
}
/*wordpress comment form css code:*/
/*comment part */
.comment-respond{
text-align: left;
}
#reply-title{
margin-bottom: 20px;
}
#commentform {
border: 1px solid #EDEDF0;
width: 525px;
padding-left: 20px;
padding-bottom: 20px;
}
.comment-respond{
padding: 20px;
}
.comment-respond #comment{
width: 480px;
padding: 10px;
}
.comment-respond label{
display: block;
}
.comment-respond input[type=text]{
width: 500px;
height: 30px;
}
.comment-respond p{
padding-top: 10px;
}
.comment-respond input[type=submit]{
width: 185px;
height: 40px;
background-color: #F5EFE0;
border: 0.5px solid #ddd;
}
.comment-author .avatar{
width: 50px;
height: 50px;
display: block;
margin: 10px 0;
padding: 0;
}
#comments{
padding: 10px 30px;
}
.comment{
padding: 10px 30px;
margin: 20px 20px 40px 30px;
border-bottom: 0.5px solid #ddd;
border-top: 0.5px solid #ddd;
}
/* wordpress search form css code: */
/* search */
.screen-reader-text{
position: absolute;
left: -999999999px;
}
#searchform input[type=text]{
padding: 3px;
width: 200px;
}
#searchform input[type=submit]{
padding: 1px 3px;
}
/* pagination code for wodpress css */
.pagination{
padding: 10px 3px;
margin: 10px 0;
}
.pagination a, .page_no, .current, .inactive{
background-color: #373954;
color: #eee;
padding: 3px 10px;
margin: 0 3px;
}
.pagination a:hover, .current, .inactive:hover{
background-color: #EDEDF0;
font-weight: bold;
color: #737373;
}
.pagination .page_no{
margin-left: 0;
}
/* pagination code end */
/* Meta viewport for index file */
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/* Responsive Design Code */
@media (min-width: 960px) and (max-width: 1130px) {
}
@media (min-width: 768px) and (max-width: 959px) {
}
@media (min-width: 481px) and (max-width: 767px) {
}
@media (min-width: 361px) and (max-width: 480px) {
}
@media (max-width: 360px) {
}
/* Important css property:
:last-of-type{ }
box-shadow is the css property:
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);box-shadow: 0 0 5px rgba(0,0,0,0.2)
*/
Social share button link code:
Facebook:
<a class='xosocial' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'>Share via Facebook</a>
twitter:
<a class='xosocial' expr:href='"https://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Tweet This'>Share to Twitter</a>
pinterest:
<a class='xosocial' href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'>Share to Pinterest</a>
Email:
<a class='xosocial' expr:href='"mailto:?subject=" + data:post.title + "&body=" + data:post.url'>Share Via Email</a>
<a href="javascript:window.print()">Print</a>
Source website:
https://xomisse.com/blog/add-custom-share-links-blog/
/*Social share button css code*/
#social_share {margin: 10px 0;overflow: hidden;width: 216px;background-color: #fff;}
.social_share{display:flex;}
.social_share .social{box-sizing: border-box;padding: 6px;display: block; text-align: center;color:#fff; margin-right: 1px;}
.social_share .social:last-of-type{margin-right:0;}
.social_share .social:hover{transition: 0.3s;}
.social_share .facebook{background-color: #33518F;}
.social_share .facebook:hover{background-color: #6B89C8;}
.social_share .twitter{background-color:#1DA1F2;}
.social_share .twitter:hover{background-color:#6DC4F9;}
.social_share .email{background-color:#CC3E30;}
.social_share .email:hover{background-color:#D06C63;}
.social_share .print{background-color:#7F7E7C;}
.social_share .print:hover{background-color:#C1C1C0;}
Social share html code for blogger.com site
<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- start social code -->
<!-- Horizontal social buttons code paste here...-->
<div id='social_share'>
<div class='social_share'>
<a class='social facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'>Facebook</a>
<a class='social twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Tweet This'>Twitter</a>
<a class='social email' expr:href='"mailto:?subject=" + data:post.title + "&body=" + data:post.url'>Email</a>
<a class='social print' href='javascript:window.print()'>Print</a>
</div>
</div>
<!-- end social code -->
</b:if>
<!-- Scripts End -->
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->
