• Welcome to Forum graficzne Burning-Brushes.pl. Please log in or sign up.
 

Zmiana czcionek w templecie Wordpress

Zaczęty przez NieProGracz, Grudzień 17, 2010, 13:03:46

Poprzedni wątek - Następny wątek
Witam,
zacznę od tego, że raczkuję wtym temacie.
Pobrałem templet: http://cms.template-help.com/wordpress_31100/

Potrzebuję zmienić czcionki. Tą mniejszą (Arial) potrafię zmienić, nie wiem natomiast gdzie mogę zmienić tą większą.

I jeszcze jedno: czcionki wyświetlają tylko duże litery. Jak ustawić aby obsługiwały małe litery.

tak wygląda plik style.css:

body         {
            margin:0;
            padding:0;
            text-align:left;
            font-size:62%;
            font-family:Arial, Helvetica, sans-serif;
            text-transform:uppercase;
            line-height:1.6em;
            color:#878787;
            background:url(../images/bg.gif) #D8D9D8;
            }

a             {
            color:#00AEFF;
            text-decoration:underline;
            outline:none;
            }
      
a:hover       {
            color:#666666;
            text-decoration:none;
            }

p            {
            margin:0;
            padding:0 0 1.4em 0;
            }

img            {border:0;}

div            {
            margin:0;
            padding:0;
            text-align:left;
            }
            
hr            {
            display:block;
            height:1px !important;
            overflow:hidden;
            clear:both;
            border:none;
            background:#d2d2d2;
            margin:5px 0 15px;
            }
            
ol            {
            margin:0;
            padding:0 0 0 2em;
            color:#000;
            }
            
ol li         {
            margin:0;
            padding:0;
            color:#878787;
            }

small         {font-size:0.8em;}

form, fieldset, label   {
            margin:0;
            padding:0;
            border:none;
            }
            
input[type=text],
textarea      {
            padding:12px;
            color:#000;
            font:bold 1.1em Arial, Helvetica, sans-serif;
            text-transform:uppercase;
            border:1px solid #919191;
            background:#dedfde;
            box-shadow:0 1px 4px #c6c7c6;
            -moz-box-shadow:0 1px 4px #c6c7c6;
            -webkit-box-shadow:0 1px 4px #c6c7c6;
            }
            
input[type=submit],
.btn         {
            width:auto;
            *width:130px;
            text-transform:uppercase;
            font-size:1em;
            line-height:1em;
            border:none;
            padding:14px 18px;
            color:#fff;
            text-decoration:none;
            cursor:pointer;
            box-shadow:1px 1px 1px #8D8D8D;
            -moz-box-shadow:1px 1px 1px #8D8D8D;
            -webkit-box-shadow:1px 1px 1px #8D8D8D;
            background:url(../images/menu_px.gif) top repeat-x #000;
            }
            
.btn         {
            float:left;
            clear:both;
            display:block;
            }
            
.shadow         {
            width:1400px;
            height:890px;
            position:fixed;
            top:0;
            left:50%;
            margin-left:-700px;
            background:url(../images/bg_shadow.png) 0 0 no-repeat;
            z-index:10;
            }

.container      {
            width:100%;
            position:relative;
            z-index:20;
            background:url(../images/top_px.png) top repeat-x;
            }
            
/* ====== head ======*/

#top         {
            width:960px;
            margin:0 auto;
            font-size:1.1em;
            padding:28px 0 18px;
            }
            
#top .shared   {
            *width:45px;
            height:14px;
            float:right;
            }
            
#top a.twitter,
#top a.facebook   {
            width:14px;
            height:14px;
            overflow:hidden;
            display:block;
            float:right;
            margin-right:6px;
            }

#top a.twitter   {background:url(../images/ico_twitter.png) 0 0 no-repeat;}
#top a.facebook   {background:url(../images/ico_facebook.png) 0 0 no-repeat;}
            
