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 20 comments ( View all | Add Comment )
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 Emaemaema; ; 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 Emaemaema; ; Report
mocosnotz
omg im gonna be a codingg queenn!!!
M&M
woaaa this is so helpful!!!!!!!!!
M, but sleepy
Woah 7 hrs?!?! It def paid off tho, it looks amazing!
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 Emaemaema; ; Report
Laís
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
AI CARALEO
by Emaemaema; ; Report
Desculpa só vu agora que tu é católica romana. Amém 🙏🏽
by Emaemaema; ; 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; ; Report
root
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
This style makes links invisable so just copy pase this ig
https://www.w3schools.com/css/default.asp
by root; ; Report
ratscallion
Thx for posting this it watered my crops and edumacated me :3
You're welcome!! <3
by Emaemaema; ; Report
KITTY !
this is so dang COOL ! (the layout ! ) and very helpful ! THANK YOU !!!!!
You're welcome!! I'm happy I didn't sound confusing XD
by Emaemaema; ; Report
IHEARTDDC
is it ok if i link your blog on mine? ^^ with credit ofc
Of course you can !!!
by Emaemaema; ; Report
yurmom2
you can just use snipping tool
phoriamachine_
your profile looks so cool. good job :]
Thank you
by Emaemaema; ; Report