پارس جوم :: انجمن های تخصصی جوملا

احتراما فایل custom.css در مسیر templates/tx_edumodo/css/custom.css ایجاد شده...
الان چه محتویاتی توش بزاریم ؟
واسه استایل قالب تو موبایل چی؟

هرچیزی که مایل هستید ویرایش کنید رو، مثل اندازه فونت عنوان ها و چیزای دیگه، آی دی و کلاس ها رو پیدا کن و توی اون فایل اندازه ها رو به دلخواه بدید، این فایل آخرین فایلی هست که بارگذاری میشه؛ پس اگر سرعت اینترنت پایین باشه شاید استایل دلخواه بعد از مثلا یکی دوثانیه تغییر کنه، بهتره کش رو فعال کنی.

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

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

ممنون.
فقط ما تا حالا کد نویسی نکردیم...
واسه اندازه تیتر مطالب...استایل موبایل و... چه کدهایی باید بنویسیم ؟

خب بستگی داره شما کجاها رو میخاید تغییر بدید، توی مرورگر F12 رو بزنید از ابزار Inspect Element استفاده کنید و برید روی المنتی که میخاید تغییر بدید.

مثلا این تصویر زیر رو ببینید.





کدش رو بصورت زیر میتونی ویرایش کنی

ممنون.......ولی آخه این کدهایی که بعد از زدن inspect element نمایش داده میشه که ربطی به custom.css ایجاد شده نداره !

ما فایل custom.css رو چطور در جریان تغییرات سایت بکاربگیریم؟ همین موارد اصلاحی رو چطور توی این فایل جا بدیم و چطور عمل میکنه ؟

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

یعنی میفرمایید مثلا کدی که در بالا دادید رو کپی کنیم توی custom.css ?

h3.qx-media-heading > a {
font-size : XXX;
}

----------------------------------
الان در حال حاضر توی custom.css ما فقط این کد درج شده واسه نوار بالای سایت :
.t3-header {
background: #000 !important;
}

میخوام بدونم کدی که شما دادین رو با فصله بعد از علامت { بزارم؟


الان تیتر عنوان مطلب رو با چه کدی کوچیکتر کنم توی این آدرس؟
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


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

او کده رو همینطوری الکی زدم ولی خب آره باید بعد از { بزارید .

بنظرم یه فیلمی درمورد CSS ببینید تا بهتر متوجه بشید.

اون عنوانی که شما گفتید هم کدش به شکل زیر هست
الان سایز فونت 46 گذاشتن که خب خیلی بزرگه، هر مقداری که لازم بود میتونی بزاری .
مثلا 20پیکسل، برای موبایل میتونی از مدیا کوئری استفاده کنی مثلا به شکل زیر ، برای دستگاه هایی که حداکثر عرضشون 600 پیکسل یا کمتر هستند


حالا چون فونت هست و فونت میتونه خودش رو تغییر بده، میتونی بجای px از em استفاده کنی
فرق px با em اینطوریه که PX همون پیکسل فونت نسبت به اندازه تصویر تغییری نمیکنه ولی em قابل تغییره ، اگر فونت مستندات شما مثلا 12 پیکسل باشه، معادلش به em میشه 1 ، شما مثلا میتونی برای فونتت بزاری font-size: 1em; این خودش توی هر دیوایس بزرگ و کوچیک میشه، میخای بزرگتر نمایش بده میزاری 1.1 یا 1.2 به همین ترتیب بزرگ یا کوچیکترش میکنی

ممنون الان در حال حاضر مجموع کدهای داخل custom.css ما اینهاست...ببینید درسته ؟[/code]


.t3-header {
background: #000 !important;
}
.com_content.view-article article.item h2 {
font-size: 20px;}

@media only screen and (max-width: 600px) {
body {
com_content.view-article article.item h2 {
font-size: 15px;
}
}

نمیدونم درسته یا نه ، شما خودتون باید ببینید تغییراتی که لازم داشت آیا اعمال شده یا خیر.
بعد برای نسخه موبایل اون فقط یه مثال ساده بود، برای موبایل چندین مدیا کوئری رو بایستی وارد کنی

تبلت عمودی
تبلت افقی
موبایل عمودی
موبایل افقی

بعد همه اینها هرکدوم یه سایز بندی خاصی دارند، بهتره اون یه مقاله درمورد مدیاکوئری رو مطالعه کنی تا بهتر متوجه بشی
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

---

البته باید بگم تو لینک بالا یذره زیادی دستگاه ها رو تفکیک کرده، شما همون دسکتاپ و تبلت و موبایل سایزش رو داشته باشی کافیه