Hi! I know a lot of you wanted to know how to add the line paper to your blog!
First, you go to your Theme.
Then, on the left-side bar, go all the way down and choose Advanced. In Advanced, it will be a drop-down menu.
All the way down, the last choice should be CSS.
That's where you'll put the code below.
/* =========================
NOTEBOOK PAPER POSTS
========================= */
.post {
background-color:#fffdf7;
background-image:
linear-gradient(
90deg,
transparent 65px,
#e88b9b 65px,
#e88b9b 67px,
transparent 67px
),
repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 31px,
#c9d8e8 32px
);
padding:40px 35px 35px 85px;
border:2px solid #d8c7b8;
border-radius:5px;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}
/* Make all sidebar widgets straight */
.sidebar .widget{
transform:none !important;
}
.journal{
width:500px;
margin:70px auto;
position:relative;
cursor:pointer;
}
.journal img{
width:100%;
display:block;
transition:.8s ease;
}
.open-book{
position:absolute;
left:0;
top:0;
opacity:0;
}
.journal-entry{
position:absolute;
top:70px;
left:65px;
right:65px;
opacity:0;
transition:.8s;
font-family:Georgia,serif;
line-height:1.8;
}
.journal:hover .closed-book{
opacity:0;
}
.journal:hover .open-book{
opacity:1;
}
.journal:hover .journal-entry{
opacity:1;
}
Crediting the websites that helped me. Suggest you check out the websites for different ways. https://dev.to/mrwolferinc/css-ruled-paper-2h0b and https://codepen.io/designcouch/pen/bGvzKE
No comments:
Post a Comment