Report Blog Entry
currently, my hyper-fixation is learning how to code, and i finally figured out how to customize the layout of a blog entry! if you don't really care about the logistics of everything and just want a cool blog layout, the code i used for this post is linked right here.
before we start: I AM NOT A CODER!! these are just bits and pieces of things i've picked up over the last couple of days that i wanted to share. i have literally never coded in my life until a week ago (at the time of posting this). so, if you have any questions, i probs wont know the answer honestly. sorry >_< plz dont come for me if i get some things wrong!
the resources that helped me the most when making this:
◉ marr ◉'s blog layout - provided the base of my code.
☆ Lizzy ☆'s blog entry guide - helped me understand what tf a lot of the elements meant, also useful resources in the comments!
Tommy Panzram's SpaceHey Layout Editor - extremely helpful resource that allows you test out code on a blank SpaceHey profile/blog/etc. literally the only reason i was able to do this lolz.
zyozi's resource masterlist - ur one stop shop for any SpaceHey/coding needs. give them their flowers because this probably took an ungodly amount of time and effort!
hex's resources - also provides a crazy amount of resources to help you make layouts!
HTML group - another resource for layout help
HTML color picker - if you want to change any of the colors in the layout
my button icons and cursor were found on tumblr! (probably not the best idea cus the links may expire, idc tho)
ok, now onto the guide!
*before you put anything in your blog entry, click the "<>" button, then paste my code. the "<>" should look like an eye now. click it again, and your layout should look like mine!*
i really recommend using the layout editor so you can see how your changes affect the code! if you do use the layout editor, after you paste the code take out the "<style>" elements.. 4 some reason it doesn't like those.
<style>
body {
background-image: url("https://img1.picmix.com/output/stamp/normal/8/5/1/6/1846158_17fe5.gif");
}
this is the star background gif. i set it up so that it just repeats the same image. if you'd like further customization, you can try this code instead:
body {
background-image: url("PASTE URL HERE");
background-position: center center; /* center the image horizontally and vertically */
background-size: cover; /* stretch the image to cover the entire background */
background-repeat: no-repeat; /* stop the image from repeating */
background-attachment: fixed; /* keeps the image still while scrolling */
font-family: 'Georgia', serif; /* changes the default font */
}
.col.right .content {
color:#ff66b3
color of the text in your blog entry. to pick your own color, replace my HTML color code with your own.
}
.inner b {
color: #ff3399;
this changes the color of the date comments were posted and the "displaying * of * comments" text.
}
nav .top {
background-color: black;
this makes the top of the navigation have a black background (the part where the spacehey logo is)
}
nav .links {
background-color: black;
text-align: right;
border-radius: 4px 4px 0 0;
background-position: center;
background-repeat: no-repeat;
this changes the style of background for the navigation links (home, browse, etc.)
}
button {
color: #b30059;
background-color: black;
this changes the color & background of any buttons (publish, add reply, search, etc.)
}
.count {
color: #b30059;
this changes the color of counters (like number of comments or kudos)
}
a {
color: #b30059;
this changes the color of all links on the page.
}
nav .links a {
color: #ffffff;
this changes the color of all of the navigation links (home, browse, etc.)
}
footer {
background-color: black;
changes the background of the footer. if you'd prefer an image, paste this instead:
footer {
background-image: url("PASTE URL HERE");
}
}
footer p {
color: #ffffff;
color of the "brought to you by" and disclaimer text in the footer.
}
footer .links {
color: #ff3399 !important;
color of the links in the footer. for some reason it wasn't working for me at first, so i added the !important part which overrides the default.
}
.comments-table td:first-child, .comments-table td, .comment-replies,
.details-table td:first-child, .details-table td {
background: black; /* background color of the comments */
color: #ff3399; /* color of the comments text */
border-color: black /* color of the border around the comments */
}
.inner .comments-table {
border-color:#ff66b3
this is the color of the border that encases all of the comments, i hope that makes sense O.o
}
.edit-info {
background-color: black;
border: 1px;
background color of where your pfp and post information is as well as the links to your blog and profile
}
.blog-entry .title {
background-color: black;
color: #ff3399;
padding: 5px;
changes info related to your blog title
}
p.links a:first-child .icon {
content: url("view blog icon url here!");
width: 25px;
height: auto;
}
p.links a:nth-child(2) .icon {
content: url("view profile icon url here!");
width: 25px;
height: auto;
}
p.links a:last-child .icon, table.comments-table td .icon {
content: url("report blog entry icon url here!");
width: 25px;
height: auto;
}
.blog-entry .content {
background-color: black;
padding: 10px;
background color of the actual blog entry
}
main {
background-color: black;
color of the bar right below the navigation links
}
main .left {
background-color: black;
background color of the left part of your blog, from where your pfp is to the bottom of the blog entry.
}
main .right {
padding: 1px;
background-color: black;
background color of the rest of your blog entry.
}
.author-details {
color: #ff3399;
color of the "published by_" "updated _ ago" and "category" text
}
.logout-btn, .kudos-btn {
background: none !important;
border: none;
padding: 0 !important;
cursor: pointer;
user-select: text;
text-decoration: none;
color: #ff66b3 !important;
changes the color of the "logout" button at the top and the "give 1 kudos" buttons at the bottom. also changes the color of your text. if you choose, you can separate these things so they're different colors.
}
.right {
color:#ff66b3
changes the color of the "_ kudos" text and the "comments" text.
}
.blog-entry {
border: 1px solid #ff3399;
color around the border of your entire blog entry. if you don't want a border, delete this section
}
HTML, BODY {
cursor: url("cursor link here!"), url("cursor link here!"), auto;
this is to change your cursor!
}
button,
a,
.logout-btn,
.blog-entry .kudos-btn,
.blog-entry .kudos-btn:hover,
button:hover,
a:hover {
cursor: url("https://64.media.tumblr.com/0f64b85508f0a34fe3eb0b1e935bf871/997a95d48fab6316-07/s75x75_c1/14289f8a0f3d61980a4a17cc66635cc04e6f2cf8.gifv"), auto !important;
this part is just so the cursor stays the same when hovering over certain buttons/links.
}
</style>
that's the end of my code! i hope this helped someone lolz this took me a long time to make.
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
geselle ✧
THANK YOU SOOOO MUCH 4 WRITING THIS its been taking me like 2 hrs to find which code goes to what and this had me finish it in like 20ish minutes thank you thank you<33333 made me realize i was messing up some of my code too LOL ... ty again yayy!!!!!!