#top .top_nav   {
            margin:0;
            padding:1px 0 0;
            list-style:none;
            float:right;
            }
            
#top .top_nav li   {
            margin:0 6px 0 0;
            padding:0 6px 0 0;
            float:right;
            font:1em Arial, Helvetica, sans-serif;
            color:#828282;
            line-height:1em;
            border-right:1px solid #828282;
            }
            
#top .top_nav li a   {
            color:#828282;
            text-decoration:underline;
            }
            
#top .top_nav li a:hover   {
            color:#0C0C0C;
            text-decoration:none;
            }
            
.logo_area      {
            width:160px;
            height:100px;
            overflow:hidden;
            position:relative;
            padding-bottom:15px;
            border-bottom:1px solid #E3E3E3;
            }

a.logo         {
            width:160px;
            height:65px;
            top:0;
            left:0;
            display:block;
            position:absolute;
            overflow:hidden;
            cursor:pointer;
            outline:none;
            background:url(../images/logo.png) 0 0 no-repeat;
            }

#menu         {
            position:relative;
            z-index:1000;
            margin:0;
            padding:0 0 60px;
            list-style:none;
            }
            
#menu li      {
            width:160px;
            *height:46px;
            margin:0;
            padding:0;
            
            }

#menu li a      {
            display:block;
            padding:17px 18px 15px;
            color:#000000;
            text-decoration:none;
            border-bottom:1px solid #E3E3E3;
            }

#menu li a:hover,
#menu li.current-menu-item a   {
            color:#fff;
            border-bottom:none;
            padding-bottom:16px;
            box-shadow:1px 1px 1px #8D8D8D;
            -moz-box-shadow:1px 1px 1px #8D8D8D;
            -webkit-box-shadow:1px 1px 1px #8D8D8D;
            background:url(../images/menu_px.gif) top repeat-x #000;
            }
            
#second_menu   {
            position:relative;
            z-index:1000;
            margin:0;
            padding:0 0 50px;
            list-style:none;
            }

#second_menu li      {
            width:160px;
            margin:0;
            padding:0;
            font:2.5em "Times New Roman", Times, serif;
            text-transform:lowercase;
            text-shadow:1px 1px #fff;
            }

#second_menu li a   {
            display:block;
            text-align:center;
            padding:12px 18px 8px;
            color:#000000;
            text-decoration:none;
            }

#second_menu li a:hover,
#second_menu li.menu-item a   {
            color:#090909;
            box-shadow:1px 1px 2px #555;
            -moz-box-shadow:1px 1px 2px #555;
            -webkit-box-shadow:1px 1px 2px #555;
            background:url(../images/btn_px.gif) top repeat-x #C3C4C2;
            }

#slider         {
            width:823px;
            height:540px;
            overflow:hidden;
            margin-left:-29px;
            }

/* ===== Content ======*/

h1            {
            font:2.1em "Times New Roman", Times, serif;
            
            text-shadow:1px 1px 2px #545454;
            color:#393939;
            margin:0;
            padding:0 0 20px;
            text-transform:lowercase;
            }
            
h2            {
            font:2em/1.3em "Times New Roman", Times, serif;
            text-shadow:1px 1px 2px #545454;
            color:#393939;
            margin:0;
            padding:0 0 20px;
            text-transform:lowercase;
            }
            
            h2 a   {
            color:#393939;
            text-decoration:none;
            }
            
            h2 a:hover   {
            color:#000;
            text-decoration:none;
            }
            
h3            {
            font:1.7em/1.3em "Times New Roman", Times, serif;
            text-shadow:1px 1px 2px #545454;
            color:#616161;
            margin:0;
            padding:0 0 20px;
            text-transform:lowercase;
            }

h4            {
            font:1em "Times New Roman", Times, serif;
            color:#000;
            margin:0;
            padding:0 0 10px;
            text-transform:lowercase;
            }
            
