Today we'll continue our series on profile modification. So far we have added a page background, a custom time line image, and added an image to the Plurk dashboard. Today we will add the one final large element to our page. We are going to focus on the Plurk input form where you enter your individual Plurk messages. We will add a custom image as the background and we'll round the corners of the box to make it consistent with the rest of our layout.
As is always the case, we'll begin by presenting the entire code snippet so that you can cut and paste it into your profile.
You will notice that this code is very similar to what we used to theme the <a href="http://plurkskins.com/2008/08/dashboard-theming.html">Plurk Dashboard</a>. The great thing about that is once you understand the concepts you can quickly make changes to multiple sections of your page without having to learn a lot of
different CSS concepts.
As always, I strongly suggest that you comment your code to help remind yourself what each piece of code is doing within your style sheet. Without proper comments you will end up spending a lot of your time trying to reconstruct your thought process of what you changed and why you changed it. If you're like me, the older you are getting the harder it is to remember what you were thinking when you made a change (that is about the only positive I have found to getting older, you get to blame things on short term memory loss).
The first statement defines the HTML element we will be theming. In this case it is the plurk_form element. This section includes the user's name, the current time, the modifier, the text box, and the options sub-section.
Following the definition statement is our standard "background" statement. The first parameter tells the system to make the background color black if our image is not large enough to cover the entire area. The next parameter is the URL that describes where the image is stored online. You will need to change the value in these parenthesis otherwise you will a picture of my motorcycle engine which may not be what you want. After the image the next parameter tells the system not to repeat the image meaning that we will see the image only one time. Next is the "scroll" parameter that tells the system that you want the image to scroll on the screen when moving the horizontal or vertical scroll bars in the browser. Finally we have the background image location parameter that tells the system to place the image in the upper left corner of the page.
The next four statements are for rounding the corners of the box. These are CSS3 statements meaning that the box will render with rounded corners if your browser supports CSS3. Currently Firefox, Opera, and Safari all work correctly with these statements. Internet Explorer does not yet support this. I'll withhold my editorial comments on the value of using a compliant browser.
After the border rounding statements we have 4 statements that help the page layout by providing some white space within the form. The "padding" statements tell the system to add 5 pixels of space around all four sides of the form to give the text contained within the box some much needed definition rather than having it go all the way to the edge. You can adjust the values to suit your style adding or subtracting pixels until you get the look you are going for.
That really is all there is to it. Now we've added to the framework of a custom CSS profile with a custom image as the background on the Plurk form. 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.
/* Entry Form */We will now follow up with a discussion of each statement within the code to help you to understand what the code is actually doing. Since this code is all contained with one block we will discuss it all together.
#plurk_form {
background: #000000 url(http://jeffdsummers.com/images/plurk/hd/engine.jpg) no-repeat scroll top left;
-moz-border-radius: 8px 8px 8px 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
/* End Entry Form */
You will notice that this code is very similar to what we used to theme the <a href="http://plurkskins.com/2008/08/dashboard-theming.html">Plurk Dashboard</a>. The great thing about that is once you understand the concepts you can quickly make changes to multiple sections of your page without having to learn a lot of
different CSS concepts.As always, I strongly suggest that you comment your code to help remind yourself what each piece of code is doing within your style sheet. Without proper comments you will end up spending a lot of your time trying to reconstruct your thought process of what you changed and why you changed it. If you're like me, the older you are getting the harder it is to remember what you were thinking when you made a change (that is about the only positive I have found to getting older, you get to blame things on short term memory loss).
The first statement defines the HTML element we will be theming. In this case it is the plurk_form element. This section includes the user's name, the current time, the modifier, the text box, and the options sub-section.
Following the definition statement is our standard "background" statement. The first parameter tells the system to make the background color black if our image is not large enough to cover the entire area. The next parameter is the URL that describes where the image is stored online. You will need to change the value in these parenthesis otherwise you will a picture of my motorcycle engine which may not be what you want. After the image the next parameter tells the system not to repeat the image meaning that we will see the image only one time. Next is the "scroll" parameter that tells the system that you want the image to scroll on the screen when moving the horizontal or vertical scroll bars in the browser. Finally we have the background image location parameter that tells the system to place the image in the upper left corner of the page.
The next four statements are for rounding the corners of the box. These are CSS3 statements meaning that the box will render with rounded corners if your browser supports CSS3. Currently Firefox, Opera, and Safari all work correctly with these statements. Internet Explorer does not yet support this. I'll withhold my editorial comments on the value of using a compliant browser.
After the border rounding statements we have 4 statements that help the page layout by providing some white space within the form. The "padding" statements tell the system to add 5 pixels of space around all four sides of the form to give the text contained within the box some much needed definition rather than having it go all the way to the edge. You can adjust the values to suit your style adding or subtracting pixels until you get the look you are going for.
That really is all there is to it. Now we've added to the framework of a custom CSS profile with a custom image as the background on the Plurk form. 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