Skip to:
Content

BuddyPress.org

Changeset 10216


Ignore:
Timestamp:
10/08/2015 11:23:07 AM (11 years ago)
Author:
hnla
Message:

Commit updates for Twentythirteen companion styles.
Update addresses user account and single group headers, styling updates for cover image header and default header instances at various screen sizes.
See #6533

Location:
trunk/src/bp-templates/bp-legacy/css
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-templates/bp-legacy/css/twentythirteen-rtl.css

    r10155 r10216  
    773773*-----------------------------------------------------------
    774774*/
     775.bp-user .entry-header,
     776.single-item.groups .entry-header {
     777        margin-bottom: 0;
     778}
     779
     780.bp-user .entry-header .entry-title,
     781.single-item.groups .entry-header .entry-title {
     782        color: #8c8c7f;
     783        font-size: 32px;
     784        font-size: 2rem;
     785        margin-bottom: 10px;
     786        text-align: center;
     787}
     788
     789@media screen and (min-width: 46.25em) {
     790        .bp-user .entry-header .entry-title,
     791        .single-item.groups .entry-header .entry-title {
     792                text-align: right;
     793        }
     794}
     795
    775796.bp-user #buddypress #item-header-content #item-meta,
    776797.single-item.groups #buddypress #item-header-content #item-meta {
    … …  
    921942        }
    922943        .single-item.groups #buddypress div#item-header div#item-actions {
     944                clear: both;
    923945                float: left;
    924946                width: 28%;
     947        }
     948        .single-item.groups #buddypress div#item-header div#item-actions h3 {
     949                font-size: 14px;
     950                font-size: 0.875rem;
     951        }
     952}
     953
     954.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
     955        border: 0;
     956        float: none;
     957        width: auto;
     958}
     959
     960@media screen and (max-width: 46.25em) {
     961        .single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
     962                clear: both !important;
     963        }
     964}
     965
     966@media screen and (min-width: 46.25em) {
     967        .single-item.groups #buddypress div#item-header #item-header-cover-image #item-header-content {
     968                padding-right: 10px;
     969        }
     970        .single-item.groups #buddypress div#item-header #item-header-cover-image #item-header-content #item-buttons {
     971                margin-top: 0;
     972        }
     973        .single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
     974                border-right: 1px solid #eaeaea;
     975                clear: none;
     976                float: left;
     977                margin-top: 230px !important;
     978                padding-top: 0 !important;
     979                width: 20%;
    925980        }
    926981}
    … …  
    9491004}
    9501005
     1006.bp-user #buddypress #item-header #item-header-content .user-nicename,
     1007.bp-user #buddypress #item-header #item-header-content span.activity {
     1008        display: block;
     1009        text-align: center;
     1010}
     1011
    9511012@media screen and (min-width: 46.25em) {
    9521013        .bp-user #buddypress #item-header #item-header-avatar {
    9531014                float: right;
    954                 width: 20%;
     1015                width: auto;
    9551016        }
    9561017        .bp-user #buddypress #item-header #item-header-avatar a {
    … …  
    9581019        }
    9591020        .bp-user #buddypress #item-header #item-header-content {
    960                 float: left;
    961                 margin-left: 5%;
    962                 width: 69%;
     1021                float: none;
     1022                overflow: hidden;
     1023        }
     1024        .bp-user #buddypress #item-header #item-header-content .user-nicename,
     1025        .bp-user #buddypress #item-header #item-header-content span.activity {
     1026                text-align: right;
     1027        }
     1028        .bp-user #buddypress #item-header #item-header-content #item-meta {
     1029                margin-top: 0;
     1030        }
     1031}
     1032
     1033@media screen and (min-width: 46.25em) {
     1034        .bp-user #buddypress #item-header-cover-image #item-header-content .user-nicename {
     1035                margin-bottom: 20px;
     1036        }
     1037        .bp-user #buddypress #item-header-cover-image #item-header-content #item-buttons {
     1038                margin: 0;
    9631039        }
    9641040}

  • trunk/src/bp-templates/bp-legacy/css/twentythirteen.css

    r10155 r10216  
    773773*-----------------------------------------------------------
    774774*/
     775.bp-user .entry-header,
     776.single-item.groups .entry-header {
     777        margin-bottom: 0;
     778}
     779
     780.bp-user .entry-header .entry-title,
     781.single-item.groups .entry-header .entry-title {
     782        color: #8c8c7f;
     783        font-size: 32px;
     784        font-size: 2rem;
     785        margin-bottom: 10px;
     786        text-align: center;
     787}
     788
     789@media screen and (min-width: 46.25em) {
     790        .bp-user .entry-header .entry-title,
     791        .single-item.groups .entry-header .entry-title {
     792                text-align: left;
     793        }
     794}
     795
    775796.bp-user #buddypress #item-header-content #item-meta,
    776797.single-item.groups #buddypress #item-header-content #item-meta {
    … …  
    921942        }
    922943        .single-item.groups #buddypress div#item-header div#item-actions {
     944                clear: both;
    923945                float: right;
    924946                width: 28%;
     947        }
     948        .single-item.groups #buddypress div#item-header div#item-actions h3 {
     949                font-size: 14px;
     950                font-size: 0.875rem;
     951        }
     952}
     953
     954.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
     955        border: 0;
     956        float: none;
     957        width: auto;
     958}
     959
     960@media screen and (max-width: 46.25em) {
     961        .single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
     962                clear: both !important;
     963        }
     964}
     965
     966@media screen and (min-width: 46.25em) {
     967        .single-item.groups #buddypress div#item-header #item-header-cover-image #item-header-content {
     968                padding-left: 10px;
     969        }
     970        .single-item.groups #buddypress div#item-header #item-header-cover-image #item-header-content #item-buttons {
     971                margin-top: 0;
     972        }
     973        .single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
     974                border-left: 1px solid #eaeaea;
     975                clear: none;
     976                float: right;
     977                margin-top: 230px !important;
     978                padding-top: 0 !important;
     979                width: 20%;
    925980        }
    926981}
    … …  
    9491004}
    9501005
     1006.bp-user #buddypress #item-header #item-header-content .user-nicename,
     1007.bp-user #buddypress #item-header #item-header-content span.activity {
     1008        display: block;
     1009        text-align: center;
     1010}
     1011
    9511012@media screen and (min-width: 46.25em) {
    9521013        .bp-user #buddypress #item-header #item-header-avatar {
    9531014                float: left;
    954                 width: 20%;
     1015                width: auto;
    9551016        }
    9561017        .bp-user #buddypress #item-header #item-header-avatar a {
    … …  
    9581019        }
    9591020        .bp-user #buddypress #item-header #item-header-content {
    960                 float: right;
    961                 margin-right: 5%;
    962                 width: 69%;
     1021                float: none;
     1022                overflow: hidden;
     1023        }
     1024        .bp-user #buddypress #item-header #item-header-content .user-nicename,
     1025        .bp-user #buddypress #item-header #item-header-content span.activity {
     1026                text-align: left;
     1027        }
     1028        .bp-user #buddypress #item-header #item-header-content #item-meta {
     1029                margin-top: 0;
     1030        }
     1031}
     1032
     1033@media screen and (min-width: 46.25em) {
     1034        .bp-user #buddypress #item-header-cover-image #item-header-content .user-nicename {
     1035                margin-bottom: 20px;
     1036        }
     1037        .bp-user #buddypress #item-header-cover-image #item-header-content #item-buttons {
     1038                margin: 0;
    9631039        }
    9641040}

  • trunk/src/bp-templates/bp-legacy/css/twentythirteen.scss

    r10160 r10216  
    134134// Variables: color definitions
    135135$body-text:          #141412;
     136$light-body:         lighten(#141412, 45%);
    136137$content-background: #fff;
    137 $off-white:          lighten(#f9f8ee, 0.7);
     138$off-white:          lighten(#f9f8ee, 10%);
    138139$cream-background:   #f7f5e7;
    139140$light-background:   #f7f7f7;
    … …  
    367368// to sit alongside the vert menu
    368369// As 2013 has an inner sidebar which if active can narrow screen too far
    369 // for a columner nav we'll only use these rules if no sidebar.
     370// for a columner nav we'll only use these rules if no sidebar 'body:not(.sidebar)'.
    370371
    371372@media screen and (min-width: 55em) {
    … …  
    10671068.bp-user,
    10681069.single-item.groups {
     1070
     1071        .entry-header {
     1072                margin-bottom: 0;
     1073
     1074                .entry-title {
     1075                        color: $light-body;
     1076                        @include font-size(32);
     1077                        margin-bottom: $spacing-val-sm;
     1078                        text-align: center;
     1079                        @media screen and (min-width: 46.25em) {
     1080                                text-align: left;
     1081                        }
     1082                }
     1083        }
     1084
    10691085        #buddypress {
    10701086                #item-header-content {
    … …  
    12001216
    12011217                                h3 {
    1202                                         //background: $dark-background;
    1203                                         //color: $content-background;
    12041218                                        @include font-size(14);
    12051219
    … …  
    12281242
    12291243                                div#item-actions {
     1244                                        clear: both;
    12301245                                        float: right;
    12311246                                        width: 28%;
     1247
     1248                                        h3 {
     1249                                                @include font-size(14);
     1250                                        }
    12321251                                }
    12331252
    12341253                        } // close @media
     1254
     1255                        #item-header-cover-image {
     1256        //                      #item-header-content {
     1257        //                      }
     1258
     1259                                #item-actions {
     1260                                        border: 0;
     1261                                        @media screen and (max-width: 46.25em) {
     1262                                                clear: both !important;
     1263                                        }
     1264                                        float: none;
     1265                                        width: auto;
     1266                                }
     1267
     1268                                @media screen and (min-width: 46.25em) {
     1269                                        #item-header-content {
     1270                                                padding-left: $spacing-val-sm;
     1271
     1272                                                #item-buttons {
     1273                                                        margin-top: 0;
     1274                                                }
     1275                                        }
     1276
     1277                                        #item-actions {
     1278                                                border-left: 1px solid $border-light;
     1279                                                clear: none;
     1280                                                float: right;
     1281                                                margin-top: 230px !important;
     1282                                                padding-top: 0 !important;
     1283                                                width: 20%;
     1284                                        }
     1285                                }
     1286                        }
    12351287
    12361288                } // close #item-header
    … …  
    12471299
    12481300.bp-user {
     1301
    12491302        #buddypress {
    12501303                #item-header {
    … …  
    12631316                        }
    12641317
     1318                        #item-header-content {
     1319                                .user-nicename,
     1320                                span.activity {
     1321                                        display: block;
     1322                                        text-align: center;
     1323                                }
     1324                        }
     1325
    12651326                        @media screen and (min-width: 46.25em) {
    12661327                                #item-header-avatar {
    12671328                                        float: left;
    1268                                         width: 20%;
     1329                                        width: auto;
    12691330
    12701331                                        a {
    … …  
    12741335
    12751336                                #item-header-content {
    1276                                         float: right;
    1277                                         margin-right: 5%;
    1278                                         width: 69%;
     1337                                        float: none;
     1338                                        overflow: hidden;
     1339
     1340                                        .user-nicename,
     1341                                        span.activity {
     1342                                                text-align: left;
     1343                                        }
     1344
     1345                                        #item-meta {
     1346                                                margin-top: 0;
     1347                                        }
    12791348                                }
    12801349
    … …  
    12821351
    12831352                } // close #item-header
     1353
     1354                #item-header-cover-image {
     1355
     1356                        #item-header-content {
     1357                                @media screen and (min-width: 46.25em) {
     1358                                        .user-nicename {
     1359                                                margin-bottom: $spacing-val-md;
     1360                                        }
     1361
     1362                                        #item-buttons {
     1363                                                margin: 0;
     1364                                        }
     1365                                }
     1366                        }
     1367                }
    12841368
    12851369        } // close #buddypress
Note: See TracChangeset for help on using the changeset viewer.