Webboard

Webboard > Wsparcie MyBB > Style, szablony i grafika > Instalacja czcionki
Pełna wersja: Instalacja czcionki
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.

Sabat

26.03.2014, 18:15
wersja skryptu MyBB: 1.6.12
adres forum: www.sabatserv.eu
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Witam wszystkich, chciał bym wrzucić nową czcionkę na forum i ją podmienić z istniejącą, dlatego:
[Obrazek: vyk8kf.jpg]

Polskie znaki są po prostu mniejsze od pozostałych, i nie wygląda to za fajnie, i tu oto sedno sprawy:
Mam 3 czcionki, ale nie wiem która będzie lepsza:
http://polskieczcionki.blogspot.com/2014/02/klinic.html
http://polskieczcionki.blogspot.com/2013...-sans.html
http://polskieczcionki.blogspot.com/2013...-plus.html

Jak macie jakieś własne to piszcie, bo nie wiem która najbardziej będzie pasować do obecnego stylu, ORAZ nie wiem za bardzo jak "zainstalować" taką czcionkę

Ecosse

26.03.2014, 18:18
Łap, tutaj masz wszystko opisane: https://webboard.pl/wiki.php?wasna-czcio...forum.html

SLAVOO

26.03.2014, 18:20
I najlepiej tego używać, bo w kombinacji przez -face nie chcą się wyświetlać polskie znaki na niektórych przeglądarkach.

Sabat

26.03.2014, 18:50
No tak coś nie do końca

na końcu headerinclude dałem:

Kod:
<link href='http://fonts.googleapis.com/css?family=Inconsolata:700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

a w css:

Kod:
body {
    background: #1B1B1B;
    color: #fff;
      font-family: 'Inconsolata', ;
    font-size: 13px;
        margin:0 auto;
    text-align: center; /* IE 5 fix */
    line-height: 1.4;

i coś nie za bardzo działa, w tym linku nie ma praktycznie NIC opisane dokładnie, a w global.css znalazło mi 13 wyników dla
Kod:
font-family:

Tak że dalej nie wiem jak mam to "zainstalować"

Ecosse

26.03.2014, 18:54
Kodu nie dajesz na koniec headerinclude, ale gdzieś na początku. Najlepiej nad:

Kod PHP:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script> 

I do body dodajesz:

Kod PHP:
font-family: 'Inconsolata'; 

Sabat

26.03.2014, 18:56
@UP no to mam, nie wiem czemu miałem
Kod:
font-family: 'Inconsolata', ;

zamiast
Kod:
font-family: 'Inconsolata';
, ale to poszło praktycznie tylko w nagłówek, a reszta forum nope :)

gdzie może się reszta znajdować??

SLAVOO

26.03.2014, 19:00
Kod:
font-family: 'Inconsolata';
Musisz dodać tam gdzie jest obsługa czcionki przez forum w CSS.
Jeśli gdzieś w css będzie inne font-family to "nadpisze" to co Ty dałeś.

Sabat

26.03.2014, 19:15
OK mam tylko jeszcze 1 problem:
zmieniłem wszystko na "Tahoma" czy jakoś tak i jest git, ale
[Obrazek: 7uiop9.jpg]

