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
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/
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.
Dalej są problemy. Czcionki ustawiłem na Arial, ale nagłówgi chcę w Times New Roman.
Linijka Cufon.replace('h1, h2, h3, h4, #second_menu li a', { fontFamily: 'TrajanusBricks', hover: true }); została zmodyfikowana - jakakolwiek modyfikacja powoduje, że czcionka jest taka sama jak reszta. To samo przy braku tego pliku. Wtedy ustawiając np w h2 czcionke na TimeS New Roman i tak mam Arial. Co mam zrobić aby ustawić czcionki nagłówków na inne niż Arial?
Co do wielkości poczególnych tekstów to dodając sobie linijkę font size: ...% zmieniam wielkość liter, ale jak zrobić, żeby np nagłówek h1 był pogrubiony - jaką musze wstawić linijkę?
pogrubienie czcionki otrzymuje się poprzez umieszczenie definicji w css
font-weight: bold;
albo zamiast bold wstawiac liczby
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Cufon.replace('h1, h2, h3, h4, #second_menu li a', { fontFamily: 'TrajanusBricks', hover: true });
jak wywalisz z tej linijki wszystkie h
Cufon.replace('#second_menu li a', { fontFamily: 'TrajanusBricks', hover: true });
to teraz we wszystkich h1-h6 będziesz miał taką czcionkę jaką masz wpisaną w CSS.
plik cufon load wyglada tak:
Cufon.replace({ fontFamily: 'TrajanusBricks', hover: true });
kazde h w style.css posiada font:Arial, Helvetica, sans-serif
niestety czcionki naglowkow h1,2 itd dalej nie są Arialem, tylko Segoe Print.
na samej górze style.css mam:
font-family:Segoe Print, Helvetica, sans-serif;
to mam nadzieje, że w css masz dalej ustawioną czcionke na h1-h6
Tak teraz wyglada plik style.css - czcionki h1 itd są ustawione na Arial, niestety są Seoge Print.
body {
margin:0;
padding:0;
text-align:left;
font-size:100%;
font-family:Segoe Print, Arial, Helvetica, sans-serif;
line-height:1.4em;
color:#000000;
background:url(../images/bg.gif) #D8D9D8;
}
a {
color:#FF5000;
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.5em;}
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;
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;
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:0.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;
font-size:120%;
font-weight: bold;
font: Arial, Helvetica, sans-serif
}
#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:Arial, serif;
text-shadow:1px 1px #fff;
font-size:170%;
font-weight: bold;
}
#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:Arial, Helvetica, sans-serif
text-shadow:1px 1px 2px #545454;
color:#AEFF00;
margin:0;
padding:0 0 20px;
}
h2 {
font-size:110%;
font:"Arial", Helvetica, sans-serif
text-shadow:1px 1px 2px #545454;
color:#000000;
margin:0;
padding:0 0 20px;
}
h2 a {
color:#00AEFF;
text-decoration:none;
}
h2 a:hover {
color:#9000FF;
text-decoration:none;
}
h3 {
font:Arial, Helvetica, sans-serif
text-shadow:1px 1px 2px #545454;
color:#9000FF;
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;
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;
}
zamień w tych h1-h6
font:"Arial", Helvetica, sans-serif
na
font-family:Arial, Helvetica, sans-serif
cudzysłowie używa się jak nazwa czcionka składa się z conajmiej dwóch wyrazów
Dodałem -family przy wszystkich h, niestety nic to nie zmieniło.
Macie jakieś inne propozycje?