سلام. من نمی دونم چطوری میشه نوع فونت و سایز پست تایتل رو عوض کرد. اگه یکی از دوستان محبت کنن واسم توضیح بدن ممنون میشم.
سلام. من نمی دونم چطوری میشه نوع فونت و سایز پست تایتل رو عوض کرد. اگه یکی از دوستان محبت کنن واسم توضیح بدن ممنون میشم.
سلام, فایل Style.css رو ویرایش کنید.
ملزمات این قسمت: css + html
میشه بیشتر توضیح بدین آقا مصطفی. من نمیدونم دقیقا باید کدوم قسمت فایل style.css رو ویرایش کنم. هر کاری کردم نتونستم درستش کنم.
برای بسیاری از طراحان وب مسئله پیدا کردن فونت (قلم) مناسبی که در عین خوانا و زیبا بودن برای همه قابل استفاده باشد, یعنی در سیستم تمام بازدید کننده ها موجود باشد, یک مسئله جدی و گاها دشوار بوده است. این محدودیت بعضی مواقع سدی در برابر خلاقیت طراحان وب بوده است.
اما اخیرا پیدایش پدیده ای به نام Web Fonts این نوید را داده است که به زودی این مشکل نیز از سر راه برداشته خواهد شد و دیگر محدود به استفاده از تعدادی فونت از پیش تعیین شده و تکراری نیستیم. در این آموزش قصد داریم شما را با پدیده ای جدید در طراحی وب آشنا کنی در ادامه مطلب با ما باشید.
در این تکنولوژی جدید که در برخی مرورگرهای وب پشتیبانی می شود, طراح وب به مرورگر فرمان میدهد که از یک آدرس خارجی فونت مخصوصی را بارگذاری کرده و در قسمت مشخصی از نوشته از آن استفاده کند. این قابلیت که بخشی از CSS3 خواهد بود به صورت زیر قابل استفاده است. برای استفاده از کد ها باید در فایل CSS (استایل) قالب سایتتون اول فونت های مورد نیاز را به مرورگر خود آدرس دهی کنید و سپس با استفاده از کد فراخوانی فونت مورد نظر در تگ های مورد نیاز خود استفاده کنید.
@font-face {
font-family: 'b koodak';
src: url('BKoodkBd.eot');
src: local('☺'), url('BKoodkBd.ttf') format('truetype');
}
بعد از قرار دادن کد بالا در استایل قالبتون سپس باید قسمتی که می خواهید فونتش عوض بشود باید کد زیر را درون استایلش وارد کنید.
font-family: b koodak,Tahoma,serif;
دانلود
توضیحاتتون خوب بود. ولی من می خوام سایز فونت پست تایتل رو هم عوض کنم اما نمیتونم. خواهشا توضیح بدید که چطوری و دقیقا در چه قسمتی از فایل style باید تغییرات ایجاد کنم.
سلام.
لطفا محتویات Style.css قالب رو اینجا کپی کنید.
فایل style.css این هستش
.post-warpper {
padding: 10px;
border-top: 0px;
border-right: 1px solid #F1F7E9;
border-bottom: 0px;
border-left: 1px solid #F1F7E9;
}
.post-top {
background: url(images/post-body-top.jpg) no-repeat center bottom;
display: block;
height: 10px;
}
.post-btt {
background: url(images/post-body-btt.jpg) no-repeat center top;
display: block;
height: 10px;
clear: both;
}
.posttitle {
border-bottom: 1px solid #F1F7E9;
margin: 0px 0px 5px 0px;
}
.post {
margin: 5px 0px;
}
.post img {
border-style: none;
}
.postmeta {
margin-top: 10px;
}
.top-meta ul li {
display: block;
float: left;
margin: 0px 5px 0px 0px;
}
.top-meta .category {
background: url(images/category.gif) no-repeat right center;
padding: 0px 15px 0px 0px;
margin: 0px 10px 0px 0px;
}
.top-meta .hits {
background: url(images/hits.gif) no-repeat right center;
padding: 0px 11px 0px 0px;
margin: 0px;
}
.post-more-link {
background: url(images/post-more-link.gif) no-repeat right center;
padding: 3px 17px 0px 0px;
margin: 0px;
}
.postmeta ul li {
display: block;
float: right;
}
.postmeta .author {
background: url(images/favicon.ico) no-repeat right center;
padding: 0px 20px 0px 0px;
margin: 0px;
}
.postmeta .date {
background: url(images/date.gif) no-repeat right center;
padding: 0px 18px 0px 0px;
margin: 0px 10px 0px 0px;
}
.postmeta .commnet {
background: url(images/comment.gif) no-repeat right center;
padding: 0px 22px 0px 0px;
margin: 0px 10px 0px 0px;
}
.custom-fieldes .download {
background: url(images/download.gif) no-repeat right center;
padding: 5px 26px 5px 0px;
margin: 0px;
}
.custom-fieldes .size {
background: url(images/size.gif) no-repeat right center;
padding: 5px 26px 5px 0px;
margin: 0px;
}
.custom-fieldes .source {
background: url(images/source.gif) no-repeat right center;
padding: 5px 26px 5px 0px;
margin: 0px;
}
.custom-fieldes .password {
background: url(images/password.gif) no-repeat right center;
padding: 5px 26px 5px 0px;
margin: 0px;
}
.entry-tags h4{
display:inline;
background: url(images/tags.gif) no-repeat right center;
padding: 10px 28px 10px 0;
}
.entry-tags ul{
display:inline;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:0;
padding-left:0;
}
.entry-tags .tags {
padding: 5px 0px 5px 0px;
margin: 0px;
display: inline;
}
.entry-tags .subtags{
display: inline;
}
.sidebar-box {
background: #F1F7E9;
margin: 0px 0px 10px;
}
.sidebar-box h3 {
height: 30px;
}
.sidebar-box h3 span {
display: none;
}
.sidebar-box-content {
padding: 5px 10px;
}
.sidebar-box ul {
margin: 0px;
padding: 0px;
}
.sidebar-box-footer {
background: url(images/sidebar-box-footer.jpg) no-repeat center bottom;
height: 12px;
clear: both;
margin: 0px 0px 10px;
}
.sidebar-left .als h3, .sidebar-right .als h3 {
background: url(images/sidebar-ads.jpg) no-repeat center bottom;
}
.sidebar-right .category h3 {
background: url(images/category-archives.jpg) no-repeat center bottom;
}
.sidebar-right .category ul li {
background: url(images/tick.gif) no-repeat right 5px;
padding: 0px 12px 0px 0px;
}
.sidebar-right .category ul li ul {
margin: 0px 15px 0px 0px;
}
.sidebar-right .category ul li ul li {
background: url(images/arrow_mini_left.gif) no-repeat right 5px;
padding: 0px 10px 0px 0px;
}
.sidebar-right .mihan h3 {
background: url(images/mihan-softwares-category.jpg) no-repeat center bottom;
}
.sidebar-right .mihan ul li {
background: url(images/arrow_mini_left.gif) no-repeat right 5px;
padding: 0px 10px 0px 0px;
}
.sidebar-right .status h3 {
background: url(images/sidebar-status.jpg) no-repeat center bottom;
}
.sidebar-left .monthly-archive h3 {
background: url(images/monthly-archive.jpg) no-repeat center bottom;
}
.sidebar-left .pre-posts h3 {
background: url(images/pre-posts.jpg) no-repeat center bottom;
}
.sidebar-left .rand-posts h3 {
background: url(images/rand-posts.jpg) no-repeat center bottom;
}
.sidebar-left .lastest-clips h3 {
background: url(images/lastest-clips.jpg) no-repeat center bottom;
}
.sidebar-left ul li {
background: url(images/arrow_mini_left.gif) no-repeat right 5px;
padding: 0px 10px 0px 0px;
}
.comments {
clear:both;
margin:0 0 10px;
padding:0;
}
.comments .odd .comment-header span.top {
background: url(images/comment-top.jpg) no-repeat center bottom;
height: 13px;
display: block;
}
.comments .odd span.btt {
background: url(images/linkbox-btt.jpg) no-repeat center bottom;
height: 13px;
display: block;
}
.comments-content {
padding: 5px 0px;
}
.comment {
margin: 0px 0px 10px;
padding: 0px;
}
.comment-content {
clear:both;
padding: 5px 10px;
}
.comment-meta span {
display: block;
padding: 0px 0px 0px 5px;
float:right
}
.comment-meta span.date {
float: left;
padding: 0px 10px;
}
.comment-meta span.author {
padding: 0px 5px 0px 10px;
}
.comment-meta span.gravatar {
padding: 0px 10px 0px 10px;
}
.comments .odd .comment-content, .comments .odd .comment-meta {
background: #ebe8e8;
}
.comments .even .gravatar img {
border: 1px solid #F1F7E9;
padding: 2px;
}
.comments .odd .gravatar img {
border: 1px solid #fff;
padding: 2px;
}
.comments-open-header, .comments-header {
padding: 2px 20px 2px 5px;
cursor:pointer;
border-bottom: 1px solid #F1F7E9;
background: url(images/pm.gif) no-repeat right 5px;
}
.comments-open-header-expand {
background: url(images/pm.gif) no-repeat right -21px;
}
#comments-form label {
display: block;
width: 150px;
padding: 5px;
margin: 0px 0px 0px 5px;
font: 8pt Tahoma;
}
#comments-form {
padding: 5px 0px 0px;
}
#comment-form-name, #comment-form-email, #comment-form-url, #comment-form-remember-me, #comment-form-reply, #comments-open-text, #comments-open-captcha, #comments-open-footer {
margin: 0px 0px 5px;
clear: both;
}
#comments-form #comment-author, #comments-form #comment-email, #comments-form #comment-url, #contactposttextbox #comment-author, #contactposttextbox #comment-email, #contactposttextbox #comment-url {
display: block;
width: 250px;
background: #F1F7E9;
border: 1px solid #F1F7E9;
margin: 0px;
padding: 4px 5px;
font: bolder 10pt Tahoma;
}
#comment-reply-label, #comment-reply, #comment-bake-cookie, #comment-form-remember-me label {
float:right;
}
#comment-reply-label, #comment-form-remember-me label {
margin: 0px 5px 0px 0px;
}
#comments-form #comment-text, #contactposttextbox #comment-text {
height: 150px;
width: 330px;
overflow: auto;
margin: 0px;
padding: 4px 5px;
font: normal 8pt Tahoma;
background: #F1F7E9;
border: 1px solid #F1F7E9;
}
#comments-form #comment-text:focus, #comments-form #comment-author:focus, #comments-form #comment-email:focus, #comments-form #comment-url:focus, #contactposttextbox #comment-text:focus, #contactposttextbox #comment-author:focus, #contactposttextbox #comment-email:focus, #contactposttextbox #comment-url:focus {
background: #F1F7E9;
border: 1px solid #F1F7E9;
}
#comments-form #comment-submit, #contactposttextbox #comment-submit, #contactposttextbox #comment-preview {
font: bold 8pt Tahoma;
padding: 3px 10px;
margin: 0px 0px 0px 5px;
}
#comments-form #comment-email, #comments-form #comment-url, #contactposttextbox #comment-email, #contactposttextbox #comment-url {
direction:rtl;
}
.comment-error {
color: #FF0000;
padding: 5px 0px;
display: block;
}
.search-input {
display: block;
width: 250px;
background: #E8F3F9;
border: 1px solid #B0D5EC;
margin: 0px;
padding: 4px 5px;
font: bolder 8pt Tahoma;
}
.search-btn {
font: bold 8pt Tahoma;
padding: 3px 10px;
margin: 5px 0px 0px;
}
.ads {
text-align: center;
margin-right: auto;
margin-left: auto;
}
.ads a {
text-align: center;
display: block;
margin: 0px 0px 8px;
}
.page-nav {
margin-right:70px;
padding:10px 0;
}
.page-nav span.pages, .page-nav span.extend {
display: block;
float: right;
padding: 3px 3px 3px 5px;
font-size: 10pt;
font-weight: normal;
}
.page-nav li {
display: inline;
}
.page-nav li a {
display: block;
float: right;
padding: 1px 6px;
border: 1px solid #F1F7E9;
margin: 0 0 0 5px;
font-size: 8pt;
background: #F1F7E9;
font-size: 8pt;
}
.page-nav li a:hover {
border: 1px solid #E8F3F9;
background: #F1F7E9;
}
.page-nav li span.current {
border: 1px solid #F1F7E9;
background: #F1F7E9;
display: block;
float: right;
padding: 1px 6px;
margin: 0 0 0 5px;
font-size: 8pt;
}
.footer-col {
float: right;
text-align: right;
}
#footer .comments, #footer .tags {
width: 330px;
padding: 0px 20px 0px 10px;
}
#footer .flinks {
width: 150px;
padding: 0px 10px;
}
#footer .pages {
width: 370px;
text-align:justify;
padding: 0px 10px;
}
.footer-col h3 {
font-size: 12pt;
font-weight: bold;
border-bottom: 1px solid #F1F7E9;
}
.footer-col ul li {
padding: 0px 10px 0px 0px;
background: url(images/arrow_mini_left.gif) no-repeat right 5px;
}
.tags li {
display: inline;
font-family: Arial;
background: url(images/none) !important;
padding: 0px !important;
}
.tags li a {
text-decoration:none;
display:block;
white-space:nowrap;
background-image: none;
float: right;
font-weight: bold;
}
.tagsa:hover {
}
.tags .rank-1 a {
font-size:8pt;
padding: 4px;
}
.tags .rank-2 a {
padding: 5px;
font-size: 1.2em;
}
.tags .rank-3 a {
font-size:1.4em;
padding: 5px;
}
.tags .rank-4 a {
font-size:1.6em;
padding: 5px;
}
.tags .rank-5 a {
font-size:1.8em;
padding: 5px;
}
.tags .rank-6 a {
font-size:2.0em;
padding: 5px;
}
.tags .rank-7 a {
font-size:2.1em;
padding: 5px;
}
.tags .rank-8 a {
font-size:2.2em;
padding: 5px;
}
.tags .rank-9 a {
font-size:2.3em;
padding: 5px;
}
.tags .rank-10 a {
font-size:2.5em;
padding: 5px;
}
.not-found-error {
margin: 10px 20px;
padding: 10px;
background: #F1F7E9;
}
/*---plugins---*/
.postmeta ul:after, .top-meta ul:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}/*-----404--------*/
.error-404 {
background:transparent url(images/error-404.jpg) no-repeat scroll center center;
height:480px;
margin-top:40px;
width:100%;
}
/*-----sad--------*/
#comment_error {
background:transparent url(images/error.gif) no-repeat scroll right 3px;
padding-right:20px;
}
.notsent {
background:transparent url(images/error.gif) no-repeat scroll right 3px;
padding-right:20px;
}
.sad {
background:transparent url(images/sad.gif) no-repeat scroll center center;
height:480px;
width:100%;
}
/*-----happy--------*/
#comment_pending {
background:transparent url(images/ok.jpg) no-repeat scroll right 5px;
padding-right:20px;
}
.happy {
background:transparent url(images/happy.gif) no-repeat scroll center center;
height:480px;
width:100%;
}
.sent {
background:transparent url(images/ok.gif) no-repeat scroll right 3px;
padding-right:20px;
}
/*-----linkbox------*/
.linkbox {
background-color:#F1F7E9;
direction:rtl;
height:220px;
overflow:auto;
width:500px;
}
.w {
color:#ebe8e8;
}
.clicks {
color:#888888;
font-family:Tahoma;
font-size:8pt;
font-weight:normal;
margin:0;
padding:0;
}
#footer .tag-cloud {
width: 360px;
padding: 0px 5px;
background-color: #ebe8e8;
overflow: hidden;
}
.tag-cloud ul li {
background: url(images/none) !important;
display: inline;
font-family: Tahoma;
padding: 0px !important;
}
.tag-cloud li a {
text-decoration:none;
display:block;
white-space:nowrap;
background-image: none;
float: right;
font-weight: bold;
}
.tag-cloud a:hover {
}
.tag-cloud .rank-1 a {
font-size:1em;
padding: 2px 5px;
}
.tag-cloud .rank-2 a {
padding: 2px 5px;
font-size: 1.2em;
}
.tag-cloud .rank-3 a {
font-size:1.4em;
padding: 2px 5px;
}
.tag-cloud .rank-4 a {
font-size:1.6em;
padding: 3px 5px;
}
.tag-cloud .rank-5 a {
font-size:1.8em;
padding: 3px 5px;
}
.tag-cloud .rank-6 a {
font-size:2.0em;
padding: 3px 5px;
}
.tag-cloud .rank-7 a {
font-size:1.4em;
padding: 4px 5px;
}
.tag-cloud .rank-8 a {
font-size:1.6em;
padding: 4px 5px;
}
.tag-cloud .rank-9 a {
font-size:1.8em;
padding: 4px 5px;
}
.tag-cloud .rank-10 a {
font-size:2.0em;
padding: 4px 5px;
}
/*-----tags------*/
.tags {
padding: 0px 5px;
overflow: hidden;
}
.tags ul li {
background: url(images/none) !important;
display: inline;
font-family: Tahoma;
padding: 0px !important;
}
.tags li a {
text-decoration:none;
display:block;
white-space:nowrap;
background-image: none;
float: right;
font-weight: bold;
}
.tags a:hover {
}
.tags .rank-1 a {
font-size:2.7em;
padding: 2px 5px;
}
.tags .rank-2 a {
padding: 2px 5px;
font-size: 2.7em;
}
.tags .rank-3 a {
font-size:2.7em;
padding: 2px 5px;
}
.tags .rank-4 a {
font-size:2.7em;
padding: 3px 5px;
}
.tags .rank-5 a {
font-size:2.5em;
padding: 3px 5px;
}
.tags .rank-6 a {
font-size:1.9em;
padding: 3px 5px;
}
.tags .rank-7 a {
font-size:1.6em;
padding: 4px 5px;
}
.tags .rank-8 a {
font-size:1.3em;
padding: 4px 5px;
}
.tags .rank-9 a {
font-size:1.2em;
padding: 4px 5px;
}
.tags .rank-10 a {
font-size:0.9em;
padding: 4px 5px;
}
توی این استایل،
.posttitle
رو به این صورت تغییر بده:
.posttitle {
font-family: Arial;
font-size: 18px;
border-bottom: 1px solid #F1F7E9;
margin: 0px 0px 5px 0px;
}
یعنی دو تا تعریف جدید اضافه کردیم. یکی فونت فمیلی که به جای Arial میتونی فونت مورد نظر رو بزاری و فونت سایز که اندازهی فونت رو تعریف میکنه.
این کار رو هم انجام دادم ولی فقط نوع فونت عوض میشه. سایزش رو چطوری عوض کنم؟
اسم قالبی که استفاده میکنی چیه؟
اگه فونت سایز رو درست وارد کرده باشی باید تغییر کنه مگه اینکه پوسته آپشن یا فریم ورک داشته باشه!
سلام..
با احترام به نظر آقا دایان ..
فقط این نکته رو یاد آور بشم که استایل و CSS روی مرورگر ذخیره میشه و برای درخواست دوباره از Ctrl+F5 استفاده کنید تا تغییرات رو مشاهده کنید..
موفق باشید../.
همین کار را انجام می دهم اما فقط نوع فونت تغییر میکنه و سایزش عوض نمیشه.
کسی نمیدومه چطوری باید سایز پست تایتل رو عوض کرد؟
لطفا سریع تر پاسخ بدین.
سلام
از اين كدها استفاده كنيد ببينيد ميشه
.posttitle {
font:bold 1.4em/1.6 Arial,sans-serif;
font-family: Arial;
border-bottom: 1px solid #F1F7E9;
margin: 0px 0px 5px 0px;
}
نه. متاسفانه هیچ تغییری نکرد.
آيا فقط باید در فایل style.css تغییراتی ایجاد کنیم؟
اگه مايليد هست لينك كل قالبتون رو بزاريد تا واستون درست كنم
متاسفانه نمیتونم کل قالب رو بذارم. قالبم اختصاصی هستش و به همین خاطر نمیشه کل قالب رو در اختیارتون بذارم.
لطفا توضیح دهید که آیا با ایجاد تغییرات در همین فایل style.css میشه سایز فونت پست تایتل رو عوض کرد یا نه.
اگر با تغییرات در فایل های دیگر می توان این کار را انجام داد توضیح دهید که کدام فایل را باید ویرایش کنم و چه کاری انجام دهم. ممنون میشم کمک کنین.