قرار دادن تصویر زمینه برای یک ماژول

[drupal666]

سلام به همه عزیزان . سوال من اینه که چه طوری میشه برای محل قرار گیری یک ماژول تصویر زمینه گذاشت ؟ به عنوان مثال ماژول تصاویر تصادفی رو در نظر بگیرید . فرض کنید تصاویری که نمایش داده میشن دارای ابعاد 200*200 هستند ، حالا می خوایم یک Background زرد رنگ با ابعاد 300*300 پشت این تصاویر قرار بگیره که وقتی عکس ها نمایش داده میشن ، مثل یک قاب زرد رنگ دور عکس به نظر برسه . لطفا اگه کسی میدونه راهنمایی کنه ، ممنونم .

[mhadaily]

باید یک کلاس خاص درست کنید برای اون موقعیت ماژول

و بعد به اون کلاس بک گراند بدید و بعد اون ماژول رو در اون موقعیت انتشار بدید و در پسوند کلاس ماژول پسوند اون کلاس رو بزنید تا

از اون کلاس بهره بگیره

در زمینه ی کلاس دادن می تونید آموزش ها و سایر تاپیک های انجمن در این رابطه رو بررسی کنی قبلا بحث شده

[drupal666]

مجید جان در مورد ایجاد کلاس خیلی سرچ کردم . تو تاپیک هایی که خوندم یا گفته شده بود "قبلا بحث شده" یا اینکه ربطی به موضوع من نداشت . هر چی هم بیشتر سرچ می کردم بیشتر گیج میشدم . لطف کن خودت بگو که من چطوری کلاس درست کنم و بهش بک گراند بدم . خدا خیرت بده :)

[abtin]

پسوند كلاس ماژول چيست ؟ (<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b>)

اين تاپيك را مطالعه كنيد فكر كنم روال كار دستتون بياد .

[drupal666]

ممنونم ارت آبتین عزیز . طبق همین عمل می کنم ببینم چی میشه

[drupal666]

آقا من به اول فایل CSS کد زیر رو اضافه کردم و در قسمت پسوند کلاس ماژول تصویر تصادفی ، test رو وارد کردم اما هیچ تغییری حاصل نشد .


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(&#039;../images/bgmod.jpg&#039;);
}
table.moduletabletest td {
border: 3px solid #F9F9F9;
font-weight: normal;
}

من فقط می خوام فایل bgmod.jpg که یک مربع نارنجی رنگ با گوشه های گرد هست ، به عنوان زمینه برای ماژولم نمایش داده بشه ، همین . از ظهر تا حالا هم دارم ور میرم باهاش اما نمیشه . آیا نکته ای هست که من فراموش کرده باشم؟؟؟

[abtin]

از اين استفاده كن



table.moduletabletest {
font-size: 11px;
font-family: tahoma;
text-align: center;
background-image:url(../images/bgmod.jpg);
}

[drupal666]

متاسفانه باز هم نشد . کد کامل 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 : &quot;Trebuchet MS&quot;, 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 &lt;div&gt; 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 (&quot;&lt;&lt; Start &lt; Prev Next &gt; End &gt;&gt;&quot;) when they do not appear as hyperlinks (when only a few articles exist).*/
.pagenavbar:link {} /*Style for the footer navigation (&quot;&lt;&lt; Start &lt; Prev Next &gt; End &gt;&gt;&quot;) when they become hyper links*/
.pagenavbar:visited {}
.pagenav {} /* as the name implies, this is for formatting texts for those &quot;&lt;&lt; Start &lt; Previous 1 Next &gt; End &gt;&gt;&quot; 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 &quot;Read More&quot; 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 &quot;More&quot; 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 &quot;DESCRIPTION&quot; 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 &quot;Tables of Content&quot; ( 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&#039;s page.
Example: table header of &quot;Date&quot;, &quot;Item Title&quot;, &quot;Author&quot; and &quot;Hits&quot;? */
.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 &quot;Last updated on&quot; text at the end of articles/contents */
.small {
color: #999999;
font-size:10px;
} /* Formating &quot;Written by:....&quot; text */
.smalldark {}/*Found in poll result page, for &quot; Number of Voters&quot;.. 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&#039;s titles under the &quot;Weblinks&quot;
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&#039;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 &quot;Search Keyword: test returned 4 matches&quot; 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 &quot;Tab&quot; buttons when editing contents through the frontend as admin.
This .ontab is the styling for the tab when it is active or after its &quot;clicked&quot; */
.offtab {} /* Same as above, used for styling of the &quot;Tab&quot; buttons when editing contents through the frontend.
This the styling for the tab when it is NOT active or when it is NOT &quot;clicked&quot; */
.tabpadding {} /* this style is used set the size of the tab in the above */
.tabheading {} /* Not too sure what this is used for. Couldn&#039;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);
}

همونطور کی می بینید این بار کد
table.moduletabletest {
font-size: 20px;
font-family: tahoma;
text-align: center;
background-image:url(../images/bgmod.jpg);
}

رو به آخر فایل اضافه کردم . در قسمت پسوند کلاس ماژول یکی از منوهایی که دارم ، test رو وارد کردم و Save کردم . کش براوزر رو هم پاک کردم اما هیچ تغییری در نحوه نمایش ماژول داده نمیشه . حتی سایز فونتش هم تغییر نمی کنه . دیگه گیج شدم !!! لطفا بگید چی کار کنم !!!

[abtin]

آدرس سايتتون رو لطف مي كنيد ؟

[drupal666]

من کد رو به شکل زیر تغییر دادم ، فعلا که مشکل حل شده :)


table.moduletabletest
{
background-image:url(&#039;bgmod.jpg&#039;);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
height: 300px;
width: 300px;
}

از پیگیری شما هم سپاسگزارم