hey slays. it always bothered me that i could never figure out how people customized their blog post layouts until now so ill get em here
- click on the <> sign on the top left of the editor
- paste the code below before your blog content
- should be finished, you can see if it changes after you click on the <> (now an eye) that converts the editor to its original state.
Heres the code i used for this posts layout, feel free to customize as you wish, and please let me know if theres anything i can add/change or ask questions about (however i am not a coder, theres some questions i probably wont be able to answer):
<style>
body {
background-image: url("background image link here!");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
font-family: 'Georgia', serif;
}
.inner b {
color: #FF0000
}
nav .top {
background-color: black;
}
nav .links {
background-color: black;
text-align: right;
border-radius: 4px 4px 0 0;
background-position: center;
background-repeat: no-repeat;
}
button {
color: #FF0000;
background-color: black;
}
.count {
color:#FF0000 ;
}
a {
color: #FF0000;
}
nav .links a {
color:#FF0000;
}
footer {
background-color: black;
}
footer p {
color: #FF0000;
}
footer .links {
color:#FF0000;
}
.comments-table td:first-child, .comments-table td, .comment-replies, .details-table td:first-child, .details-table td {
background: black;
color:#FF0000;
}
.edit-info {
background-color: black;
border: 1px;
}
.blog-entry .title {
background-color: black;
color: #FF0000;
padding: 5px;
}
p.links a:first-child .icon{
content: url("icon for your blog here!”);
width: 25px;
height: auto;
}
p.links a:nth-child(2) .icon {
content: url(“icon for your profile here!”);
width: 25px;
height: auto;
}
p.links a:last-child .icon, table.comments-table td .icon {
content: url(“icon to report here!”);
width: 25px;
height: auto;
}
.blog-entry .content {
background-color: black;
padding: 10px;
}
main {
background-color: black;
}
main .left {
background-color: black;
color: #FF0000;
}
main .right {
padding: 1px;
background-color: black;
}
HTML,BODY{cursor: url("cursor link here"), url("cursor link here"), auto;}
.logout-btn,
.blog-entry .kudos-btn{
background: none !important;
border: none;
padding: 0 !important;
cursor: pointer;
user-select: text;
text-decoration: none;
color: #FF0000;
color: var(--#FF0000);
}
</style>
Comments
Displaying 20 of 78 comments ( View all | Add Comment )
cloudyrobs
That is super helpful thank you so much!!!
jujudrk03⋆꙳⭒﹡。
THANK YOU!!!!!!!!!1
jujudrk03⋆꙳⭒﹡。
THANK YOU!!!!!!!!!1
Aerozune
I didn't know it was this easy tysm!!
🌟Pipkin the Clown🌟
Thank you, this was really helpful! :D
Lyrexios Creator Guardian
thanks def gonna use this now!
UrSven
thank you!
jueajs
muito obrigado!!
Vanessa The Vampire o((>ω< ))o
Thank you!
Sagie May
oh my gosh thank you so much!!!
Yukiimuffinz||ROCÍO YANI'S #1 FAN!!
love you THANK YYOUUU
*ੈ✩‧₊˚Mykks*ੈ✩‧₊˚
using!! thank u so much!
fawn
using !!
Namik0_o
What is inner b for?
🌈💗 𐙚CutePinkKitty!♡𐑂💗ฅ^>⩊<^ ฅ
Tysm for this!!! <33 This def helps out SO Much! ^w^
🌈💗 𐙚CutePinkKitty!♡𐑂💗ฅ^>⩊<^ ฅ
Tysm for this!!! <33 This def helps out SO Much! ^w^
˚⋆ tteokbie ✿˖°
thank u sm!!! this helped me alot T T
Cotton
tysm!!!
Angelz!~ 🦴
AAAAAAAA TYYYYY
tastemybuttercream ᖭ༏ᖫ
so helpful, thanks for sharing!!