Emma's profile picture

Published by

published
updated

Category: Web, HTML, Tech

I did it goddamit HOW TO CUSTOMIZE YOUR BLOG ENTRY

AFTER SPENDING FUCKING 7 HOURS CODING not know how to code I PERSONALIZED MY BOG ENTRY THE WAY I WANTED TO. So, I'm going to kind of teach y'all that literally knows nothing about it. 

First: Make an Blog Entry for testing. 

Public it the way it is, without putting any code at the VIEW HTML (aka <> at the right top).

Click with the with the right button of the mouse. The last option should be something like "Developer Tools". Then, click on "Inspect". (You can also simply do Ctrl+Shift+I)

What will pop up at the right side of the screen should be something like this:



If you clicked, for example, in the "body" of the blog entry - not in the text of the blog, but in the part in the middle without text -, in the screen that is full of code at the right part will show the code that makes the body of the blog look like this. 

For example:

body {

background: url (IMAGE-URL) no-repeat fixed;

background-size: COVER;

background-position: CENTER;

background-attatchment: FIXED;

font-family: 'ARIAL', SANS SERIF;

font-size: NUMBERpx;

color: NAME OF THE COLOR/#HTMLofthecolor/rgba (OF THE COLOR);

}

If you edit the informations in CAPSLOCK you will change what you're viewing. Edit it the way you want it to look, then copy the code the way I did above and paste it on <>. 

ATTENTION: The code necessarily needs to be between </style/> code </style/>.


For first doing customizationg I would recommend using someone elses code as a base because this way you will be able to tell each thing appart.


Okay I'm stupid, so this is the 87347428347 time I'm editing this, but whatever.


HERE IT IS THE CODE TO EASILY TELL EACH THING APART so you can edit the exactly the way you want:

<style>

/* DON'T DELETE THE MOBILE CODE */

@media (max-width: 600px) {

.container{

    width:100%!important;

    background-size: 50%!important;

    padding:20px!important;

}

nav:after{

    height: 150px!important;

}

}

</style>


<style>

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500&display=swap');

@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


:root {

--logo-blue: #aa0000;

--darker-blue: #00974c;

--lighter-blue: #ffee00;

--even-lighter-blue: rgb(255, 200, 200);

--lightest-blue: #0003aa;

--dark-orange: rgb(6, 177, 0);

--light-orange: #7070ff;

--even-lighter-orange: #92624c;

--light-gray: #777777;

--gray: #474747;

--dark-gray: #3a3a3a;

--darker-gray: #252525;

}


main {

    background: #b9ffbc;

    padding: 30px;

}


button {

    border-radius: 0px !important;

    background-color: #507f92!important;

    color: #bd7dba!important;

    border: 1px solid #9b77b8!important;

    font-family: 'UnifrakturMaguntia', cursive;

}



body {

    background: url("https://i.pinimg.com/564x/72/f4/3c/72f43cda7a486d345ce9f93981f51e28.jpg")

    no-repeat fixed;

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    font-family: 'Roboto', sans-serif;

    font-size: 21px;

    color: rgb(61, 61, 61);

}


p {

    font-family: 'EB Garamond', serif;

    font-size: 14px;

}


a {

color: #345a6b;

font-weight: 600;

font-family: 'UnifrakturMaguntia', cursive;

}


a:hover, .count {

    color: rgb(105, 57, 160);

    font-style: italic;

    text-decoration: none;

}


/radius is how rounded are the corners of the border, 0 is totally squared/ 

.search-wrapper input[type=text] {

    background-color: #F5F4F2!important;

    color: #858585 !important;

    border-radius: 0px !important;

    border-width: 2px;

    border-style: inset;

    border-color: -internal-light-dark(rgb(145, 20, 20), rgb(73, 213, 255));

}


/h1 is the title of the blog/

h1{

    font-size: 30px!important;

    font-family: 'Roboto', sans-serif;

    text-transform:initial !important;

    padding-left: 2px !important;

}


h4 {

    font-family: 'EB Garamond', serif;

    font-weight: 600!important;

    font-size: 16px;

    color: rgb(0, 0, 0);

    }

}


/nav.top is where the home link is/

nav .top {

    display: block;

    background-color: lightblue;

}


nav .links {

    display: block;

    background-color: orange;

    font-family: 'UnifrakturMaguntia', cursive;

    font-weight: 400;

    font-size: 13px;

    text-align: center;

}

nav .links{

    text-align: center;

}

nav .links a{

    color: #F5F4F2!important;

    text-shadow:none;

}


nav .links .special a {

    color: gold;

}


nav .links a{text-shadow:none;}

nav .links li:not(:last-child)::after,

footer .links li:not(:last-child)::after{

    content: " ⛧ ";

    color: white;

    font-weight: bold;

}

/the "content" abov is what divide the links, you can put what you want/


element.style {

    padding-right: 20px;

    padding-left: 20px;

}


.comments-table {

    border-color: var(--even-lighter-orange);

}


