lostyazilim
tr.link

Yazı Boyutu ve Fontu Ayarlama

6 Mesajlar 3.353 Okunma
acebozum
tr.link

wtu wtu WM Aracı Kullanıcı
  • Üyelik 05.08.2012
  • Yaş/Cinsiyet 36 / E
  • Meslek tersine mühendis
  • Konum Bingöl
  • Ad Soyad ** **
  • Mesajlar 109
  • Beğeniler 4 / 9
  • Ticaret 2, (%100)
Arkadaşlar blogumdaki yazıların boyutları ile ilgili problem yaşıyorum
1- Yazı başlıklarının boyutu ve fontu
2- Sidebardaki başlık
3- Sidebar daki iç yazılar
4- Sayfada yayınlamış olduğum yazıların fontları ve boyutları

Şimdi benim yapmak istediğim bunların hepsine ayrı ayrı font,color ve boyut vermek nasıl ayarlamamam gerekiyor ?

Sitem İnşaat Akademisi
Css Kodlarıda bunlar arkadaşlar
/* Variable definitions
====================


default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>













default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>



default="#777777" value="#777777"/>


default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>








default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>


default="#000000" value="#000000"/>
default="transparent" value="transparent"/>



default="#f9f9f9" value="#f9f9f9"/>



default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>












color="#ffffff" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>

default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="url(//www.blogblog.com/1kt/simple/gradients_light.png)"/>
default="url(//www.blogblog.com/1kt/simple/body_gradient_tile_light.png)" value="url(//www.blogblog.com/1kt/simple/body_gradient_tile_light.png)"/>


















default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="url(//www.blogblog.com/1kt/simple/gradients_light.png)"/>














color="#ffffff"
description="Background of blog paging area" type="background"
default="transparent none no-repeat scroll top center" value="transparent none no-repeat scroll top center"/>

default="transparent none repeat scroll top left" value=""/>




*/
/* Content
----------------------------------------------- */
body {
font: normal normal 13px Open Sans;
color: #000000;
background: #ffffff none repeat scroll top left;
padding: 0 40px 0px 40px;
_padding: 0 40px 40px 40px;
}
html body .region-inner {
min-width: 0;
max-width: 100%;
width: auto;
}
a:link {
text-decoration:none;
color: #0f81eb;
}
a:visited {
text-decoration:none;
color: #555555;
}
a:hover {
text-decoration:underline;
color: #cccccc;
}
.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent url(//www.blogblog.com/1kt/simple/body_gradient_tile_light.png) repeat scroll top left;
_background-image: none;
}
.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: #ffffff none repeat scroll top left;
}
.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll top left;
_background-image: none;
}
.content-outer {
_-moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15);
_-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
_-goog-ms-box-shadow: 0 0 10px #333333;
_box-shadow: 0 0 40px rgba(0, 0, 0, .15);
-moz-box-shadow: 0 0 40px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .0);
-goog-ms-box-shadow: 0 0 10px #333333;
box-shadow: 0 0 40px rgba(0, 0, 0, .0);
margin-bottom: 1px;
}
.content-inner {
_padding: 10px 10px;
padding: 0px 10px;
}
.content-inner {
background-color: #ffffff;
}
/* Header
----------------------------------------------- */
.header-outer {
background: transparent none repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: transparent;
text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);
}
.Header h1 a {
color: transparent;
}
.Header .description {
font-size: 140%;
color: #868686;
}
.header-inner .Header .titlewrapper {
padding: 22px 30px;
}
.header-inner .Header .descriptionwrapper {
padding: 0 30px;
}
/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: 1px solid #f2f2f2;
}
.tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 1px solid #f2f2f2;
border-left: 0 solid #f2f2f2;
border-right: 0 solid #f2f2f2;
}
.tabs-inner .widget ul {
background: #fafafa url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: 1px solid #f2f2f2;
margin-top: 0;
margin-left: -30px;
margin-right: -30px;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: normal normal 14px 'Trebuchet MS', Trebuchet, sans-serif;
color: #555555;
border-left: 1px solid #ffffff;
border-right: 1px solid #f2f2f2;
}
.tabs-inner .widget li:first-child a {
border-left: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #000000;
background-color: #eeeeee;
text-decoration: none;
}
/* Columns
----------------------------------------------- */
.main-outer {
border-top: 0 solid #f2f2f2;
}
.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: 1px solid #f2f2f2;
}
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid #f2f2f2;
}
/* Headings
----------------------------------------------- */
h2 {
margin: 0 0 0em 0;
font: inherit;
color: inherit;
text-transform: normal;
font-family: inherit;
font-size: 22px;
font-weight: bold;
color: inherit;
}
h3 {
margin: 0 0 0em 0;
font: inherit;
color: inherit;
text-transform: normal;
font-family: inherit;
font-size: 18px;
font-weight: bold;
color: inherit;
}
/* Widgets
----------------------------------------------- */
.widget .zippy {
color: #555555;
text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}
.widget .popular-posts ul {
padding: 0px;
list-style: none;
}
/* Posts
----------------------------------------------- */
.date-header span {
background-color: transparent;
color: #000000;
padding: inherit;
letter-spacing: inherit;
margin: inherit;
}
.main-inner {
padding-top: 30px;
padding-bottom: 30px;
}
.main-inner .column-center-inner {
padding: 0 15px;
}
.main-inner .column-center-inner .section {
margin: 0 15px;
}
.post {
margin: 0 0 25px 0;
}
h1.post-title {
font: normal normal 24px 'Trebuchet MS', Trebuchet, sans-serif;
margin: 0em 0 0;
}
.comments h4 {
font: bold normal 14px 'Trebuchet MS', Trebuchet, sans-serif;
margin: .75em 0 0;
}
.post-body {
font-size: 110%;
line-height: 2;
position: relative;
}
.item-thumbnail img {
padding: 2px;
width: 60px;
height: 60px;
background: transparent;
border: 1px solid #eeeeee;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList {
padding: 2px;
background: #ffffff;
border: 0px solid #f2f2f2;
_-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
_-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
_box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
}
.post-body img, .post-body .tr-caption-container {
padding: 5px;
}
.post-body .tr-caption-container {
color: #000000;
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
.post-header {
margin: 0 0 1.5em;
line-height: 1.6;
font-size: 90%;
}
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
color: #7a7a7a;
background-color: #444444;
border-bottom: 1px solid #f2f2f2;
line-height: 1.6;
font-size: 90%;
display: none;
}
#comments .comment-author {
padding-top: 1.5em;
border-top: 1px solid #f2f2f2;
background-position: 0 1.5em;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid #f2f2f2;
}
/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
border-top: 1px solid #555555;
border-bottom: 1px solid #555555;
}
.comments .comment-thread.inline-thread {
background-color: #444444;
}
.comments .continue {
border-top: 2px solid #555555;
}
/* Accents
---------------------------------------------- */
.section-columns td.columns-cell {
border-left: 1px solid #f2f2f2;
}
.blog-pager {
background: transparent none no-repeat scroll top center;
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: #ffffff;
padding: 5px;
}
.footer-outer {
border-top: 0 dashed #bbbbbb;
}
/* Mobile
----------------------------------------------- */
body.mobile {
background-size: auto;
}
.mobile .body-fauxcolumn-outer {
background: transparent none repeat scroll top left;
}
.mobile .body-fauxcolumn-outer .cap-top {
background-size: 100% auto;
}
.mobile .content-outer {
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
padding: 0 40px;
}
body.mobile .AdSense {
margin: 0 -40px;
}
.mobile .tabs-inner .widget ul {
margin-left: 0;
margin-right: 0;
}
.mobile .post {
margin: 0;
}
.mobile .main-inner .column-center-inner .section {
margin: 0;
}
.mobile .date-header span {
padding: 0.1em 10px;
margin: 0 -10px;
}
.mobile h1.post-title {
margin: 0;
}
.mobile .blog-pager {
background: transparent none no-repeat scroll top center;
}
.mobile .footer-outer {
border-top: none;
}
.mobile .main-inner, .mobile .footer-inner {
background-color: #ffffff;
}
.mobile-index-contents {
color: #000000;
}
.mobile-link-button {
background-color: #0f81eb;
}
.mobile-link-button a:link, .mobile-link-button a:visited {
color: #ffffff;
}
.mobile .tabs-inner .section:first-child {
border-top: none;
}
.mobile .tabs-inner .PageList .widget-content {
background-color: #eeeeee;
color: #000000;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
}
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-left: 1px solid #f2f2f2;
}
/* Custom
----------------------------------------------- */
div.code {background-color: whitesmoke; font-family: Courier New; font-size: 12px;}
div.deprt {background-color: whitesmoke; font-size: 12px; text-align: center;}
div.link {background-color: seashell; font-family: Courier New;}
.feed-links {display:none !important;}
#HTML3 ul {line-height: 2 !important;}
#HTML4 {font-family:verdana !important;}
#HTML6 {display:none !important;}
#HTML8 {margin:0px !important;}
#HTML10 {margin:0px !important;}
_#Attribution1 {display: none !important;}
.date-header {display:none !important;}
.navbar {display: none !important; height: 0px !important;}
.jump-link a img{
border:0;
float:right;
margin:0px;
}

