Skip to:
Content

BuddyPress.org

Ticket #7108: 7108.patch

File 7108.patch, 26.5 KB (added by mercime, 8 years ago)

Kawabanga :)

  • src/bp-core/admin/css/common-rtl.css

     
    1212        1.1 Version Badge
    1313        1.2 About Panel
    1414                1.2.1 Headline Feature
    15                 1.2.2 Columns
    16                 1.2.3 Features Section
    17                 1.2.4 Changelog Section
     15                1.2.2 Features Section
     16                1.2.3 Changelog Section
    18172.0 Dashicons
    1918        2.1 Top level menus
    2019        2.2 Settings - Components
    … …  
    6261/*
    6362 * 1.2.1 Headline Feature
    6463 */
    65 .index_page_bp-about .about-wrap .headline-feature,
    66 .dashboard_page_bp-about .about-wrap .headline-feature {
    67         margin-bottom: 2em;
     64.index_page_bp-about .bp-headline-feature,
     65.dashboard_page_bp-about .bp-headline-feature {
     66        margin-bottom: 3em;
    6867        text-align: center;
    6968}
    7069
    71 .index_page_bp-about .about-wrap .headline-feature h3,
    72 .index_page_bp-about .headline-feature .headline-title,
    73 .dashboard_page_bp-about .about-wrap .headline-feature h3,
    74 .dashboard_page_bp-about .headline-feature .headline-title {
     70.index_page_bp-about .bp-headline-feature h3,
     71.index_page_bp-about .bp-headline-feature .headline-title,
     72.dashboard_page_bp-about .bp-headline-feature h3,
     73.dashboard_page_bp-about .bp-headline-feature .headline-title {
    7574        font-size: 2.2em;
    76         font-weight: normal;
    7775        line-height: 1.3;
    7876        margin: 1.25em 0 0.6em;
    7977        text-align: center;
    8078}
    8179
    82 .index_page_bp-about .about-wrap .headline-feature p,
    83 .dashboard_page_bp-about .about-wrap .headline-feature p {
     80.index_page_bp-about .bp-headline-feature p,
     81.dashboard_page_bp-about .bp-headline-feature p {
    8482        font-size: 1.15em;
    8583        margin: 1.15em auto 0.6em;
     84        max-width: 80%;
    8685}
    8786
    88 .index_page_bp-about .about-wrap .headline-feature .introduction,
    89 .dashboard_page_bp-about .about-wrap .headline-feature .introduction {
     87.index_page_bp-about .headline-feature .introduction,
     88.dashboard_page_bp-about .headline-feature .introduction {
    9089        font-weight: 600;
    9190}
    9291
    93 /*
    94  * 1.2.2 Columns
    95  */
    96 .index_page_bp-about .about-wrap .two-col > div,
    97 .dashboard_page_bp-about .about-wrap .two-col > div {
    98         float: right;
    99         margin-left: 4.799999999%;
    100         position: relative;
    101         width: 47.6%;
    102 }
    10392
    104 .index_page_bp-about .about-wrap .two-col .last-feature,
    105 .dashboard_page_bp-about .about-wrap .two-col .last-feature {
    106         margin-left: 0;
    107 }
    108 
    10993/*
    110  * 1.2.3 Features Section
     94 * 1.2.2 Features Section
    11195 */
    11296.index_page_bp-about .bp-features-section,
    11397.dashboard_page_bp-about .bp-features-section {
     98        clear: both;
    11499        margin-bottom: 2em;
     100        margin-top: 2em;
     101        padding-bottom: 0;
    115102}
    116103
    117 .index_page_bp-about .about-wrap .feature-section,
    118 .dashboard_page_bp-about .about-wrap .feature-section {
     104.index_page_bp-about .bp-features-section h3,
     105.dashboard_page_bp-about .bp-features-section h3 {
     106        font-size: 1.8em;
     107        font-weight: normal;
     108        line-height: 1.5em;
     109        margin: 0 0 0.6em;
     110        text-align: center;
     111}
     112
     113.index_page_bp-about .bp-feature,
     114.dashboard_page_bp-about .bp-feature {
    119115        clear: both;
    120         margin-top: 2em;
    121116        overflow: hidden;
    122         padding-bottom: 0;
     117        margin-bottom: 3em;
     118        margin-top: 3em;
    123119}
    124120
    125 .index_page_bp-about .about-wrap .changelog .feature-section,
    126 .dashboard_page_bp-about .about-wrap .changelog .feature-section {
     121.index_page_bp-about .bp-feature::after,
     122.dashboard_page_bp-about .bp-feature::after {
     123        content: '';
     124}
     125
     126.index_page_bp-about .bp-feature h4,
     127.dashboard_page_bp-about .bp-feature h4 {
     128        color: #23282d;
     129        display: inline-block;
     130        font-size: 1.4em;
     131        font-weight: normal;
     132        margin-bottom: 0.6em;
    127133        margin-top: 0;
     134        width: 47%;
    128135}
    129136
    130 .index_page_bp-about .about-wrap .feature-section h3,
    131 .dashboard_page_bp-about .about-wrap .feature-section h3 {
    132         font-size: 1.25em;
    133         line-height: 1.5em;
    134         margin: 0 0 0.6em;
     137.index_page_bp-about .bp-feature p,
     138.dashboard_page_bp-about .bp-feature p {
     139        font-size: 1.15em;
     140        width: 47%;
    135141}
    136142
    137 .index_page_bp-about .about-wrap .changelog h4,
    138 .dashboard_page_bp-about .about-wrap .changelog h4 {
    139         color: #23282d;
    140         font-size: 1em;
    141         margin: 1.4em 0 0.6em;
     143.index_page_bp-about .bp-feature.opposite h4,
     144.dashboard_page_bp-about .bp-feature.opposite h4,
     145.index_page_bp-about .bp-feature.opposite p,
     146.dashboard_page_bp-about .bp-feature.opposite p {
     147        float: left;
    142148}
    143149
     150.index_page_bp-about .bp-feature img,
     151.dashboard_page_bp-about .bp-feature img {
     152        clear: left;
     153        float: left;
     154        margin-right: 2.5%;
     155        width: 50%;
     156        max-width: 50%;
     157}
     158
     159.index_page_bp-about .bp-feature.opposite img,
     160.dashboard_page_bp-about .bp-feature.opposite img{
     161        clear: right;
     162        float: right;
     163        margin-right: 0;
     164        margin-left: 2.5%;
     165}
     166
     167
    144168/*
    145  * 1.2.4 Changelog Section
     169 * 1.2.3 Changelog Section
    146170 */
    147 .index_page_bp-about .about-wrap .changelog,
    148 .dashboard_page_bp-about .about-wrap .changelog {
    149         border-top: 1px solid #eee;
     171.index_page_bp-about .bp-changelog-section,
     172.dashboard_page_bp-about .bp-changelog-section {
     173        border-top: 1px solid #ccc;
     174        clear: both;
    150175        margin-bottom: 3em;
     176        margin-top: 2em;
     177        padding-bottom: 0;
    151178}
    152179
    153 .index_page_bp-about .about-wrap .changelog .changelog-title,
    154 .dashboard_page_bp-about .about-wrap .changelog .changelog-title {
    155         font-size: 1.25em;
    156         line-height: 1.5em;
     180.index_page_bp-about .bp-changelog-section::after,
     181.dashboard_page_bp-about .bp-changelog-section::after {
     182        content: '';
     183}
     184
     185.index_page_bp-about .bp-changelog-section .changelog-title,
     186.dashboard_page_bp-about .bp-changelog-section .changelog-title {
     187        color: #23282d;
     188        font-size: 1.6em;
     189        font-weight: normal;
     190        line-height: 1.5;
    157191        margin: 1.25em 0 .6em;
    158192        text-align: center;
    159193}
    160194
     195.index_page_bp-about .bp-changelog-section .two-col > div,
     196.dashboard_page_bp-about .bp-changelog-section .two-col > div {
     197        float: left;
     198        margin-right: 4.799999999%;
     199        position: relative;
     200        width: 47.6%;
     201}
     202
     203.index_page_bp-about .bp-changelog-section .two-col > div.last-feature,
     204.dashboard_page_bp-about .bp-changelog-section .two-col > div.last-feature {
     205        margin-right: 0;
     206}
     207
     208.index_page_bp-about .bp-changelog,
     209.dashboard_page_bp-about .bp-changelog {
     210        margin-bottom: 3em;
     211}
     212
     213.index_page_bp-about .bp-changelog h4,
     214.dashboard_page_bp-about .bp-changelog h4 {
     215        font-size: 1.15em;
     216        margin-top: 1.5em;
     217        margin-bottom: 0.6em;
     218}
     219
     220.index_page_bp-about .bp-changelog p,
     221.dashboard_page_bp-about .bp-changelog p {
     222        font-size: 1.05em;
     223        margin-top: 0.75em;
     224}
     225
     226.bp-assets {
     227        clear: both;
     228        margin-bottom: 2em;
     229        padding-top: 3em;
     230}
     231
    161232@media screen and ( max-width: 782px ) {
    162233        .index_page_bp-about .about-wrap .headline-feature,
    163234        .dashboard_page_bp-about .about-wrap .headline-feature {

  • src/bp-core/admin/css/common.css

     
    1212        1.1 Version Badge
    1313        1.2 About Panel
    1414                1.2.1 Headline Feature
    15                 1.2.2 Columns
    16                 1.2.3 Features Section
    17                 1.2.4 Changelog Section
     15                1.2.2 Features Section
     16                1.2.3 Changelog Section
    18172.0 Dashicons
    1918        2.1 Top level menus
    2019        2.2 Settings - Components
    … …  
    6261/*
    6362 * 1.2.1 Headline Feature
    6463 */
    65 .index_page_bp-about .about-wrap .headline-feature,
    66 .dashboard_page_bp-about .about-wrap .headline-feature {
    67         margin-bottom: 2em;
     64.index_page_bp-about .bp-headline-feature,
     65.dashboard_page_bp-about .bp-headline-feature {
     66        margin-bottom: 3em;
    6867        text-align: center;
    6968}
    7069
    71 .index_page_bp-about .about-wrap .headline-feature h3,
    72 .index_page_bp-about .headline-feature .headline-title,
    73 .dashboard_page_bp-about .about-wrap .headline-feature h3,
    74 .dashboard_page_bp-about .headline-feature .headline-title {
     70.index_page_bp-about .bp-headline-feature h3,
     71.index_page_bp-about .bp-headline-feature .headline-title,
     72.dashboard_page_bp-about .bp-headline-feature h3,
     73.dashboard_page_bp-about .bp-headline-feature .headline-title {
    7574        font-size: 2.2em;
    76         font-weight: normal;
    7775        line-height: 1.3;
    7876        margin: 1.25em 0 0.6em;
    7977        text-align: center;
    8078}
    8179
    82 .index_page_bp-about .about-wrap .headline-feature p,
    83 .dashboard_page_bp-about .about-wrap .headline-feature p {
     80.index_page_bp-about .bp-headline-feature p,
     81.dashboard_page_bp-about .bp-headline-feature p {
    8482        font-size: 1.15em;
    8583        margin: 1.15em auto 0.6em;
     84        max-width: 80%;
    8685}
    8786
    88 .index_page_bp-about .about-wrap .headline-feature .introduction,
    89 .dashboard_page_bp-about .about-wrap .headline-feature .introduction {
     87.index_page_bp-about .bp-headline-feature .introduction,
     88.dashboard_page_bp-about .bp-headline-feature .introduction {
    9089        font-weight: 600;
    9190}
    9291
    93 /*
    94  * 1.2.2 Columns
    95  */
    96 .index_page_bp-about .about-wrap .two-col > div,
    97 .dashboard_page_bp-about .about-wrap .two-col > div {
    98         float: left;
    99         margin-right: 4.799999999%;
    100         position: relative;
    101         width: 47.6%;
    102 }
    10392
    104 .index_page_bp-about .about-wrap .two-col .last-feature,
    105 .dashboard_page_bp-about .about-wrap .two-col .last-feature {
    106         margin-right: 0;
    107 }
    108 
    10993/*
    110  * 1.2.3 Features Section
     94 * 1.2.2 Features Section
    11195 */
    11296.index_page_bp-about .bp-features-section,
    11397.dashboard_page_bp-about .bp-features-section {
     98        clear: both;
    11499        margin-bottom: 2em;
     100        margin-top: 2em;
     101        padding-bottom: 0;
    115102}
    116103
    117 .index_page_bp-about .about-wrap .feature-section,
    118 .dashboard_page_bp-about .about-wrap .feature-section {
     104.index_page_bp-about .bp-features-section h3,
     105.dashboard_page_bp-about .bp-features-section h3 {
     106        font-size: 1.8em;
     107        font-weight: normal;
     108        line-height: 1.5em;
     109        margin: 0 0 0.6em;
     110        text-align: center;
     111}
     112
     113.index_page_bp-about .bp-feature,
     114.dashboard_page_bp-about .bp-feature {
    119115        clear: both;
    120         margin-top: 2em;
    121116        overflow: hidden;
    122         padding-bottom: 0;
     117        margin-bottom: 3em;
     118        margin-top: 3em;
    123119}
    124120
    125 .index_page_bp-about .about-wrap .changelog .feature-section,
    126 .dashboard_page_bp-about .about-wrap .changelog .feature-section {
     121.index_page_bp-about .bp-feature::after,
     122.dashboard_page_bp-about .bp-feature::after {
     123        content: '';
     124}
     125
     126.index_page_bp-about .bp-feature h4,
     127.dashboard_page_bp-about .bp-feature h4 {
     128        color: #23282d;
     129        display: inline-block;
     130        font-size: 1.4em;
     131        font-weight: normal;
     132        margin-bottom: 0.6em;
    127133        margin-top: 0;
     134        width: 47%;
    128135}
    129136
    130 .index_page_bp-about .about-wrap .feature-section h3,
    131 .dashboard_page_bp-about .about-wrap .feature-section h3 {
    132         font-size: 1.25em;
    133         line-height: 1.5em;
    134         margin: 0 0 0.6em;
     137.index_page_bp-about .bp-feature p,
     138.dashboard_page_bp-about .bp-feature p {
     139        font-size: 1.15em;
     140        width: 47%;
    135141}
    136142
    137 .index_page_bp-about .about-wrap .changelog h4,
    138 .dashboard_page_bp-about .about-wrap .changelog h4 {
    139         color: #23282d;
    140         font-size: 1em;
    141         margin: 1.4em 0 0.6em;
     143.index_page_bp-about .bp-feature.opposite h4,
     144.dashboard_page_bp-about .bp-feature.opposite h4,
     145.index_page_bp-about .bp-feature.opposite p,
     146.dashboard_page_bp-about .bp-feature.opposite p {
     147        float: right;
    142148}
    143149
     150.index_page_bp-about .bp-feature img,
     151.dashboard_page_bp-about .bp-feature img {
     152        clear: right;
     153        float: right;
     154        margin-left: 2.5%;
     155        width: 50%;
     156        max-width: 50%;
     157}
     158
     159.index_page_bp-about .bp-feature.opposite img,
     160.dashboard_page_bp-about .bp-feature.opposite img{
     161        clear: left;
     162        float: left;
     163        margin-left: 0;
     164        margin-right: 2.5%;
     165}
     166
     167
    144168/*
    145  * 1.2.4 Changelog Section
     169 * 1.2.3 Changelog Section
    146170 */
    147 .index_page_bp-about .about-wrap .changelog,
    148 .dashboard_page_bp-about .about-wrap .changelog {
    149         border-top: 1px solid #eee;
     171.index_page_bp-about .bp-changelog-section,
     172.dashboard_page_bp-about .bp-changelog-section {
     173        border-top: 1px solid #ccc;
     174        clear: both;
    150175        margin-bottom: 3em;
     176        margin-top: 2em;
     177        padding-bottom: 0;
    151178}
    152179
    153 .index_page_bp-about .about-wrap .changelog .changelog-title,
    154 .dashboard_page_bp-about .about-wrap .changelog .changelog-title {
    155         font-size: 1.25em;
    156         line-height: 1.5em;
     180.index_page_bp-about .bp-changelog-section::after,
     181.dashboard_page_bp-about .bp-changelog-section::after {
     182        content: '';
     183}
     184
     185.index_page_bp-about .bp-changelog-section .changelog-title,
     186.dashboard_page_bp-about .bp-changelog-section .changelog-title {
     187        color: #23282d;
     188        font-size: 1.6em;
     189        font-weight: normal;
     190        line-height: 1.5;
    157191        margin: 1.25em 0 .6em;
    158192        text-align: center;
    159193}
    160194
     195.index_page_bp-about .bp-changelog-section .two-col > div,
     196.dashboard_page_bp-about .bp-changelog-section .two-col > div {
     197        float: left;
     198        margin-right: 4.799999999%;
     199        position: relative;
     200        width: 47.6%;
     201}
     202
     203.index_page_bp-about .bp-changelog-section .two-col > div.last-feature,
     204.dashboard_page_bp-about .bp-changelog-section .two-col > div.last-feature {
     205        margin-right: 0;
     206}
     207
     208.index_page_bp-about .bp-changelog,
     209.dashboard_page_bp-about .bp-changelog {
     210        margin-bottom: 3em;
     211}
     212
     213.index_page_bp-about .bp-changelog h4,
     214.dashboard_page_bp-about .bp-changelog h4 {
     215        font-size: 1.15em;
     216        margin-top: 1.5em;
     217        margin-bottom: 0.6em;
     218}
     219
     220.index_page_bp-about .bp-changelog p,
     221.dashboard_page_bp-about .bp-changelog p {
     222        font-size: 1.05em;
     223        margin-top: 0.75em;
     224}
     225
     226.bp-assets {
     227        clear: both;
     228        margin-bottom: 2em;
     229        padding-top: 3em;
     230}
     231
    161232@media screen and ( max-width: 782px ) {
    162         .index_page_bp-about .about-wrap .headline-feature,
    163         .dashboard_page_bp-about .about-wrap .headline-feature {
     233        .index_page_bp-about .bp-headline-feature,
     234        .dashboard_page_bp-about .bp-headline-feature {
    164235                max-width: 100%;
    165236        }
    166         .index_page_bp-about .about-wrap .headline-feature h3,
    167         .dahsboard_page_bp-about .about-wrap .headline-feature h3,
    168         .index_page_bp-about .about-wrap .headline-feature .headline-title,
    169         .dashboard_page_bp-about .about-wrap .headline-feature .headline-title {
     237        .index_page_bp-about .bp-headline-feature h3,
     238        .dahsboard_page_bp-about .bp-headline-feature h3,
     239        .index_page_bp-about .bp-headline-feature .headline-title,
     240        .dashboard_page_bp-about .bp-headline-feature .headline-title {
    170241                font-size: 2em;
    171242        }
    172243        .index_page_bp-about .bp-features-section,
    … …  
    173244        .dashboard_page_bp-about .bp-features-section {
    174245                margin-bottom: 0;
    175246        }
    176         .index_page_bp-about .about-wrap .feature-section,
    177         .dashboard_page_bp-about .about-wrap .feature-section {
     247        .index_page_bp-about .bp-features-section,
     248        .dashboard_page_bp-about .bp-features-section {
    178249                margin-top: 0;
    179250        }
    180         .index_page_bp-about .about-wrap .two-col > div,
    181         .dashboard_page_bp-about .about-wrap .two-col > div {
     251        .index_page_bp-about .two-col > div,
     252        .dashboard_page_bp-about .two-col > div {
    182253                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    183254                margin-top: 1.25em;
    184255                padding-bottom: 1em;
    185256                width: 100%;
    186257        }
    187         .index_page_bp-about .changelog .two-col > div,
    188         .dashboard_page_bp-about .changelog .two-col > div {
     258        .index_page_bp-about .bp-changelog-section .two-col > div,
     259        .dashboard_page_bp-about .bp-changelog-section .two-col > div {
    189260                margin-top: 0;
    190261                padding-bottom: 0;
    191262        }
    192         .index_page_bp-about .about-wrap .changelog .changelog-title,
    193         .dashboard_page_bp-about .about-wrap .changelog .changelog-title {
     263        .index_page_bp-about .bp-changelog-section .changelog-title,
     264        .dashboard_page_bp-about .bp-changelog-section .changelog-title {
    194265                text-align: left;
    195266        }
    196267}

  • src/bp-core/classes/class-bp-admin.php

     
    552552         * @since 1.7.0
    553553         */
    554554        public function about_screen() {
     555                $embedded_activity = '';
     556
     557                if ( version_compare( $GLOBALS['wp_version'], '4.5', '>=' ) ) {
     558                        $embedded_activity = wp_oembed_get( 'http://imath-buddypress.wpserveur.net/members/imath/activity/133/' );
     559                }
    555560        ?>
    556561
    557562                <div class="wrap about-wrap">
    … …  
    609614
    610615                        <?php endif; ?>
    611616
    612                         <div class="headline-feature">
    613                                 <h3 class="headline-title"><?php esc_html_e( 'Customizable BuddyPress Emails', 'buddypress' ); ?></h3>
     617                        <div class="bp-headline-feature">
     618                                <h3 class="headline-title"><?php esc_html_e( 'Activity Embeds', 'buddypress' ); ?></h3>
    614619
    615                                 <div class="featured-image">
    616                                         <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/admin/images/bp-emails-feature.png' ); ?>" alt="<?php esc_html_e( 'Change colors of the email template using the Customizer.', 'buddypress' ); ?>">
    617                                 </div>
     620                                <?php if ( $embedded_activity ) :
     621                                        wp_enqueue_script( 'wp-embed' );
     622                                ?>
     623                                        <div class="embed-container">
     624                                                <?php echo $embedded_activity ; ?>
     625                                        </div>
    618626
    619                                 <p class="introduction"><?php _e( 'Keep your users coming back with beautiful and flexible email notifications.', 'buddypress' ); ?>  </p>
    620                                 <p><?php _e( 'Edit the content of your emails, create new email templates, or change the design of the template in the Customizer. These are just a few of the customizations you can make to engage your users and increase their participation in your community with the new email features.', 'buddypress' ); ?> <a href="https://codex.buddypress.org/emails/"><?php esc_html_e( 'Learn more &rarr;', 'buddypress' ); ?></a></p>
     627                                <?php else : ?>
    621628
     629                                        <div class="featured-image">
     630                                                <a href="https://vimeo.com/170265313" title="<?php esc_attr_e( 'View the Activity Embeds demo', 'buddypress' ); ?>">
     631                                                <img src="https://cldup.com/RvBF8TqUXj.png" alt="<?php esc_html_e( 'Embed activities into your WordPress posts or pages.', 'buddypress' ); ?>">
     632                                                </a>
     633                                        </div>
     634
     635                                <?php endif ; ?>
     636
     637                                <p class="introduction"><?php _e( 'Embed activities into your WordPress posts or pages.', 'buddypress' ); ?>  </p>
     638                                <p><?php _e( 'Copy the permalink URL of the activity of your choice, paste it into the content editor of your WordPress post or page, and &quot;voilà&quot;&#33; you&#39;ve embedded an activity update from one of your community members.', 'buddypress' ); ?> <a href="https://vimeo.com/170265313"><?php esc_html_e( 'View the Activity Embeds demo', 'buddypress' ); ?></a></p>
     639
    622640                                <div class="clear"></div>
    623641                        </div>
    624642
    … …  
    625643                        <hr />
    626644
    627645                        <div class="bp-features-section">
     646                                <h3 class="headline-title"><?php esc_html_e( 'Developer Tools', 'buddypress' ); ?></h3>
    628647
    629                                 <div class="feature-section two-col">
    630                                         <div>
    631                                                 <h3 class="feature-title"><?php esc_html_e( 'Post Type Comments Tracking', 'buddypress' ); ?></h3>
    632                                                 <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/admin/images/post-type.png' ); ?>" alt="<?php esc_attr_e( 'Registered post types', 'buddypress' ); ?>">
    633                                                 <p><?php esc_html_e( 'New Activity functions help you track post type comments in sync with the Blogs component when activated.', 'buddypress' ); ?></p>
    634                                         </div>
    635                                         <div class="last-feature">
    636                                                 <h3 class="feature-title"><?php esc_html_e( 'Twenty Twelve Companion Stylesheet', 'buddypress' ); ?></h3>
    637                                                 <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/admin/images/twentytwelve.png' ); ?>" alt="<?php esc_attr_e( 'BuddyPress styles Twenty Twelve', 'buddypress' ); ?>">
    638                                                 <p><?php esc_html_e( 'BuddyPress components never looked so fine as they do now in the Twenty Twelve theme.', 'buddypress' ); ?></p>
    639                                         </div>
     648                                <div class="bp-feature">
     649                                        <h4 class="feature-title"><?php esc_html_e( 'Custom Front Page for Member Profile ', 'buddypress' ); ?></h4>
     650                                        <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/admin/images/user-frontpage.png' ); ?>" alt="<?php esc_attr_e( 'A member custom front page using widgets.', 'buddypress' ); ?>">
     651                                        <p><?php esc_html_e( 'Theme or plugin developers can add new template files to customize specific or all member profile pages for their custom communities.', 'buddypress' ); ?> <a href="https://bpdevel.wordpress.com/2016/05/24/custom-front-pages-for-your-users-profiles/"><?php esc_html_e( 'Read all about this new feature.', 'buddypress' ); ?></a></p>
    640652                                </div>
    641653
    642                                 <div class="feature-section two-col">
    643                                         <div>
    644                                                 <h3 class="feature-title"><?php esc_html_e( 'Support for emoji', 'buddypress' ); ?></h3>
    645                                                 <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/admin/images/emoji-feature.png' ); ?>" alt="<?php esc_attr_e( 'Fun with emoji', 'buddypress' ); ?>">
    646                                                 <p><?php esc_html_e( 'Have fun and be merry! You can now use emoji in activity updates, messages, and group descriptions.', 'buddypress' ); ?></p>
     654                                <div class="bp-feature opposite">
     655                                        <h4 class="feature-title"><?php esc_html_e( 'Group Types API', 'buddypress' ); ?></h4>
     656                                        <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/admin/images/group-type-pop.png' ); ?>" alt="<?php esc_attr_e( 'Group types metabox in Groups admin page.', 'buddypress' ); ?>">
     657                                        <p><?php esc_html_e( 'Group Types allow plugin developers to register arbitrary group categorizations, and assign one or more of these types to a given group.', 'buddypress' ); ?> <a href="#"><?php esc_html_e( 'Learn how to set up Group Types.', 'buddypress' ); ?></a></p>
     658                                </div>
    647659
    648                                         </div>
    649                                         <div class="last-feature">
    650                                                 <h3 class="feature-title"><?php esc_html_e( 'Autolink Settings for Profile Fields', 'buddypress' ); ?></h3>
    651                                                 <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/admin/images/autolink-feature.png' ); ?>" alt="<?php esc_attr_e( 'Autolink settings in the profile fields panel', 'buddypress' ); ?>">
    652                                                 <p><?php _e( 'Administrators can enable or disable autolink settings for each new profile field type.', 'buddypress' ); ?></p>
    653                                         </div>
     660                                <div class="bp-feature">
     661                                        <h4 class="feature-title"><?php esc_html_e( 'Stylesheets for Twenty Eleven and Twenty Ten', 'buddypress' ); ?></h4>
     662                                        <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/admin/images/default-themes.png' ); ?>" alt="<?php esc_attr_e( 'Styled BuddyPress components in Twenty Eleven and Twenty Ten', 'buddypress' ); ?>">
     663                                        <p><?php esc_html_e( 'Introducing more ways for theme developers to style BuddyPress components from mobile to desktop as implemented in the Twenty Ten and Twenty Eleven themes.', 'buddypress' ); ?></p>
    654664                                </div>
    655 
    656665                        </div>
    657666
    658                         <div class="changelog">
     667                        <div class="bp-changelog-section">
    659668                                <h3 class="changelog-title"><?php esc_html_e( 'Under The Hood', 'buddypress' ); ?></h3>
    660669
    661                                 <div class="feature-section col two-col">
     670                                <div class="bp-changelog col two-col">
    662671                                        <div>
     672                                                <h4 class="title"><?php esc_html_e( 'New Navigation API', 'buddypress' ); ?></h4>
     673                                                <p><?php esc_html_e( 'The member and group navigation system has been totally rewritten, making it easier than ever to customize BuddyPress nav items.', 'buddypress' ); ?> <a href="https://buddypress.trac.wordpress.org/changeset/10745"><?php esc_html_e( 'Read the informative commit message.', 'buddypress' ); ?></a></p>
    663674                                                <h4 class="title"><?php esc_html_e( 'Localization Improvements', 'buddypress' ); ?></h4>
    664                                                 <p><?php esc_html_e( 'We continue to improve on localization for translation editors so that BuddyPress will be available for everyone in their own language.', 'buddypress' ); ?></p>
    665                                                 <h4 class="title"><?php esc_html_e( 'Accessibility Upgrades', 'buddypress' ); ?></h4>
    666                                                 <p><?php esc_html_e( 'Continued improvements in the frontend and backend to make BuddyPress usable for everyone.', 'buddypress' ); ?></p>
     675                                                <p><?php esc_html_e( 'Improved localization strings and comments help translators do their much-appreciated work: making BuddyPress available in many languages.', 'buddypress' ); ?></p>
     676                                                <h4 class="title"><?php esc_html_e( 'Notifications Updates', 'buddypress' ); ?></h4>
     677                                                <p><?php esc_html_e( 'Adjustments for the notifications component allow members to receive timely updates from all relevant site activities.', 'buddypress' ); ?></p>
    667678                                        </div>
    668679
    669680                                        <div class="last-feature">
    670                                                 <h4 class="title"><?php esc_html_e( 'Enhanced Multisite Support', 'buddypress' ); ?></h4>
    671                                                 <p><?php esc_html_e( 'BuddyPress is already primed for all multisite configurations available. We just made it better.', 'buddypress' ); ?></p>
     681                                                <h4 class="title"><?php esc_html_e( 'Performance Improvements', 'buddypress' ); ?></h4>
     682                                                <p><?php esc_html_e( 'Class autoloading reduces the memory needed to run BuddyPress on your server. Improved caching strategies for group membership statuses mean fewer round trips to your overworked database server.', 'buddypress' ); ?></p>
     683                                                <h4 class="title"><?php esc_html_e( 'Accessibility Upgrades', 'buddypress' ); ?></h4>
     684                                                <p><?php esc_html_e( 'Continued improvements help make BuddyPress usable for everyone on the back end and front end screens &#40;and on more devices&#41;.', 'buddypress' ); ?></p>
    672685                                                <h4 class="title"><?php esc_html_e( 'Developer Reference', 'buddypress' ); ?></h4>
    673686                                                <p><?php esc_html_e( 'Regular updates to inline code documentation make it easier for developers to understand how BuddyPress works.', 'buddypress' ); ?></p>
    674687                                        </div>
    … …  
    676689
    677690                        </div>
    678691
    679                         <p><?php _ex( 'Learn more:', 'About screen, website links', 'buddypress' ); ?> <a href="https://buddypress.org/blog/"><?php _ex( 'News', 'About screen, link to project blog', 'buddypress' ); ?></a> &bullet; <a href="https://buddypress.org/support/"><?php _ex( 'Support', 'About screen, link to support site', 'buddypress' ); ?></a> &bullet; <a href="https://codex.buddypress.org/"><?php _ex( 'Documentation', 'About screen, link to documentation', 'buddypress' ); ?></a> &bullet; <a href="https://bpdevel.wordpress.com/"><?php _ex( 'Development Blog', 'About screen, link to development blog', 'buddypress' ); ?></a></p>
     692                        <div class="bp-assets">
     693                                <p><?php _ex( 'Learn more:', 'About screen, website links', 'buddypress' ); ?> <a href="https://buddypress.org/blog/"><?php _ex( 'News', 'About screen, link to project blog', 'buddypress' ); ?></a> &bullet; <a href="https://buddypress.org/support/"><?php _ex( 'Support', 'About screen, link to support site', 'buddypress' ); ?></a> &bullet; <a href="https://codex.buddypress.org/"><?php _ex( 'Documentation', 'About screen, link to documentation', 'buddypress' ); ?></a> &bullet; <a href="https://bpdevel.wordpress.com/"><?php _ex( 'Development Blog', 'About screen, link to development blog', 'buddypress' ); ?></a></p>
    680694
    681                         <p><?php _ex( 'Twitter:', 'official Twitter accounts:', 'buddypress' ); ?> <a href="https://twitter.com/buddypress/"><?php _ex( 'BuddyPress', '@buddypress twitter account name', 'buddypress' ); ?></a> &bullet; <a href="https://twitter.com/bptrac/"><?php _ex( 'Trac', '@bptrac twitter account name', 'buddypress' ); ?></a> &bullet; <a href="https://twitter.com/buddypressdev/"><?php _ex( 'Development', '@buddypressdev twitter account name', 'buddypress' ); ?></a></p>
     695                                <p><?php _ex( 'Twitter:', 'official Twitter accounts:', 'buddypress' ); ?> <a href="https://twitter.com/buddypress/"><?php _ex( 'BuddyPress', '@buddypress twitter account name', 'buddypress' ); ?></a> &bullet; <a href="https://twitter.com/bptrac/"><?php _ex( 'Trac', '@bptrac twitter account name', 'buddypress' ); ?></a> &bullet; <a href="https://twitter.com/buddypressdev/"><?php _ex( 'Development', '@buddypressdev twitter account name', 'buddypress' ); ?></a></p>
     696                        </div>
    682697
    683698                </div>
    684699