مشکل در طراحی قالب.(لطفا سریع)

jafararefi · شهریور 92

سلام.خسته نباشید.دارم یک قالب برای جوملا طراحی می کنم. اما می خوام کاری کنم که وقتی ماژولی به یکی از موقعیت های right یا left اختصاص داده می شه ماژول ها ازهم فاصله داشته باشند.چکار کنم؟

لطفا سریع کمکم کنید.خیلی متشکرم

درضمن من یه تاپیک به این عنوان زده بودم ودوستان جواب هایی هم دادند ولی هیچ کدوم درست کار نکرد.

این از عکس:[ATTACH=CONFIG]4516[/ATTACH]

این از کد های سی اس اس:

@font-face {
   font-family: 'pars';
   src: url('../font/BYekan.eot');
   src: url('../font/BYekan.eot?#iefix') format('embedded-opentype'),
        url('../font/BYekan.woff') format('woff'),
        url('../font/BYekan.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}
body {
background-color:#3b3c15;
color:#333333;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:20px;
direction:rtl;
}

#main{
width:980px;
height:auto;
margin:0 auto;
border-radius:15px;	





}

#heder{
height:284px;
width:980px;
background-image: url(../images/heder.jpg);
margin-bottom:10px;
border-radius:15px;

}

#search {
float:left
height:25px;
width:250px;
margin-right:720px;
padding-top:260px;
color:#999999;	
}

@charset "utf-8";
/* CSS Document */


<!-- CSS code -->



/* menu*/

#menu1 { 
direction:rtl;
overflow: visible;
color: #000;
position: relative;
z-index: 999;
}

#menu2 {}

#menu {  
min-height: 40px;
width:auto;
background-color: #819719;
margin:0 auto;
border: none ; 
-webkit-border-radius: 8px;
-moz-border-radius: 8px; border-radius: 8px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
*zoom: 1;
}

#menu ul {
margin:0;
padding:0;
}

#menu ul li {
list-style:none;
display:inline-block;
position: relative;
padding:0;
margin:0;
height:20px;
border-left:1px solid #b5c5e5;
font-family:pars,Arial, Helvetica, sans-serif;
}

#menu ul li a {
display:block;
padding:0 10px;
margin:0;
line-height:35px;
text-decoration:none;
font-size:15px;
color:#000;
}

#menu .menu li a {
color: #000;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}

#menu .menu li a:hover {
background-color: transparent;
color: #fd2003;
text-decoration: none;
background-color: #dadacf;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}

#menu .menu .active a,#menu .nav .active a:hover {
color: #ce205a;
text-decoration: none;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}

#menu ul li a span.menutitle {
 display:block;
}

#menu ul li a span.menudesc {
float:right;
clear:both;
font-size:11px;
line-height:12px;
margin:-20px 0 0 0;
font-family:pars,Arial, Helvetica, sans-serif
}

/* submenu */
#menu ul li ul {
position:absolute;
width:170px;
right:-999em;
margin:0;
padding:5px;
background-color: #819719;
border: 3px solid #dedede;
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
}

#menu ul li a:hover {
text-decoration:overline;
text-shadow:0px 1px 1px #FFF;
}

#menu ul li:hover ul, #menu ul li.sfHover ul {
right:0;
}

#menu ul li ul li:hover ul {
right:170px;
top:0;
}

#menu ul li ul li {
padding:0;
height:auto;
width:170px;
margin:0 0 5px 0;
border-right:none;
background-color:#000000;
}

#menu ul li:hover ul li a {
text-shadow:none;
margin:0;
padding:1px 10px 1px 0px;
line-height:25px;
font-size:13px;
text-align:right;
}

#menu ul li:hover ul li {
background-color:#FFFFFF;
border-radius:7px;
}

#menu ul li:hover ul li a,
#menu ul li ul li a,
#menu ul li li ul li a,
#menu ul li.active ul li a,
#menu ul li ul li.active ul li a,
#menu ul li.active ul li a,
#menu ul li ul li.active ul li a {
color:#000;
border-radius:25px
border:1px solid #b5c5e5;
}

#menu ul li ul li a:hover,#menu ul li ul li.active a,#menu ul li.active ul li a:hover,#menu ul li li ul li a:hover,#menu ul li ul li.active ul li.active a,#menu ul li ul li.active a,#menu ul li.active ul li a:hover {
color: #000000;
text-decoration: none;
background-color: #b2d21a;
border-color: #b2d21a #b2d21a #b2d21a;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-style:solid; border-width:1px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
   border-radius: 8px;
}

