جدا کردن بک گراند مطالب در صفحه اول

samiraaaa · آبان 91

سلام.

من از قالب امام هادی استفاده می کنم برای جوملا 2.5

واسه صفحه اول که مطالب رو بصورت "ادامه مطلب قرار میدهم، و تو صفحه ی اول تنظیم کردم که 5 تا مطلب نشون داده بشه و بقیه مطالب ویژه صفحه بندی بشه.

واسه ی مطالب بک گراند تعریف کرده ام اما این بک گراند برای تمام مطالبه! یعنی بک گراند از ابتدای مطلب اول شروع میشه تا نتهای مطلب 5 م! البته با تیتر جدا میشه مطالب اما بک گراندش ثابته!

میخواستم ببینم باید چکار کنم تا وقتی مطلب شماره 1 یا خلاصه مطلب شماره1، تموم شد و تیتر مطلب بعدی میخاد بیاد، بک گراند قطع بشه، ی فاصله ای بین مطلب 1 با 2 می افته ها، میخام توی این فاصله، بک گراند بسته بشه و برای مطلب 2 دوباره بک گراند باز بشه! یعنی به عبارتی مطالبی که پشت سر هم میاند هرکدوم تو ی باکس جدا باشن!!

امیدوارم متوجه شده باشین!

این اون چیزی که هست: http://img.online-dl.com/images/m2976_Untitled.png

این اون چیزی که میخام باشه! : http://img.online-dl.com/images/f8968_Untitled1.png

این هم کد های css قالب:

/*  Global Formatting */

h1 {font-size:16px;line-height: 2em;font-weight: 900;}
h2 {font-size:15px;line-height: 2em;font-weight: 900;}
h3 {font-size:14px;line-height: 2em;font-weight: 900;}
h4 {font-size:13px;line-height: 2em;font-weight: 900;}
h5 {font-size:12px;line-height: 2em;font-weight: 900;}
h6 {font-size:11px;line-height: 2em;font-weight: 900;}
td{}
th{font-size: 12px;}
a.image, a.image:hover  {border:0;}
ul {
   display:block;
   width:100%;}
ul li {display:block;}
p, a{
   font-size:12px;
   line-height:1.7em;
}
/*******************************************/

body{
   background-image: url(../images/bg.gif);
   background-position: center;
   font-family: tahoma;
   font-size: 12px!important;
   font-weight: normal;
   color: #000000;
   text-decoration: none;
   text-align:right;
   direction:rtl;
   line-height:1.6em;
}
a:link, a:visited{
   color:#483100;
   text-decoration:none;
}
a:hover{
   color:#ffffff;
   text-shadow:0px 1px 1px #000;
}
#tak-all{
   margin:0;
   width:100%;
}
#tak-container1{
   margin:auto;
   width:998px;
}
#tak-header{
   margin:auto;
   width:998px;
   overflow:hidden;    
   height: 267px;
   position:relative;
   background-image: url(../images/header3.png);
   background-repeat: no-repeat;
   background-position: center top;
}
#tak-date{
   color:#000000;
   padding-right:70px;
     padding-top:235px;
}


#tak-search {

   height: 25px;
   left: 40px;
   position: absolute;
   top: 233px;
   right: 810px;
   width: 130px;
   border-radius:4px;
   text-indent:10px;
}
#tak-search_11{
   height:30px;
   width:160px;
   margin-right:45px;
   margin-top:26px;
   overflow:hidden;
}

