#account-options

Description

The list of options related to your account. They are found by clicking on the ▼ button in the login status area.

Containers
Outline
Image Unavailable
Click to view in closer detail!

Details

The list of all of the options related to your account appear in a div block with this id, organized by an unordered list. This list only appears if you are logged on, and they are found by clicking on the ▼ button next to My account.

Currently, the list of options is as follows:

  • Activity
  • Messages
  • Sites
  • Settings
  • Upgrade
  • Sign out

The items are in a <ul> block, so the items can be accessed and styled by #account-options li.

Examples

Using a new CSS3 feature, the :nth-child pseudo-class, we can select individual items under the account options. For this page, we eliminated every option except Settings and Sign out.

#account-options li:nth-child(1),
#account-options li:nth-child(2),
#account-options li:nth-child(3),
#account-options li:nth-child(5){    display: none; }

Try It on the CSS Zone Sandbox!

Base CSS

#account-options{
    position: absolute;
    box-sizing: border-box
    -moz-box-sizing: border-box;
    width: 15em;
    right: 0;
    padding: 0;
    z-index: 40;
    background-color: white;
    display: none;
    border: 1px solid #888;
}
 
#account-options ul{
    display: block;
    margin: 0; padding: 0;
    list-style: none;
}
#account-options li{
    display: block;
    margin: 0; padding: 0;
    /*width: 100%;*/
}
#account-options li a{
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 2px 5px;
    z-index: 40;
    /*width: 100%;*/
}
 
#account-options li a:hover{
    color: black;
}

Not defined in Base CSS.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License