نمایش نسخه قابل چاپ
سلام به همه عزیزان . سوال من اینه که چه طوری میشه برای محل قرار گیری یک ماژول تصویر زمینه گذاشت ؟ به عنوان مثال ماژول تصاویر تصادفی رو در نظر بگیرید . فرض کنید تصاویری که نمایش داده میشن دارای ابعاد 200*200 هستند ، حالا می خوایم یک Background زرد رنگ با ابعاد 300*300 پشت این تصاویر قرار بگیره که وقتی عکس ها نمایش داده میشن ، مثل یک قاب زرد رنگ دور عکس به نظر برسه . لطفا اگه کسی میدونه راهنمایی کنه ، ممنونم .
باید یک کلاس خاص درست کنید برای اون موقعیت ماژول
و بعد به اون کلاس بک گراند بدید و بعد اون ماژول رو در اون موقعیت انتشار بدید و در پسوند کلاس ماژول پسوند اون کلاس رو بزنید تا
از اون کلاس بهره بگیره
در زمینه ی کلاس دادن می تونید آموزش ها و سایر تاپیک های انجمن در این رابطه رو بررسی کنی قبلا بحث شده
مجید جان در مورد ایجاد کلاس خیلی سرچ کردم . تو تاپیک هایی که خوندم یا گفته شده بود "قبلا بحث شده" یا اینکه ربطی به موضوع من نداشت . هر چی هم بیشتر سرچ می کردم بیشتر گیج میشدم . لطف کن خودت بگو که من چطوری کلاس درست کنم و بهش بک گراند بدم . خدا خیرت بده :)
[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
اين تاپيك را مطالعه كنيد فكر كنم روال كار دستتون بياد .
ممنونم ارت آبتین عزیز . طبق همین عمل می کنم ببینم چی میشه
آقا من به اول فایل CSS کد زیر رو اضافه کردم و در قسمت پسوند کلاس ماژول تصویر تصادفی ، test رو وارد کردم اما هیچ تغییری حاصل نشد .
من فقط می خوام فایل bgmod.jpg که یک مربع نارنجی رنگ با گوشه های گرد هست ، به عنوان زمینه برای ماژولم نمایش داده بشه ، همین . از ظهر تا حالا هم دارم ور میرم باهاش اما نمیشه . آیا نکته ای هست که من فراموش کرده باشم؟؟؟کد:table.moduletabletest {
font-size: 11px;
background-color : #F9F9F9;
border: 1px solid #D9D9D9;
width: 100%;
margin-bottom: 10px;
}
table.moduletabletest th {
border: 3px solid #F9F9F9;
font-family: tahoma;
text-align: center;
color: #000164;
height: 27px;
background-color : #95CBE9;
background: url('../images/bgmod.jpg');
}
table.moduletabletest td {
border: 3px solid #F9F9F9;
font-weight: normal;
}
از اين استفاده كن
کد:table.moduletabletest {
font-size: 11px;
font-family: tahoma;
text-align: center;
background-image:url(../images/bgmod.jpg);
}
متاسفانه باز هم نشد . کد کامل CSS رو جهت رویت شما می گذارم اینجا :
همونطور کی می بینید این بار کدکد:body {
background-image: url(templates/mp_comanche/images/bck.gif);
background-repeat: repeat-x;
background-position: center top;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
color : #666666;
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size : 10px;
scrollbar-3dlight-color: #333333;
scrollbar-base-color: #333333;
scrollbar-darkshadow-color: #f0f0f0;
scrollbar-face-color: #900000;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #333333;
scrollbar-track-color: #f0f0f0;
scrollbar-arrow-color: #ffffff;
}
p {
font-size : 11px;
}
td {
font-size : 11px;}
tr {
font-size : 11px;}
ul {
font-size : 11px;}
a:link {
font-size : 10px;
color : #666666;
}
a:visited {
font-size : 10px;
color : #666666;
}
a:hover {
font-size : 10px;
color : #900000;
}
hr {} /* horizontal line in your template*/
hr.separator {}
/* FORMS SETTINGS */
.button {
color : #666666;
border : 1px solid #999999;
background-color : #ffffff;
margin-top : 0px;
font-size : 9px;
}
.inputbox {
font-size: 9px;
text-align: left;
color: #333333;
background-image:url(../images/back_main.jpg);
border: 1px solid #999999;
}
.search {} /*formatting the <div> which holds search items: inputbox, search button...*/
/* NAVIGATION/MENU SETTINGS */
a.mainlevel{
margin : 0px;
padding-bottom : 5px;
font-size : 10px;
padding: 3px;
} /* this styling is for the MAIN items in the menu */
a.mainlevel:link {
color: #666666;
font-size : 11px;
background-image: url(../images/menubck2.gif);
background-repeat: no-repeat;
font-weight : normal;
width : 100%;
text-decoration : none;
text-transform : uppercase;
display : block;
letter-spacing: 2px;
padding-bottom : 5px;
}
a.mainlevel:visited {
color: #666666;
font-size : 11px;
background-image: url(../images/menubck2.gif);
background-repeat: no-repeat;
font-weight : normal;
width : 100%;
text-decoration : none;
text-transform : uppercase;
display : block;
letter-spacing: 2px;
padding-bottom : 5px;
}
a.mainlevel:hover {
color: #666666;
font-size : 11px;
background-image: url(../images/menubck3.gif);
background-repeat: no-repeat;
font-weight : normal;
width : 100%;
text-decoration : none;
text-transform : uppercase;
display : block;
letter-spacing: 2px;
padding-bottom : 5px;
}
#active_menu.mainlevel {
color: #900000;
}
/* this styling is for the menu item when it is active, even in main/sub position*/
ul#mainlevel-nav {
color: #666666;}
ul#mainlevel-nav li{
color: #666666;}
a.mainlevel-nav a:link {
color: #666666;}
a.mainlevel-nav a:visited{
color: #666666;}
a.mainlevel-nav a:hover {
color: #ffffff;}
a.sublevel{
padding-left: 20px;
} /* this styling is for menu items that HAS A PARENT */
a.sublevel:link {}
a.sublevel:visited {}
a.sublevel:hover {}
#active_menu.sublevel {
color: #ffffff;
background-color: #900000;
}
.pagenavbar {} /*Sets the style for the footer navigation ("<< Start < Prev Next > End >>") when they do not appear as hyperlinks (when only a few articles exist).*/
.pagenavbar:link {} /*Style for the footer navigation ("<< Start < Prev Next > End >>") when they become hyper links*/
.pagenavbar:visited {}
.pagenav {} /* as the name implies, this is for formatting texts for those "<< Start < Previous 1 Next > End >>" links */
a.pagenav:visited {}
a.pagenav:hover {}
a.readon:link {
padding-left: 10px;
background-image: url(../images/menubck5.gif);
background-repeat: no-repeat;
color: #666666;
} /*Style for the "Read More" link that is displayed for large content items*/
a.readon:hover {
padding-left: 10px;
background-image: url(../images/menubck5.gif);
background-repeat: no-repeat;
color: #900000;
}
a.readon:visited {
padding-left: 10px;
background-image: url(../images/menubck5.gif);
background-repeat: no-repeat;
}
.back_button {
text-align: right;
}
.pagenav_prev {} /*Style for the PRE button*/
.pagenav_next {} /*Style for the NEXT button*/
.latestnews ul {} /*Style for latest news list - by default, latest news is user1 module*/
.latestnews li {}
.mostread ul{} /*Style for most popular list - by default, most popular is user2 module*/
.mostread li{}
/* CONTENT PAGE SETTINGS */
a.category:link {}
a.category:hover {}
a.category:visited {}
.blogsection {} /* Formatting the links in Blog section */
.blog_more {} /*The "More" text in blog section*/
a.blogsection:link {} /* set the link format */
a.blogsection:visited {} /* same as above, but to set the visited link format */
a.blogsection:hover {} /* same as above, but for links with mouse pointer over it */
.componentheading {
font-size : 12px;
font-weight : bold;
width : 100%;
height: 20px;
margin-bottom: 0px;
margin-top: 3px;
color: #666666;
text-transform : uppercase;
text-indent: 20px;
background-image: url(../images/menubck4.gif);
background-repeat: no-repeat;
letter-spacing: 3px;
}/* Title of the component being used to display the content.*/
.contentheading {
}
table.contentpaneopen {
width: 100%;
}
table.contentpaneopen td {
width: 100%;
padding:0px;
}
table.contentpane {
width: 100%;
margin: 0px;
padding: 0px;
}
td.contentheading {
font-size : 12px;
font-weight : bold;
width : 100%;
height: 20px;
margin-bottom: 0px;
margin-top: 3px;
color: #666666;
text-transform : uppercase;
text-indent: 20px;
background-image: url(../images/menubck4.gif);
background-repeat: no-repeat;
letter-spacing: 3px;
}
/* Title of the content, article, etc. being displayed.*/
.contentpane {} /* Table that holds all non-article information (components, category lists, contact forms, etc).*/
.contentpaneopen {} /* Table that holds the actual text for an article.*/
.contentpagetitle {} /*Title of articles*/
a.contentpagetitle:hover {} /*Title of articles when appeare as links */
a.contentpagetitle:link {}
a.contentpagetitle:visited {}
.contentdescription {} /* Formating the "DESCRIPTION" of sections, categories (News/Weblinks/Latest news...) */
table.contenttoc {
background-color: #cccccc;
border : 1px solid #999999;
} /* Formating the table of the Tables of Contents for multiple pages content or article */
table.contenttoc td {
padding-left: 3px;
padding-right: 3px;
} /* same as above, used to format the td and able cells */
table.contenttoc th {
padding-left: 3px;
padding-right: 3px;
} /* same as above, used to format the th of "Tables of Content" ( normally Article Index)*/
table.contenttoc td.toclink {
} /* same as above, used to format toc link texts*/
a.toclink:link {
} /* same as above, used to format toc link text status*/
a.toclink:visited {}
a.toclink:hover {}
/* MAMBO SECTIONS LISTINGS */
.sectiontableheader {} /* This is for styling the section table headers on a SECTION's page.
Example: table header of "Date", "Item Title", "Author" and "Hits"? */
.sectiontableentry1 {
}
.sectiontableentry2 {
}
/* MAMBO MODULES FORMATTING */
table.moduletable {
width : 160px;
table-layout : auto;
padding : 3px;
margin-top:5px;
margin-left: 5px;
background-image: url(..images/dot2.gif);
background-repeat: no-repeat;
background-position: top;
font-size:11px;
} /* Formatting the module table */
table.moduletable th {
background-image:url(../images/menubck.gif);
font-size : 10px;
font-weight : normal;
width : 170px;
color: #666666;
text-transform : uppercase;
height: 20px;
padding-top: 3px;
text-align:center;
padding-left: 5px;
font-size:11px;
} /* Formatting the module header, and the module titles */
table.moduletable td {
} /* Formatting the table cells of the module table */
/* MISCELLANEOUS */
/* Dates , Authors*/
.createdate {
color: #999999;
font-size:10px;
} /* For styling the date the content/articles are created under contents title */
.modifydate {
color: #999999;
font-size:10px;
} /* Formating "Last updated on" text at the end of articles/contents */
.small {
color: #999999;
font-size:10px;
} /* Formating "Written by:...." text */
.smalldark {}/*Found in poll result page, for " Number of Voters".. text */
/* Polls */
.poll {} /* format the td of poll table */
.pollstableborder {} /* set the border properties of the polls voting table */
/* Weblinks */
.weblinks{} /* well.. to format the link's titles under the "Weblinks"
section on the frontend */
a.weblinks:hover {} /* same as above, but for link with mouseover */
/* Newsfeeds */
.newsfeedheading {} /* The newsfeed title. NOTE: This will not affect the newsfeed's news title! */
.newsfeeddate {} /* yeah.. the date on the newsfeed */
.fase4rdf {} /* this is the body text of the newsfeed */
/* Search page */
table.searchintro {} /* This is for formatting the box with "Search Keyword: test returned 4 matches" box
that appears after you have entered a search value. It appears on the mainbody
with the search results */
/* MAMBO TABBED FRONTEND ADMIN INTERFACE */
/* The CSS below efines how the frontend admin interface when logged in */
.ontab {}/* For styling of the "Tab" buttons when editing contents through the frontend as admin.
This .ontab is the styling for the tab when it is active or after its "clicked" */
.offtab {} /* Same as above, used for styling of the "Tab" buttons when editing contents through the frontend.
This the styling for the tab when it is NOT active or when it is NOT "clicked" */
.tabpadding {} /* this style is used set the size of the tab in the above */
.tabheading {} /* Not too sure what this is used for. Couldn't find anything related to it yet at the moment */
.pagetext {} /* this style is used to style the content of the editing form contents (where HTMLArea sits and all its forms + contents) in
the frontend Administration interface */
.pathway {
font-size : 10px;
color : #666666;
padding-left : 8px;
padding-bottom: 0px;
VERTICAL-ALIGN: top;
}
a.pathway:link, a.pathway:visited {
color : #666666;
font-size : 10px;
padding-left : 0px;
}
a.pathway:hover {
font-size : 10px;
padding-left : 0px;
color: #000000;
}
.copyright {
font-size : 10px;
padding-left : 0px;
color: #333333;
}
table.moduletabletest {
font-size: 20px;
font-family: tahoma;
text-align: center;
background-image:url(../images/bgmod.jpg);
}
رو به آخر فایل اضافه کردم . در قسمت پسوند کلاس ماژول یکی از منوهایی که دارم ، test رو وارد کردم و Save کردم . کش براوزر رو هم پاک کردم اما هیچ تغییری در نحوه نمایش ماژول داده نمیشه . حتی سایز فونتش هم تغییر نمی کنه . دیگه گیج شدم !!! لطفا بگید چی کار کنم !!!کد:table.moduletabletest {
font-size: 20px;
font-family: tahoma;
text-align: center;
background-image:url(../images/bgmod.jpg);
}
آدرس سايتتون رو لطف مي كنيد ؟
من کد رو به شکل زیر تغییر دادم ، فعلا که مشکل حل شده :)
از پیگیری شما هم سپاسگزارمکد:table.moduletabletest
{
background-image:url('bgmod.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
height: 300px;
width: 300px;
}