.comments-table td:first-child, .music-table td:first-child {

    background: lightcoral;

    text-align: center;

    font-weight: bold;

    width: 38%;

}


.comments-table td {

    background-color: var(--light-gray); 

    font-size: 16px;

    color: black;

}


.comments-table td a {

    color: transparent;

}


.comment-replies {

    border: 0px;

}


/footer is the information below your blog entry and everything/

footer {

    background-color: transparent;

    font-size: 13px;

    color: rgb(255, 141, 249);

}

footer a, footer a:hover {

    color: rgb(131, 0, 87);

}


element.style {

    padding-right: 20px;

    padding-left: 20px;

}


.logout-btn {

    display: inline-block;

    font-size: 100%;

    color: #FFFFFF!important;

    border: 0px!important;

}


.blog-entry {

    display: inline-block;

    font-size: 100%;

    color: var(--logo-blue)!important;

    border: 0px!important;

}


/size of your pic/

.blog-entry .profile-pic img, .bulletin .profile-pic img {

    max-width: 104px;

    max-height: 104px;

    padding-left: 5px;

}


.kudos-btn {

    color: darkcyan!important;

    border: 0px!important;

    display: inline-block;

    font-size: 100%;

}

/here is the square with your profile-pic, publishing date and etc/

.edit-info {

    border: 1px solid;

    width: 100%;

    padding: 8px;

    text-align: start;

}


<style>


THIS IS THE CODE I USE!

<style>

/* DON'T DELETE THE MOBILE CODE */

@media (max-width: 600px) {

.container{

    width:100%!important;

    background-size: 50%!important;

    padding:20px!important;

}

nav:after{

    height: 150px!important;

}

}

</style>


<style>

@import url('https://external-media.spacehey.net/css/sahSUPDwVsei6vzvGmIWJEAVNdLIdT3zS7LzDwAXPZJY=/https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500&display=swap');

@import url('https://external-media.spacehey.net/css/siG7mjS_dQNXXir2yQ0aQqJkR8aF2B1Cw_4MILBzOQkA=/https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');


:root {

--light-gray: transparent;

--gray: transparent;

--dark-gray: transparent;

--darker-gray: transparent;

--logo-blue: transparent;

--darker-blue: 000000;

--lighter-blue: #88928D;

--even-lighter-blue: #ccc;

--lightest-blue: #D9DDDE;

--dark-orange: #333;

--light-orange: #ccccff;

--even-lighter-orange: #404040;

}


main {

    background: #F5F4F2;

    padding: 30px;

}


button {

    border-radius: 0px !important;

    background-color: #4F564E!important;

    color: #FFFFFF!important;

    border: 1px solid #323731!important;

    font-family: 'UnifrakturMaguntia', cursive;

}



body {

    background: url("https://i.pinimg.com/736x/ad/d3/41/add3415c612fd8757154e1552fd15eac.jpg")

    no-repeat fixed;

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    font-family: 'EB Garamond', serif;

    font-size: 21px;

    color: black;

}


p {

    font-family: 'EB Garamond', serif;

    font-size: 14px;

}


a {

color: #323731;

font-weight: 600;

font-family: 'UnifrakturMaguntia', cursive;

}


a:hover, .count {

    color: black;

    font-style: italic;

    text-decoration: none;

}


.search-wrapper input[type=text] {

    background-color: #F5F4F2!important;

    color: #000000 !important;

    border-radius: 0px !important;

    border-width: 2px;

    border-style: inset;

    border-color: -internal-light-dark(rgb(27, 27, 27), rgb(133, 133, 133));

}


h1{

    font-size: 30px!important;

    font-family: 'EB Garamond', serif;

    text-transform:initial !important;

    padding-left: 2px !important;

}


h4 {

    font-family: 'EB Garamond', serif;

    font-weight: 600!important;

    font-size: 16px;

    color: rgb(0, 0, 0);

    }

}


nav .top {

    display: block;

    background-color: transparent;

}


nav .links {

    display: block;

    background-color: transparent;

    font-family: 'UnifrakturMaguntia', cursive;

    font-weight: 400;

    font-size: 13px;

    text-align: center;

}

nav .links{

    text-align: center;

}

nav .links a{

    color: #F5F4F2!important;

    text-shadow:none;

}


nav .links .special a {

    color: white;

}


nav .links a{text-shadow:none;}

nav .links li:not(:last-child)::after,

footer .links li:not(:last-child)::after{

    content: " ⛧ ";

    color: white;

    font-weight: bold;

}



element.style {

    padding-right: 20px;

    padding-left: 20px;

}


.comments-table {

    border-color: transparent;

}


.comments-table td:first-child, .music-table td:first-child {

    background: transparent;

    text-align: center;

    font-weight: bold;

    width: 38%;

}


.comments-table td {

    background-color: transparent; 

    font-size: 16px;

    color: black;

}


.comments-table td a {

    color: transparent;

}


.comment-replies {

    border: 0px;

}


