رفتن به مطلب

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

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

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

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

زیبا سازی منوهای جوملا

توسط hamid80، در قالب

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

hamid80    0

hamid80
ارسال شده در

سلام من قصد بر زیبا سازی منوهای جوملا قصد دارم و منو های سمت راست چپم یک کم زیبا کنم برای همین قصد دارم از یک بگراند برای منوهای سمت راست و چپم در نظر بگیرم
همین قصد استفاده از این بگ کراند برا ی منوهای سمت راست و چپم در نظر
بگیرم

از این عکس برای این کار استفاده
bg-title-mod.png
clear.gif

می خواهم این یک چیزی شبیح این بشه

3w3.jpg

و کدی که استفاده کرددم

 


div#right .moduletable, div#right .moduletablelightbox-1 {
  
  line-height: 35px;
  height: 35px;
  font-size: 22px;
  color: #ffffff;
  font-weight: normal;
  margin-top: 0px;
  margin-right: 25px;
  margin-bottom: 10px;
  margin-left: 25px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  background-color: transparent;
  background-image: url("../images/bg_title_mod.png");
  background-repeat: repeat-x;
  background-attachment: scroll;
  background-position: 0px -35px;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  position: relative;
  white-space: nowrap;

    border-radius: 5px;
    margin: 0 0 10px 0;
}

 

ولی متاسفانه هیچ چیزی نمایش د اده نمیشه

دمو سایت سازنده

http://demo.smartaddons.com/#sj-bakery

 

 

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

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

hamid80    0

hamid80
ارسال شده در

با سلام

دوستان راهنمایی می کنند چه گونه می شه از این عکس برای منوها استفادده کرد و تو کهای که گذاشتم جایی اشتباه رفتم که چیزی نمایش داده نمیشه

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

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

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

مصطفی صفرعلی
ارسال شده در

با سلام

 

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

 

div.module h3.modtitle {
    background: url("http://demo.smartaddons.com/templates/joomla25/sj-bakery/templates/sj_bakery/images/bg_title_mod.png") repeat-x scroll 0 -35px transparent;
    color: #FFFFFF;
    font-size: 22px;
    font-weight: normal;
    height: 35px;
    line-height: 35px;
    margin: 0 25px 10px;
    padding: 0;
    position: relative;
    white-space: nowrap;
}

div.module h3.modtitle:before {
    background: url("http://demo.smartaddons.com/templates/joomla25/sj-bakery/templates/sj_bakery/images/bg_title_mod.png") no-repeat scroll 0 0 transparent;
    content: "";
    height: 35px;
    left: -25px;
    margin: 0;
    position: absolute;
    width: 25px;
}

div.module h3.modtitle:after {
    background: url("http://demo.smartaddons.com/templates/joomla25/sj-bakery/templates/sj_bakery/images/bg_title_mod.png") no-repeat scroll 0 -70px transparent;
    content: "";
    height: 35px;
    margin: 0;
    padding: 0;
    position: absolute;
    right: -25px;
    width: 25px;
}

 

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

یا حق

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

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

hamid80    0

hamid80
ارسال شده در

مرسی من امدم کد این طوری نوشتم ولی فایده نداشت و چیدمان قالب به هم ریخت




#right .moduletable h3,

#left  .moduletable h3

div.module h3.modtitle {

    background: url("../images/bg_title_mod.png"") repeat-x scroll 0 -35px transparent;

    color: #FFFFFF;

    font-size: 22px;

    font-weight: normal;

    height: 35px;

    line-height: 35px;

    margin: 0 25px 10px;

    padding: 0;

    position: relative;

    white-space: nowrap;

}


div.module h3.modtitle:before {


    background: url("../images/bg_title_mod.png") no-repeat scroll 0 0 transparent;

    content: "";

    height: 35px;

    left: -25px;

    margin: 0;

    position: absolute;

    width: 25px;

}


div.module h3.modtitle:after {

    background: url("../images/bg_title_mod.png") no-repeat scroll 0 -70px transparent;

    content: "";

    height: 35px;

    margin: 0;

    padding: 0;

    position: absolute;

    right: -25px;

    width: 25px;

}


}

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

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

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

مصطفی صفرعلی
ارسال شده در

با سلام

 

ببینید چون تصویرتون سه تیکه هستش باید هر تکه را با یک کد جداگانه فراخوانی و استایل دهی کنید

 

کد اول تصویر وسط رو استایل دهی میکنه و بعد با اضافه کردن خاصیت های before و after میتونید تیکه های چپ و راست را استایل دهی کنید

 

تو خط 142 فایل template.css میتونید برای تگ #right .moduletable h3, #left .moduletable h3 کدهای CSS رو تعریف کنید

 

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

یا حق

واکنش ها : hamid80

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

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

hamid80    0

hamid80
ارسال شده در

با سلام

من کدی که شما گفتین این طوری نوشتم قالبم به هم خورد