.mfollowh
{
background-image:url('http://i1339.photobucket.com/albums/o708/wtu12/FollowHeader_zps41279f74.png');
width:300px;
height:33px;
background-repeat: no-repeat;
}
.mframe01
{
background-image:url('https://lh5.googleusercontent.com/--J_bcywmCbw/UBbCDSK5y7I/AAAAAAAAEGU/nNNXtTm7k7I/s300/MFrame01.png');
width:300px;
height:70px;
background-repeat: no-repeat;
}

.mfooterl
{
background-image:url('https://lh4.googleusercontent.com/-1aOPgC_8T28/UBbBZpc33FI/AAAAAAAAEF0/XCv2yjb_3Zs/s970/Mayura4EverFooterLine.png');
width:970px;
height:5px;
background-repeat: no-repeat;
}

h2.title {
margin: 0 0 1em 0 !important;
font: normal normal 14px Molengo;
color: #000000;
background: whitesmoke !important;
text-transform: uppercase !important;
padding-left: 0px !important;
}
h4.author {
margin: 0 0 0.5em 0 !important;
font: normal normal 10px Verdana, Geneva, sans-serif !important;
color: #777777 !important;
background: whitesmoke !important;
text-transform: uppercase !important;
font-size: 11px !important;
padding-left: 0px !important;
}
.nr_inner {
clear: both;
width: 100%;
padding: 4px 8px !important;
}
#rx-options .rx-option {
color: black !important;
}
 

 

