Ticket #1664: html_and_css_changes.html

<!-- Add a new "Translations" tab -->
<div id="content-tabs" class="info-group">
        <ul>
                <li class="inactive">
                        <a href="https://profiles.wordpress.org/audrasjb#content-about">About Me</a>
                </li>
                                                
                <li class="inactive">
                        <a href="https://profiles.wordpress.org/audrasjb#content-activity">Activity</a>
                </li>
                                
                <li class="inactive">
                        <a href="https://profiles.wordpress.org/audrasjb#content-plugins">Plugins</a>
                </li>
                <!-- THIS ONE IS NEW -->                        
                <li class="inactive">
                        <a href="https://profiles.wordpress.org/audrasjb#content-translations">Translations</a>
                </li>
        </ul>
</div> <!-- #content-tabs -->


<!--  "Translations" panel content -->
<div id="content-translations" class="info-group inactive">
        
        <div class="translations translations-gte-locales">
                <h3>General Translation Editor of the following locales</h3>
                <ul>
                        <li>
                                <a href="https://profiles.wordpress.org/audrasjb">French (France) – fr_FR</a>
                        </li>
                </ul>
        </div>

        <div class="translations translations-pte-plugins">
                <h3>Project Translation Editor of the following plugins</h3>
                <ul>
                        <li>
                                <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">
                                        <div class="plugin-icon" id="plugin-icon-abbreviation-button-for-tinymce"></div>                                                                                
                                </a>
                                <h3>
                                        <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">Abbreviation button for TinyMCE</a>
                                </h3>
                        </li>
                        <li>
                                <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">
                                        <div class="plugin-icon" id="plugin-icon-abbreviation-button-for-tinymce"></div>                                                                                
                                </a>
                                <h3>
                                        <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">Abbreviation button for TinyMCE (fr_FR)</a>
                                </h3>
                        </li>
                        <li>
                                <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">
                                        <div class="plugin-icon" id="plugin-icon-abbreviation-button-for-tinymce"></div>                                                                                
                                </a>
                                <h3>
                                        <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">Abbreviation button for TinyMCE (fr_FR)</a>
                                </h3>
                        </li>
                        <li>
                                <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">
                                        <div class="plugin-icon" id="plugin-icon-abbreviation-button-for-tinymce"></div>                                                                                
                                </a>
                                <h3>
                                        <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">Abbreviation button for TinyMCE (fr_FR)</a>
                                </h3>
                        </li>
                </ul>
        </div>
                                                        
        <div class="translations translations-pte-themes">
                <h3>Project Translation Editor of the following themes</h3>
                <ul>
                        <li>
                                <h3>
                                        <a href="https://wordpress.org/themes/maker">
                                                <img width="200" height="150" src="./WordPress › Profiles » audrasjb_files/screenshot.png" alt="Maker"><br>
                                                Maker                                                                                   
                                        </a>
                                </h3>
                                <p class="user-rating">My rating</p>
                                <div class="wporg-ratings" title="5 out of 5 stars" style="color:#ffb900;"><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span>
                                </div>                                                                                                                                                  
                        </li>
                </ul>
        </div>
        
</div>

<style>
/* CSS rules to add/edit */
#content-favorites .favorites > h3:before, #content-translations .translations > h3:before, ul#activity-list li:before {
        font: normal 20px/1 'dashicons';
        float: left;
        margin-left: -25px;
        margin-top: 0;
        content: "\f111";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}
#content-translations .translations > h3 {
        font-size: 16px;
        margin-bottom: 1em;
        margin-left: 25px;
        color: #666;
}
#content-translations .translations > ul {
        margin-bottom: 2em;
}
#content-translations .translations-gte-locales > h3:before {
        content: "\f326";
}
#content-translations .translations-pte-plugins > h3:before {
        content: "\f106";
}
#content-translations .translations-pte-themes > h3:before {
        content: "\f100";
}
/**/
.main-plugins,
.main-themes
.main-translations {
        clear: both;
}
        .translations-pte-plugins ul li {
                display: inline-block;
                padding-right: 30px;
                width: 215px;
                min-height: 95px;
                margin-bottom: 15px;
                vertical-align: top;
                line-height: 1.4;
        }

                .translations-pte-plugins ul li h3 {
                        margin: 2px 0 4px 0;
                }

.translations-pte-themes ul li {
                display: table-cell;
                float:left;
                padding-right: 25px;
                margin-right:0px;
                width: 360px;
                margin-bottom:40px;
        }

                .translations-pte-themes h3 {
                        margin-top: 4px;
                }
</style>