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 85 comments ( View all | Add Comment )
ϰ♗↳↳ ☂♄€ ☾♗❡
Hey, uhmmmm my code shows up in my blog and also my background wont change to the image id like and i dont know tow to fix that
I don't know if you figured it out or not, but in case future people have this problem:
For the code showing up, make sure you have '' at the beginning of the code, and '' at the end of the code.
by ST☆RG1RL; ; Report
Red_shade666
Literally a life saver TYSM <3
Ergojade
tyvm!!
☆~catalanufa~☆
The code works great, thanks! The only issue I have is that in the preview to my blog posts you can see the code, does anyone know how to fix it?
you can move the code to the bottom of the entry, like keep the text on top and leave the codes at the end
by batdusks; ; Report
thanks! that's the only thing that works
by ☆~catalanufa~☆; ; Report
𝙰𝚗𝚍𝚢
THANKU SOSOS UCH I REALLY NEEDED THIS <3
maiden ru/eng/deu
tysm!!!
♬⋆.˚ Maimai
Thank you sm!!
✮DAISYYY✮
Thank you!! This is so helpful. But How do i add the image in the back? Its not working :sob:
remove the quotation marks in the brackets where you put an image/gif url, so instead of it saying " background-image: url("insert url here"); ", it should say " background-image: url(insert url here); "
i hope this helped ><
by N00dle50upz; ; Report
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!
pr1ncess_sh1t
oh my gosh thank you so much!!!
Snowymuffinz
love you THANK YYOUUU
*ੈ✩‧₊˚Mykks*ੈ✩‧₊˚
using!! thank u so much!