#tak-topnav{
   background-image: url(../images/topnav.png);
   background-repeat: no-repeat;
   margin: auto;
   height: 41px;
   width: 936px;
}
#tak-container2{
   margin:auto;
   width:936px;
}
#tak-clear1{
   clear:both;
   width:100%;
   height:10px;
}
#tak-main{
   float:left;
   width: 660px;
}
#tak-users1{
   margin:auto;
   width:660px;
}
#tak-user1{
   float:right;
   width:650px;
   height:180px;
   background-image: url(../images/note3.png);
   border-radius:8px;
   padding:5px;
   overflow:hidden;
}
#tak-slideshow{
   margin:auto;
   width:660px;
   background-color:#e4ce92;
   height:200px;
   border-radius:8px;
   overflow:hidden;
}
#tak-tabs{
   margin:auto;
   width:660px;
   background-color:#e4ce92;
   border-radius:8px;
   overflow:hidden;
}
#tak-content{
   margin:auto;
   width:660px;
   background-image: url(../images/back3.jpg);
   border-radius:8px;
}
#tak-content-1{
   margin:auto;
   width:650px;
   overflow:hidden;
}
#tak-user3{
   float:right;
   width:315px;
   height:203px;
  background-image: url(../images/note.png);
   border-radius:8px;
   padding:5px;
   overflow:hidden;
}
#tak-user4{
   float:left;
   width:315px;
   height:203px;
 background-image: url(../images/note2.png);
   border-radius:8px;
   padding:5px;
   overflow:hidden;
}
#tak-right{
   width:265px;
   background-color:#e4ce92;
   float:right;
   border-radius:8px;
}
#tak-container3{
   margin:auto;
   width:100%;
}

#tak-footer{

   background-image: url(../images/bot.png);
   background-repeat: no-repeat;
   background-position: center;
   margin-right: 0%;
   margin-left: 0%;
   height: 137px;
   width: 97%;
   margin-bottom:10px;
   line-height:2.6em;
   text-align:center;
   color: #000000;
}

/************ module specific code ***********/
#tak-right div.module
,#tak-right div.module_menu
,#tak-right div.moduletable
,#tak-right div.moduletable_menu
,#tak-right div.module_text
,#tak-right div.module-hilite {
   width:257px;
   padding-bottom:10px;
   overflow:hidden;
   margin:auto;
}
#tak-right div.module h3
,#tak-right div.module_menu h3
,#tak-right div.moduletable h3
,#tak-right div.moduletable_menu h3
,#tak-right div.module_text h3
,#tak-right div.module-hilite h3{
   font-weight:bold;
   font-family:tahoma;
   background-image: url(../images/right-h3.png);
   background-repeat:no-repeat;
   line-height:52px;
   font-size: 12px;
   height:54px;
   width:257px;
   color: #FFFFFF;
   text-align: center;
   text-shadow:0px 2px 2px #000;
   background-position: center;
   padding-bottom:5px;
   margin: auto;
}
#tak-right div.moduletable_menu li a{
   display:block;
   width: 232px;
   text-indent:15px;
   margin-top:auto;
   border-radius:6px;
   line-height:27px;
   background-image: url(../images/right-li.png);
   background-repeat: no-repeat;
   background-position: right top;
   height: 33px;
   margin-right: auto;
   margin-bottom: auto;
   margin-left: auto;
   color:#805700;
}
#tak-right div.moduletable_menu li a:hover{
   background-image: url(../images/right-li.png);
   background-repeat: no-repeat;
   background-position: right bottom;
   color:#fff;
}
#tak-left div.module
,#tak-left div.module_menu
,#tak-left div.moduletable
,#tak-left div.moduletable_menu
,#tak-left div.module_text
,#tak-left div.module-hilite {
   width:190px;
   padding-bottom:10px;
   overflow:hidden;
}
#tak-left div.module h3
,#tak-left div.module_menu h3
,#tak-left div.moduletable h3
,#tak-left div.moduletable_menu h3
,#tak-left div.module_text h3
,#tak-left div.module-hilite h3{
   font-weight:bold;
   font-family:tahoma;
   background-image: url(../images/col-h3.jpg);
   background-repeat:no-repeat;
   line-height:52px;
   font-size: 12px;
   height:52px;
   width:177px;
   color: #FFFFFF;
   text-align: center;
   text-shadow:0px 2px 2px #000;
   background-position: center;
   padding-bottom:5px;
   margin: auto;
}
#tak-left div.moduletable_menu li a{
   display:block;    
   width: 175px;
   text-indent:10px;
   padding:3px;
   background-color:#eee;
   border:1px solid #bbb;
   margin:auto;
   margin-top:5px;
   border-radius:6px;
   line-height:normal;
}
#tak-left div.moduletable_menu li a:hover{
   background-color:#fff;
}
#tak-users1 div.tak-module
,#tak-users1 div.module_menu
,#tak-users1 div.moduletable
,#tak-users1 div.moduletable_menu
,#tak-users1 div.module_text
,#tak-users1 div.module-hilite {
   width:660px;
   overflow:hidden;
   background-image:url(../images/bottom-m.jpg);
   background-repeat: repeat-y;
}
#tak-users1 div.tak-module h3
,#tak-users1 div.module_menu h3
,#tak-users1 div.moduletable h3
,#tak-users1 div.moduletable_menu h3
,#tak-users1 div.module_text h3
,#tak-users1 div.module-hilite h3{
   font-weight:bold;
   font-family:tahoma;
   line-height:42px;
   font-size: 1px;
   height:45px;
   width:660px;
   color: #FFFFFF;
   text-align: right;
   text-indent:65px;
   text-shadow:0px 2px 2px #000;
   background-position: center;
   margin: auto;
}

