Runboard.com
You're welcome.
Runboard Extra! The Runboard Directory Runboard Knowledge Base
Chat room Runboard Knowledge Base (wiki) Search Facebook Twitter

runboard.com       You are not logged in.

 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Global user (premium)
Head of Runboard staff

Registered: 11-2005
Posts: 24316
Karma: 420 (+466/-46)
posticon Styling the newest features


The following is to help you style the features that were implemented after most of these skins were created.

Here is what you'll need to target in your CSS in order to style these features.


Link to this post

Remove the greyed-out comments below, and only use the parts in bold that you need.

[sign in to see URL] {

   /* To get rid of the line to its right */
        border: 0;

   /* To move it closer to all the other links */
        margin: 0; padding: 0;

}


If you have fancy styling on its neighboring links, you'll want to add two classes: one for this link, and one for the "Share" link. Look for something similar to this in your CSS and add the part in red below (don't miss that first comma):

.postlistsendicq a, .postlistsendaim a, .postlistsendmsn a, .postlistsendyahoo a,
.postlistsendpm a, .postlistblog a, .postlist_karma_applaud a,
.postlist_karma_smite a, .postlist_link_to_post a, .share_menu {

    /* Your styling here */
}




Share

This is the "Share" link after the "Link to post" link below posts, and the popup that shows when you click on that link.

.share_menu - The link itself. If you want it styled like all of its neighboring links, you can more than likely just add it to that group of class names, depending on your board's particular styling (see part in red above).

.share_hidden - The popup that's hidden until the link is clicked on. You can change the border around the whole popup here, and adding background-color here will change the background color of the bottom half of the popup.

.share_hidden h4 - The "Share" heading (or top half) of the popup.




Topic preview

This is the box that displays a preview of a topic when you hover on the topic name in the topic list.

.ak_msg_topic_preview_div





User popup

This is the box that pops up when you click on a user name, and contains a list of links.

.user_popup - the box itself

If you want to affect the color or behavior of those links, use one or more of the following:

.user_popup a:link
.user_popup a:visited
.user_popup a:hover





Edit to fix formatting

Last edited by Lesigner Girl, 11/13/2011, 12:40 am


---
Runboard Knowledge Base
Website Creation Tutorials
6/5/2010, 12:42 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Global user (premium)
Head of Runboard staff

Registered: 11-2005
Posts: 24316
Karma: 420 (+466/-46)
Drop Shadow


You might want to add a drop shadow to some of the popups (or other things). Well, there is no one way to do it for all browsers yet, but here is what some of the various browsers respond to.


  Firefox
      -moz-box-shadow: 2px 2px 7px #777;

  Chrome, Safari
      -webkit-box-shadow: 2px 2px 7px #777;

  Opera
      box-shadow: 2px 2px 7px #777;

  IE
      filter: progid:[sign in to see URL](color=#777777,direction=135,strength=5);

  Flock
      nothing as of the time of this post, but should work with the same code as Firefox eventually.


With everything other than IE, the first two numbers refer to its placement, the 3rd refers to the amount of blur, and the last part is its color. With the IE method, the color is self-explanatory, the direction is in degrees (135 is down to the right), and the strength is basically like a blur in pixels, but only goes in one direction, unlike a real blur. It's more like a smudge, really.

#777 is shorthand for #777777. See the last paragraph of #hex-code]this page if you need an explanation of hex code shorthand.

You'll need to include all four of these lines if you want the effect on all of the listed browsers, and be sure to use the same definitions on all but IE. IE works differently, so you might want to use a different "strength" than what you would use as the "blur" for the others.

For Runboard Support, I used the following CSS to put a dropshadow on the user popup, share popup, and topic preview popup:

.user_popup, .share_hidden, .ak_msg_topic_preview_div {
    border: 1px solid #a7b5c2;
    -moz-box-shadow: 2px 2px 7px #777;
    -webkit-box-shadow: 2px 2px 7px #777;
    box-shadow: 2px 2px 7px #777;
    filter:
      progid:[sign in to see URL](color=#777777,direction=135,strength=5);
}

Note: If you're running your CSS changes through #validate_by_input]this validator as you should be, unfortunately, most of the above code won't validate. However, it's necessary if you want the dropshadow on various browsers, until they all become CSS3-compliant.

---
Runboard Knowledge Base
Website Creation Tutorials
7/30/2010, 2:03 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 


You are not logged in (login)