hello everyone ⸜( ´ ꒳ ` )⸝ i've had some people asking me how i customize my blog layout, so i thought i'd give a lil tutorial!! (°ロ°) this code isn't 100% mine, i took it from the blog layouts section and edited/deleted parts that didn't work for me.
bc of this, there's some parts that i don't fully know what they do. i'd give credit, but i honestly have no idea which one it was (ó﹏ò｡) i'll be explaining the parts i think are most important, but every part of the full code does something. i just dont know what.
the full part of the code is at the bottom of the blog! warning: it's a bit long.
<style>
/* ==========================================
COLOR PALETTE, PUT THE COLORS U WANT HERE:
COLOR 1: #FFF59D | COLOR 2: #3C096C
COLOR 3: #FF007F | COLOR 4: #C7F9CC
COLOR 5: #00B4D8 | COLOR 6: #E0AAFF
COLOR 7: #06D6A0 |
========================================== */
⋮ ⌗ ┆this part of the code is pretty straightforward- i just use it to keep the colors i want in order!! i usually just copy/paste them from coolors.co, then copy/paste them into the code. (๑>◡<๑) having them up here helps make it easier.
body {
background-image: url("https://i.pinimg.com/1200x/07/f0/8b/07f08b8a60aa2c0752d8a9eb98730046.jpg");
background-position: center center;
background-size: cover;
background-attachment: fixed;
font-family: Georgia, serif;
color: #3C096C;
}
⋮ ⌗ ┆the "color: #3C096C" part of the code honestly doesn't do much that i can see, but feel free to change it! ^^ the "background-image" part is the most important, just copy the url of the image (not the pinterest one!! the image itself) and put it between the "" marks.
/* Header */
.myspace-header .top-nav,
.myspace-header .main-nav-wrapper {
background: #FFF59D url("https://i.pinimg.com/736x/99/1b/13/991b1370cc9908f0af9209ea3e2c0db5.jpg") repeat center;
}
.myspace-header .main-nav li a {
color: #3C096C;
}
.myspace-header .main-nav li a:hover {
color: #FF007F;
}
⋮ ⌗ ┆these will edit your header!! choose the colors of the text and image behind it with the background url, just like for the other one. (˶ˆᗜˆ˵) i recommend choosing a different image than the body background, but that's just my preference!!
/* Footer */
footer {
background-color: #FFF59D;
}
footer p {
color: #3C096C;
}
footer .links {
color: #FF007F;
}
⋮ ⌗ ┆ these will edit the footer! the links and color of it. (˶˃ ᵕ ˂˶)
/* Blog Section */
.blog-entry .title {
background-color: #06D6A0;
color: #3C096C;
padding: 5px;
}
.blog-entry .content {
background-color: #C7F9CC;
padding: 10px;
}
/* Main layout */
main {
background-color: #FFF59D;
}
main .left {
background-image: url("https://i.pinimg.com/736x/99/1b/13/991b1370cc9908f0af9209ea3e2c0db5.jpg");
background-size: cover;
}
main .right {
padding: 1px;
background-color: #C7F9CC;
}
⋮ ⌗ ┆ these will edit your "main blog" area!! the "main.left background image" is the image you'll see to the left of this blog. mess around and make cool color combos with the color options, maybe even play around with the padding pixels!! (๑•᎑•๑)
/* Icons */
p.links a:first-child .icon {
content: url("https://pixelsafari.neocities.org/favicon/horror/medical/tool9.gif");
width: 25px;
height: auto;
visibility: visible;
}
p.links a:nth-child(2) .icon {
content: url("https://pixelsafari.neocities.org/favicon/fashion/dress4.gif");
width: 25px;
height: auto;
visibility: visible;
}
p.links a:last-child .icon,
table.comments-table td .icon {
content: url("https://pixelsafari.neocities.org/favicon/object/stationery/mail6.gif");
width: 25px;
height: auto;
visibility: visible;
}
⋮ ⌗ ┆ lastly, these icons will let you edit the "view blog, view profile, and favorite blog" icons on the top left side. just find a cute icon (no idea where i got these lol) and paste it in!
here's the finished code!! copy and paste it into the code area of a blog (top left corner under "content"), and enjoy customizing!! ദ്ദി(˵ •̀ ᴗ - ˵ ) ✧
<style>
/* ==========================================
COLOR PALETTE REFERENCE: COLORS GO HERE!!
Soft Yellow Base: #FFF59D | Deep Purple Text: #3C096C
Bright Pink: #FF007F | Mint Green Background: #C7F9CC
Vibrant Blue: #00B4D8 | Soft Lavender: #E0AAFF
Teal Green: #06D6A0
========================================== */
body {
background-image: url("https://i.pinimg.com/1200x/6d/69/56/6d6956e0ad9f172bb1949dceba11ca3c.jpg");
background-position: center center;
background-size: cover;
background-attachment: fixed;
font-family: Georgia, serif;
color: #3C096C;
}
/* MAIN TEXT - KINDA BUGGY */
main,
main p,
main span,
main div,
main td,
main li {
color: #3C096C;
}
/* BOLD TEXT IN COMMENTS */
.inner b {
color: #FF007F;
}
/* NAV */
nav .top {
background-color: #FFF59D;
}
nav .links {
background-color: #FFF59D;
text-align: center;
border-radius: 4px 4px 0 0;
background-position: center;
background-repeat: no-repeat;
}
nav .links a {
color: #FF007F;
}
/* HEADER */
.myspace-header .top-nav,
.myspace-header .main-nav-wrapper {
background: #FFF59D url("https://i.pinimg.com/736x/80/8d/34/808d34ecec3373051be5d5ac2f49462f.jpg") repeat center;
}
.myspace-header .main-nav li a {
color: #3C096C;
}
.myspace-header .main-nav li a:hover {
color: #FF007F;
}
/* BUTTONS */
button {
color: #FFF59D;
background-color: #3C096C;
border: 1px solid #FF007F;
}
/* COMMENT BUTTONS */
.comments button,
.comment-form button,
input[type="submit"] {
background-color: #FF007F !important;
color: #FFF59D !important;
border: 1px solid #FF007F !important;
}
/* HOVER EFFECT - NO IDEA WHAT THIS DOES */
.comments button:hover,
.comment-form button:hover,
input[type="submit"]:hover {
background-color: #00B4D8 !important;
color: #FFFFFF !important;
border-color: #00B4D8 !important;
}
/* COMMENT COUNT */
.count {
color: #FF007F;
}
/* LINKS */
a {
color: #FF007F;
text-decoration: none;
}
a:hover {
color: #00B4D8;
text-decoration: underline;
}
/* FOOTER AT THE BOTTOM */
footer {
background-color: #FFF59D;
}
footer p {
color: #3C096C;
}
footer .links {
color: #FF007F;
}
/* TABLES - NO IDEA WAHT THIS DOES */
.comments-table td:first-child,
.comments-table td,
.comment-replies,
.details-table td:first-child,
.details-table td {
background: #C7F9CC;
color: #3C096C;
}
/* EDIT INFO AT THE TOP (?) */
.edit-info {
background-color: #FFF59D;
border: 1px solid #00B4D8;
}
/* BLOG */
.blog-entry .title {
background-color: #06D6A0;
color: #3C096C;
padding: 5px;
}
.blog-entry .content {
background-color: #C7F9CC;
padding: 10px;
}
/* MAIN LAYOUT */
main {
background-color: #FFF59D;
}
main .left {
background-image: url("https://i.pinimg.com/736x/fb/5f/59/fb5f5940bcd927bd447e15e23db35346.jpg");
background-size: cover;
}
main .right {
padding: 1px;
background-color: #C7F9CC;
}
/* LEFT ICONS */
p.links a:first-child .icon {
content: url("https://pixelsafari.neocities.org/favicon/horror/medical/tool9.gif");
width: 25px;
height: auto;
visibility: visible;
}
p.links a:nth-child(2) .icon {
content: url("https://pixelsafari.neocities.org/favicon/fashion/dress4.gif");
width: 25px;
height: auto;
visibility: visible;
}
p.links a:last-child .icon,
table.comments-table td .icon {
content: url("https://pixelsafari.neocities.org/favicon/object/stationery/mail6.gif");
width: 25px;
height: auto;
visibility: visible;
}
</style>
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
batshybea
yayayy gonna use this for my next blog and hopefully be able to figure it out!! seems simple and easy to follow though with the way u set it out :D