/**********/
.blog-featured{
   width:99%;
   margin:auto;
   text-align:justify;
}
.items-leading{
}
.item-page{
}
#tak-page_heading{
   font-family:tahoma;
   font-size:18px;
   text-align:center;
   color:#000;
}
#tak-article-title{
   display:block;
   height:64px;
   background-image: url(../images/article_title.png);
   background-repeat: no-repeat;
   margin: auto;
   width: 640px;
}
#tak-article-title span{
   color: #EEEEEE;
   display: block;
   font-family: tahoma;
   font-size: 13px;
   font-weight: bold;
   padding-right: 85px;
   padding-top: 15px;
   text-shadow: 0 2px 2px #000000;
}
#tak-article-title a {
   color: #000a27;
   display: block;
   font-family: tahoma;
   font-size: 13px;
   font-weight: bold;
   padding-right: 85px;
   padding-top: 15px;

}
#tak-article-title a:hover{
   color:#fff;
}
.content_rating{
}
.article-info{
}
.article-info-term{
}
.category-name{
}
.create{
}
.published{
}
.createdby{
}
.hits{
}
.readmore{
   margin-top:10px;
}
.readmore a{
   margin-top:5px;
   padding:5px;
}
.item-separator{
   height:11px;
   margin-bottom:10px;
   background-image: url(../images/article_separator.png);
   background-repeat: no-repeat;
   background-position: center;
}
ul.actions {
   background-color:#eee;
   height:20px;
   display:none;
}
ul.actions li{
   float:left;

}
.article-info{
   font-size:12px;
   color:#999;
   display:none;
}
.pagenav{
   margin:auto;
   width:60%;
}
.pagenav-prev{
   float:right;
}
.pagenav-next{
   float:left;
}
.search label{
   display:none;
}
#mod-search-searchword{
   background-color: transparent;
   border:none;
   width:200px;
   height:30px;
   color:#eee;
}
.items-more{
}
.pagination{
   text-align:center;
}
.pagination ul{
   margin:auto;
   width:80%;
   text-align:center;

}
.pagination li{
   display:inline-block;
   padding:2px;
   _display:block;
   _float:right;
   *display:block;
   *float:right;
}
li .pagenav{
   border:1px solid #5b4300;
   border-radius:3px;
   background-color:#e3c36d;
   padding:2px;
}
/* category and contact list */
.category-list{
   background-color:#eee;
   border:1px solid #ccc;
   padding:5px;
   border-radius:5px;
}
.category{
   background-color:#fff;
   width:100%;
}
.category thead{
   background-color:#957d3c;
}
.category thead a{
   color:#fff;
}
.category thead th{
   padding:10px;
}
.category tbody tr td{
   padding:10px;
}
.category tbody tr:hover{
   background-color:#FFFFDF;
}
.cat-list-row0{
   background-color:#FFF;
}
.cat-list-row1{
   background-color:#ECF7FF;
}
/******************/
/* search result */
.result-title{
   background-color:#eee;
   margin:10px;
   padding:2px;
}
.result-text{
}
.result-category{
   font-size:90%;
   color:#999;
}
.result-created{
   font-size:90%;
   color:#999;
}