#right .moduletable h3.modtitle
{

    background: url("../images/bg_title_mod.png"") repeat-x scroll 0 -35px transparent;
    color: #FFFFFF;
    font-size: 22px;
    font-weight: normal;
    height: 35px;
    line-height: 35px;
    margin: 0 25px 10px;
    padding: 0;
    position: relative;
    white-space: nowrap;
}

#right .moduletable h3.modtitle:before {

    background: url("../images/bg_title_mod.png") no-repeat scroll 0 0 transparent;
    content: "";
    height: 35px;
    left: -25px;
    margin: 0;
    position: absolute;
    width: 25px;
}
#right .moduletable h3.modtitle:after {
    background: url("../images/bg_title_mod.png") no-repeat scroll 0 -70px transparent;
    content: "";
    height: 35px;
    margin: 0;
    padding: 0;
    position: absolute;
    right: -25px;
    width: 25px;
}

 

 

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

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

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

مصطفی صفرعلی
ارسال شده در

با سلام

 

با توجه به تغییرات فعلیتون بصورت زیر انجام بدید

 

div#right div.moduletable h3 {
    background: url("../images/bg_title_mod.png") repeat-x scroll 0 -35px transparent;
    color: #000000;
    font-size: 20px;
    font-weight: normal;
    height: 35px;
    line-height: 35px;
    margin: 0 25px 10px;
    padding: 0;
    position: relative;
    white-space: nowrap;
}

div#right div.moduletable h3:after {
    background: url("../images/bg_title_mod.png") no-repeat scroll 0 -70px transparent;
    content: "";
    height: 35px;
    margin: 0;
    padding: 0;
    position: absolute;
    right: -25px;
    width: 25px;
}

div#right div.moduletable h3:before {
    background: url("../images/bg_title_mod.png") no-repeat scroll 0 0 transparent;
    content: "";
    height: 35px;
    left: -25px;
    margin: 0;
    position: absolute;
    width: 25px;
}

div#right div.moduletable h3:hover,
div#right div.moduletable h3:hover:after,
div#right div.moduletable h3:hover:before {
    background: none;
    border-radius: 20px;
    margin: 0 0 10px;
    padding: 0 25px 0 0;
}

 

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

یا حق

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

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

hamid80    0

hamid80
ارسال شده در

با سلام کدی که شما دادین مشکلمو برطرف کرد ولی وقتی روی اون تصویر می رویم رنگش سفید می شه و و در نهایت می خواهم چند تا ماژول مذهبی معرفی کنید و بعداش می خواهم از یک cssویزه استفاده کنم که یک چیزی شبیح این عکس بشه یعنی بک از چه کدی برای این کار استفاده کنم

tu76.jpg

برای موقعیت buser

الان باکس شادو این شکلیه

من از این کم استفاه کردم ولی هیچی نمایش دداده نمیشه

#b-user1{
  height:200px;
  width:240px;
  border-radius:5px;
  background-color:#fff;
  float:left;
  overflow:hidden;  
-moz-border-radius: 5px;
border-radius: 5px;



#b-user1 {
    position:relative;
    float:left;
    width:20%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    border-radius:10px;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }
#b-user1:before,
#b-user1:after {
    content:"";
    position:absolute;
    z-index:-2;
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    max-height:100px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
#b-user1:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
}


}

 

kp2.jpg

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

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

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

مصطفی صفرعلی
ارسال شده در

با سلام

در مورد منوهای چپ و راست ، اونطور که من css هاتون رو بررسی کردم برای انیمیشنی که بکار بردید هیچگونه فریم کلیدی تعریف نکردید

در انتهای فایل template.css این کدها رو اضافه کنید

@keyframes tcolor
{
0%   {background:blue;}
25%  {background:red;}
50%  {background:blue;}
75%  {background:red;}
100% {background:blue;}
}

@-webkit-keyframes tcolor
{
0%   {background:blue;}
25%  {background:red;}
50%  {background:blue;}
75%  {background:red;}
100% {background:blue;}
}

سپس برای اینکه به مشکل سفید شدن برخورد نکنید بعنوان مثال برای منوی سمت راست ، خط 334 را بصورت زیر ویرایش کنید

#right .moduletable h3:hover {
    animation-duration: 5s;
    animation-name: tcolor;
    animation-play-state: running;
    animation-iteration-count: infinite;
}

بدین ترتیب انیمیشن بطور نامحدود ادامه دار خواهد شد و اون مشکل را دیگر نخواهید داشت

در مورد ایجاد باکسهای سایه دار هم مطابق زیر انجام بدید . من مثال رو برای موقعیت b-user1 قرار میدم

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

#footer {
    background-color: #FF3F00;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 5px #888888;
    -moz-box-shadow: 0 0 5px #888888;
    -webkit-box-shadow: 0 0 5px #888888;
    /*clear: both;*/
    font-style: normal;
    font-weight: normal;
    height: 40px;
    margin-left: 5px;
    /*overflow: hidden;*/
    text-align: center;
    width: 980px;
    float: right;
}

حال برای اینکه کمی فاصله بین فوتر و موقعیتهاتون ایجاد بشه خط 895 را بصورت زیر ویرایش کنید

#b-users {
    margin-left: 72px !important;
    margin-bottom: 20px;
}