"Statystyki" nie wiem skąd ale cały czas używają tej starej czcionki, oto global.css:
Kod:
@font-face {
    font-family: 'open_sansregular';
  src: url(images/df/font/OpenSans-Regular-webfont.eot);
src: url(images/df/font/OpenSans-Regular-webfont.eot?#iefix) format('embedded-opentype'),
          url(images/df/font/OpenSans-Regular-webfont.woff) format('woff'),
          url(images/df/font/OpenSans-Regular-webfont.ttf) format('truetype'),
          url(images/df/font/OpenSans-Regular-webfont.svg#open_sansregular) format('svg');
    font-weight: normal;
    font-style: normal;
-webkit-font-smoothing: antialiased;
}

@font-face {
  font-family: 'FontAwesome';
  src: url(images/df/font/fontawesome-webfont.eot);
  src: url(images/df/font/fontawesome-webfont.eot?#iefix) format('embedded-opentype'),
     url(images/df/font/fontawesome-webfont.woff) format('woff'),
     url(images/df/font/fontawesome-webfont.ttf) format('truetype'),
     url(images/df/font/fontawesome-webfont.svg#FontAwesome) format('svg');
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

.wrap {
width: 85%;
    margin:0 auto;
    text-align:left;
}

input#sboxin:focus, input[type="text"], input[type="password"] {
       outline: none;
      border:1px solid #127BAC;
}

#logo {
background: none;
width: 500px;
font-size: 30px;
height: 100px;
line-height: 100px;
margin-left: -16px;
font-weight: 600;
position: absolute;
text-shadow: 0px 1px 0px #185A74;
text-align: left;
}

#logo a, #logo {
opacity: 1;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}

#logo:hover a {
       opacity: 0.8;
       padding-left: 5px;
       color: #127BAC !important;
}

#logo:hover span {
color: #FFF !important;
}

#logo span {
font-weight: 100;
color: #0A9FE4;
}

.header {
color: #FFF;
background: none;
height: 100px;
width: 100%;
padding: 0px 20px;
margin-left: -20px;
}

.headerwrap {
color: #777;
width: 100%;
height: 100px;
margin-top:50px;
}

.topwrap {
color: #FFF;
background: #111;
padding: 0px 20px;
height: 50px;
width: 100%;
margin-left: -20px;
vertical-align: middle;
}

.topwrap1 {
color: #FFF;
background: #111;
height: 50px;
width: 100%;
position: fixed;
top:0;
z-index: 100;
}

body {
    background: #1B1B1B;
    color: #fff;
      font-family: 'Tahoma';
    font-size: 13px;
        margin:0 auto;
    text-align: center; /* IE 5 fix */
    line-height: 1.4;
}

a:link {
    color: #f9f9f9;
    text-decoration: none;
}

a:visited {
    color: #f9f9f9;
    text-decoration: none;
}

a:hover, a:active {
    color: #999;
    text-decoration: none;
}

#container {
width: 85%;
     background: #141414;
         color: #f7f7f7;
    margin: auto auto;
    padding: 20px;
    text-align: left; /* IE 5 fix */
}

#content {
    /* FIX: Make internet explorer wrap correctly */
    width: auto !important;

}

.menu ul {
    color: #000000;
    font-weight: bold;
    text-align: right;
    padding: 4px;
}

.menu ul a:link {
    color: #000000;
    text-decoration: none;
}

.menu ul a:visited {
    color: #000000;
    text-decoration: none;
}

.menu ul a:hover, .menu ul a:active {
    color: #4874a3;
    text-decoration: none;
}

#panel {
    background: #efefef;
    color: #000000;
    font-size: 11px;
    border: 1px solid #D4D4D4;
    padding: 8px;
}

#panel .remember_me input {
    vertical-align: middle;
    margin-top: -1px;
}

table {
    color: #f7f7f7;
      font-family: 'Tahoma';
    font-size: 13px;
}

.tborder {
background: #1A1A1A;
padding: 0;
width: 100%;
margin: auto auto;
border: 1px solid #131313;
border-bottom: none;
}

.thead {
    background: #127BAC;
    color: #ffffff;
        padding: 12px;
}

.thead a:link {
    color: #ffffff;
    text-decoration: none;
}

.thead a:visited {
    color: #ffffff;
    text-decoration: none;
}

.thead a:hover, .thead a:active {
    color: #ffffff;
    text-decoration: none;
}

.tcat {
background: #0F0F0F;
color: #C5C5C5;
text-shadow: 0 1px 1px #020202;
padding: 5px 10px;
font-size: 12px;
font-style: normal;
}

