I'm back with another profile layout tutorial! This one will be short, but I really want to tell you this because I was trying to figure it out since I joined and the friendproject support wasn't much help. Now I want to show you how you can change the Online now icon on your profile, the one that blinks green when you are logged in. You can find custom code for them on sites like glitter-graphics.com or pimp-my-profile.com. The layout codes on those sites were made for myspace, and most of it works perfectly fine on friendproject too. However, the Online Now icons are a bit different. The code you get won't work if you just paste it into your profile editor, but I will show you what you need to to, it's really easy once you know it! Grab yourself an icon code from one of the sites above (or another one, there are many), and paste the code into your style section. It should look similar to this:
The only thing we really need is the background-image url, the line I marked in color for you. Copy it and save it somewhere in an open text editor, you'll need it later. You can delete the entire rest, we'll rewrite it ourselves entirely. In the first step we need to hide the original online now icon so it doesn't show up anymore. For this, we will call the CSS selector .msOnlineNow img in your style section. It selects the image inside the section which is bound to the CSS class .msOnlineNow (you don't need to understand this if it's too confusing, just to explain things to people who are interested in it ^^). We will simply set the visibility of it to hidden. Like this:
.msOnlineNow img { visibility: hidden; }
If you visit your profile now: No Online now icon! Now we will set the one you choose! We will call the .msOnlineNow class again, but this time without the image. I won't explain all of the CSS here, but what we basically do it to set the image you choose at the background image of the section, set it so it only shows once and increase the height so it shows properly. If you're interested in what the code does exactly, you can always google the keywords, look up W3schools and play around with it yourself. This is what you need to write:
.msOnlineNow { background-repeat: no-repeat; background-image: url('paste your chosen url in here!'); background-repeat: no-repeat; z-index: 2; height:20px; display: inline-block; }
With this you should already be done! If you're facing any issues with it, please don't hesitate to comment or message me, I'll do my best to help you! You can also read my other HTML/CSS/Profile layout tutorials if you want ^^
Hello and welcome to my next HTML tutorial, where I show you how you can customize your profile, your blog layout or any other website with HTML and CSS! If you're new to this, you can find the whole tutorial series in my blog where I explain HTML and CSS from the very beginning. It's really easy, don't worry! :) I can't do these that often sadly because it takes a while researching and writing everything and I have a full time job which requires most of my time and mental power too, so I just want to apologize for the long time you had to wait. Today I want to cover something I got requested A LOT, and I can't blame you because it's one of the best features for profile page. You might have noticed it if you've ever visited my profile, that I have some song playing on it when you load the page. A while ago we could use the adobe flash player to create a playlist that you could insert in your profile very easily. Since the flash player doesn't seem to work on friendproject anymore, we needed to find another alternative now. What I can show you isn't exactly as good as the flash player playlists, because with this method you can choose only one single song to play on your profile. Anyway, it's pretty cool. Let's get started!
HTML Audio
HTML5 brings us a tag for implementing an audio file in our web page. It can be a song, but it can also be any other sound as long as it has a supported format. And this is how it looks:
<audio></audio>
1
Before we can implement a song in it, we need the song file on our computer (if you already have it downloaded on your PC, you can skip this step). I usually use youtube as the source for my songs, so I'll show you my method - probably not the best, and there are 1000 of other ones, but just to have an example to start with. Go on YouTube and search for the song you want to use. Copy it's link, then go to https://2conv.com/en36/ and follow the steps to download an mp3 file (be careful, that site often opens some ads or stuff, I don't know a better one though...). Once you have it somewhere on your PC, time for the next step.
2
Now go to https://kiwi6.com/. If you don't have yet, you will need to create an account there. Once you're logged in, go to Account->File Manager:
On this page, you should be able to upload files. You might have to enable flash player first. Upload the .mp3 file of your song. When you're done, there should be a field called "Direct Hotlink" with an URL that ends with .mp3. Copy this link.
Back to the code with the <audio> tag. Now you can specify a source-attribute to the tag, exactly like you would do it with an image.
<audio src=""></audio>
Inside the scr, paste the mp3 link. If everything went right, you're almost done. The audio is in your page, but if you load it, it won't play, because by default, it doesn't start on it's own, it needs a trigger. To fix that, you just need to put another attribute in the tag: the autoplay-attribute. What it does is to trigger the player the moment your page is loaded.
Now when you load your profile, you should hear the song playing!
That's already pretty nice, but there's even more stuff you can do with the audio tag. You can give it music player-like controls for pausing and playing or adjust the volume by simply adding another attribute to the <audio> tag, which is the controls-attribute.
Now something like this should appear in the position where you have the code:
Note that this is the way it looks in firefox, however, in other browsers it might look different. In Chrome for example, you would see this:
If you think your song can be heard over and over again because it's so good, or if you just want to annoy your profile visitors, there's also the loop-attribute. If you add it, the audio will play on loop.
If you have spotify, your lucky, because spotify has an option to embed a playlist as HTML code. However, it won't have autoplay and for people who don't have spotify or aren't logged in with it on their device will only be able to hear short parts of a few songs from it. Anyway, it's still a nice way to share your music with others. Here's how it works. Go to the spotify playlist you want to use. It can be your own playlist or any other on the platform. Then you click on the three dots. Under the share option there should be "Copy Embed Code".
Great playlist btw o.O Copy it and paste it anywhere you'd like in your profile. Now you should have code like this:
All you have to do now is to replace the "*****" with "embed", and the spotify player should be there! EDIT: Apparently, friendproject censores the word you have to replace for some reason. Anyway, if you copy it you will see what is meant. Hope this doesn't cause any confusion.
You can also combine the spotify playlist and the HTML audio tag in one page since the one from spotify doesn't have autoplay anyway.
Sooo no you are able to implement music in your profile! I want to see a lot of you with some profile songs now xD If you're still having issues to get it to work or questions about it, please don't hesitate to ask me! I'm always happy to help people and I will do my best to support you with all HTML- or CSS-problems. Also I'm always happy about requests or suggestions for things you want me to do a tutorial about. I still have a few ideas but if you have something, please tell me! Hope you'll have fun with this new learned feature ^-^
Welcome to our next html lesson! As always, I'm really glad you're reading my tutorials and that I can help people who are new to all of this! If you're new here, you can find my latest posts in my blog, where I explain everything from the very beginning. It's really easy, everybody can learn it step by step. This time I'll show you the most basic html tags. You already know
the <p> (paragraph) tag to display a paragraph of text
the <style> tag to define CSS classes for your HTML elements
the <a> (anchor) tag for external links
the <img> (image) tag for pictures and gifs.
The line break
If you read my last post, you've already seen this one a few times, but I always told you to remove it. Now I'll finally tell you what the <br> tag actually does. It's another self closing tag (remember the <img> tag), so it's simply written this way:
<br>
You can use it to make a line break inside your text. It's smaller than the one made by the <p> tags and it's also useful for small amounts of text. Imagine you want to write your favorite bands inside your music section. You can write it like this in your profile editor:
My Chemical Romance Hawthorne Heights Rise Against Tool
But because you're writing in raw HTML, it will be displayed like this:
Of course you could make a <p> tag around each band, but then there would be big gaps beetween them and it wouldn't look that good. The easier and better way is to put a <br> tag after each band name.
My Chemical Romance<br> Hawthorne Heights<br> Rise Against<br> Tool<br>
And it will look like this:
Highlighting important words
The <strong> tag is useful to point out a word of a text that is important or that should be bold for another reason. You can simply wrap it around one or more words like this:
<p>This word is <strong>important</strong>!</p>
And it will look like this:
This word is important!
You can also use the <b> tag in the exact same way, it stands for bold and does pretty much the same thing.
Another text tag
You may wonder what we need another tag for text now. We already have the <p> tag, isn't that enough? Well, actually, it often isn't. The <span> tag does nothing more or less than containing text. Sounds useless? You didn't think about the possibilities to style text with CSS then. Imagine you want to write a paragraph about your favorite bands and you want to make the band names better visible by giving them a light green color. The hex color code we'll use is #c0ff33 because I like coffee, deal with it. The code of the plain text will look like this:
<p> I love My Chemical Romance because of the emotions inside their sounds and lyrics, and because Gerard Way is a real icon for me.<br> But Tool is also one of my favorite bands because of their different sound, their incredible talent and some of their really good and deep lyrics. </p>
The next thing you do is to wrap a <span> tag around the band names. Then, you give them a style property where you define the color inside (I explained how it works in our first lesson). Now your code looks like this:
<p> I love <span style="color: #c0ff33;">My Chemical Romance</span> because of the emotions inside their sounds and lyrics, and because Gerard Way is a real icon for me.<br> But <span style="color: #c0ff33;">Tool</span> is also one of my favorite bands because of their different sound, their incredible talent and some of their really good and deep lyrics. </p>
And it should look like this:
Headings
There are 6 different sizes of headings you can use in HTML. They look like this: <h[1-6]>. <h1> is the biggest, <h6> the smallest one. Let me show you how it works.
Sometimes you may want to display a list of things like I did above with the HTML tags you already learned. There are three tags you need to know here.
The <ul> tag. It's used for creating an unordered list. The list at the beginning of my post is an unordered list.
The <ol> tag. It's used for ordered lists. This is an ordered list.
The <li> tag. It's one list item of any list.
We could write the names of our favorite bands again, but this time, we won't need the <br> tag, we'll use an unordered list instead. You create a <ul> tag, then 4 <li> tags for the four bands inside it. Inside the <li> tags, you write the names.
<ul> <li>My Chemical Romance</li> <li>Hawthorne Heights</li> <li>Rise Against</li> <li>Tool</li> </ul>
And it's displayed like this:
My Chemical Romance
Hawthorne Heights
Rise Against
Tool
It work exactly the same way with ordered lists. You just use the <ol> tag instead of the <ul> tag. There's a lot of stuff you can do with lists, especially with the power of CSS. I think that's a bit too much for this basic tutorial, but if you want me to do an extra part about them, pls let me know ^^
We're done for now, I'm sure this was a lot for you. Try it out on your profile and read about them on w3schools to learn what else is possible! There are still some things I want to show you, but the most important things are covered now. If there's more you're interested in and you want me to do tutorials about, pls write it in the comments and I'll do my best to do it! ^^ In the next post I'll show you how you can play music on your profile!
Welcome to our third little CSS and HTML lesson! I have a lot of fun writing them tbh :D First of all, thx to everyone who commented on my bulletin posts. It's really nice to get some feedback so I see that people are interested in this. It motivates me to do more! ^^ This time, I want to take care about two things propably everyone wants to customize on their profile: backgrounds and contact tables.
Background Graphics
Go into the profile editor. If you used a generator or a custom profile layout from a site like pimp-my-profile, somewhere in the CSS inside your <style> should be two class selectors called body, .bodyContent. In my own code, it looks like this:
It may look like a lot at first, but you will see it's actually pretty self explaining. If you don't have this yet, just create it yourself like that:
body, .bodyContent { }
You can leave it empty for now, we'll go through the important things together step by step. The first thing is propably the most interesting: The background image. It's defined by the background-image property inside an url(). Inside that, you can paste an image or gif url like I showed you in the last lesson with the <img> tag. And never forget to end the lines of your CSS with an ; semicolon, it wont work otherwise!
What's the body, .bodyContent thing?
So this is how you apply a background image to your whole page. If you followed the last lessons and understood how HTML and CSS work together, you may be confused by the body, .bodyContent classes, because you're pretty sure you never gave one of these classes to any of your HTML tags. So where do they come from? The explanation is that friendproject doesn't really allow us to customize the whole page. There is some basic template coming from the website itself. With the code we write into the editor, we can customize that with a huge amount of possibilities, but there are limits and invisible things we can't see in the our own code, for example the menu bar at the top and bottom of the page.
After we've cleared that, we can go on with the CSS! The next thing you can see in my code is the background-color With a hex color code (told you about that in the first lesson ) assigned to it. Now you don't really need this one because you already have a picture as the background, but there's one thing where it can come in handy. When you load my profile and look quickly, you'll see that the background picture needs some time to load, and during this time, the dark red is visible instead. If you want to use a custom color here too, do it, but you can leave it out if you don't think it's necessary.
Advanced stuff
The background-position, background-attachment and background-repeat options are also pretty handy, but maybe a bit too advanced for the basics. If you're interested into those, you can find good explanations and examples about everything involving backgrounds on w3schools.
Page Border
The next one is something I really like to play around with myself, it has some options that would probably never be used on modern websites, but can look really cute on a profile in my opinion. With the border properties you can give your profile page a border like the red dotted one I have. There are multiple types of borders you can give to the border-style:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border
ridge - Defines a 3D ridged border
inset - Defines a 3D inset border
outset - Defines a 3D outset border
Play around with them and choose the one you like the most! With the border-color and a hex color code you can define the color of the border, you already know the process. The border-width is also self explaining, it's defined in pixels. I think around 5px is a good width, but again, try it out yourself to find the style you like!
But wait, there's more!
Customize the content table sections
You can't only customize the background and border of the whole site, but also of the sections where the actual content is displayed. Somewhere inside your CSS, find or create something like table table table (3 "tables"!). For me it looks like this:
You can do pretty much all the same stuff as in the body, just play around and find what style you like. Like I said, most of it is really self explaining.
Contact tables
Now let's go on to the next topic: Contact tables! They are the section on your profile where others can add, block, invite or favorise you. For this one, I'd again recommend to look at sites like glitter-graphics or pimp-my-profile to find custom ones. Look for the one you like the most! The code you can copy there for your profile should look like this:
This one might look like a big deal, but don't worry about it, you shouldn't have to change anything of it. Just paste it somewhere inside your editor, no matter where, but OUTSIDE of the other <style> tags (or some strange sh*t will happen on your profile!). When I looked for a contact table, I noticed that some of the custom ones wouldn't work. I don't know if it's an issue of friendproject or if the creators of the contact table messed up, just so you know it's not necessarily your fault if it doesn't look the right way. If you find a one like that, I'm afraid all you can do is to use another one or try altering it's code if you trust yourself to do so.
By using a custom contact table from one of these sites, you'll probably notice something similar to the graphics you can find there: They will smuggle a link to the site into your profile that will appear in the "About Me" section (or whereever you paste the contact table code). To get rid of them, you do the same thing we did with the graphics code: just delete everything after the <br> tag (including the <br> tag). I'm talking about this line:
Next time I want to show you some more HTML tags since we did a lot of CSS today. You can also write into the comments if you know something specific you want me to make a tutorial about, I'm happy about recommendations! Now you have a lot of new stuff to try out I think. Have fun and remember you can always message or comment me about your issues with the code. If you missed the last parts, check out my bulletin or blog posts!
If you missed the first part, please go read it first!
I told you I still had a lot more for you, so here I am! ^^ Something I forgot to mention in my last post was W3schools. It's a free website where you can learn almost all basics about web development, but it's especially helpful for learning HTML and CSS. If you're looking for anything or don't understand something, you should search there.
Last time we did a bit about text formatting, so this time I'll focus on how to get pictures/gifs and links into your profile. For pictures, we have the <img> tag. It's one of the special tags I told you about last time, so it only needs an opening tag, but no closing tag. Inside it, you need a src property. That's where the picture will be defined.
<img src="">
Now you need a picture. If you have it on your computer, you need to upload it somewhere to use it. You can upload pictures in your friendproject album, but if you don't want to have them there, you can also use Imgur. If you want to use a picture from the internet, you won't have to do this, because it already is uploaded somewhere. Now right click on the uploaded picture and select "Copy Image Location" (in Firefox, it's maybe a bit different in other browsers). Now you should have copied a link that ends with .png, .jpg, .jpeg, .gif or another graphic format. If you use a picture from another website and that's not the case, you should try to download it and upload it yourself like described above. This link will go into the src property now:
And that's all you need to display a picture! The <img> tag has other options too, for example changing the size of the picture or displaying an alternative text in case the picture doesn't work for some reason (it's recommended to do that, but I'm too lazy most of the time tbh xD). Read W3schools <img> tag to learn about them.
Most of these sites already give you the code with the <img> tag so you just have to copy and paste it into your profile wherever you want it to be. Some of them, like glitter-graphics, may also have a link to the site after every image, and that's quite annoying if you use more than one. You can get rid of them tho! Here's some code for a gif from glitter-graphics:
You won't understand all of this right now, and that's totally fine, don't worry about it! We'll take care of it soon. Now on your profile it will look like this:
What you do to remove the link after the gif is to simply delete everything after the <br> tag.
If someone clicks on the gif, they will still get directed to www.glitter-graphics.com. If you don't want to have this behavior, you need to delete the whole <a> tag around the <img> tag.
Now you've already seen how a link looks in HTML. Links are made by using the <a> tag. You can also use it for a few different things, but let's focus on links first. The <a> tag has an href="" property, where you paste the link inside.
Inside the <a> tag itself, you can write an alternative display text, which is often better than displaying the whole link.
<a href="https://www.friendproject.net/view_profile.php?member_id=229762"> ZombieChinyoka on friendproject </a>
Again, you can read more about the <a> tag on W3schools.
I think that's enough for now again. I hope you find it somehow helpful! ^^ I'll also post these tutorials on my blog, so don't worry when the bulletins get deleted. I'll do more soon, I want to show you how to customize your contact table, how to make songs play on your profile, customize background and borders and doing more with CSS in general. Have fun building your profile page!
Of course not everyone who wants to use friendproject knows HTML or CSS, but you don't really need much knowledge to make your profile look awesome! I thought I could give everyone a little starter lesson and a list of useful websites etc. And no, you don't have to be a programmer to do this. HTML is really easy if you learn the basics, and it's mostly only about styling. It has nothing to do with being a programmer or a smart hacker kid or anything (as a programmer this kinda pisses me off, not sure if you can tell). Ok, rant mode off, let's start :)
Actually, you don't even need to write a single line of code yourself to get a cool layout on your profile. There are a lot of websites where you can find custom layouts or even generate them yourself with nearly unlimited options. I'd suggest using www.pimp-my-profile.com, it's the best one I can think of, but of course you can use other ones too. Click on "Myspace" in the menu and choose either "Pre-made Layouts" or "Layout Editor", depending on what you want to do. All you need to do then is to copy the code, go to "Edit Profile" on friendproject and paste it in the "About Me" section (every other section should work fine too btw, but this one is recommended). That's just what I did first with my profile too, I started editing my code and adding new stuff on top of that later. So I would actually recommend for everyone to start with a custom or generated layout, it will probably save you a lot of time even if your experienced in webdesign.
If you want to do a little more, style things different, add stuff that's not possible with a generator, you'll probably need to dig into the code yourself. I know it looks confusing at first, but you'll understand at least a bit of it soon I hope :)
Let's start from the bottom of everything. HTML is written in different tags. Some tags are for text styling, some can be a link to another website, some can be images, audio files and a lot of other stuff. Most tags look like this:
<example></example>
Some special ones also look like this:
<example>
For example, there is this tag:
<p></p>
The <p> tag defines a paragraph. It's used for putting text inside it and styling it, and at the end of the text, a new paragraph will start.
These three lines of my profile are done by simply using 3 <p> tags. The code would look like this:
<p>Just a weird, introverted, depressed emo kid uwu </p> <p>Birthday: 12. December </p> <p>Relationship status: taken by the most wonderful, beautiful girl ♥ </p>
In the first section of the tag, you can give it properties. Properties can do different stuff, but here they are mostly used for styling, aka CSS. Let's say you want the first paragraph to be pink.
Now some quick introduction into hex colors. They are the most common way to tell your CSS to use a specific color. Just google "hex color picker" and use the picker to choose the color you want. For the pink we want here, the hex code of the color would be #ee00ff (you can also paste it into the picker to check it out).
To style our text, we give the <p> tag a "style" property. It looks like this:
<p style="">Just a weird, introverted, depressed emo kid uwu </p>
In the style="" we can now use CSS to specify the text color. Text color in CSS is specified with "color" and the hex code we picked assigned to it. Let's do this.
Maybe we could give it another font now? The best way to use a font you like is looking up Google Fonts. You can choose an huge amount of fonts there. Pick the one you like! For this exmple, I want to use "Amatic SC", because why not. Click on "select this font", open the popup and copy the whole <link> tag under the "STANDARD". Go into your profile editor again an paste it anywhere (I'd suggest at the end or the beginning of everything else). Now you copy the other piece of code under the "Specify in CSS". This one goes into the style property of your <p> tag, right behind the color.
<p style="color: #ee00ff; font-family: 'Amatic SC', cursive;"> Just a weird, introverted, depressed emo kid uwu </p>
Now we should have this:
Of course it looks horrible, but we're here to practice, right?
As you may have noticed, the style property is already getting pretty long. If we would want to center the text, make it italic, give it another size etc, it would maybe be a bit too much. Let me introduce the <style> tag. Inside it, you can just use plain CSS and assign it to your HTML tags by using classes. Sounds confusing? Let me show you how it works. First, get rid of the whole style property inside your <p> tag (maybe save it into another file so you won't have to write it all over again) and give it a "class" property instead. Think of a good name for the class, something that isn't confusing. I'll just use the name "pinktext" here. Now your code should look like this:
<p class="pinktext">Just a weird, introverted, depressed emo kid uwu </p>
Now we add a <style> tag above the <p> tag and define the "pinktext" class inside it. I'll only show you how the next step should look like on this one. For a better explanation on CSS classes you should read this:
If you did everything right, it should still look the same, but your code is much cleaner and better readable now :)
I think that's it for now, I hope anyone even read until here and that it actually helps people who are new to all of this. I definitely have a lot more for you, so pls let me know if I should do more! If you have any issues with your code, you can always message me, I'll do my best to help.
