Report 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:
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>
Comments
Displaying 20 of 28 comments ( View all | Add Comment )
Parahsite
When I do this and edit in the inspect thing, I can see the changes I want happening but how do they save or stay? I refresh and it’s normal again
you copy the changes and put it on the "edit your profile"
by Maiden Death; ; Report
make the changes you want
copy them
enter the "edit your profile"
type ""
between them put the code you made
for ex
body {
font-family: Arial, sans serif;
font-size: 14px;
color: black;
}
you need to copy the whole segment, with the "{ }"
by Maiden Death; ; Report
AeriiiRyuu
Call me dense but can someone help me change the font please? :(
body { font-family: 'INSERT HERE THE FONT', serif /or sans serif, depends on the font your using/;
font-size: 21px
color: black; /you can also put the #rgb of the specific color you want/
}
by Maiden Death; ; Report
⦻ 𝐌𝐀𝐍𝐊𝐈𝐍𝐃𝐙 𝐁𝐀𝐃 𝐇𝐀𝐁𝐈𝐓𝐒 :)
YOU ARE A SAVIOUR THANK YOU SO MUCH IVE BEEN LOOKING FOR HOW TO DO THIS
Martin
You are my goddamn saviour, thank you so much
nerdyraccoon
you're SO portuguese
I'm Brazilian actually, but it's true that I speak portuguese and, therefore, use portuguese sentence structures even in other languages lol
It's something very common among english as a second language learners
by Maiden Death; ; Report
same 4 me XD
by nerdyraccoon; ; Report
Ent pq nois tá falando em inglês kkkkkkkkkkkkkkkkkkkkkkkk
by Maiden Death; ; Report
medicine cat blog
Will be using, Thank you very much.
robin!!
THANK YOU
robin!!
THANK YOU
Kie
Thank you.
mossy :]
you are a lifesaver :0
minniemew
omg. i owe you my life for this post!!!!
vienna
i love ittt
i used it and changed it, it turned out soooo pretty
ty!!! <3
☆CrybabyAngel☆
I can't do this because I'm on Mac:( when I left click on mouse (and control/command + shift + I) I didn't get those options:/ /nm
I searched and it says to you "To inspect an element on Mac, open up Safari. Select Safari > Settings > Advanced, then toggle the option that reads Show Develop menu in menu bar. Then, access your desired webpage, right-click, and tap Inspect Element."
by Maiden Death; ; Report
hello
This was really helpful! Took me a min before finding this lol. Thanks! :)
Yuan CX
You are a Life saver!! <3 thanks a lot!!!!!!!!!
Ema
omg your profile is AMAZING you did great!!!
$HR4PN€L
This iz so so so awsome!! Thank you \ :-D /
Tabii.catt
THANK YOU I NEEDED THIS NOW I CAN CODE YAY
you're welcome!
by Maiden Death; ; Report
mocosnotz
omg im gonna be a codingg queenn!!!
M&M [NEEDS REVAMPING]
woaaa this is so helpful!!!!!!!!!