.tcat a:link {
    color: #f7f7f7;
}

.tcat a:visited {
    color: #f7f7f7;
}

.tcat a:hover, .tcat a:active {
    color: #777;
}

.trow1 {
background: #1B1B1B;
padding: 15px;
}

.trow3 {
border-bottom: 1px dashed #1D1D1D;
background: #141414;
padding:15px;
}

.trow2 {
background: #202020;
padding: 15px;
}

.trow_shaded {
    background: #3F3E3E;
}

.trow_selected td {
    background: #3F3E3E;
}

.trow_sep {
    background: #3F3E3E;
    color: #000;
    font-size: 12px;
    font-weight: bold;
}

.tfoot {
    background: #0F0F0F;
       color: #FFF;
}

.tfoot a:link {
    color: #ffffff;
    text-decoration: none;
}

.tfoot a:visited {
    color: #ffffff;
    text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
    color: #ffffff;
    text-decoration: none;
}

.bottommenu {
    background: #efefef;
    color: #000000;
    border: 1px solid #4874a3;
    padding: 10px;
}

.navigation {
    color: #000000;
    font-size: 13px;
    font-weight: bold;
}

.navigation a:link {
    text-decoration: none;
}

.navigation a:visited {
    text-decoration: none;
}

.navigation a:hover, .navigation a:active {
    text-decoration: none;
}

.navigation .active {
    color: #000000;
    font-size: 13px;
    font-weight: bold;
}

.smalltext {
    font-size: 12px;
}

.largetext {
    font-size: 16px;
    font-weight: bold;
}

input.textbox, select, input[type="text"], input[type="password"] {
background: #222;
border: 1px solid rgba(63, 63, 63, 0.25);
    border-radius: 2px 2px 2px 2px !important;
    color: #fff;
    margin: 0;
    padding: 5px;
}

input.textbox:focus {
        border: 1px solid #127BAC;
        outline: none;
        color: #fff;
}

textarea {
background: #222;
color: #FFF;
border: 1px solid rgba(63, 63, 63, 0.25);
line-height: 1.4;
font-size: 13px;
font-family: 'Tahoma' !important;
}

textarea:focus {
        border: 1px solid #127BAC;
        outline: none;
        color: #fff;
}

select {
background: #272727;
border: 1px solid #131313;
}

select:focus {
        border: 1px solid #127BAC;
        outline: none;
        color: #fff;
}

input.textbox:focus, select:focus, textarea:focus {
       outline: none
}

input.textbox:focus, textarea:focus {
outline: none;
}

.editor {
background: #2f2f2f;
border: 1px solid #333;
}

.editor_control_bar {
background: #2F2F2F;
border: 1px solid #333;
padding: 8px 0px 8px 8px !important;
}


.autocomplete {
    background: #2f2f2f;
    border: 1px solid #333;
    color: black;
}

.autocomplete_selected {
    background: #292929;
    color: #fff;
}

.popup_menu {
    background: #333;
    border: 1px solid #2f2f2f;
}

.popup_menu .popup_item {
    background: #2f2f2f;
    color: #fff;
}

.popup_menu .popup_item:hover {
    background: #333;
    color: #fff;
}

.trow_reputation_positive {
background: #62B93F;
border-radius: 2px;
padding: 5px;
color: #F7F7F7;
}

.trow_reputation_negative {
background: #DF3D3D;
}

.reputation_positive {
    color: green;
}

.reputation_neutral {
    color: #444;
}

.reputation_negative {
    color:#970E0E;;
}

.invalid_field {
    border: 1px solid #E03232 !important;
color: #E43A3A !important;
}

.valid_field {
    border: 1px solid #58CA58 !important;
}

.validation_error {
    color: #E93535;
    margin: 5px 0;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
    padding-left: 22px;
}

.validation_error:before {
content:"\f05c";
font-family: 'Tahoma';
font-size:16px;
color: #E93535;
margin-right: 5px;
font-weight: normal;
}

