So far I've started with some relatively advanced CSS manipulations which was probably not the most prudent way to go about modifying your profile. So let's take a step back and start with some very basic CSS theming. Today we'll begin with the overall page and the time line. This will be the first of several posts that will hopefully give those with limited or no CSS experience a chance to begin modifying their own profile. Hopefully as we build upon these tutorials you will be able to quickly get up to speed and before long you will have a fully functional custom profile.
As is always the case we'll begin by providing the entire code section for those of you who want to just cut and paste.
Green, and Blue respectively. Make sure you begin with a pound sign "#" to signify that color codes are coming next. Every line within a statement must end with a semi-colon ";" which is one of the most common errors people make.
The next statement is the background. Here we are going to define what the background will be and how it will be displayed. The first parameter is the background color. In this case we are going to use a graphic background so we are making the color transparent. The next parameter is the graphic image we are using. URL signifies that the image is located on the Internet. Within the parenthesis you put the location where the system can find the image file. This value will need to be changed if you cut and paste the code otherwise you'll get the diamondplate metal background I am using. The next parameter determines whether the image will be repeated or listed one time. Your choices are no-repeat, x-repeat, y-repeat, and repeat. We selected repeat as we want the pattern to fill the screen horizontally and vertically. Following the repeat is a parameter for background attachment. Your choices are fixed and scroll. Fixed will freeze the image in the background while the control scroll will allow the background to roll along with the content. Finally is the positioning of the background. In our case we are setting the image to begin in the top left-hand corner of the image. That completes the section on the page background.
The next section of code will deal with the main Plurk timeline area.
We again start with defining a comment to remind ourselves of what elements we are defining. Next we define the HTML element we're modifying. In this case we are modifying the #timeline_holder which is the container for the timeline. The first thing we set is the text color using the "color: #F08200;" we are setting all text to an orange color. You'll notice that this is the same color as we used for the main body. That doesn't have to be the case, you could have the text in the timeline be different than the rest of the page, just modify this with a new color value. The next statement is for background where we will define an image as the background. The first parameter is a background color that will be displayed if the image is not large enough to cover the timeline area. In this case we are setting it to a dark gray to differentiate it from the diamondplate background. The next parameter is the actual image we are using. The URL tells the system that it is an image accessible via the Internet. You will need to change this value if you cut and paste the code otherwise you'll end up with a motorcycle graphic as your timeline background. Following the graphic location definition we tell the system that we do not want the image repeated and that we want it frozen in the background so it will not scroll when the screen does. Finally we set the image position to the top right portion of the screen.
That's all there really is to it. Now you have the framework of a custom CSS profile with a custom color or image as the page background and an image as the timeline background. We'll continue to build on this example in subsequent posts until we have a complete theme. Good luck and be sure to let everyone know you found this on Plurk Skins.
/* Main Body */As I said earlier, these are going to be very basic changes to set the framework for building more complex details as we go along. Let's look at the first section of code.
body, html {
color: #F08200;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/DiamondPlate.jpg) repeat scroll top left;
}
/* End Main Body */
/* Main Timeline */
#timeline_holder {
color: #F08200;
background: #242424 url(http://jeffdsummers.com/images/plurk/hd/bikebackground.jpg) no-repeat fixed right top;
}
/* End Main Timeline */
/* Main Body */Before we begin let's level set. Within a CSS Stylesheet if a like begins with "/*" and ends with "*/" it denotes a comment. I cannot stress enough how important comments are within your stylesheet. There is nothing worse than looking at your uncommented code after working for hours and wondering, "what the heck does that do?" It doesn't take much time to create a comment and it will come in handy sometime. After the initial comment we define what elements we want to work on. In this case it is "body, html". This is basically the whole page. It is the largest container on the page. Here we are going to set the background and colors for the overall page. The next line tells the system what color we want to use for all text on the page that is not otherwise called out. It is described by 3 two digit hexadecimal values that represent Red,
body, html {
color: #F08200;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/DiamondPlate.jpg) repeat scroll top left;
}
/* End Main Body */
Green, and Blue respectively. Make sure you begin with a pound sign "#" to signify that color codes are coming next. Every line within a statement must end with a semi-colon ";" which is one of the most common errors people make.The next statement is the background. Here we are going to define what the background will be and how it will be displayed. The first parameter is the background color. In this case we are going to use a graphic background so we are making the color transparent. The next parameter is the graphic image we are using. URL signifies that the image is located on the Internet. Within the parenthesis you put the location where the system can find the image file. This value will need to be changed if you cut and paste the code otherwise you'll get the diamondplate metal background I am using. The next parameter determines whether the image will be repeated or listed one time. Your choices are no-repeat, x-repeat, y-repeat, and repeat. We selected repeat as we want the pattern to fill the screen horizontally and vertically. Following the repeat is a parameter for background attachment. Your choices are fixed and scroll. Fixed will freeze the image in the background while the control scroll will allow the background to roll along with the content. Finally is the positioning of the background. In our case we are setting the image to begin in the top left-hand corner of the image. That completes the section on the page background.
The next section of code will deal with the main Plurk timeline area.
/* Main Timeline */
#timeline_holder {
color: #F08200;
background: #242424 url(http://jeffdsummers.com/images/plurk/hd/bikebackground.jpg) no-repeat fixed right top;
}
/* End Main Timeline */
We again start with defining a comment to remind ourselves of what elements we are defining. Next we define the HTML element we're modifying. In this case we are modifying the #timeline_holder which is the container for the timeline. The first thing we set is the text color using the "color: #F08200;" we are setting all text to an orange color. You'll notice that this is the same color as we used for the main body. That doesn't have to be the case, you could have the text in the timeline be different than the rest of the page, just modify this with a new color value. The next statement is for background where we will define an image as the background. The first parameter is a background color that will be displayed if the image is not large enough to cover the timeline area. In this case we are setting it to a dark gray to differentiate it from the diamondplate background. The next parameter is the actual image we are using. The URL tells the system that it is an image accessible via the Internet. You will need to change this value if you cut and paste the code otherwise you'll end up with a motorcycle graphic as your timeline background. Following the graphic location definition we tell the system that we do not want the image repeated and that we want it frozen in the background so it will not scroll when the screen does. Finally we set the image position to the top right portion of the screen.
That's all there really is to it. Now you have the framework of a custom CSS profile with a custom color or image as the page background and an image as the timeline background. We'll continue to build on this example in subsequent posts until we have a complete theme. Good luck and be sure to let everyone know you found this on Plurk Skins.
Leave a comment