Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Ticket/12164 CSS-ing of mini contact buttons #2006

Closed
wants to merge 3 commits into from

2 participants

@neufke

Created a css version of the mini contact buttons with the use of language vars and no fixed width or height

neufke added some commits
@neufke neufke [develop] 83073fe
@neufke neufke Merge branch 'develop' of https://github.com/phpbb/phpbb into develop 78e3a8b
@neufke neufke [ticket/12164] CSS-ing of mini contact buttons
Created a css version of the mini contact buttons with the use of language vars and no fixed width of height.

PHPBB3-12164
324cc9d
@nickvergessen
Collaborator

Closing as they need soem rearangement anyway.
See http://tracker.phpbb.com/browse/PHPBB3-12265 for more details

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 1, 2014
  1. @neufke

    [develop]

    neufke authored
Commits on Feb 3, 2014
  1. @neufke
Commits on Feb 4, 2014
  1. @neufke

    [ticket/12164] CSS-ing of mini contact buttons

    neufke authored
    Created a css version of the mini contact buttons with the use of language vars and no fixed width of height.
    
    PHPBB3-12164
This page is out of date. Refresh to see the latest.
View
2  phpBB/includes/acp/acp_styles.php
@@ -1164,7 +1164,7 @@ protected function get_users()
{
$style_count[$row['user_style']] = $row['style_count'];
}
- $this->db->sql_freeresult($result);
+ $this->db->sql_freeresult($result);
return $style_count;
}
View
4 phpBB/styles/prosilver/template/ucp_pm_viewmessage.html
@@ -35,8 +35,8 @@
<!-- IF U_PM or U_EMAIL or U_WWW or U_MSN or U_ICQ or U_YIM or U_AIM or U_JABBER -->
<dd>
- <ul class="profile-icons">
- <!-- IF U_PM --><li class="pm-icon"><a href="{U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
+ <ul class="contact-icons">
+ <!-- IF U_PM --><li class="pm-icon"><a href="{U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PM}</span></a></li><!-- ENDIF -->
<!-- IF U_EMAIL --><li class="email-icon"><a href="{U_EMAIL}" title="{L_SEND_EMAIL_USER} {MESSAGE_AUTHOR}"><span>{L_SEND_EMAIL_USER} {MESSAGE_AUTHOR}</span></a></li><!-- ENDIF -->
<!-- IF U_WWW --><li class="web-icon"><a href="{U_WWW}" title="{L_VISIT_WEBSITE}{L_COLON} {U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
<!-- IF U_MSN --><li class="msnm-icon"><a href="{U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
View
4 phpBB/styles/prosilver/template/viewtopic_body.html
@@ -145,8 +145,8 @@
<!-- IF not S_IS_BOT -->
<!-- IF postrow.U_PM or postrow.U_EMAIL or postrow.U_WWW or postrow.U_MSN or postrow.U_ICQ or postrow.U_YIM or postrow.U_AIM or postrow.U_JABBER -->
<dd>
- <ul class="profile-icons">
- <!-- IF postrow.U_PM --><li class="pm-icon"><a href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
+ <ul class="contact-icons">
+ <!-- IF postrow.U_PM --><li class="pm-icon"><a href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PM}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_EMAIL --><li class="email-icon"><a href="{postrow.U_EMAIL}" title="{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}"><span>{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_WWW --><li class="web-icon"><a href="{postrow.U_WWW}" title="{L_VISIT_WEBSITE}{L_COLON} {postrow.U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_MSN --><li class="msnm-icon"><a href="{postrow.U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
View
223 phpBB/styles/prosilver/theme/buttons.css
@@ -235,17 +235,6 @@ ul.profile-icons.responsive a.responsive-menu-link:before {
max-width: 40%;
}
-/* Profile & navigation icons */
-.email-icon, .email-icon a { background: none top left no-repeat; }
-.aim-icon, .aim-icon a { background: none top left no-repeat; }
-.yahoo-icon, .yahoo-icon a { background: none top left no-repeat; }
-.web-icon, .web-icon a { background: none top left no-repeat; }
-.msnm-icon, .msnm-icon a { background: none top left no-repeat; }
-.icq-icon, .icq-icon a { background: none top left no-repeat; }
-.jabber-icon, .jabber-icon a { background: none top left no-repeat; }
-.pm-icon, .pm-icon a { background: none top left no-repeat; }
-.quote-icon, .quote-icon a { background: none top left no-repeat; }
-
/* Moderator icons */
.report-icon, .report-icon a { background: none top left no-repeat; }
.warn-icon, .warn-icon a { background: none top left no-repeat; }
@@ -254,20 +243,6 @@ ul.profile-icons.responsive a.responsive-menu-link:before {
.info-icon, .info-icon a { background: none top left no-repeat; }
/* Set profile icon dimensions */
-ul.profile-icons li.email-icon { width: 20px; height: 20px; }
-ul.profile-icons li.aim-icon { width: 20px; height: 20px; }
-ul.profile-icons li.yahoo-icon { width: 20px; height: 20px; }
-ul.profile-icons li.web-icon { width: 20px; height: 20px; }
-ul.profile-icons li.msnm-icon { width: 20px; height: 20px; }
-ul.profile-icons li.icq-icon { width: 20px; height: 20px; }
-ul.profile-icons li.jabber-icon { width: 20px; height: 20px; }
-ul.profile-icons li.pm-icon { width: 28px; height: 20px; }
-ul.profile-icons li.quote-icon { width: 54px; height: 20px; }
-ul.profile-icons li.report-icon { width: 20px; height: 20px; }
-ul.profile-icons li.edit-icon { width: 42px; height: 20px; }
-ul.profile-icons li.delete-icon { width: 20px; height: 20px; }
-ul.profile-icons li.info-icon { width: 20px; height: 20px; }
-ul.profile-icons li.warn-icon { width: 20px; height: 20px; }
ul.profile-icons a.responsive-menu-link { width: 20px; height: 20px; }
/* Fix profile icon default margins */
@@ -275,3 +250,201 @@ ul.profile-icons li.edit-icon { margin: 0 0 0 3px; }
ul.profile-icons li.quote-icon { margin: 0 0 0 10px; }
ul.profile-icons li.info-icon, ul.profile-icons li.report-icon { margin: 0 3px 0 0; }
+/* mini contact buttons
+--------------------------------------------- */
+
+ul.contact-icons {
+ float: left;
+ list-style: none;
+ margin-top: 10px;
+}
+
+ul.contact-icons li {
+ float: left;
+ width: auto;
+ height: auto;
+ margin: 2px 5px 0 0;
+}
+
+ul.contact-icons li span {
+ display: none;
+}
+
+ul.contact-icons li a {
+ display: inline-block;
+ font-family: 'Noto Sans', sans-serif, Verdana, Arial, Helvetica;
+ font-size: 8px;
+ line-height: 10px;
+ height: 16px;
+ text-decoration: none !important;
+ outline-style: none !important;
+ vertical-align: bottom;
+ white-space: nowrap;
+ border: 1px solid #b6b6b6;
+ border-radius: 3px;
+ padding: 1px 5px 1px 8px;
+ position: relative;
+ background: #e5e4e0;
+ /*background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTRlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2NjYzgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);*/
+ background: -moz-linear-gradient(top, #e5e4e0 0%, #ccccc8 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e4e0), color-stop(100%,#ccccc8));
+ background: -webkit-linear-gradient(top, #e5e4e0 0%,#ccccc8 100%);
+ background: -o-linear-gradient(top, #e5e4e0 0%,#ccccc8 100%);
+ background: -ms-linear-gradient(top, #e5e4e0 0%,#ccccc8 100%);
+ background: linear-gradient(to bottom, #e5e4e0 0%,#ccccc8 100%);
+ -m-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e4e0', endColorstr='#ccccc8',GradientType=0 );
+ color: #253f61 !important;
+}
+
+ul.contact-icons li a:hover {
+ border-color: #ccccc8;
+ background: #b6b6b6;
+ /*background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjY2NjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk4JSIgc3RvcC1jb2xvcj0iI2U1ZTRlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);*/
+ background: -moz-linear-gradient(top, #ccccc8 0%, #e5e4e0 98%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccccc8), color-stop(98%,#e5e4e0));
+ background: -webkit-linear-gradient(top, #ccccc8 0%,#e5e4e0 98%);
+ background: -o-linear-gradient(top, #ccccc8 0%,#e5e4e0 98%);
+ background: -ms-linear-gradient(top, #ccccc8 0%,#e5e4e0 98%);
+ background: linear-gradient(to bottom, #ccccc8 0%,#e5e4e0 98%);
+ -m-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccccc8', endColorstr='#e5e4e0',GradientType=0 );
+ color: #BC2A4D !important;
+}
+
+ul.contact-icons li a:after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 0px;
+ width: 17px;
+ height: 17px;
+ margin-top: 0px;
+ background: transparent 0 0 no-repeat;
+ background-image: url("images/mini-contacts.png");
+}
+
+/* mini contact button images */
+ul.contact-icons li.pm-icon a {
+ width: 25px;
+ padding: 1px 4px 2px 0;
+}
+
+ul.contact-icons li.pm-icon span {
+ display: block;
+ margin: 4px 0 5px 13px;
+}
+
+ul.contact-icons li.pm-icon a:after {
+ background-position: -134px 0px;
+ left: 3px;
+ margin-top: -8px;
+}
+
+ul.contact-icons li.pm-icon a:hover:after {
+ background-position: -134px -20px;
+}
+
+ul.contact-icons li.email-icon a {
+ width: 18px;
+ padding: 1px 4px 2px 0;
+}
+
+ul.contact-icons li.email-icon a:after {
+ background-position: -112px 0px;
+ left: 3px;
+ margin-top: -8px;
+}
+
+ul.contact-icons li.email-icon a:hover:after {
+ background-position: -112px -20px;
+}
+
+ul.contact-icons li.web-icon a {
+ width: 18px;
+ padding: 1px 4px 2px 0;
+}
+
+ul.contact-icons li.web-icon a:after {
+ background-position: -1px 0px;
+ left: 3px;
+ margin-top: -8px;
+}
+
+ul.contact-icons li.web-icon a:hover:after {
+ background-position: -1px -20px;
+}
+
+ul.contact-icons li.msnm-icon a {
+ width: 18px;
+ padding: 1px 4px 2px 0;
+}
+
+ul.contact-icons li.msnm-icon a:after {
+ background-position: -45px 0px;
+ left: 3px;
+ margin-top: -8px;
+}
+
+ul.contact-icons li.msnm-icon a:hover:after {
+ background-position: -45px -20px;
+}
+
+ul.contact-icons li.icq-icon a {
+ width: 18px;
+ padding: 1px 4px 2px 0;
+}
+
+ul.contact-icons li.icq-icon a:after {
+ background-position: -24px 0px;
+ left: 3px;
+ margin-top: -8px;
+}
+
+ul.contact-icons li.icq-icon a:hover:after {
+ background-position: -24px -20px;
+}
+
+ul.contact-icons li.yahoo-icon a {
+ width: 18px;
+ padding: 1px 4px 2px 0;
+}
+
+ul.contact-icons li.yahoo-icon a:after {
+ background-position: -67px 0px;
+ left: 3px;
+ margin-top: -8px;
+}
+
+ul.contact-icons li.yahoo-icon a:hover:after {
+ background-position: -67px -20px;
+}
+
+ul.contact-icons li.aim-icon a {
+ width: 18px;
+ padding: 1px 4px 2px 0;
+}
+
+ul.contact-icons li.aim-icon a:after {
+ background-position: -90px 0px;
+ left: 3px;
+ margin-top: -8px;
+}
+
+ul.contact-icons li.aim-icon a:hover:after {
+ background-position: -90px -20px;
+}
+
+ul.contact-icons li.jabber-icon a {
+ width: 18px;
+ padding: 1px 4px 2px 0;
+}
+
+ul.contact-icons li.jabber-icon a:after {
+ background-position: -150px 0px;
+ left: 3px;
+ margin-top: -8px;
+}
+
+ul.contact-icons li.jabber-icon a:hover:after {
+ background-position: -150px -20px;
+}
View
12 phpBB/styles/prosilver/theme/colours.css
@@ -737,18 +737,6 @@ a.sendemail {
.icon-download { background-image: url("./images/icon_download.gif"); }
.icon-mark { background-image: url("./images/icon_mark.gif"); }
-/* Profile & navigation icons */
-.email-icon, .email-icon a { background-image: url("./images/icon_contact_email.gif"); }
-.aim-icon, .aim-icon a { background-image: url("./images/icon_contact_aim.gif"); }
-.yahoo-icon, .yahoo-icon a { background-image: url("./images/icon_contact_yahoo.gif"); }
-.web-icon, .web-icon a { background-image: url("./images/icon_contact_www.gif"); }
-.msnm-icon, .msnm-icon a { background-image: url("./images/icon_contact_msnm.gif"); }
-.icq-icon, .icq-icon a { background-image: url("./images/icon_contact_icq.gif"); }
-.jabber-icon, .jabber-icon a { background-image: url("./images/icon_contact_jabber.gif"); }
-.pm-icon, .pm-icon a { background-image: url("./en/icon_contact_pm.gif"); }
-.quote-icon, .quote-icon a { background-image: url("./en/icon_post_quote.gif"); }
-ul.profile-icons.responsive a.responsive-menu-link { background-image: url("./images/icon_post_menu.png"); }
-
/* Moderator icons */
.report-icon, .report-icon a { background-image: url("./images/icon_post_report.gif"); }
.edit-icon, .edit-icon a { background-image: url("./en/icon_post_edit.gif"); }
View
BIN  phpBB/styles/prosilver/theme/en/icon_contact_pm.gif
Deleted file not rendered
View
27 phpBB/styles/prosilver/theme/en/stylesheet.css
@@ -5,30 +5,3 @@ ul.profile-icons li.edit-icon { width: 42px; height: 20px; }
/* Online image */
.online { background-image: url("./icon_user_online.gif"); }
-
-/* Icon images */
-.pm-icon, .pm-icon a { background-image: url("./icon_contact_pm.gif"); }
-.quote-icon, .quote-icon a { background-image: url("./icon_post_quote.gif"); }
-.edit-icon, .edit-icon a { background-image: url("./icon_post_edit.gif"); }
-
-/* EN Language Pack */
-.imageset.icon_contact_pm {
- background-image: url("./icon_contact_pm.gif");
- padding-left: 28px;
- padding-top: 20px;
-}
-.imageset.icon_post_edit {
- background-image: url("./icon_post_edit.gif");
- padding-left: 42px;
- padding-top: 20px;
-}
-.imageset.icon_post_quote {
- background-image: url("./icon_post_quote.gif");
- padding-left: 54px;
- padding-top: 20px;
-}
-.imageset.icon_user_online {
- background-image: url("./icon_user_online.gif");
- padding-left: 58px;
- padding-top: 58px;
-}
View
BIN  phpBB/styles/prosilver/theme/images/icon_contact_aim.gif
Deleted file not rendered
View
BIN  phpBB/styles/prosilver/theme/images/icon_contact_email.gif
Deleted file not rendered
View
BIN  phpBB/styles/prosilver/theme/images/icon_contact_icq.gif
Deleted file not rendered
View
BIN  phpBB/styles/prosilver/theme/images/icon_contact_jabber.gif
Deleted file not rendered
View
BIN  phpBB/styles/prosilver/theme/images/icon_contact_msnm.gif
Deleted file not rendered
View
BIN  phpBB/styles/prosilver/theme/images/icon_contact_www.gif
Deleted file not rendered
View
BIN  phpBB/styles/prosilver/theme/images/icon_contact_yahoo.gif
Deleted file not rendered
View
BIN  phpBB/styles/prosilver/theme/images/mini-contacts.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Something went wrong with that request. Please try again.