◉ marr ◉'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

HOW 2 CUSTOMIZE UR BLOG ENTRY POST LAYOUTS!! (FIXED COMMENTS AND ICONS 12/8)




 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

  1. click on the <> sign on the top left of the editor
  1. paste the code below before your blog content
  1. 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>





440 Kudos

Comments

Displaying 20 of 69 comments ( View all | Add Comment )

Sagie May

Sagie May's profile picture

oh my gosh thank you so much!!!


Report Comment

Yukiimuffinz

Yukiimuffinz's profile picture

love you THANK YYOUUU


Report Comment

*ੈ✩‧₊˚Mykks*ੈ✩‧₊˚

*ੈ✩‧₊˚Mykks*ੈ✩‧₊˚'s profile picture

using!! thank u so much!


Report Comment

fawn

fawn's profile picture

using !!


Report Comment

Namik0_o

Namik0_o's profile picture

What is inner b for?


Report Comment

🌈💗 𐙚CutePinkKitty!♡𐑂💗ฅ^>⩊<^ ฅ

🌈💗 𐙚CutePinkKitty!♡𐑂💗ฅ^>⩊...'s profile picture

Tysm for this!!! <33 This def helps out SO Much! ^w^


Report Comment

🌈💗 𐙚CutePinkKitty!♡𐑂💗ฅ^>⩊<^ ฅ

🌈💗 𐙚CutePinkKitty!♡𐑂💗ฅ^>⩊...'s profile picture

Tysm for this!!! <33 This def helps out SO Much! ^w^


Report Comment

˚⋆ tteokbie ✿˖°

˚⋆ tteokbie ✿˖°'s profile picture

thank u sm!!! this helped me alot T T


Report Comment

Cotton

Cotton's profile picture

tysm!!!


Report Comment

Angelz!~ 🦴

Angelz!~ 🦴 's profile picture

AAAAAAAA TYYYYY


Report Comment

tastemybuttercream

tastemybuttercream's profile picture

so helpful, thanks for sharing!!


Report Comment

Isa

Isa's profile picture

For some reason any code i add doesn't work. When i press the <> and it becomes an eye, it just makes the code smaller and darker. When i go to post the blog it just posts the code


Report Comment



aaaaah did you put the code in *before* clicking the '<>'? typing in the code beforehand i think makes it only recognizes that as just... text. hence why there might also be quotation marks surrounding your code when you click the <>
(if i'm wrong, idk how to help :( )

by zombizz; ; Report

nope i did it the way it's supposed to look. It's a shame it doesn't workkk

by Isa; ; Report

AUGUST

AUGUST's profile picture

helpp!! the background for the actual post isnt black 3 i copied the code completely so aaa!


Report Comment

AmillyReal

AmillyReal's profile picture

awesomesauce... thanks :D


Report Comment

simon ☕

simon ☕'s profile picture

i love you


Report Comment

1nvad3rBl1ssY

1nvad3rBl1ssY's profile picture

OMGGG THANK YOU SO MUCH!!!


Report Comment

⛓️ jules ☆

⛓️ jules ☆'s profile picture

thank you for this!!!


Report Comment

k.k

k.k's profile picture

thank youuu


Report Comment

kittistitchez

kittistitchez's profile picture

AHH thank you <3!!!!!!!


Report Comment

lexi

lexi's profile picture

does anyone know how to change the "help" button at the top of the nav bar, next to logout? that's the only word that's still white on my page and I cant find a code to change it


Report Comment