wmaraci
reklam

jasper jasper WM Aracı Kullanıcı
  • Üyelik 25.02.2012
  • Yaş/Cinsiyet - / E
  • Meslek öğrenci
  • Konum
  • Ad Soyad ** **
  • Mesajlar 262
  • Beğeniler 17 / 46
  • Ticaret 0, (%0)

Şimdi benim yapmak istediğim bunların hepsine ayrı ayrı font,color ve boyut vermek nasıl ayarlamamam gerekiyor ?


hocam bunu sorarak zaten olayı bitirmişsin daha neyi araştırıyorsun anlamadım.
font için fontu bulacaksın gerekli class veya id de renk icin color u bu kadar basit.
 

 

favoridus.com

wtu wtu WM Aracı Kullanıcı
  • Üyelik 05.08.2012
  • Yaş/Cinsiyet 36 / E
  • Meslek tersine mühendis
  • Konum Bingöl
  • Ad Soyad ** **
  • Mesajlar 109
  • Beğeniler 4 / 9
  • Ticaret 2, (%100)

jasper adlı üyeden alıntı

hocam bunu sorarak zaten olayı bitirmişsin daha neyi araştırıyorsun anlamadım.
font için fontu bulacaksın gerekli class veya id de renk icin color u bu kadar basit.


