Home | Profile | My Blog
ZombieChinyoka

Last Login:
December 9th, 2020

View All Posts


Gender: Female
Status: In a relationship
Age: 22
Sign:
Country: Germany

Signup Date:
October 04, 2019

Subscriptions

01/05/2020 07:45 PM 

HTML lesson 3 - backgrounds, borders, contact tables

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:

body, .bodyContent {
 background-image: url(https://http2.mlstatic.com/three-days-grace-one-x-nuevo-vinilo-D_NQ_NP_933723-MLM31479148582_072019-Q.jpg);
 background-color: #400000;
 background-position: center center;
 background-attachment: fixed;
 background-repeat: repeat;
 border-color: #8f0000;
 border-width: 6px;
 border-style: dotted;
}

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:

table table table {
 border-style: double;
 border-width: 1px;
 border-color: #8f0000;
 background-image: url('https://i.imgur.com/lBQEtfM.jpg');
 background-attachment: scroll;
 background-repeat: repeat;
}

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:

<style>
 .contactTable {
  width: 300px !important;
  height: 150px !important;
  padding: 0px !important;
  background-image: url('https://dl9.glitter-graphics.net/pub/197/197149bhg35fp58s.gif');
  background-attachment: scroll;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
 }
 .contactTable table, table.contactTable td {
  padding: 0px !important;
  border: 0px;
  background-color: transparent;
  background-image: none;
 }
 .contactTable a img {
  visibility: hidden;
  border: 0px !important;
 }
 .contactTable a {
  display: block;
  height: 28px;
  width: 115px;
 }
 .contactTable .text {
  font-size: 1px !important;
 }
 .contactTable .text, .contactTable a, .contactTable img {
  filter: none !important;
 }
</style>
<br><a href=https://www.glitter-graphics.com>Myspace Contact Tables</a>

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:

<br><a href=https://www.glitter-graphics.com>Myspace Contact Tables</a>

Just delete it and the link should be gone.

Enough input for now.

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!

0 Comments  

View All Posts

View All Posts



Mobile | Terms Of Use | Privacy | Cookies | Copyright | FAQ | Support

© 2024. FriendProject.net All Rights Reserved.