h5, h6         {
            font:1.1em Arial, Helvetica, sans-serif;
            color:#000;
            margin:0;
            padding:0 0 1.5em;
            }
            
.clear         {
            clear:both;
            height:1px;
            overflow:hidden;
            }
            
#content      {
            width:960px;
            margin:0 auto;
            padding-bottom:30px;
            z-index:30;
            }
            
.left_side      {
            width:160px;
            float:left;
            }
            
#main .content   {padding:0;}
            
.content      {
            width:770px;
            padding-top:110px;
            float:right;
            }
            
.one_third      {
            width:235px;
            margin-right:30px;
            float:left;
            letter-spacing:-0.2px;
            }
            
.one_third_last   {
            width:235px;
            float:right;
            letter-spacing:-0.2px;
            }
            
.thumb         {
            float:left;
            margin:0 30px 15px 0;
            }
            
.thumb img      {
            border:5px solid #D2D3D2;
            box-shadow:2px 2px 3px #A5A5A5;
            -moz-box-shadow:2px 2px 3px #A5A5A5;
            -webkit-box-shadow:2px 2px 3px #A5A5A5;
            }
            
.content ul      {
            margin:0;
            padding:0 0 0 3em;
            list-style:decimal-leading-zero;
            }
            
.content li      {
            margin:0;
            padding:0 0 7px;
            color:#000;
            }
            
.content li a   {
            color:#878787;
            text-decoration:none;
            }
            
.content li a:hover   {
            color:#000;
            text-decoration:none;
            }
            
/* ---- Skills ------*/

.content .skills         {
            width:795px;
            margin:0 0 0 -25px;
            padding:0;
            list-style:none;
            }
            
.content .skills li      {
            width:235px;
            margin:0 0 25px 25px;
            padding:0;
            float:left;
            color:#878787;
            }
            
/* ---- Portfolio ------*/
            
#portfolio      {
            margin:0;
            padding:0;
            list-style:none;
            }
            
#portfolio li   {
            margin:0;
            padding:0 28px 25px 0;
            float:left;
            }
            
#portfolio li img   {
            border:5px solid #D2D3D2;
            box-shadow:2px 2px 3px #A5A5A5;
            -moz-box-shadow:2px 2px 3px #A5A5A5;
            -webkit-box-shadow:2px 2px 3px #A5A5A5;
            }
            
#portfolio li img:hover   {
            border:5px solid #fff;
            box-shadow:2px 2px 3px #A5A5A5;
            -moz-box-shadow:2px 2px 3px #A5A5A5;
            -webkit-box-shadow:2px 2px 3px #A5A5A5;
            }
            
/* ------- Clients -----*/

#clients      {
            margin:0;
            padding:0;
            list-style:none;
            }
            
#clients li   {
            margin:0;
            padding:0 24px 25px 0;
            float:left;
            }
            
#clients li img   {
            border:1px solid #d1d1d1;
            box-shadow:2px 2px 3px #A5A5A5;
            -moz-box-shadow:2px 2px 3px #A5A5A5;
            -webkit-box-shadow:2px 2px 3px #A5A5A5;
            }
            
#clients li img:hover   {
            border:1px solid #fff;
            box-shadow:2px 2px 3px #A5A5A5;
            -moz-box-shadow:2px 2px 3px #A5A5A5;
            -webkit-box-shadow:2px 2px 3px #A5A5A5;
            }
            
/* ------- Clients -----*/

.gmap         {
            width:355px;
            float:left;
            }
            
.gmap img,
.gmap_box      {
            width:355px;
            height:355px;
            overflow:hidden;
            border:1px solid #d1d1d1;
            box-shadow:2px 2px 3px #A5A5A5;
            -moz-box-shadow:2px 2px 3px #A5A5A5;
            -webkit-box-shadow:2px 2px 3px #A5A5A5;
            }
            
.cf_col         {
            width:360px;
            float:right;
            }
            
.wpcf7-form input[type=text],
.wpcf7-form textarea   {
            width:315px;
            }
            