.validation_success {
    color: #00b200;
    margin: 5px 0;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
    padding-left: 22px;
}

.validation_success:before {
content:"\f05d";
font-family: 'Tahoma';
font-size:16px;
color: #00b200;
margin-right: 5px;
font-weight: normal;
}

.validation_loading:before {
content:"\f013";
font-family: 'Tahoma';
font-size:16px;
color: #127BAC;
margin-right: 5px;
font-weight: normal;
display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;
}

@-moz-keyframes spin{0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(359deg);}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(359deg);}}@-o-keyframes spin{0%{-o-transform:rotate(0deg);} 100%{-o-transform:rotate(359deg);}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg);} 100%{-ms-transform:rotate(359deg);}}@keyframes spin{0%{transform:rotate(0deg);} 100%{transform:rotate(359deg);}}.icon-rotate-90:before{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}


/* Additional CSS (Master) */
img {
    border: none;
}

.clear {
    clear: both;
}

.hidden {
    display: none;
    float: none;
    width: 1%;
}

.hiddenrow {
    display: none;
}

.selectall {
    background-color: #FFFBD9;
    font-weight: bold;
    text-align: center;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

.menu ul {
    list-style: none;
    margin: 0;
}

.menu li {
    display: inline;
    padding-left: 5px;
}

.menu img {
    padding-right: 5px;
    vertical-align: top;
}

#panel .links {
    margin: 0;
    float: right;
}

.expcolimage {
    float: right;
    width: auto;
    vertical-align: middle;
    margin-top: 3px;
        background: rgba(0, 0, 0, 0.28);
        border-radius: 2px;
}

img.attachment {
    border: 1px solid #E9E5D7;
    padding: 2px;
}

hr {
    background-color: #000000;
    color: #000000;
    height: 1px;
    border: 0px;
}

#debug {
    float: right;
    text-align: right;
    margin-top: 0;
}

blockquote {
border: 1px solid #242424;
margin: 0;
background: #161616 url(images/df/quote.png)top right;
background-repeat: no-repeat;
padding: 8px;
}

blockquote cite {
    font-weight: bold;
    border-bottom: 0px solid #000;
        padding-bottom: 15px;
    font-style: normal;
    display: block;
    margin: 4px 0;
}

blockquote cite span {
    float: right;
    font-weight: normal;
}

blockquote cite span.highlight {
    float: none;
    font-weight: bold;
    padding-bottom: 0;
}

.codeblock {
border: 1px solid #111;
margin: 0;
background: #161616 url(images/df/code.png)top right;
background-repeat: no-repeat;
padding: 8px;
}

.codeblock .title {
    border-bottom: 0px solid #ccc;
    font-weight: bold;
    margin: 4px 0;
}

.codeblock code {
    overflow: auto;
    height: auto;
    max-height: 200px;
    display: block;
    font-family: Monaco, Consolas, Courier, monospace;
    font-size: 13px;
}

.subforumicon {
    vertical-align: middle;
background: none;
margin-right: 5px;
margin-top: -5px;
}

.separator {
    margin: 5px;
    padding: 0;
    height: 0px;
    font-size: 1px;
    list-style-type: none;
}

form {
    margin: 0;
    padding: 0;
}

.popup_menu .popup_item_container {
    margin: 1px;
    text-align: left;
}

.popup_menu .popup_item {
    display: block;
    padding: 3px;
    text-decoration: none;
    white-space: nowrap;
}

.popup_menu a.popup_item:hover {
    text-decoration: none;
}

.autocomplete {
    text-align: left;
}

.subject_new {
    font-weight: bold;
}

.highlight {
    background: #FFFFCC;
    padding-top: 3px;
    padding-bottom: 3px;
}

.pm_alert {
background: #1AA82B;
border: 1px solid #33A729;
box-shadow: 0px 3px 0px #1A7417;
text-align: center;
padding: 10px;
margin-bottom: 15px;
font-size: 11px;
}