/****************/
/* column set */
.item column-1{
   background-color:#096;
   float:right;
}

/* ++++++++++++++  blog  ++++++++++++++ */

.cols-1{
       display: block;
       float: none !important;
       margin: 0 !important;
}
.cols-2 .column-1{
       width:46%;
       float:left;
}
.cols-2 .column-2{
       width:46%;
       float:right;
       margin:0
}
.cols-3 .column-1{
       float:right;
       width:29%;
       padding:0px 5px;
       margin-right:4%

}
.cols-3 .column-2{
       float:left;
       width:29%;
       margin-left:0;
       padding:0px 5px
}
.cols-3 .column-3{
       float:right;
       width:29%;
       padding:0px 5px
}
.items-row
{
       overflow:hidden;
       margin-bottom:10px !important;
}
.column-1,
.column-2,
.column-3{
       padding:10px 5px
}
.column-2{
       width:55%;
       margin-left:40%;
}
.column-3{
       width:30%
}
.blog-more{
       padding:10px 5px
}
/**************************************/
.breadcrumbs{
   color:#eee;
}
.showHere{

}
/**********************/

یا این کار رو بکنم، یا اینکه واسه مقدمه ی مطالب ویژه که توی صفحه ی اول میان، مثلا بشه تعیین کنم که حداکثر مثلا 4 خط مطلب نشون بده و بقیه ش توی ادامه مطلب نشون داده بشه! که اندازه خلاصه مطالب ویژه که توی صفحه ی اول قرار می گیرند همش ی اندازه باشه! مثلا 4 خط! که بشه بجای بک گراند، یه باکس تعریف کنم! که خلاصه مطالب توی این باکس قرار بگیره که اندازه ی ثابت داره.

اینطوری مثلا: http://img.online-dl.com/images/y392_Untitled.jpg

http://img.online-dl.com/images/j9891_Untitled.jpg

مصطفی صفرعلی · آبان 91

با سلام

تقریبا" حدود 30 خط مونده به انتهای فایل css کد زیر قرار داره

.items-row
{
       overflow:hidden;
       margin-bottom:10px !important;
}

کافیه که به کد بالا خاصیت background اضافه کنید ، همونی میشه که میخواهید

موفق و پیروز باشید

یا حق

:64 (17):

samiraaaa · آبان 91

سلام. این کار رو کردم نشد که! میشه کد اصلاح شده css رو واسم بذارید!؟

دقیقا همین خط کدی که گفتید داخل فایل css هست!!!! اما اتفاقی نمی افته که!

.items-row
{
    overflow:hidden;
    background-image: url(../images/back3.jpg);
    margin-bottom:10px !important;
}

اینطوری دیگه!؟ نشد!! بک گراند قسمت content رو (همین زیر - اولای فایل css) حذف کردم و آوردمش اینجا که گفتید، اما نشد!

#tak-content{
   margin:auto;
   width:660px;
   background-image: url(../images/back3.jpg);
   border-radius:8px;
}

مصطفی صفرعلی · آبان 91

با سلام

کد زیر را به انتهای فایل css تون اضافه کنید

div.blog-featured div.items-row div.item {
   background-image: url(../images/back3.jpg);
}

اگر باز هم یکسره نشان داده میشه کد زیر را استفاده کنید

div.blog-featured div.items-row div.item {
   background-image: url(../images/back3.jpg);
   margin: 0 0 10px 0 !important;
}

موفق و پیروز باشید

یا حق

:64 (17):

samiraaaa · آبان 91

هیچکدومش نشد!

ورود

آخرین ارسال های انجمن جومینا

دانلود جوملای فارسی

دانلود افزونه ها

پیامک متصل به جوملا

کانال تلگرام جومینا

جدا کردن بک گراند مطالب در صفحه اول

پست های پیشنهاد شده

samiraaaa 3

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

مصطفی صفرعلی 2,891

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

samiraaaa 3

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

مصطفی صفرعلی 2,891

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

samiraaaa 3

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

فهرست

فعالیت ها