div.wpcf7-validation-errors {
width:315px;
padding:2px 12px;
font-size:12px;
margin:10px 0 !important;
border:1px solid #ff0000 !important;
text-transform:capitalize !important;
}

span.wpcf7-not-valid-tip {
background:none !important;
border:1px solid #FF0000;
display:block;
left:0 !important;
padding:2px 12px !important;
position:relative !important;
top:7px !important;
width:315px !important;
z-index:100;
text-transform:capitalize !important;
}
            
/* ------- Blog Pages -----*/

.post         {
            display:block;
            position:relative;
            padding:0 0 20px;
            margin-bottom:20px;
            clear:both;
            border-bottom:1px solid #e4e5e4;
            }
            
.post:after      {
            width:100%;
            content: '';
            position:absolute;
            left:0;
            bottom:0;
            border-bottom:1px solid #d1d1d1;
            }
            
.posted_line   {
            color:#bcbebe;
            padding-bottom:25px;
            padding-left:5px;
            }
            
.posted_line a   {
            color:#bcbebe;
            text-decoration:none;
            }
            
.posted_line a:hover   {
            color:#000;
            text-decoration:none;
            }
            
div.blog_thumbnail   {
            width:762px;
            height:276px;
            overflow:hidden;
            margin-bottom:20px;
            border:5px solid #D2D3D2;
            box-shadow:2px 2px 3px #A5A5A5;
            -moz-box-shadow:2px 2px 3px #A5A5A5;
            -webkit-box-shadow:2px 2px 3px #A5A5A5;
            }
            
div:hover.blog_thumbnail   {border:5px solid #fff;}


/* ------- Paging -----*/
            
.navigation      {
            padding:20px 0;
            display:block;
            }
            
.nav-previous   {float:left;}
.nav-next      {float:right;}

.nav-previous a,
.nav-next a      {
            width:auto;
            text-transform:uppercase;
            font-size:1em;
            line-height:1em;
            border:none;
            padding:14px 18px;
            color:#fff;
            text-decoration:none;
            cursor:pointer;
            box-shadow:1px 1px 1px #8D8D8D;
            -moz-box-shadow:1px 1px 1px #8D8D8D;
            -webkit-box-shadow:1px 1px 1px #8D8D8D;
            background:url(../images/menu_px.gif) top repeat-x #000;
            }


/* ---------------------------------- Commentlist ----------------------------------------------*/

#commentlist   {
            margin:0;
            padding:0 0 30px;
            list-style:none;
            }
            
#commentlist li   {
            margin:0;
            padding:12px 0 0 0;
            list-style:none;
            }
            
#commentlist li div.comment   {
            padding:12px;
            border:1px solid #929292;
            background:#dedfde;
            *zoom:1;
            box-shadow:inset 2px 2px 3px #c6c7c6;
            -moz-box-shadow:inset 2px 2px 3px #c6c7c6;
            -webkit-box-shadow:inset 2px 2px 3px #c6c7c6;
            position:relative;
            }
            
#commentlist li.odd div.comment   {background:#ececec}

div.vcard      {
            width:164px;
            float:left;
            }
            
img.avatar      {
            width:162px;
            height:162px;
            overflow:hidden;
            border:1px solid #d1d1d1;
            }

#commentlist a.comment-reply-link   {
            display:block;
            float:right;
            font-weight:bold;
            font-size:1.1em;
            color:#35BBE6;
            text-decoration:underline;
            }
            
#commentlist a:hover.comment-reply-link   {
            color:#494759 !important;
            text-decoration:none;
            }
            
.posted_content   {margin-left:180px;}

#commentlist .author_date {
            font-weight:bold;
            font-size:1.1em;
            color:#000;
            margin-bottom:1.5em;
            }
            
#commentlist .comment-body {
            color:#494759;
            line-height:1.6em;
            padding-bottom:1em;
            }
            
