Skip to:
Content

BuddyPress.org

Changeset 3587


Ignore:
Timestamp:
12/27/2010 05:27:43 PM (15 years ago)
Author:
djpaul
Message:

Adds updated CSS styles for the main nav menu. Fixes #2691, huge props to hnla for his initial patches!

Location:
trunk/bp-themes/bp-default
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/bp-themes/bp-default/_inc/css/default.css

    r3535 r3587  
    144144
    145145#header {
    146     position: relative;
    147     color: #fff;
    148146    -moz-border-radius-bottomleft: 6px;
    149147    -webkit-border-bottom-left-radius: 6px;
    150148    -moz-border-radius-bottomright: 6px;
    151149    -webkit-border-bottom-right-radius: 6px;
     150    color: #fff;
     151    height: 100px;
    152152    margin-bottom: 20px;
    153     height: 100px;
    154153    padding-top: 25px;
     154    position: relative;
    155155}
    156156   
    … …  
    161161    width: 100%;
    162162    text-align: right;
    163 }
    164 
    165 #header h1 {
    166     line-height: 230%;
    167163}
    168164
    … …  
    187183
    188184#header h1 {
     185    bottom: 30px;
     186    line-height: 230%;
     187    left: 20px;
     188    margin-bottom: 0;
    189189    position: absolute;
    190     bottom: 0;
    191     left: 20px;
    192190    width: 44%;
    193     margin: 0 0 -5px 0;
    194191}
    195192       
    … …  
    204201-------------------------------------------------------------- */
    205202
    206 ul#nav {
     203#nav {
    207204    margin: 0;
    208205    padding: 0;
    … …  
    211208    list-style: none;
    212209    bottom: 0;
    213     max-width: 65%;
    214 }
    215    
    216 ul#nav li {
     210    max-width: 95%;
     211}
     212
     213#nav li a {
     214    background: url( ../images/60pc_black.png );
     215    color: #fff;
     216    display: block;
     217    padding: 5px 15px;
     218    text-decoration: none;
     219}
     220
     221#nav > li {
     222    margin-left: 5px;
    217223    float: left;
    218     margin: 0 5px 0 0;
    219 }
    220        
    221 ul#nav li a {
    222     display: block;
    223     color: #fff;
    224     text-decoration: none;
    225     padding: 5px 15px;
    226     background: url( ../images/60pc_black.png );
     224}
     225
     226#nav > li > a {
    227227    -moz-border-radius-topleft: 3px;
    228228    -webkit-border-top-left-radius: 3px;
    … …  
    230230    -webkit-border-top-right-radius: 3px;
    231231}
    232            
    233 ul#nav li.selected a,
    234 ul#nav li.current_page_item a {
     232
     233#nav li.selected a,
     234#nav > li.current_page_item a {
    235235    background: #f5f5f5;
    236236    color: #555;
    237237}
    238            
    239 ul#nav a:focus {
    240     outline: none;
    241 }
     238
     239#nav > li > ul {
     240    border-top-width: 0;
     241}
     242
     243#nav > ul li.sfhover a,
     244#nav > ul li:hover a {
     245    background: #333;
     246    color: #fff;
     247}
     248
     249#nav li.sfhover,
     250#nav li:hover {
     251    position: relative;
     252    z-index: 1000;
     253}
     254
     255#nav ul {
     256    border: 1px solid #222;
     257    -moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     258    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     259    -moz-border-radius: 3px;
     260    -webkit-border-radius: 3px;
     261    -moz-border-radius-topleft: 0;
     262    -webkit-border-top-left-radius: 0;
     263    -moz-border-radius-topright: 0;
     264    -webkit-border-top-right-radius: 0;
     265}
     266
     267#nav ul li ul {
     268    -moz-border-radius: 3px;
     269    -webkit-border-radius: 3px;
     270}
     271
     272#nav ul,
     273#nav .sfhover ul ul,
     274#nav :hover ul ul {
     275    right: -9999px;
     276    position: absolute;
     277}
     278
     279#nav .sfhover ul,
     280#nav :hover ul {
     281    right: 0;
     282    top: 100%;
     283    width: 128px;
     284}
     285
     286#nav .sfhover ul li > a,
     287#nav :hover ul li > a {
     288    background: #333;
     289    color: #fff;
     290}
     291
     292#nav .sfhover ul .sfhover > ul,
     293#nav :hover ul :hover > ul {
     294    right: 125px;
     295    top: -1px;
     296    width: 128px;
     297    z-index: 1000;
     298}
     299
     300#nav ul li.sfhover > a,
     301#nav ul li:hover > a {
     302    background-color: #222;
     303    color: #fff;
     304}
     305
     306#nav .sfhover ul li,
     307#nav :hover ul li {
     308    height: 30px;
     309    line-height: 30px;
     310    text-indent: 10px;
     311    width: 128px;
     312}
     313
     314#nav .sfhover ul li a,
     315#nav :hover ul li a {
     316    padding: 0 0;
     317}
     318
    242319
    243320/* > Container
    244321-------------------------------------------------------------- */
     322
    245323div#container {
    246324    position: relative;
    … …  
    368446}
    369447
     448
    370449/* > Content
    371450-------------------------------------------------------------- */
     451
    372452div#content {
    373453    float: left;
    … …  
    21742254    margin-left: 15px;  /* border is 4px */
    21752255}
    2176 
    2177 
    2178 /* Menu
    2179 -------------------------------------------------------------- */
    2180 
    2181 #nav ul {
    2182     display: none;
    2183     position: absolute;
    2184     z-index: 99999;
    2185     right: 0;
    2186 }
    2187    
    2188 #nav li:hover > ul {
    2189     display: block;
    2190 }
    2191 
    2192 #nav ul li {
    2193     margin-right: 0;
    2194     min-width: 186px;
    2195 }

  • trunk/bp-themes/bp-default/_inc/global.js

    r3498 r3587  
    10351035
    10361036    /* Admin Bar & wp_list_pages Javascript IE6 hover class */
    1037     jq("#wp-admin-bar ul.main-nav li, #nav li.page_item ").mouseover( function() {
     1037    jq("#wp-admin-bar ul.main-nav li, #nav li").mouseover( function() {
    10381038        jq(this).addClass('sfhover');
    10391039    });
    10401040
    1041     jq("#wp-admin-bar ul.main-nav li, #nav li.page_item ").mouseout( function() {
     1041    jq("#wp-admin-bar ul.main-nav li, #nav li").mouseout( function() {
    10421042        jq(this).removeClass('sfhover');
    10431043    });

  • trunk/bp-themes/bp-default/rtl.css

    r3586 r3587  
    5757-------------------------------------------------------------- */
    5858
    59 ul#nav {
     59#nav {
    6060    left: 15px;
    6161    right: auto;
    6262}
    63 ul#nav li {
    64     float: right;
    65     margin: 0 0 0 5px;
     63
     64#nav > li {
     65    margin-right: 5px;
     66    float: right;
     67}
     68
     69#nav ul,
     70#nav .sfhover ul ul,
     71#nav :hover ul ul {
     72    left: -9999px;
     73    position: absolute;
     74}
     75
     76#nav .sfhover ul,
     77#nav :hover ul {
     78    left: 0;
     79    top: 100%;
     80    width: 128px;
     81}
     82
     83#nav .sfhover ul .sfhover > ul,
     84#nav :hover ul :hover > ul {
     85    left: 125px;
     86    top: -1px;
     87    width: 128px;
     88    z-index: 1000;
    6689}
    6790
    … …  
    91114    background: url( _inc/images/sidebar_back.gif ) top right repeat-x;
    92115}
     116
    93117div#sidebar div#sidebar-me img.avatar {
    94118    float: right;
    … …  
    117141}
    118142
    119 #footer-widget-area div.item-meta, #footer-widget-area div.item-content,
    120 div#sidebar div.item-meta, div#sidebar div.item-content {
     143#footer-widget-area div.item-meta,
     144#footer-widget-area div.item-content,
     145div#sidebar div.item-meta,
     146div#sidebar div.item-content {
    121147    margin-right: 38px;
    122148    margin-left: 0;
    … …  
    153179    -webkit-border-bottom-left-radius: 0;
    154180}
     181
    155182div#content .left-menu {
    156183    float: right;
    … …  
    184211}
    185212
    186 div#item-header div.generic-button, div#item-header a.button {
     213div#item-header div.generic-button,
     214div#item-header a.button {
    187215    float: right;
    188216    margin: 10px 0 0 10px;
    … …  
    215243    clear: right;
    216244}
     245
    217246div.item-list-tabs ul li {
    218247    float: right;
    219248    margin: 5px 5px 0 0;
    220249}
     250
    221251div.item-list-tabs ul li:first-child {
    222252    margin-left: 0;
    … …  
    234264    padding-right: 0 !important;
    235265}
     266
    236267div#item-nav ul li.loading a {
    237268    background-position: 12% 50%;
    … …  
    248279-------------------------------------------------------------- */
    249280
    250 span.activity, div#message p {
     281span.activity,
     282div#message p {
    251283    border-left: 1px solid #FFE8C4;
    252284    border-right: 0;
    … …  
    277309-------------------------------------------------------------- */
    278310
    279 a.button, input[type=submit], input[type=button],
    280 ul.button-nav li a, div.generic-button a {
     311a.button,
     312input[type=submit],
     313input[type=button],
     314ul.button-nav li a,
     315div.generic-button a {
    281316    background-position: right top;
    282317}
    … …  
    313348    float: left;
    314349}
     350
    315351form.standard-form#signup_form div.signup-avatar {
    316352    margin-left: 15px;
    … …  
    327363}
    328364
    329 form.standard-form #basic-details-section, form.standard-form #blog-details-section,
     365form.standard-form #basic-details-section,
     366form.standard-form #blog-details-section,
    330367form.standard-form #profile-details-section {
    331368    float: right;
    332369}
     370
    333371form.standard-form #profile-details-section {
    334372    float: left;
    335373}
     374
    336375form.standard-form #blog-details-section {
    337376    clear: right;
    … …  
    352391}
    353392
    354 table.forum tr > td:first-child, table.forum tr > th:first-child {
     393table.forum tr > td:first-child,
     394table.forum tr > th:first-child {
    355395    padding-right: 15px;
    356396    padding-left: 0;
    357397}
    358398
    359 table.forum tr > td:last-child, table.forum tr > th:last-child {
     399table.forum tr > td:last-child,
     400table.forum tr > th:last-child {
    360401    padding-left: 15px;
    361402    padding-right: 0;
    362403}
    363404
    364 table.forum tr th#th-title, table.forum tr th#th-poster,
    365 table.forum tr th#th-group, table.forum td.td-poster,
    366 table.forum td.td-group, table.forum td.td-title {
     405table.forum tr th#th-title,
     406table.forum tr th#th-poster,
     407table.forum tr th#th-group,
     408table.forum td.td-poster,
     409table.forum td.td-group,
     410table.forum td.td-title {
    367411    text-align: right;
    368412}
    … …  
    404448    margin-left: 0;
    405449}
     450
    406451.activity-list li.activity_comment .activity-avatar img.avatar,
    407452.activity-list li.activity_comment .activity-avatar img.FB_profile_pic {
    … …  
    428473    right: auto;
    429474}
     475
    430476body.activity-permalink .activity-list li.mini .activity-meta {
    431477    left: 15px;
    … …  
    449495    margin-left: 0;
    450496}
     497
    451498body.activity-permalink .activity-list li .activity-content {
    452499    border-left: 1px solid #ddd;
    … …  
    455502    margin-left: 0;
    456503}
     504
    457505body.activity-permalink .activity-list li .activity-content > p {
    458506    background-position: top right;
    … …  
    462510}
    463511
    464 .activity-list .activity-content > p > a:first-child, span.highlight,
     512.activity-list .activity-content > p > a:first-child,
     513span.highlight,
    465514.activity-list .activity-content > .comment-header > a:first-child {
    466515    border-left: 1px solid #a1dcfa;
    … …  
    625674-------------------------------------------------------------- */
    626675
    627 .navigation, .paged-navigation, .comment-navigation {
     676.navigation,
     677.paged-navigation,
     678.comment-navigation {
    628679    font-family: sans-serif;
    629680}
    … …  
    637688}
    638689
    639 div.post ul, div.post ol, div.post dl {
     690div.post ul,
     691div.post ol,
     692div.post dl {
    640693    margin: 0 1.5em 18px 0;
    641694}
    … …  
    657710}
    658711
    659 div.post div.author-box, div.comment-avatar-box {
     712div.post div.author-box,
     713div.comment-avatar-box {
    660714    float: right;
    661715    margin: 0 0 15px 15px;
    … …  
    663717}
    664718
    665 div.post div.post-content, div.comment-content {
     719div.post div.post-content,
     720div.comment-content {
    666721    margin-right: 105px;
    667722    margin-left: 0;
    668723}
    669724
    670 div.post p.date, div.post p.postmetadata, div.comment-meta, div.comment-options {
     725div.post p.date,
     726div.post p.postmetadata,
     727div.comment-meta,
     728div.comment-options {
    671729    font-family: sans-serif;
    672730}
    … …  
    683741}
    684742
    685 div.post dd.wp-caption p.wp-caption-text, div.post .wp-caption p.wp-caption-text {
     743div.post dd.wp-caption p.wp-caption-text,
     744div.post .wp-caption p.wp-caption-text {
    686745    padding: 0 0 5px 4px;
    687746}
    … …  
    774833}
    775834
    776 #wp-admin-bar ul li:hover ul, #wp-admin-bar ul li li:hover ul, #wp-admin-bar ul li.sfhover ul, #wp-admin-bar ul li ul li.sfhover ul {/* lists nested under hovered list items */
     835#wp-admin-bar ul li:hover ul,
     836#wp-admin-bar ul li li:hover ul,
     837#wp-admin-bar ul li.sfhover ul,
     838#wp-admin-bar ul li ul li.sfhover ul {/* lists nested under hovered list items */
    777839    right: auto;
    778840}
    … …  
    783845}
    784846
    785 #wp-admin-bar ul li:hover ul ul, #wp-admin-bar li.sfhover ul li ul {
     847#wp-admin-bar ul li:hover ul ul,
     848#wp-admin-bar li.sfhover ul li ul {
    786849    right: -999em;
    787850    left: auto;
Note: See TracChangeset for help on using the changeset viewer.