WordPress.org

Making WordPress.org

Ticket #1664: html_and_css_changes.html

File html_and_css_changes.html, 4.5 KB (added by audrasjb, 2 years ago)

HTML and CSS changes

Line 
1<!-- Add a new "Translations" tab -->
2<div id="content-tabs" class="info-group">
3        <ul>
4                <li class="inactive">
5                        <a href="https://profiles.wordpress.org/audrasjb#content-about">About Me</a>
6                </li>
7                                               
8                <li class="inactive">
9                        <a href="https://profiles.wordpress.org/audrasjb#content-activity">Activity</a>
10                </li>
11                               
12                <li class="inactive">
13                        <a href="https://profiles.wordpress.org/audrasjb#content-plugins">Plugins</a>
14                </li>
15                <!-- THIS ONE IS NEW -->                       
16                <li class="inactive">
17                        <a href="https://profiles.wordpress.org/audrasjb#content-translations">Translations</a>
18                </li>
19        </ul>
20</div> <!-- #content-tabs -->
21
22
23<!--  "Translations" panel content -->
24<div id="content-translations" class="info-group inactive">
25       
26        <div class="translations translations-gte-locales">
27                <h3>General Translation Editor of the following locales</h3>
28                <ul>
29                        <li>
30                                <a href="https://profiles.wordpress.org/audrasjb">French (France) – fr_FR</a>
31                        </li>
32                </ul>
33        </div>
34
35        <div class="translations translations-pte-plugins">
36                <h3>Project Translation Editor of the following plugins</h3>
37                <ul>
38                        <li>
39                                <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">
40                                        <div class="plugin-icon" id="plugin-icon-abbreviation-button-for-tinymce"></div>                                                                               
41                                </a>
42                                <h3>
43                                        <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">Abbreviation button for TinyMCE</a>
44                                </h3>
45                        </li>
46                        <li>
47                                <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">
48                                        <div class="plugin-icon" id="plugin-icon-abbreviation-button-for-tinymce"></div>                                                                               
49                                </a>
50                                <h3>
51                                        <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">Abbreviation button for TinyMCE (fr_FR)</a>
52                                </h3>
53                        </li>
54                        <li>
55                                <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">
56                                        <div class="plugin-icon" id="plugin-icon-abbreviation-button-for-tinymce"></div>                                                                               
57                                </a>
58                                <h3>
59                                        <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">Abbreviation button for TinyMCE (fr_FR)</a>
60                                </h3>
61                        </li>
62                        <li>
63                                <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">
64                                        <div class="plugin-icon" id="plugin-icon-abbreviation-button-for-tinymce"></div>                                                                               
65                                </a>
66                                <h3>
67                                        <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">Abbreviation button for TinyMCE (fr_FR)</a>
68                                </h3>
69                        </li>
70                </ul>
71        </div>
72                                                       
73        <div class="translations translations-pte-themes">
74                <h3>Project Translation Editor of the following themes</h3>
75                <ul>
76                        <li>
77                                <h3>
78                                        <a href="https://wordpress.org/themes/maker">
79                                                <img width="200" height="150" src="./WordPress › Profiles » audrasjb_files/screenshot.png" alt="Maker"><br>
80                                                Maker                                                                                   
81                                        </a>
82                                </h3>
83                                <p class="user-rating">My rating</p>
84                                <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>
85                                </div>                                                                                                                                                 
86                        </li>
87                </ul>
88        </div>
89       
90</div>
91
92<style>
93/* CSS rules to add/edit */
94#content-favorites .favorites > h3:before, #content-translations .translations > h3:before, ul#activity-list li:before {
95        font: normal 20px/1 'dashicons';
96        float: left;
97        margin-left: -25px;
98        margin-top: 0;
99        content: "\f111";
100        -webkit-font-smoothing: antialiased;
101        -moz-osx-font-smoothing: grayscale;
102}
103#content-translations .translations > h3 {
104        font-size: 16px;
105        margin-bottom: 1em;
106        margin-left: 25px;
107        color: #666;
108}
109#content-translations .translations > ul {
110        margin-bottom: 2em;
111}
112#content-translations .translations-gte-locales > h3:before {
113        content: "\f326";
114}
115#content-translations .translations-pte-plugins > h3:before {
116        content: "\f106";
117}
118#content-translations .translations-pte-themes > h3:before {
119        content: "\f100";
120}
121/**/
122.main-plugins,
123.main-themes
124.main-translations {
125        clear: both;
126}
127        .translations-pte-plugins ul li {
128                display: inline-block;
129                padding-right: 30px;
130                width: 215px;
131                min-height: 95px;
132                margin-bottom: 15px;
133                vertical-align: top;
134                line-height: 1.4;
135        }
136
137                .translations-pte-plugins ul li h3 {
138                        margin: 2px 0 4px 0;
139                }
140
141.translations-pte-themes ul li {
142                display: table-cell;
143                float:left;
144                padding-right: 25px;
145                margin-right:0px;
146                width: 360px;
147                margin-bottom:40px;
148        }
149
150                .translations-pte-themes h3 {
151                        margin-top: 4px;
152                }
153</style>