Report Blog Entry
Hey! So im writing this blog for all the new peeps out there who want help with their layout! It took me a min to get used to it, find code that worked, and find out where i wanted things to go on my page and how to do that! I know a bit of code so far, so imma give that to yallz rn to help u take a few more stepz toward getting ur dream layout d(≧∇≦o) !!
To start off my page, I began editing with a base code. You can find a whole lotta cool arrangements in the "Layout" option in the tool bar righttt in between Groups and Favorites. From there, you can copy the code and get to transforming it to your own, original layout :]] !
After that, u can copy a base code like this one by TheJasmineSixx (LunaGloomyCore), which ty so much for uploading it btw !!! o(*≧□≦)o :
whats in bold tells u what links to put in or notes to delete later when u copy the code! keep the blog open in another tab to make it easier
code:
<style>
body {
background: url(add any image address of an image u want to go on the overall back/sides of your page);
<style></style>
<img width="230" height="167" src="add any image address of an image u want to go above ur about u section here" alt="TITLE"/>
<br/> **this is very important code if you want something to come on the next line after something, remove if u want it next to it
<br/>
- add about u fact here <br/>
- add about u fact here <br/>
- add about u fact here <br/>
- add about u fact here <br/>
- add about u fact here <br/>
- add about u fact here <br/>
- add about u fact here
<style>
@import url('https://fonts.googleapis.com/css2?family=Eater&display=swap');
body{font-family: "eater" ;}
** put font name that u want in the bold parts above! capitalize in the link, and if the name is more than one word add a _ between words
.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions {
border: none;
}
table.details-table {
border-collapse: collapse;
}
table.details-table td {
background-color: transparent !important;
}
.profile-pic {
border-radius: 500px;
overflow: hidden;
** this makes ur profile pic an oval/circle depending on how long ur image is
}
<img src="giforimageurl"/>
<img src="giforimageurl"/>
<img src="giforimageurl"/>
<img src="giforimageurl"/>
<img src="giforimageurl"/>
<img src="giforimageurl"/>
<img src="giforimageurlORglittertext"/>
<style>
body {
background: url(this is for the background of ur page inside the middle behind ur pfp);
}
.profile {
background-image:url(this is for the background of the middle section of ur page overall);
border-radius: 12px;
}
/*the username glow and shadow*/
h1
{
color: /*the username glow and shadow*/
h1
{ color: #FFA500 you can change the color hex code here and below to whatever u want, just look up the color and hex code after it, or go to a hex code color picker;
//text-shadow: 3px 4px #FFA500;
.profile {
font-size: 50px; }
};
text-shadow: 2px 2px 3px #FFA500, 0 0 25px #FFA500, 0 0 5px black;
}
h1, h2, h3, h4,h5,a, p, nav label, .section
{
main, top, links, nav .top, nav .links, details-table
{
background: !important;
background-image: !important;
background-size: cover !important;
padding: 0 !important;
/*font-size: small ** you can change the font size here;*/
color: #39FF14;
{
.mood
text-transform:lowercase !important;
}
table, td
}
/* border: 1px solid var(--url-pink-bg)!important; */
border-spacing: 4px;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions
{
width: 100%;
border: 6px solid var(#39FF14);
}
table, th, td
}
border: 3px solid #39FF14;
border-spacing: 2px;
}
.blog
}
border: 10px solid #39FF14;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions
}
width: 100%;
border: 4px outset #39FF14;
margin 10px 2;
}
.online
{
color: gold!important;
//text-shadow: 1px 1px turquoise;
}
:root
{
--logo-green: ;
--darker-green: ;
--lighter-green: purple 55;
--even-lighter-green: ;
--lightest-green: ;
--dark-orange: ;
--light-orange: ;
--even-lighter-orange: ;
--green: ;
--table-header:#ffd1dc;
--table-color: white;
--link-text: white;
--main-text: white;
}
main
{
/* changes made to stuff outside of columns */
background: black;
padding: 0;
font-size: medium;
color: #ffa600;
text color: #ffa600;
text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000;
}
footer
{
background: turquoise!important;
}
.comments-table{
display: block;
height: 500px;
overflow-y: scroll;
Border-radius: 15px;
color: turquoise;
text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000;
}
.contact {
border-radius: 8px;
background-image: url(this is for the background of your contacts, add an image address);
background-position: right top;
background-repeat: repeat;
background-attachment: scroll;
Width: 310px;
Height:180px;
color: black;
text-shadow: 1px 1px 2px #39ff14, 0 0 25px #39ff14, 0 0 3px #39ff14;
}
.friends th, tr, .friends td, th, .icon, main, .comments-table, .friends, .profile-info, .table, .table-section, .url-info, .mood, .blurbs, .blog-preview, .details,
{
border: 1px curve #000000 !important;
outline: curve !important;
}
img
{
border-radius: 12px;
}
main {
background: black;
border-radius: 14px;
padding: 0;
font-size: 85%;
color: #000000;
}
nav, footer, .profile .contact {
display: inherit !important;
opacity: 1 !important;
border-radius: 12px;
}
main {
background: ;
border-radius: 12px;
border: 12px solid #000000;
padding: 0;
font-size: 90%;
color: #00FFEF;
}
nav .top {
background: transparent;
}
nav .links {
background: rgba(0, 0, 0, 0.3);
}
nav { background-image: url(this is for the background of the navigation tool bar at the top, add an image address)
}
/*customising interests box*/
.profile .table-section{
border:2px solid #c50576;
border-radius: 15px;
}
.profile .table-section .heading{
background:#000000;
border: 1px solid #c50576;
border-radius: 15px 15px 0px 0px;
text-align: center;
}
.profile .table-section .heading h4{
color: #c50576;
text-shadow: 1px 1px 2px black;
}
.profile .table-section .details-table td{
background: rgba(0, 0, 0, 0);
padding-right: 10%;
}
/*customising friend space heading*/
.profile .friends .heading{
background: #c50576;
color: #ffffff;
text-shadow: 1px 1px 2px black;
text-align: center;
}
.profile .friends .heading h4{
text-align: center;
color: #ffffff;
text-shadow: 1px 1px 2px black
}
.general-about {
background-image: url(this is for the background of your pfp, add image address);
padding: 20px;
border-radius: 10px;
box-shadow: 4px 4px 0 #2d1157;
text-align: center;
animation: nineties2 2s ease 0s infinite normal none;
animation-delay: .46s;
}
.profile .blurbs .section :nth-child(2) {
background-image: url(this is for the background of ur about me and who youd liek to meet, add image address);
/* margin-top: -5px; */
padding: 18px;
box-shadow: 4px 4px 0 #000;
}
.profile .profile-info .inner h3 {
filter: drop-shadow(3px 3px 0 #000000);
margin: 0!important;
color:#FFF;
}
.profile .profile-info .inner h3 a {
color: #FFFFFF;
}
.profile .profile-info {
background-image: url(this is for the background of the edit your profile box, add image address);
padding: 20px;
border: none;
border-radius: 10px;
box-shadow: 4px 4px 0 #2d1157;
text-align: center;
animation: nineties2 2s ease 0s infinite normal none;
animation-delay: .15s;
border: none;
}
</style>
Some of the code and where things are located are easier to find than you might first think, but once you read what its inside you know what goes where ! You can play around with things more than I did, but that's how I got my page to look how it does tbh XP just putting dif hex codes and image addresses in dif places where they needed to be and seeing if it worked on my profile. Just make sure u keep the semicolons after lines of code so it goes through, and dont delete any **<style>**s with the \ & / in them.
For adding image addresses, find a gif or image you like online, right click and then press [copy image address] and then paste it "here" in between the quotation marks.
On mobile, you can still hold down and copy the image itself, but it will be very long! You might confuse yourself, but it still works.
Now, for those cute DeviantArt stamps u see on my page and adding other images in your about me and such !! Using an online size finder for images is the best way to set up the height and width in the code. Also, using <br/> in between or on the next line will make your next image be on the next line after the first image, like mine are. You can also add a full space if you want doing two breaks: <br/><br/>
Here's some code examples for adding images!
<img width="widthhere" height="heighthere" src="put image or gif address here" alt="TITLE"/>
So there's an example of stamps u can look up and find ! I personally love stamps bc they can say a lot about what you like, are, or believe in in a visual and really aesthetically pleasing form. Its great ヾ(＠^∇^＠)ノ
Here's the code I use for these stamps with the sizes !
code:
<img width="99px" height="56px" src="add address here copied from DA" alt="TITLE"/>
Here's the code for images as well, but make sure to look for the size of your images!
code:
<img width="200*replace*" height="100*replace*" src="add image or gif address here" alt="TITLE"/>
In the first case, I added "px" to the end of the width and height of the stamps bc that was the size they were provided in. You dont usually have to add it to the end of normal images/gifs.
You can add these codes where ever you want stamps, images, gifs and that kinda stuff to different sections of your profile (like your General, Music, Movies, TV shows, Books, Heroes, Who I'd Like to Meet and About Me). I havent figured out how to put it near or above your pfp, but if anyone has that code msg me and I can add it to this blog ! Also this blog does a great job at explaining how to add youtube vids to your page ! You can also look up how to get the embedded youtube link from the video, but you just click share, click embedded, and then copy the code from there.
Hope this blog helped some peepz out （；^ω^） srry for any typos or if my explanations r a little sloppy, but if u have any questions comment down below and ill answer to my best abilities !
- rr XP
Comments
Displaying 20 of 20 comments ( View all | Add Comment )
electricpants57
the code for the circular pfp works on my profile but doesn't work on my blog, does anyone have a solution?
7 months later but you can go on pinterest and search a round pfp frame and then go to ibis paint or anything like that and put the pfp you want in it and just make the background invisible - if u dont know how to do that just search something like: rentry pfp mask tutorial
by braineater; ; Report
Milo
TYSMM i was making my profile today and this has been really really helpful :D
xofrnk
I figured out how to change the background, but how do I make it so when you scroll, the stuff in the middle moves while the background stays still?
aqua
How do I change the colors and background of the comments and contact tables?
nerdyraccoon
Haiii! I uzed da code 4 da sides of da pf, but i want it 2 be a bigger image and not a repetition of da same image. Howl do i fix it??? T_T
sleepycatthing
OMG THANK YOUUU <33
𝓈𝒶𝓇𝒶𝒽 💋
Super helpful and easy to understand, thanks! I have a question though, how can i have the background for my "about me" and "who i'd like to meet" tabs be different? HELP PLS!!!
I eat trash
Very helpful and well thought blog! But i somehow can't change the font color
✰Vlad✰
this works pretty well and i like the directions i do have one problem i ran into tho i cant change the color of the font and a few other things
ian the lamest guy ever
TYSM 4 THIS
rai_Blogz08
BEN
THIS IS SO HELPFUL TYTY!!
Jannylili
Thank you so much this is great!! ^-^
how ?
by Hana; ; Report
Alabamie Mamie
Thank you
Howl
OMG THX U SO MUCH!!!! I only know how to use BBcode xd
Rigid-Calico
Thank you so much!! :-)
vic
TYSM OMG
DARK!
Thank you so much,super helpful!
TheKookie
Yesss thank you :)
np ! :33
by r0bbyr4nd0m; ; Report
C.B. SMALLWOOD
Thanks for taking the time to post this! Very helpful, thank you!
np ! :DD
by r0bbyr4nd0m; ; Report