خود موقعیت b-user1 را هم بصورت زیر در خط 575 ویرایش کنید

#b-user1 {
    background-color: #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    float: left;
    height: 200px;
    /*overflow: hidden;*/
    width: 240px;
    position: relative;
}

حالا فقط کافیست تا این کدها را به انتهای فایل اضافه کنید

#b-user1:before {
    transform: skew(0deg, 4deg);
    -moz-transform: skew(0deg, 4deg);
    -webkit-transform: skew(0deg, 4deg);
    box-shadow: 5px 5px 5px #000000;
    -moz-box-shadow: 5px 5px 5px #000000;
    -webkit-box-shadow: 5px 5px 5px #000000;
    background-color: black;
    bottom: 0px;
    content: "";
    height: 50px;
    position: absolute;
    right: 9px;
    width: 117px;
    z-index: -1;
}

#b-user1:after {
    transform: skew(0deg,-4deg);
    -moz-transform: skew(0deg,-4deg);
    -webkit-transform: skew(0deg,-4deg);
    box-shadow: -5px 5px 5px #000000;
    -moz-box-shadow: -5px 5px 5px #000000;
    -webkit-box-shadow: -5px 5px 5px #000000;
    background-color: black;
    bottom: 0;
    position: absolute;
    content: "";
    width: 117px;
    height: 50px;
    left: 9px;
    z-index: -1;
}

در مورد ماژولهای درخواستیتون هم من فعلا چیزی سراغ ندارم در بخش درخواستها مطرح کنید تا سایر دوستان راهنماییتون کنند یا اینکه در گوگل جستجو کنید

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

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

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

hamid80    0

hamid80
ارسال شده در

مرسی الانی مشکلی که دارم بک گراند سمت راست و کانتنت و چپ به هم به هم ریخته و این طوری شده

tytry.jpg

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

#contents {
background:none repeat scroll 0 0 #FFFFFF
  width:495px;
  height:auto;
  margin:0 auto;
  border-radius:1px;  
  float:left;
  margin-left:5px;
  overflow:hidden;
       padding-left:2.3px;



    border-radius: 5px 5px 5px 5px;


    /*overflow: hidden;*/

    position: relative;

  
}
#contents:before {
    transform: skew(0deg, 4deg);
    -moz-transform: skew(0deg, 4deg);
    -webkit-transform: skew(0deg, 4deg);
    box-shadow: 5px 5px 5px #000000;
    -moz-box-shadow: 5px 5px 5px #000000;
    -webkit-box-shadow: 5px 5px 5px #000000;
    background-color: black;
    bottom: 0px;
    content: "";
    height: auto;
    position: absolute;
    right: 9px;
    width: 477px;
    z-index: -1;
}

#contents:after {
    transform: skew(0deg,-4deg);
    -moz-transform: skew(0deg,-4deg);
    -webkit-transform: skew(0deg,-4deg);
    box-shadow: -5px 5px 5px #000000;
    -moz-box-shadow: -5px 5px 5px #000000;
    -webkit-box-shadow: -5px 5px 5px #000000;
    background-color: black;
    bottom: 0;
    position: absolute;
    content: "";
    width: 477px;
    height: auto;
    left: 9px;
    z-index: -1;
}

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

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

hamid80    0

hamid80
ارسال شده در

 رنگ بک گراندbusersیک  بکگراند تعریف کردم ولی متاسفانه تا قسمتهای پایین نمی اید الان قسمت     main دوستان و عزیزان من

که تعریف کردم نمایش داده نمی شه

تعریف  قسمت کردم نمی دانم چرا اون کد نمایش داده نمی شه  box shadow و بعداش یک کد برای

#contents {
background:none repeat scroll 0 0 #FFFFFF
  width:495px;
  height:auto;
  margin:0 auto;
  border-radius:1px;  
  float:left;
  margin-left:5px;
  overflow:hidden;
       padding-left:2.3px;



    border-radius: 5px 5px 5px 5px;


    /*overflow: hidden;*/

    position: relative;

  
}
#contents:before {
    transform: skew(0deg, 4deg);
    -moz-transform: skew(0deg, 4deg);
    -webkit-transform: skew(0deg, 4deg);
    box-shadow: 5px 5px 5px #000000;
    -moz-box-shadow: 5px 5px 5px #000000;
    -webkit-box-shadow: 5px 5px 5px #000000;
    background-color: black;
    bottom: 0px;
    content: "";
    height: auto;
    position: absolute;
    right: 9px;
    width: 477px;
    z-index: -1;
}

#contents:after {
    transform: skew(0deg,-4deg);
    -moz-transform: skew(0deg,-4deg);
    -webkit-transform: skew(0deg,-4deg);
    box-shadow: -5px 5px 5px #000000;
    -moz-box-shadow: -5px 5px 5px #000000;
    -webkit-box-shadow: -5px 5px 5px #000000;
    background-color: black;
    bottom: 0;
    position: absolute;
    content: "";
    width: 477px;
    height: auto;
    left: 9px;
    z-index: -1;
}

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

kj.png


 

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

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

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

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

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
برو به فهرست موضوع ها
×
×
  • افزودن...