#menu ul li ul ul, #menu ul li:hover ul ul,#menu ul li.sfHover ul ul ul, #menu ul li.sfHover ul ul ul ul {
right:-999em;
padding:5px;
margin:-5px 0 0 0;
}




#slider {
height:200px;
width:980px;
border-radius:20px;
margin:0 auto;
overflow:hidden;
padding:5px 0px 0px 0px;

}

#top-users {
width:980px;
height:200px;
float:left;
margin: 0 auto;
margin-top:10px;
}

#user1 {
height:200px;
width:240px;
border-radius:5px;
background-color:#CCCC99;
margin-bottom:5px;
float:left;
overflow:hidden;


}

#user1, #user2, #user3, #user4, #b-user1, #b-user2, #b-user3, #buser4{
background: -linear-gradient(top , #999966 0%, #999933 50%, #999900 100%);
background: -moz-linear-gradient(top , #999966 0%, #999933 50%, #999900 100%);
background: -webkit-linear-gradient(top , #999966 0%, #999933 0%, #999900 100%);
background: -o-linear-gradient(top , #999966 0%, #999933 50%, #999900 100%);
filter: progid:DXimagetransform.Microsoft.gradient(startcolorstr='#999966',endcolorstr='#999900');
}
h3{
height:42px;
weight:150px;
background-image: url(../images/loh.png);
background-repeat:no-repeat;
margin:0 auto;
margin-top:7px;
margin-bottom:5px;
font-family:pars;
font-size:17px;
font-style:normal;
color:#CCCCCC;
text-align:center;
padding-top:5px;
}




#user1 .moduletable{
font-family:pars;
font-size:16px;
}

#user2 {
height:200px;
width:240px;
border-radius:5px;
background-color:#CCCC99;
float:left;
margin-left:5px;
overflow:hidden;		
}

#user2 .moduletable{
font-family:pars;
font-size:16px;
color:#000000;
}

#user3 {
height:200px;
width:240px;
border-radius:5px;
background-color:#CCCC99;
float:left;	
margin-left:5px;
overflow:hidden;	
}

#user3 .moduletable{
font-family:pars;
font-size:16px;
color:#000000;
}

#user4 {
height:200px;
width:240px;
border-radius:5px;
background-color:#CCCC99;
float:left;
margin-left:5px;
overflow:hidden;

}

#user4 .moduletable{
font-family:pars;
font-size:16px;
color:#000000;
}
#center {
width:980px;
height:auto;
margin:5px auto 5px auto;
}

#left {
width:230px;
height:auto;
margin:0 auto;
margin-bottom:5px;
margin-top:5px;
border-radius:15px;
background-color:#CCCC99;
float:left;
overflow:hidden;

}

#left .moduletable
{margin-top:10px;}

#left .moduletable h3{
background-image: url(../images/12.png);

}




#left .moduletable  form#login-form  ul  li   {
list-style:none;
font-family:pars;
font-size:11px;
}

#left  .moduletable  form#login-form  fieldset.userdata  p#form-login-username  label{
font-family:pars;
font-size:13px;
}

#left .moduletable  form#login-form  fieldset.userdata  p#form-login-password  label{
font-family:pars;
font-size:13px;
}

#left .moduletable  form#login-form  fieldset.userdata  p#form-login-remember label{
font-family:Pars;
font-size:13px;
}

#left .moduletable form#login-form  fieldset.userdata  p#form-login-username  input#modlgn-username.inputbox{
width:130px;
height:20px;
border-radius:50px;
background-image: url(../images/user1.png);
background-position:right;
background-size:contain;
background-repeat:no-repeat;
margin-top:10px;

}

#left  div.moduletable  form#login-form  fieldset.userdata  p#form-login-password  input#modlgn-passwd.inputbox{
width:130px;
height:20px;
border-radius:50px;
background-image: url(../images/pass1.png);
background-position:right;
background-size:contain;
background-repeat:no-repeat;
margin-right:57px;
margin-top:-23px;
}

#left .moduletable  form#login-form  fieldset.userdata  input.button{
background-color:#999900;
margin-right:150px;
height:30px;
width:60px;
border-radius:10px;
font-family:pars;
}