.red_alert {
background: #EE4545;
border: 1px solid #EB4141;
box-shadow: 0px 3px 0px #992E2E;
text-align: center;
padding: 10px;
margin-bottom: 15px;
font-size: 11px;
}

.high_warning {
    color: #CC0000;
}

.moderate_warning {
    color: #F3611B;
}

.low_warning {
    color: #AE5700;
}

div.error {
padding: 5px 10px;
border-top: 2px solid #E4202F;
border-bottom: 2px solid #D32338;
background: #C72222;
font-size: 12px;
}

div.error p {
    margin: 0;
    color: #000;
    font-weight: normal;
}

div.error p em {
font-style: normal;
font-weight: bold;
padding-left: 24px;
display: block;
color: #FCFCFC;
text-shadow: 1px 1px 0px rgba(17, 17, 17, 0.72);
}

div.error p em:before {
font-family: 'Tahoma';
color: #FCFCFC;
content:"\f12a";
margin-right: 6px;
background: rgba(17, 17, 17, 0.4);
padding: 3px 6px;
border-radius: 2px;
}

div.error ul {
    margin-left: 24px;
}

.online {
    color: #15A018;
}

.offline {
    color: #C7C7C7;
}

.pagination {
    font-size: 11px;
    padding-top: 10px;
    margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
    padding-top: 0;
}
.pagination .pages {
    font-weight: bold;
}

.pagination .pagination_current, .pagination a {
    padding: 4px 8px;
    margin-bottom: 3px;
}

.pagination a {
    border: 1px solid #252525;
    background: #212121;
}

.pagination .pagination_current {
    background: #0C0C0C;
    border: 1px solid #0C0C0C;
    font-weight: bold;
    color: #127BAC;
}

.pagination a:hover {
    background: #127BAC;
        color: #fff;        
    border: 1px solid #186FA0;
    text-decoration: none;
}

.thread_legend, .thread_legend dd {
    margin: 0;
    padding: 0;
}

.thread_legend dd {
    padding-bottom: 4px;
    margin-right: 15px;
}

.thread_legend img {
    margin-right: 4px;
    vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
    margin: 0;
    padding: 0;
}

.forum_legend dd {
    float: left;
    margin-right: 10px;
}

.forum_legend dt {
    margin-right: 10px;
    float: left;
}

.success_message {
    color: #00b200;
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 10px;
}

.error_message {
    color: #C00;
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 10px;
}

.post_body {
    padding: 5px;
}

.post_content {
    padding: 5px 10px;
}

.quick_jump {
    background: url(images/df/jump.gif) no-repeat 0;
    width: 13px;
    height: 13px;
    padding-left: 13px; /* amount of padding needed for image to fully show */
    vertical-align: middle;
    border: none;
}

.repbox {
    font-size:16px;
    font-weight: bold;
    padding:5px 7px 5px 7px;
}

._neutral {
background-color: #3C3C3C;
color: #FFF;
border: 1px solid #3D3D3D;
border-radius: 2px;
box-shadow: 0px 3px 0px #272626;
}

._minus {
background-color: #E24242;
color: #F5F5F5;
border: 1px solid #DF3B3A;
border-radius: 2px;
box-shadow: 0px 3px 0px #AD2929;
}

._plus {
background-color: #2CD42C;
color: #080;
border: 1px solid #47D341;
border-radius: 2px;
box-shadow: 0px 3px 0px #2D8F29;
}

.pagination_breadcrumb {
    background-color: #f5f5f5;
    border: 1px solid #fff;
    outline: 1px solid #ccc;
    padding: 5px;
    margin-top: 5px;
    font-weight: normal;
    white-space: nowrap;
}

.pagination_breadcrumb_link {
    vertical-align: middle;
    cursor: pointer;
}