Hocam genel itibari ile yazı fontlarını,renklerini ve boyutlarının nasıl değiştirildiğini biliyorum zaten deneme yanılma yoluyla bunları değiştirebiliyorum yalnız şuan bir sıkıntı var h1 , h2 ve h3 karakterleri birlikte hareket ediyor gibi yani yazmış olduğum yazının fontunu değiştirince sidebar da değişiyor ben hepsinin ayrı ayrı olması için ne yapabilirim onu sormuştum ?
 

 

Onur89TR Onur89TR Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 04.12.2011
  • Yaş/Cinsiyet 35 / E
  • Meslek .
  • Konum İzmir
  • Ad Soyad ** **
  • Mesajlar 2376
  • Beğeniler 704 / 791
  • Ticaret 1, (%100)
body { } kısmına ilgili CSS özelliklerini yazarsanız her yere etki eder. Ama tam yolunu girerseniz sadece o bölüme etki eder. Tam yolu biliyorsanız ve sabitse class ve id'lerin aralarına > işareti koyarsınız.
 

 

wmaraci
wmaraci

wtu wtu WM Aracı Kullanıcı
  • Üyelik 05.08.2012
  • Yaş/Cinsiyet 36 / E
  • Meslek tersine mühendis
  • Konum Bingöl
  • Ad Soyad ** **
  • Mesajlar 109
  • Beğeniler 4 / 9
  • Ticaret 2, (%100)

Onur89TR adlı üyeden alıntı

body { } kısmına ilgili CSS özelliklerini yazarsanız her yere etki eder. Ama tam yolunu girerseniz sadece o bölüme etki eder. Tam yolu biliyorsanız ve sabitse class ve id'lerin aralarına > işareti koyarsınız.


Hocam söylediklerinizi bugün bir forumda okudum yalnız uygulayamadım tam olarak acaba bir tane örnek vererek açıklayabilirmisiniz...

Css kodlarını yukarıda vermiş olduğum kısımdan alacağınız farzedersek bunun divlerinin nasıl olması lazım ?

Ek Olarak: Günceldir
 

 

Onur89TR Onur89TR Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 04.12.2011
  • Yaş/Cinsiyet 35 / E
  • Meslek .
  • Konum İzmir
  • Ad Soyad ** **
  • Mesajlar 2376
  • Beğeniler 704 / 791
  • Ticaret 1, (%100)
Açıkçası blogger bilgim yok. Ama madem CSS düzenlemesi yapılabiliyor, mantıkta fazla değişen bir şey yok. Firefox ve eklentisi olan Firebug'u indirin. Sonrasında Firefox ile web sitenizi açın, F12'ye basın ve geliştirici aracı açılacak.

<<< Şu ikonu bulun. Ve ikona tıkladıktan sonra sitenizdeki h2 taglarından örneğin yan menü başlığına tıklayın. Solda HTML kodları görünecek. Oradaki seçili h2 tagını bulun. Sağ tıklayın ve "Copy CSS Path" seçeneğini seçin. Sonrasında CSS'nizin sonuna yapıştırın.
html.v2 body div.content div.content-outer div.fauxborder-left div.content-inner div.main-outer div.fauxborder-left div.region-inner div.columns div.columns-inner div.column-right-outer div.column-right-inner aside div#sidebar-right-1.sidebar div#PopularPosts1.widget h2

Böyle bir kod geldiyse karşınıza doğru iş yaptınız demektir. Şimdi bunu sadeleştirmemiz gerek.
.content-outer .main-outer .column-right-outer #sidebar-right-1.sidebar .widget > h2
{ CSS özellikleri buraya }

Bu şekilde diğerlerini de yapabilirsin.
 

 

Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al