قرار داد کدهای HTML در مطلب جوملا

[mheydarzadeh 2]

با سلام و عرض ادب

من یک کد HTMLهمراه با CSS مربوطه ایجاد کردم که در حالت عادی درست نمایش داده میشه.

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

کد HTML رو وارد ویرایشگر کردم و کد های CSS رو به انتهای تمپلیت جوملا اضافه کردم . مطلب به نمایش در میاد اما ویژگی های CSS در اون نقشی نداره.

لطفا راهنمایی کنید.

ممنون

[وحید محمدی 292]

سلام
دوست عزیز خیلی ساده است. این قضیه اصلاً ربطی به جوملا نداره و به خود مفهوم HTML و CSS و ارتباط آنها به یکدیگر بر میگرده. یعنی چطور بین HTML و CSS ارتباط برقرار کنیم و با استفاده از کدهای CSS کدهای HTML را هدف قرار دهیم و به آنها استایل دهیم.
اما من با یک مثال ساده این رو در مورد جوملا برایتان مثال می زنم.
در ویرایشگر مطلب جوملا کد زیر را وارد می کنیم
 

<p style="color: red; font-size: 16px;">salam</p>

در کد بالا بعنوان مثال گفتم کلمه salam را به رنگ قرمز و اندازه فونت را 16px باشه. تمام . در اینجا من HTML و CSS را باهم و در کنار هم استفاده کردم.

حالا اگر من بخواهم کد بالا را تفکیک کنم و فقط کدهای HTML را در ویرایشگر جوملا بنویسم و کدهای CSS را در یک فایل CSS مثلا در template.css بنویسم باید به صورت زیر عمل کنم
 

کد زیر در ویرایشگر جوملا

<p class="class1">salam</p>

کد زیر در در فایل  سی اس اس

p.class1{color: red; font-size: 16px;}

 در مثال بالا من به تگ p کلاس class1 دادم و حالا در فایل  سی اس اس، به تگ p که دارای کلاس class1 است استایل می دهم.

در واقع شما باید به تگ های HTML کلاس یا آی دی بدهید و از طریق این کلاس یا آی دی، تگ HTML موردنظر را انتخاب کنید و به آن استایل دهید.

ویرایش شده تیر 96 توسط bashka

[mheydarzadeh 2]

ممنون از توضیحات خوب شما. متوجه فرمایش شما شدم

اما مشکل من اینه داخل جوملا دقیقا همین کار ها رو انجام میدم اما نمیشه!!!

[وحید محمدی 292]

34 minutes قبل , mheydarzadeh گفت:

ممنون از توضیحات خوب شما. متوجه فرمایش شما شدم

اما مشکل من اینه داخل جوملا دقیقا همین کار ها رو انجام میدم اما نمیشه!!!

سلام

امکان نداره نشه. من خودم در جوملا از این روش خیلی استفاده می کنم. شما احتمالاً در مفهوم HTML و CSS جایی دارید اشتباه می کنید. یک نمونه از کدهایتان را اینجا آپلود کنید تا همه چیز مشخص شود.

ویرایش شده تیر 96 توسط bashka

[mheydarzadeh 2]

سلام

این دقیقا چیزی هستش که من میخوام به انتهای یک مطلب اضافه بشه.البته تعداد ممکنه بیشتر بشه.در حال حاضر خود این صفحه باز میشه ولی در جوملا نمی تونم درستش کنم.من این کد CSS رو به یکی از CSS های قالب اضافه می کنم. درخال فولدر CSS چندین تا فایل هست. به همگی اضافه کردم باز هم نشد.یکی از دوستان هم گفتند ممکنه تداخل در کلاس ها باشه!!! در کل من میخوام عکس محصول به علاوه یک توضیحات کلی  رو قرار بدم که هایپر لینک به یک صفحه توضیحات باشه.می دونم برای شما قطعا بسیار ساده هستش و کاری عادی به نظر میاد. اما من اطلاعاتم زیاد نیست و تازه کار هستم.اگر افزونه ای هم باشه که همین کار رو انجام بده ممنون میشم معرفی کنید.البته ترجیح میدم یاد بگیرم و بدونم مشکل از کجاست. لطفا راهنمایی بفرمایید.

با تشکر

 