footer {

    background-color: transparent;

    font-size: 13px;

    color: white;

}

footer a, footer a:hover {

    color: white;

}


element.style {

    padding-right: 20px;

    padding-left: 20px;

    font-size: 14px;

}


.logout-btn {

    display: inline-block;

    font-size: 100%;

    color: #FFFFFF!important;

    border: 0px!important;

}


.blog-entry {

    display: inline-block;

    font-size: 100%;

    color: #000000!important;

    border: 0px!important;

}


.blog-entry .profile-pic img, .bulletin .profile-pic img {

    max-width: 104px;

    max-height: 104px;

    padding-left: 5px;

}


.kudos-btn {

    color: #000000!important;

    border: 0px!important;

    display: inline-block;

    font-size: 100%;

}

.edit-info {

    border: 1px solid;

    width: 100%;

    padding: 8px;

    text-align: start;

}


<style>


109 Kudos

Comments

Displaying 19 of 19 comments ( View all | Add Comment )

hello

hello's profile picture

This was really helpful! Took me a min before finding this lol. Thanks! :)


Report Comment

Yuan CX

Yuan CX's profile picture

You are a Life saver!! <3 thanks a lot!!!!!!!!!


Report Comment

Ema

Ema's profile picture

omg your profile is AMAZING you did great!!!


Report Comment

$HR4PN€L

$HR4PN€L's profile picture

This iz so so so awsome!! Thank you \ :-D /


Report Comment

Tabii.catt

Tabii.catt's profile picture

THANK YOU I NEEDED THIS NOW I CAN CODE YAY


Report Comment



you're welcome!

by Emma; ; Report

mocosnotz

mocosnotz's profile picture

omg im gonna be a codingg queenn!!!


Report Comment

M&M

M&M's profile picture

woaaa this is so helpful!!!!!!!!!


Report Comment

Xx☆𝓗𝕒𝕚𝕝𝕖𝕪𝓖𝕝𝕠𝕠𝕞𝕚𝕖☆xX

Xx☆𝓗𝕒𝕚𝕝𝕖𝕪𝓖𝕝𝕠𝕠𝕞𝕚𝕖☆xX's profile picture

Thanx for the help!!


Report Comment



You're welcome!

by Emma; ; Report

M, but sleepy

M, but sleepy's profile picture

Woah 7 hrs?!?! It def paid off tho, it looks amazing!


Report Comment



I lasted so long to learn because I didn't want to search how to code, I just discovered things but myself! Thank you!

by Emma; ; Report

killingstrangers

killingstrangers's profile picture

I wish I saw your post before struggling two days to code


Report Comment



I struggled too! Before finding out the things by myself, my head hurt so bad Jesus

by Emma; ; Report

Laís [Fw/Eyestrain warning!]

Laís [Fw/Eyestrain warnin...'s profile picture

Okay first of all THANKS!!!! I don't remember ever having to deal with html this much in my life until I joined this website and I'm having such a time. I wasn't even considering putting these in my blogs because I had no idea on how to and editing a layout made by someone else on my profile seemed complicated enough.

Second BRS REÚNAM-SE


Report Comment



AI CARALEO

by Emma; ; Report

Desculpa só vu agora que tu é católica romana. Amém 🙏🏽

by Emma; ; Report

EU FIQUEI COM MEDO DE ARRUINAR SEU POST SE EU N COMENTASSE EM INGLES SLA KKKKKKK eu tava olhando de boas aí veio o inspecionar elemento e eu fiquei tipo "O QUE?"

by Laís [Fw/Eyestrain warning!]; ; Report

root

root's profile picture

Hey if you need to know anything about css(the language you set the style with) check the link below:
https://www.w3schools.com/css/default.asp


Report Comment



This style makes links invisable so just copy pase this ig

https://www.w3schools.com/css/default.asp

by root; ; Report

ratscallion

ratscallion's profile picture

Thx for posting this it watered my crops and edumacated me :3


Report Comment



You're welcome!! <3

by Emma; ; Report

KITTY !

KITTY !'s profile picture

this is so dang COOL ! (the layout ! ) and very helpful ! THANK YOU !!!!!


Report Comment



You're welcome!! I'm happy I didn't sound confusing XD

by Emma; ; Report

Bullet ✯ (Iheartddc)

Bullet ✯ (Iheartddc)'s profile picture

is it ok if i link your blog on mine? ^^ with credit ofc


Report Comment



Of course you can !!!

by Emma; ; Report

Bill Liam East

Bill Liam East's profile picture

Thank you, this has been very helpful.


Report Comment

yurmom2

yurmom2's profile picture

you can just use snipping tool


Report Comment

phoriamachine_

phoriamachine_'s profile picture

your profile looks so cool. good job :]


Report Comment



Thank you

by Emma; ; Report

Charlie!

Charlie!'s profile picture

Is there a way to do this without inspect? Just wanna make it match my profile! :)))))))


Report Comment



You can just copy the code of your profile and put it in the <> thing!

by Emma; ; Report