#commentlist ul.children {
            margin:0;
            padding:0;
            list-style:none;
            background:none;
            }
            
#commentlist ul.children li {
            padding-left:20px;
            }

/* ---------------------------------- Comment Form ----------------------------------------------*/

#commentform .lcol_cont   {
            width:357px;
            float:left;
            }
            
#commentform .rcol_cont   {
            width:407px;
            float:right;
            }
            
#commentform input[type=text]   {width:330px;}
#commentform textarea   {width:380px; height:110px; overflow:hidden;}

#commentform p   {padding-bottom:8px;}

#commentform .submit   {float:right;}

            
/* ----- FOOTER ----*/

#footer         {
            position:relative;
            z-index:100;
            border-top:1px solid #CFCFCF;
            font-size:1.1em;
            }
            
#footer:after   {
            width:100%;
            content: '';
            position:absolute;
            left:0;
            top:0;
            border-top:1px solid #E2E2E2;
            }
            
.footer_wrap   {
            width:960px;
            margin:0 auto;
            padding:25px 0 20px;
            }
            
#footer a      {
            color:#828282;
            text-decoration:none;
            }
            
#footer a:hover   {
            color:#000;
            text-decoration:none;
            }
            
.footer_wrap   {
            width:960px;
            margin:0 auto;
            padding:25px 0;
            position:relative;
            }
            
.copy         {float:left;}

.f_menu         {
            margin:0;
            padding:0;
            float:right;
            list-style:none;
            }
            
.f_menu li      {
            margin:0 7px 0 0;
            padding:0 7px 0 0;
            float:left;
            line-height:1em;
            border-right:1px solid #828282;
            }
            
.f_menu li:last-child   {
            margin:0;
            padding:0;
            border-right:none;
            }

text-transform:uppercase;
ta linijka mówi, że mają byc jedynie wielkie litery, wywal to będzie normalnie.

Większą czcionke? mam cały kod patrzec i szukac czcionki która jest większa?
Napisz jaka
font-family:Arial, Helvetica, sans-serif;//takim czymś definiujesz sobie nazwe czcionki
font-size:62%;//tutaj masz wielkośc

Cytat: Sympatyk w Grudzień 17, 2010, 14:16:00
text-transform:uppercase;
ta linijka mówi, że mają byc jedynie wielkie litery, wywal to będzie normalnie.

Większą czcionke? mam cały kod patrzec i szukac czcionki która jest większa?
Napisz jaka

Nie mam pojęcie jaką nazwę ma czcionka. Patrzac w demie templetu (link w pierwszym poscie) jako większą czcionkę mam na myśli tą którą napisane jest: Blog, Welcome, Our mission, Services. Tą czcionkę chcę wymienićna inną.

Cytat: Sympatyk
font-family:Arial, Helvetica, sans-serif;//takim czymś definiujesz sobie nazwe czcionki
font-size:62%;//tutaj masz wielkośc

zmieniając przy font-family, a nizej w font: nazwy czcionek wszedzie na arial, ta większa zostaje bez zmian.

PS. wywalilem linijki odpowiedzialne za duże litery, w kodzie były ich 3 sztuki, ale większa czcionka dalej jest tylko duzymi literami.

CytatNie mam pojęcie jaką nazwę ma czcionka. Patrzac w demie templetu (link w pierwszym poscie) jako większą czcionkę mam na myśli tą którą napisane jest: Blog, Welcome, Our mission, Services. Tą czcionkę chcę wymienićna inną.
nie jest to przypadkiem obrazek?
sprawdź w folderze image

Obrazkiem jest tylko logo Silvero Design.
Reszta jest czcionką, możliwe że jest to czcionka nagłówków.

Np. w miejscu Blog, u mnie jest to odnosnik do strony Posty i taki napis tam widnieje.

Ok teraz zobaczyłem w źródle, że jest to w h2
Zatem jest to nic innego jak czcionka "Times New Roman", i teraz najlepsze, tekst jest napisany w całości MAŁYMI literami
text-transform:lowercase;
Wszystko znajdziesz w h2

