Jeff Summers

  shares  Search Me

We'll start by providing the entire code section so that you can copy and paste it into your profile. I'll then follow that up with a discussion of each section in detail.

/* Search Icon */
#mini_search {
    color: #FF6600;
    z-index: 900;
    margin: 365px 6px 0 0;
}
/* End Search Icon */

/* New Search Button */
#mini_search .i_button {
    background: transparent url(http://jeffdsummers.com/images/plurk/hd/orangetrans.png) repeat scroll top left;
    border-color: #FF6600 #D25502 #D25502 #FF6600;
    color: #000000;
    -moz-border-radius: 4px 4px 4px 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
/* End New Search Button */

/* New Search Text Field */
#mini_search .i_text {
    background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll bottom left;
    border-color: #FF6600 #D25502 #D25502 #FF6600;
    color: #000000;
    -moz-border-radius: 4px 4px 4px 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
/* End New Search Field */

/* Change Font Size */

body, html {
    font-family: 'Lucida Grande','Lucida Sans Unicode','Lucida Sans Regular',Tahoma,Verdana,sans-serif;
}

.plurk_cnt {
    font-size: .96em;
}
/* End Change Font Size */

/* Make responses fit within window when scroll bar present */
.list table {
    width: 100%;
    font-size: 100%
}
/* End Make responses fit within window when scroll bar present */

We'll start with the first section that deals with the problem many people have seen where the search box stays on top of the window blocking from view some of the responses in a Plurk message.

/* Search Icon */
#mini_search {
    color: #FF6600;
    z-index: 900;
    margin: 365px 6px 0 0;
}

The search text box and corresponding button are managed through the "#mini_search" element.  The first item defines the overall text color of the search functionality.  This color is set to the orange that we have been using in our example template.  The next item is extremely important.  The "z-index" defines how far to the front to bring the element.  Plurk has it defaulting to z-index:1000 which puts it in front of windows and obscures the view.  The lower the value the farther behind in the background the item goes.  Moving it too far back will cause it to not be able to be selected.  A value of 900 will put it behind the message windows but still make it accessible.  The other complaint I have been hearing is that the search box is not in the same place as the other one.  The "margin" command will allow you to move it to where you want.  The first value is number of pixels from the top.  The second value is number of pixels from the right.  The third value is number of pixels from the bottom, and the fourth number is pixels from the left edge.  The default is 358 pixels from the top and 6 from the right. Here we are moving it down 7 pixels closer to the timeline along the bottom.  If you wanted to move the search to the left side, try making the 365 something like 700 and see what happens.

/* New Search Button */
#mini_search .i_button {
    background: transparent url(http://jeffdsummers.com/images/plurk/hd/orangetrans.png) repeat scroll top left;
    border-color: #FF6600 #D25502 #D25502 #FF6600;
    color: #000000;
    -moz-border-radius: 4px 4px 4px 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
/* End New Search Button */

The search function is made up of two parts, a text box and a button.  The button comes standard as a square gray box which can look out of place on your custom template.  This section of code will allow us to style it to fit in with the other elements.  The element that handles the button is "#mini_search .i_button". 

The first statement will define the background.  It is similar to the other instances we have used for setting the background.  It sets the background color to transparent and uses an image defined in the URL statement.  You will need to change the image location or else you will get a translucent orange that I am using.  The background ends with telling the system to repeat the image horizontally and vertically, scrolling it with the screen, and setting it to the top left hand corner.

The "border-color" statement tells the system to put a light orange border on the top and left side and a darker orange on the bottom and right edges.  The color definition goes top, right, bottom, left if you want to change them.  The "color" statement defines the text color of the button which in this case is black.  The final 4 statements are CSS3 commands that will round the corners of the box.  This rounding effect will only work in browsers that support CSS3 which currently includes Opera, Firefox, and Safari.  Internet Explorer does not support it.

/* New Search Text Field */
#mini_search .i_text {
    background: transparent url(http://jeffdsummers.com/images/plurk/hd/whitetrans.png) repeat scroll bottom left;
    border-color: #FF6600 #D25502 #D25502 #FF6600;
    color: #000000;
    -moz-border-radius: 4px 4px 4px 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
/* End New Search Field */

This next section of code modifies the search text box which is defined in element "#mini_search .i_text".  The first statement is the background we want to use.  In my case I selected a semi-transparent white as defined in the URL section.  You will need to change this to whatever image you want or you could use a background color.  To use a color change "transparent" to the color ID and replace the whole URL statement with the word "none".

The "border-color" will set the color of the outside border of the text box.  I have it set to a dark orange on the top and left side and a lighter orange on the bottom and right to give the box a 3D effect.  The "color" statement sets the text color to black.  The final 4 statements are again the CSS3 commands for rounding the corners of the text box with a 4 pixel radius.

/* Change Font Size */

body, html {
    font-family: 'Lucida Grande','Lucida Sans Unicode','Lucida Sans Regular',Tahoma,Verdana,sans-serif;
}

.plurk_cnt {
    font-size: .96em;
}
/* End Change Font Size */

We are now going to focus our attention to the fonts. Yesterday I provided you with code that would allow you to change the font size back to the smaller size that Plurk used before the change.  I have since made a couple of additional changes to deal with some nuances of using relative fonts. 

The first section we are modifying the behavior of the entire page.  Here we are setting the font family back to " 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans Regular', Tahoma, Verdana, sans-serif"  We are doing this in order to set the font face to what it was before the change.  The new font Plurk is using is Helvetica or Ariel.  Some people have complained that they did not like this type face so this statement will set it back to what it was before.

The "font-size" statement within the ".plurk_cnt" element will set the font size to a relative unit that equates to approximately 11 pixels when using a browser's default font sizing.  I chose to use EM rather than PX so that users will see the font increase or decrease as they modify the overall behavior of the browser.  This will be helpful for those with visual impairments or who want to adjust the size to fit their needs and their devices.

/* Make responses fit within window when scroll bar present */
.list table {
    width: 100%;
    font-size: 100%
}
/* End Make responses fit within window when scroll bar present */

This final set of code deals with the list of responses in the response window.  One of the problems with using fractional relative font sizes is that it tends to multiple its effects based on nesting.  By setting the font-size to 100% in this block we eliminate that from occurring so that the fonts do not continue to shrink in the list.  The "width: 100%" statement was added to eliminate the vertical scroll bar from covering up the last little bit of the response in the list. It defaulted to a set width that did not take into account what would happen when a scroll bar appeared.

That is basically all there is to it.  With this bit of code you should once again be in control of the behavior of the font style and size on the page and have the new search box appear where you want it and have it be behind the window instead of obscuring the message box.  Hopefully this will help you out and relieve some of the anxiety that has been occurring over these changes.  Good luck and be sure to let everyone know you found this on Plurk Skins.