Skip to:
Content

BuddyPress.org

Changeset 10216


Ignore:
Timestamp:
10/08/2015 11:23:07 AM (9 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.