.pbit {
        background: #fff;
        border-radius: 3px;
        border: 1px double #dadada;
        font-size: 11px;
        font-weight: normal;
        margin-bottom: 3px;
        padding: 6px 5px 5px;
        text-align: left;
        width: 92%;
}                
        

.tablehead { padding: 5px 10px; background: #026CB1 url(images/thead_bg.gif) repeat-x; border: solid 1px #026CB1; border-radius: 5px 5px 0 0; font: 16px Arial, sans-serif; color: #FFF; }
.tablehead .right { float: right; margin: 0; padding-top: 1px; font-size:  13px; }
.tablehead a { color: #FFF !important; text-decoration: none; }

#shoutbox_data { font: 13px Arial, sans-serif; }
#shoutbox { margin-bottom: 5px; }
#shoutbox .panel { padding: 2px; }
#shoutbox .panel-blocked { margin: 1px 0; padding: 5px; background: #FCEFEF; font-size: 11px; color: #543A3A; }
#shoutbox .panel-away { margin: 1px 0; padding: 5px;  background: #EDEDED; font-size: 11px; color: #7A7A7A; }
#shoutbox .panel-away button { margin-right: 5px; padding: 5px; font-family: Tahoma, sans-serif; color: #FFF; font-size: 11px; font-weight: bold; text-align: center; text-shadow: 0 -1px 0 #297318; border-radius: 5px; background: #962725; border: none; border-radius: 3px; }
#shoutbox .trow1 { background-color: #FFF; }
#shoutbox .panel-minposts { margin: 1px 0; padding: 5px; background: #FFFED8; font-size: 11px; color: #727250; }
img#dvz_sb_loading { position: relative; top: 3px; left: 5px; }
input#shout_text { margin-right: 2px; padding: 5px 6px 6px 6px; width: 90%; background: #FFF; border: 1px solid #898989; border-radius: 2px; font-family: Tahoma, sans-serif; font-size: 12px; color: #000; }
input#shout_button { padding: 5px; font-family: Tahoma, sans-serif; color: #FFF; font-size: 11px; font-weight: bold; text-align: center; text-shadow: 0 -1px 0 #127BAC; border-radius: 5px; background: #127BAC; border: solid 1px #127BAC; border-radius: 3px; }
#shoutbox .trow1 { background-color: #141414; }
#shoutbox .trow2 { background-color: #1B1B1B; }
.sbentry { padding: 0; }
#shoutbox .userdata { margin: 0; padding: 6px; float: left;  text-align: right; }
#shoutbox .text { margin: 0; padding: 6px; color: #0d6e8c; }
#shoutbox .insUser { cursor: pointer; color: #AAAAAA; }
#shoutbox .info { float: right; margin-top: 5px; margin-right: 5px; font-size: 11px; color: #888888; }
#shoutbox .info .date { margin-right: 5px; }
#shoutbox .info .ip { margin-right: 5px; color: #CECECE; }
#shoutbox .mod { padding: 2px 5px; background: #0d6e8c; border-radius: 3px; font-size: 10px; font-weight: bold; color: #FFF; text-decoration: none; }
#shoutbox .dvz_sb_del { background-color: #6B0100; }
#shoutbox img.avatar { float: left; display: inline-block; margin-top: -1px; margin-right: 5px; max-height: 16px; max-width: 16px; border: solid 1px #FFF; box-shadow: 0 0 2px #E0E0E0; }

/* rotator in-page placement */
div.rotator {
    position: relative;
    height: 220px;
    margin: 30px;
}

/* rotator css */
div.rotator ul li {
    
    position: absolute;
    list-style: none;
}

div.rotator ul li.show {
    z-index:1;
}

Ecosse

26.03.2014, 19:20
W Extras.css pozmieniaj:

Kod PHP:
font-family: 'open_sansregular'; 

Na:

Kod PHP:
font-family: 'Tahoma'; 
Webboard > Wsparcie MyBB > Style, szablony i grafika > Instalacja czcionki