Wiec tak:
h1 odpowiada za nagłówki na poszczególnych stronach.
Zmieniłem czcionkę na: font:Arial, serif; - bez efektu
Zmieniłem kolor na: color:#AEFF00; - kolor czcionki się zmienia

tak samo w przypadku h2, h2 a, h2 a:hover - każde odpowiada tą czcionkę ale w innym miejscu. Mogę zmieniać kolory, natiomoast czcionka zostaje bez zmian.

Nie wiem też dalej co odpowiada za Czcionkę i kolor napisu BLOG w demie.

napis BLOG obstawiam, że zmienia się tutaj

#second_menu li      {
            width:160px;
            margin:0;
            padding:0;
            font:2.5em "Times New Roman", Times, serif;
            text-transform:lowercase;
            text-shadow:1px 1px #fff;
            }

to powiedz co zmienia to h2 ? który napis

Podczas pisanie mogę użyć 6 nagłówków, dlatego mam h1-h5,6.
h1 odpwiada za nagłowki na poszczególnych stronach w domyslnych szablonach
h2 odpowiada za napisy welcome, our mission i services w demie
h2a na nagłówki postów na stronie z postami w szablonie Blog Page Layout
h2 a:hover pewnie za naglowek w szabloenis trony ktorego nie uzywam

PS zmiana w:

#second_menu li      {
            width:160px;
            margin:0;
            padding:0;
            font:Arial, serif;
            text-shadow:1px 1px #fff;
            }

przed czcionka wywalilem 2,5em, zmieniłem na arial. W napisie BLOG z dema czcionka została bez zmian, ale się pomniejszyła.

coś tu mnie okłamujesz :)
gdzie to można ściągnąc to sam zobaczę

Napisy "Welcome", "Our mission", itd. uzyskano przy pomocy http://cufon.shoqolate.com/generate/
Jak zmienić czcionkę będziesz niestety musiał dojść sam przy pomocy dokumentacji https://github.com/sorccu/cufon/wiki/ bo ja nie miałem z nim wiele do czynienia


choć na pierwszy rzut oka mogę powiedzieć tyle, że edycja
Cufon.replace('h1, h2, h3, h4, #second_menu li a', { fontFamily: 'TrajanusBricks', hover: true });
+ ewentualne umieszczenie odpowiednich plików czcionek w odpowiednich folderach powinno pomóc


lub po prostu możesz usunąć powyższą linię i sobie zdefiniować te elementy normalnie w css-ie : P
Give sanity a longer leash  |  H+ 

Templet kosztował 77$. Wiem, że są programy do zdalnego sterowania komputerem. Mogę zainstalować i ze swojego kompa będziesz mógł zobaczyć jak to wszystko wygląda na moim. W prywatnej wiadomości wysyłam ci mój numer gadu gadu.

Cufon.replace('h1, h2, h3, h4, #second_menu li a', { fontFamily: 'TrajanusBricks', hover: true });

w którym miejscu jest ta linijka w style.css bo nie mogę wyszukać?

Najprawdopodobniej w pliku header.php
a jeżeli nie to plik cufon-load.js z katalogu /js/cufon/
Give sanity a longer leash  |  H+ 

Cytat: Lysander w Grudzień 17, 2010, 15:59:37
Najprawdopodobniej w pliku header.php
a jeżeli nie to plik cufon-load.js z katalogu /js/cufon/

ok, nieważne czy wywalilem linijkę:
Cufon.replace('h1, h2, h3, h4, #second_menu li a', { fontFamily: 'TrajanusBricks', hover: true });
czy cały plik, mogę tereaz zmieniać czcionki.

Wielkie dzięki za pomoc zarówno Sympatykowi jak i Lysanderowi.

jeśli napotkam kolejne problemy dam znać w tym wątku.

Pozdrawiam.