#contents {
width:503px;
height:auto;
background-color:#e7e7e1;
margin:0 auto;
margin-top:5px;
border-radius:15px;
background-color:;
float:left;
margin-left:5px;
overflow:hidden;
font-family:pars;
font-size:14px;
padding:0px 5px 0px 5px;
}

#contents .blog-featured   h2{
width:450px;
height:33px;
background-color:#999933;
border-radius:10px;
font-size:16px;
padding:8px 6px 0px 0px;
background-image: url(../images/30.png);
background-size:contain;
background-repeat:no-repeat;


	}

#contents .blog-featured   .items row{

margin-bottom:5px;
}	



#right {
width:230px;
height:auto;
margin:0 auto;
margin-top:5px;
border-radius:15px;
background-color:#CCCC99;
float:right;
overflow:hidden;
font-family:pars;
font-size:16px;

}



#right .moduletable h3{
background-image: url(../images/12.png);


}


#right  div.moduletable  p{
text-align:center;

}




#b-users {
width:980px;
height:200px;
float:left;
margin: 0 auto;
margin-top:5px;
}

#b-user1 {
height:200px;
width:240px;
border-radius:15px;
background-color:#CCCC99;
float:left;
overflow:hidden;	
}

#b-user2 {
height:200px;
width:240px;
border-radius:15px;
background-color:#CCCC99;
float:left;
margin-left:5px;
overflow:hidden;		
}

#b-user3 {
height:200px;
width:240px;
border-radius:15px;
background-color:#CCCC99;
float:left;	
margin-left:5px;
overflow:hidden;	
}

#b-user4 {
height:200px;
width:240px;
border-radius:15px;
background-color:#CCCC99;
float:left;
margin-left:5px;
overflow:hidden;		
}

#footer {
height:40px;
width:980px;
border-radius:15px;
background-color:#CCCC99;
clear:both;
float:left;
margin-left:5px;
overflow:hidden;
margin-top:5px;


}

اگر به عکس دقت کنین من می خوام مثلا در موقعیت left دو تا ماژول که قرار دارن از هم فاصله داشته باشن مثل سایت sh-haggoy.ir

در صورت امکان سریع کمکم کنین.

متشکر

clik8000 · شهریور 92

با سلام

-1 اگه سایتتون آنلاین بود میشد راحت تر حلش کرد

ولی باید در کل شما به ماژول هاتون margin:auto بدید و یا margin-right:3px;margin-left:3px;

poter · شهریور 92

ببین دوست من ماژول های جوملا هر کدوم یه سری کلاس های اختصاصی داره که برای نوشتن css اول باید اون کلاس ها رو با ابزار firebog پیدا کنید . شما الان باید یا کلاس مربوط به ماژول ورود و یا مربوط به ماژول پایینی اون رو پیدا کنی و بگی که این ماژول یا موقعیت اختصاصی که گرفته مثلا 5px از بالا یا از پایین فاصله داشته باشه .

jafararefi · شهریور 92

خب پس من چیکار کنم چند روزه که الاف این موضوعم.

amin.poorsaeed · شهریور 92

دوست عزیز این همه راهنمایی شما دیگه چی می خواین ؟؟ کافیه margin رو برای کلاس یا شناسه موقعیت های مختلف تعریف کنید

jafararefi · شهریور 92

بابا به پیر به پیغمبر تعریف می کنم margin رو ولی دوباره فاصله نمی گیره.در صورت امکان فایل سی اس اس رو که گذاشتم ویرایش کنین.

amirparvaneh · شهریور 92

سلام امین جان.

یه قالب طراحی کردم مشکلی نداشت

الان دارم روی یه قالب جدید کار می کنم.مشکلی که داره وقتی به موقعیت کانتنت میرسم بعد از اینکه فراخوانیش می کنم.مطالب زیر موقعیت اصلی یا main قرار میگیره

چند بار هم تست و چک کردم و دیویژنش رو داخل main گذاشتم اما بازهم زیر موقعیت اصلیه!!

؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

amirparvaneh · شهریور 92

بابا به پیر به پیغمبر تعریف می کنم margin رو ولی دوباره فاصله نمی گیره.در صورت امکان فایل سی اس اس رو که گذاشتم ویرایش کنین.

آقا چرا قسم می خوری

بالاخره حتما یه جا مشکل داره.شما سایتت روی لوکاله اگه روی هاست بود بهتر میشد کمکت کرد.حتما کلاسش رو اشتباه میدی

clik8000 · شهریور 92

شما یه کاری کن

