Today we'll continue our series on profile modification. So far we have added a page background, a custom time line image, added an image to the Plurk dashboard, and added an image to the Plurk form. Today we will add the one final large element to our page. We are going to continue working on the Plurk form. When we added the background image it had the adverse effect of making some of the text difficult to read. There are other aspects that don't quite flow with our overall effect so we will be modifying them as well. This is the detail work that many people forget but doing these will help your profile look professional and complete.
As is always the case, we'll begin by presenting the entire code section so that you can cut and paste it into your profile.
I want to again strongly suggest that you comment all of the code you add to your custom profile. It may take a few minutes longer to add comments now but ultimately it will pay dividends as you come back to the code and try to remember what each section does.
When you create a new Plurk message the system will count the number of characters that you type into the field. This is useful information so that you know how many characters remain before you run out of space. The remaining characters are displayed below the input field. The text is colored as standard at first and after you have typed 108 characters the system will change the color of the counter. The text color changes again when you have entered more than 140 characters.
The first statement in this block is the standard background string that we have used in several other areas of our profile. The first parameter tells the system to not use a background color if the image is not large enough to cover the area. The second parameter gives the online location of where the background image is stored. You will need to change this value otherwise you will get the semi-transparent orange background I have defined. The next parameter tells the system to repeat the image horizontally and vertically. The "scroll" parameter tells the system to move the background image when the user scrolls horizontally and vertically. The final parameter sets the background image location to the top left corner. The next statement tells the system to set the text color to black which will show up well against the orange background color. The final four statements are the CSS3 declarations for rounding the corners of the box. In this case we are using an 8 pixel radius on the corners for a gradual curve to the box.
Within the input area for the determining who can see the Plurk message, there is another input field that is used to look-up existing users. This is defined in the HTML element ".auto_ta input". By setting the background color to transparent that box visually disappears but the functionality remains. If you don't do this there is a small white box that appears within the input form which looks really weird and will drive you insane staring at it.
These few statements will modify the text and the subsections of the Plurk form and give them a consistent look and feel. They are not difficult changes but make subtle differences in your profile and give it a finished look. We'll continue to modify the profile and tweak the details to make our profile unique only to use. Good luck and be sure to let everyone know you found this on Plurk Skins.
/* Number of characters left 31-0 */Now we'll break the code up and look at each individual section and explain what the code is doing. Hopefully this will help you to understand what the statements do and how they will affect your custom profile.
.char_updater.highlight_light {
color: #ACB8C4;
}
/* End Number of characters left 31-0 */
/* Too many characters in input form */
.char_highlight {
background-color: #FF6600 !important;
-moz-border-radius: 2px 2px 2px 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
padding-left: 2px;
}
/* End Too many characters in input form */
/* Private Plurks, languages & options */
#more_options .on, #more_options #more_options_holder {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/orangetrans.png) repeat scroll top left;
color: #000000;
-moz-border-radius:8px 8px 8px 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
/* End Private Plurks, languages & options */
/* Text Areas for only name box , plurk language in options */
.auto_ta, textarea#input_big, input#invite_url, #more_options select {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll top left;
}
.auto_ta input {
background-color: transparent;
}
/* End Text Areas for only name box , plurk language in options */
I want to again strongly suggest that you comment all of the code you add to your custom profile. It may take a few minutes longer to add comments now but ultimately it will pay dividends as you come back to the code and try to remember what each section does.
When you create a new Plurk message the system will count the number of characters that you type into the field. This is useful information so that you know how many characters remain before you run out of space. The remaining characters are displayed below the input field. The text is colored as standard at first and after you have typed 108 characters the system will change the color of the counter. The text color changes again when you have entered more than 140 characters.
/* Number of characters left 31-0 */This first section will modify the text color when you enter more than 108 characters in the input field. The system defaults this text to a very dark gray. Since the image in our example is dark itself, this text becomes nearly invisible. So rather than the near black text we are changing it to a light gray that matches the chrome color on the tail pipes in the image. This is accomplished with the "color" command. You can change this value to whatever color you want by entering the 6 hexadecimal code for it.
.char_updater.highlight_light {
color: #ACB8C4;
}
/* End Number of characters left 31-0 */
/* Too many characters in input form */This next section will modify the presentation when a user enters more than 140 characters in the input box. In it's default state the system will display near black letters on a pink background. Since our theme is focused around Harley-Davidson and black, the pink just has to go. The first statement is the "background-color". Here we are giving it the value of the orange we are using throughout the site. You'll notice that there is an additional word after the color statement, "!important". This makes the statement of higher precedence than what is defined. This makes sure that it overrides any other statement in the style sheet. The next four statements are our standard CSS3 statements for rounding the corners of the field. This will rendor correctly in any browser capable of supporting CSS3 which currently includes FireFox, Opera, and Safari to name a few. It does not work in Internet Explorer at the present time. The final statement adds 2 pixels of space to the left of the field to give the text a little white space away from the left edge of the background color.
.char_highlight {
background-color: #FF6600 !important;
-moz-border-radius: 2px 2px 2px 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
padding-left: 2px;
}
/* End Too many characters in input form */
/* Private Plurks, languages & options */This section deals with the options area that is displayed with the user clicks the Private Plurks, Languages & Options link below the Plurk input box. This area allows the user to determine who can see the Plurk message, what language the message will appear, and whether the message can accept comments. This is only visable when the link is clicked.
#more_options .on, #more_options #more_options_holder {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/orangetrans.png) repeat scroll top left;
color: #000000;
-moz-border-radius:8px 8px 8px 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
/* End Private Plurks, languages & options */
The first statement in this block is the standard background string that we have used in several other areas of our profile. The first parameter tells the system to not use a background color if the image is not large enough to cover the area. The second parameter gives the online location of where the background image is stored. You will need to change this value otherwise you will get the semi-transparent orange background I have defined. The next parameter tells the system to repeat the image horizontally and vertically. The "scroll" parameter tells the system to move the background image when the user scrolls horizontally and vertically. The final parameter sets the background image location to the top left corner. The next statement tells the system to set the text color to black which will show up well against the orange background color. The final four statements are the CSS3 declarations for rounding the corners of the box. In this case we are using an 8 pixel radius on the corners for a gradual curve to the box.
/* Text Areas for only name box , plurk language in options */This final code section modifies four input areas within our profile. The first is input field defining who the message is to within the sub-form. The second area is the Plurk message input field itself. The third section modifies a field outside of the Plurk form. It is the field to invite other users that is listed under the fans section of the dashboard. Without adding this the field becomes transparent and nearly impossible to read. The final section is the background of the language selection area. All three of these areas are being modified with the same background statement. We are telling the system to replace the solid white text area with a semi-transparant PNG file that is still white but allows a little bit of the background to peek through. It gives the field a little bit of depth and is a cool effect. We use the standard background statement we have used above. The one piece you want to modify is the URL to give the location of the image that you want to use otherwise you will get the white that I have defined.
.auto_ta, textarea#input_big, input#invite_url, #more_options select {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll top left;
}
.auto_ta input {
background-color: transparent;
}
/* End Text Areas for only name box , plurk language in options */
Within the input area for the determining who can see the Plurk message, there is another input field that is used to look-up existing users. This is defined in the HTML element ".auto_ta input". By setting the background color to transparent that box visually disappears but the functionality remains. If you don't do this there is a small white box that appears within the input form which looks really weird and will drive you insane staring at it.
These few statements will modify the text and the subsections of the Plurk form and give them a consistent look and feel. They are not difficult changes but make subtle differences in your profile and give it a finished look. We'll continue to modify the profile and tweak the details to make our profile unique only to use. Good luck and be sure to let everyone know you found this on Plurk Skins.
Leave a comment