Quantcast
Channel: MyBB Community Forums - Tutorials
Viewing all articles
Browse latest Browse all 690

[Tutorial] Scalable postbit buttons

$
0
0
Simple example:
[Image: t7gaoi.png]


in global.css comment out for testing purposes:
Code:
#container {
/*    min-width: 990px; */
}

.wrapper {
/*    min-width: 970px; */
}


Now...,


Edit: headerinclude

Add:

Code:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


Edit: css3.css

add:

Code:
button, input.button, input.textbox, input.invalid_field, input.valid_field, select, textarea, .editor_control_bar, blockquote, .codeblock, fieldset, .pm_alert, .red_alert, .popup_menu, .postbit_buttons > a, a.button {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px
}


Edit: global.css

Code:
@media (max-width:768px)  {
.post_controls {
    text-align: center;
}
.postbit_buttons a span {
    font-size: 0px;
}
.postbit_buttons a span:before {
    margin: 0;
}
.postbit_buttons > a:link, .postbit_buttons > a:hover, .postbit_buttons > a:visited, .postbit_buttons > a:active {
    padding: 3px 7px;
}    
}

.post_controls {
    clear: both;
    background: #f5f5f5;
    padding: 5px;
    overflow: hidden
}
.postbit_buttons > a:link, .postbit_buttons > a:hover, .postbit_buttons > a:visited, .postbit_buttons > a:active, .postbit_button {
    display: inline-block;
    padding: 2px 5px;
    margin: 2px;
    font-size: 11px;
    background: url(images/buttons_bg.png) repeat-x scroll 0% 0% #EEE;
    border: 1px solid #CCC;
    color: #555
}
.postbit_button {
    padding: 7px 10px;
    border-radius: 3px;
    color: #333 !important
}
.postbit_buttons > a:hover, .postbit_button:hover {
    border-color: #bbb
}
.postbit_buttons a span:before {
    content: "";
    display: inline-block;
    font-family: FontAwesome;
    font-weight: normal;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 5px;
    font-size: 12px
}
.postbit_buttons a.postbit_find span:before {
    content: "\f002"
}
.postbit_buttons a.postbit_reputation_add span:before {
    content: "\f067"
}
.postbit_buttons a.postbit_email span:before {
    content: "\f0e0"
}
.postbit_buttons a.postbit_website span:before {
    content: "\f0ac"
}
.postbit_buttons a.postbit_pm span:before {
    content: "\f199"
}
.postbit_buttons a.postbit_quote span:before {
    content: "\f10e"
}
.postbit_buttons a.postbit_multiquote span:before {
    content: "\f055"
}
.postbit_buttons a.postbit_multiquote_on span:before {
    content: "\f056";
    color: #DB1304
}
.postbit_buttons a.postbit_edit span:before {
    content: "\f044"
}
.postbit_buttons a.postbit_qdelete span:before {
    content: "\f00d"
}
.postbit_buttons a.postbit_qrestore span:before {
    content: "\f067"
}
.postbit_buttons a.postbit_report span:before {
    content: "\f0a1"
}
.postbit_buttons a.postbit_warn span:before {
    content: "\f0e3"
}
.postbit_buttons a.postbit_purgespammer span:before {
    content: "\f071"
}
.postbit_buttons a.postbit_reply_pm span:before {
    content: "\f112"
}
.postbit_buttons a.postbit_reply_all span:before {
    content: "\f122"
}
.postbit_buttons a.postbit_forward_pm span:before {
    content: "\f064"
}
.postbit_buttons a.postbit_delete_pm span:before {
    content: "\f00d"
}
a.button:link, a.button:hover, a.button:visited, a.button:active {
    background: #555;
    background: -moz-linear-gradient(top, #555 0%, #333 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555), color-stop(100%, #333));
    background: -webkit-linear-gradient(top, #555 0%, #333 100%);
    background: -o-linear-gradient(top, #555 0%, #333 100%);
    background: -ms-linear-gradient(top, #555 0%, #333 100%);
    background: linear-gradient(top, #555 0%, #333 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#555', endColorstr='#333', GradientType=0 );
    color: #fff;
    display: inline-block;
    padding: 4px 8px;
    margin: 2px 2px 6px 2px;
    border: 1px solid #333;
    font-size: 14px
}
a.button.small_button {
    font-size: 13px;
    margin: 0;
    padding: 3px 6px
}
a.button span:before {
    content: "";
    display: inline-block;
    font-family: FontAwesome;
    font-weight: normal;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 5px
}
a.button.new_thread_button span:before {
    content: "\f086"
}
a.button.new_reply_button span:before {
    content: "\f075"
}
a.button.closed_button span:before {
    content: "\f00d"
}
a.button.rate_user_button span:before {
    content: "\f123"
}
a.button.add_buddy_button span:before {
    content: "\f007"
}
a.button.remove_buddy_button span:before {
    content: "\f00d"
}
a.button.add_ignore_button span:before {
    content: "\f1f6"
}
a.button.remove_ignore_button span:before {
    content: "\f0f3"
}
a.button.report_user_button span:before {
    content: "\f0a1"
}

Viewing all articles
Browse latest Browse all 690

Trending Articles