قالبو واسم بفرست ببینم مشکلتو واست میگم

amin.poorsaeed · شهریور 92

سلام امین جان.
یه قالب طراحی کردم مشکلی نداشت

الان دارم روی یه قالب جدید کار می کنم.مشکلی که داره وقتی به موقعیت کانتنت میرسم بعد از اینکه فراخوانیش می کنم.مطالب زیر موقعیت اصلی یا main قرار میگیره

چند بار هم تست و چک کردم و دیویژنش رو داخل main گذاشتم اما بازهم زیر موقعیت اصلیه!!

؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

می تونی دمویی چیزی نشون بدی بررسی کنم

amirparvaneh · شهریور 92

فایل های قالب رو برات می فرستم امین جان.چون روی لوکال هست.

clik8000 · شهریور 92

قالب رو دیدم

اگه شما میخواید عنوان منو ها از چپ و راست فاصله داشته باشه

خوب شما باید اون عکسی که واسه منو طراحی کردید رو کوچیک در نظر بگیرید

به همین راحتی

clik8000 · شهریور 92

اگه بخوام بیشتر راهنماییتون کنم

-------------------------------------------------

1- اندازه تصویر h3 بزرگتر هست باید طولشو به 220px تغییر بدید تو فتوشاپ

2- توی template.css خط 287 که مربوط به h3 هستش این کد رو قرار بدید

h3{
height:42px;
background-image: url(../images/loh.png);
background-repeat:no-repeat;
font-family:pars;
font-size:17px;
font-style:normal;
color:#CCCCCC;
text-align:center;
padding-top:5px;
margin-left:5px
}

امیدوارم کارتون راه افتاده باشه

clik8000 · شهریور 92

سلام مجدد

الام متوجه شدم منظور شما چيه

---------------------------------

#left > div.moduletable_menu{background-color:#000;margin:3px}
#left > div.moduletable{background-color:#000;margin:3px}

-------------------------------------------------------------

خودتون ميبينيد كه توي كد بالا يه ماژول (moduletable) هست و يه ماژول منو(moduletable_menu) واسه اينكه از هم فاصله داشته باشه بايد به اين روش عمل كني

jafararefi · شهریور 92

این کد رو باید تو کدوم فایل بزاریم css یا php؟

درضمن ازتون خیلی متشکرم.

mmfallah · شهریور 92

توی فایل css

jafararefi · شهریور 92

خب اون php است. وقتی تو سی اس اس کد رو وارد می کنم فقط رنگ ماژول ورود کاربران سیاه می شه و هیچ تغییر دیگه ای هم ایجاد نمی شه.

ببخشید که همتون رو به زحمت انداختم!

clik8000 · شهریور 92

اون رنگ رو من خودم قرار دادم

شما ميبينيد وقتي اون كد رو قرار ميدي ماژولها از هم فاصله ميگيره

شما اون رنگ رو تغيير بده ميخواي تصوير بذار فقط من خواستم نحوه كار رو بدوني

رنگ بنديش با خودت

jafararefi · شهریور 92

مشکل اینجاست که فاصله نمی گیردن

ابته فکر کنم منظورم رو متوجه نشدین.من می خوام هر ماژول از ماژول دیگه جدا باشه ومثلا هر ماژول radius داشته باشه.

clik8000 · شهریور 92

اين كد رو توي فايل template.css خودت قرار بده

#left > div{background-color:#ccc;margin:4px;border:solid;border-radius:7px;border-width:2px;padding:5px}

jafararefi · شهریور 92

حله درست شد.خیلی خیلی خیلی از شما ممنونم همشهری عزیز.چندین روز بود که الاف این موضوع بودم.متشکر

:thanks: :thanks: :thanks: :thanks:

[dasdas] [dasdas]

clik8000 · شهریور 92

خدارو شكر كه كارتون راه افتاد

#left > div{background-color:#ccc;margin:4px;border:solid;border-radius:7px;border-width:2px;padding:5px}

اگه تو كد بالا دقت كنيد ميبينيد

#left > div

يعني بعد ماژول چپ هر دايوي قرار بگيره

{background-color:#ccc;margin:4px;border:solid;border-radius:7px;border-width:2px;padding:5px}

داراي اين خواص باشه

مشکل در طراحی قالب.(لطفا سریع)

22 پست در این موضوع

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

ایجاد یک حساب کاربری

ورود به حساب کاربری

خانه

فعالیت ها