div.catlist{margin-top:25px;margin-right:-20px}
ul.catlist{list-style:none;padding:0;margin:0}
ul.catlist li{margin:0 18px 18px 0;display:inline-block;vertical-align:top;zoom:1;*display:inline}
ul.catlist li a{width:166px;height:210px;padding:10px;margin:0;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;display:block;background-color:#ffe6e6;font-size:12px;text-align:left;zoom:1;*display:inline}
ul.catlist li a p{margin:3px 0;padding:0}
ul.catlist li a:hover{background-color:#ddd}
ul.catlist li .image{padding:0;margin:0}
ul.catlist li .image img{margin:0;padding:0;border:0}
ul.catlist li .boxtitle{margin:6px 0 3px 0;font-size:1.1em;font-weight:bold}
ul.catlist li .desc{margin-top:0;color:#09F;text-decoration:none;font-weight:normal}
div.tab div.catlist{margin-top:0}
div.tab ul.catlist{list-style:none;padding:0;margin:0}
div.tab ul.catlist li{width:146px;height:auto;padding:0;margin:5px 12px;display:inline-block;vertical-align:top;zoom:1;*display:inline}
div.tab ul.catlist li a{width:146px;height:135px;padding:0;margin:0;font-size:12px;text-align:left;background:0;zoom:1;*display:inline}
div.tab ul.catlist li a p{margin:3px 0;padding:0}
div.tab ul.catlist li a:hover{background:0}
div.tab ul.catlist li .image{padding:0;margin:0}
div.tab ul.catlist li .image img{margin:0;padding:0;border:0}
div.tab ul.catlist li .boxtitle{margin:6px 0 3px 0;font-size:1.1em;font-weight:bold}
div.tab ul.catlist li .desc{display:none}

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
       
        <div class="thumbnaillist"><div class="catlist">
    <ul class="catlist">
                <li><a title="Accessories" href="http://www.google.com/">
                    <p class="image"><img alt="Fluid Regulators Group" src="Images/123456.jpg" width="146" height="90"/></p>
                    <p class="title">Accessories</p>
                    <p class="desc">Complete your system with quality Graco accessories</p>
                    
                <li><a title="composites" href="http://www.google.com/">
                    <p class="image"><img alt="composites Group" src="Images/12345.jpg" width="146" height="90"/></p>
                    <p class="title">composites</p>
                    <p class="desc">Complete your system with quality Graco composites</p>


   </head>
   
   <body></body>
</html>

 

[وحید محمدی 292]

نقل قول

در کل من میخوام عکس محصول به علاوه یک توضیحات کلی  رو قرار بدم که هایپر لینک به یک صفحه توضیحات باشه

سلام

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

1- آیا شما قصد راه اندازی فروشگاه اینترنتی دارید؟
2- خودتان یا دیگران فروشگاه اینترنتی دارند و شما می خواهید از صفحاتی از سایت به محصولات فروشگاه مذکور لینک دهید؟

[mheydarzadeh 2]

سلام

من فروشگاه اینترنتی نیاز ندارم و اصلا کارم ارتباطی هم به فروشگاه اینترنتی ندارد.

اما یک سری محصولات دارم که فقط میخوام مشخصات فنی براشون تعریف کنم و مثل یک کاتالوگ آنلاین باشه.یعنی مثلا بیست دسته محصول که با کلیک روی هر دسته وارد زیر دسته و بعد با انتخاب محصول مشخصات فنی و کاتالوگ PDF و تصاویر یا فیلمش رو نمایش بدم.

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

با تشکر

[وحید محمدی 292]

هم اکنون, mheydarzadeh گفت:

سلام

من فروشگاه اینترنتی نیاز ندارم و اصلا کارم ارتباطی هم به فروشگاه اینترنتی ندارد.

اما یک سری محصولات دارم که فقط میخوام مشخصات فنی براشون تعریف کنم و مثل یک کاتالوگ آنلاین باشه.یعنی مثلا بیست دسته محصول که با کلیک روی هر دسته وارد زیر دسته و بعد با انتخاب محصول مشخصات فنی و کاتالوگ PDF و تصاویر یا فیلمش رو نمایش بدم.

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

با تشکر

خب برای اینکار از افزونه های کاتالوگ ساز استفاده کنید.

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

[mheydarzadeh 2]

ممنون از راهنمایی شما

K2   یا  Zoo مناسب هستند؟

[وحید محمدی 292]

دوست عزیز اول بریم سراغ کدهای شما و دلایل عدم نمایش در جوملا

دلیل اصلی که کد شما در جوملا به خطا می خورد این بود که بعلت تو در تو بودن کدهای شما، بعضی از ویرایشگرها مثلاً tinymce تمام کد را قبول نمی کند و بعضی از قسمت های کد شما را حذف می کرد. این ویرایشگر هم معمولاً ویرایشگر پیش فرض و پر استفاده همگان هست. ابتدا باید از طریق تنظیمات جوملا یک ویرایشگر دیگر انتخاب کنید یا ویرایشگر را روی none قرار دهید. پس ویرایشگر جوملا را روی codemirror یا none قرار می دهیم. ( البته ویرایشگر پیشرفته jce هم در جومینا معرفی شده است که گزینه های زیادی دارد  http://www.joomina.ir/item/988-ویرایشگر-jce-نسخه-pro-فارسی.html)

حالا کد اچ تی ام ال زیر را در قسمت ویرایشگر مطلب جوملا قرار می دهیم

<div class="thumbnaillist"><div class="catlist">
    <ul class="catlist">
                <li><a title="Accessories" href="http://www.google.com/">
                    <p class="image"><img alt="Fluid Regulators Group" src="Images/123456.jpg" width="146" height="90"/></p>
                    <p class="title">Accessories</p>
                    <p class="desc">Complete your system with quality Graco accessories</p>
                    
                <li><a title="composites" href="http://www.google.com/">
                    <p class="image"><img alt="composites Group" src="Images/12345.jpg" width="146" height="90"/></p>
                    <p class="title">composites</p>
                    <p class="desc">Complete your system with quality Graco composites</p>

سپس سی اس اس زیر را هم در انتهای فایل tamplate.css قالب جوملا که قالب پیش فرض برای بخش کاربری هست قرار می دهیم و تمام

div.catlist{margin-top:25px;margin-right:-20px}
ul.catlist{list-style:none;padding:0;margin:0}
ul.catlist li{margin:0 18px 18px 0;display:inline-block;vertical-align:top;zoom:1;*display:inline}
ul.catlist li a{width:166px;height:210px;padding:10px;margin:0;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;display:block;background-color:#ffe6e6;font-size:12px;text-align:left;zoom:1;*display:inline}
ul.catlist li a p{margin:3px 0;padding:0}
ul.catlist li a:hover{background-color:#ddd}
ul.catlist li .image{padding:0;margin:0}
ul.catlist li .image img{margin:0;padding:0;border:0}
ul.catlist li .boxtitle{margin:6px 0 3px 0;font-size:1.1em;font-weight:bold}
ul.catlist li .desc{margin-top:0;color:#09F;text-decoration:none;font-weight:normal}
div.tab div.catlist{margin-top:0}
div.tab ul.catlist{list-style:none;padding:0;margin:0}
div.tab ul.catlist li{width:146px;height:auto;padding:0;margin:5px 12px;display:inline-block;vertical-align:top;zoom:1;*display:inline}
div.tab ul.catlist li a{width:146px;height:135px;padding:0;margin:0;font-size:12px;text-align:left;background:0;zoom:1;*display:inline}
div.tab ul.catlist li a p{margin:3px 0;padding:0}
div.tab ul.catlist li a:hover{background:0}
div.tab ul.catlist li .image{padding:0;margin:0}
div.tab ul.catlist li .image img{margin:0;padding:0;border:0}
div.tab ul.catlist li .boxtitle{margin:6px 0 3px 0;font-size:1.1em;font-weight:bold}
div.tab ul.catlist li .desc{display:none}

 
این هم عکس از عملکرد کدهای شما در جوملا

 

چند نکته: کدهای html را باید در بین  تگ های <body></body قرار داد نه در بخش هیدر ( این جزو قوانین اچ تی ام ال هست و ربطی به جوملا ندارد)

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

[وحید محمدی 292]

47 minutes قبل , mheydarzadeh گفت:

ممنون از راهنمایی شما

K2   یا  Zoo مناسب هستند؟

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

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

DJ Catalog

Spider catalog

در ضمن برای راهنمایی بیشتر و اینکه عنوان تاپیک هم عوض بشه و در مورد کاتالوگ و نمایش محصولات و خدمات باشه بهتره یک تاپیک جداگانه ایجاد کنید تا دیگران هم ببینند و نظرات و تجربیاتشون را بیان کنند.

[وحید محمدی 292]

راستی در پایان این تاپیک این را هم خدمتتان عرض کنم که گروه جومینا یک فیلم آموزشی کوتاه برای قرار دادن فایل های HTML,CSS,javascript,php در داخل مطالب جوملا بدون تغییر ویرایشگر نیز آماده کردند که البته نیاز به نصب افزونه دارد که همه چیز را در فیلم توضیح دادند. دیدن این فیلم هم خالی از لطف نیست.
http://www.joomina.ir/item/686-insert-javascript-php-css-joomla.html

در آخر برای این تاپیک خیلی زحمت کشیدم و وقت گذاشتم لایک و پسندیدن یادتان نرود تا من هم خستگیم دربیاد با ممنون و مرسی دهن شیرین نمیشه

ویرایش شده تیر 96 توسط bashka