کد CSS

/ * سبک برای همه لینک ها در داخل ظروف فلکس * /
هدر a (
نمایش: بلوک؛
رنگ: # 212121؛
Padding: 12px؛
متن دکوراسیون: هیچکدام؛ / * حذف Undercore * /
فونت اندازه: 100٪؛
متن سایه: 0 1 پیکسل 0 #fff؛
مرزی شعاع: 4 پیکسل؛
}

در اینجا ما عرض نسبی بلوک تحت آرم را نشان می دهیم، یعنی 70٪ باقی مانده، ناوبری را اشغال می کند. تنظیم علاقه، می توان با دقت بیشتری از عناصر کودکان در کانتینر والدین توزیع کرد.

/ * عرض بلوک کودک تحت لوگو * /
.WRAP-LOGO (
عرض: 30٪؛
}

تنظیم اندازه فونت در٪، ما در مورد فوق العاده صفحه نمایش بزرگپس از همه، پیکسل ها به اندازه اندازه سخت هستند.

/ * logo stylization * /
.WRAP-LOGO #LOGO (
فونت خانواده: "رباتو اسلب"، serif؛
فونت اندازه: 200٪؛
فونت وزن: پررنگ؛
}

لوگو به نظر می رسد تازه به نظر می رسد اگر شما آن را دو رنگ.

/ * رنگ سبز از بخشی از لوگو * /
.WRAP-LOGO SPAN (
رنگ: # B2DB41؛

سلام دوستان عزیز! به عنوان یک قانون، تازه واردین یک قالب ساده از سایت را انتخاب می کنند، اما دیر یا زود نیاز به تغییر هدر وجود دارد. سوال این است که ساده است، اما بسیاری از تازه واردان نمی دانند چگونه می توانند سلهای سایت وردپرس را تغییر دهند. این مقاله به این سوال پاسخ می دهد.

قالب وب سایت ساده، جایگزینی کلاه های سایت

در زمان ایجاد یک سایت (وبلاگ) هیچ دانش وجود نداشت. بنابراین، یک قالب وب سایت وردپرس بسیار ساده انتخاب شد، از جمله کلاه سایت. در همان زمان، دو عکس در هدر وجود داشت:

• تصویر بالا یک مستطیل ساده بود، تحت رنگ قالب کلی رنگ شده بود؛
• کلاه پایین کلاه نشان دهنده تصویر ساعت بود و همچنین تحت رنگ قالب کلی، به اصطلاح "تصویر هدر" نقاشی شده بود.

روز دیگر تصمیم گرفتم با کلاه سایتم آزمایش کنم، سفر دو عکس را حذف کنم، جایگزینی هدر سایت را جایگزین کنم. برای انجام این کار، لازم بود که به سادگی تصویر پایین تر را حذف کنیم - هیچ چیز پیچیده نیست.

بعد، تصویر بالایی از کلاه های سایت را قادر می سازد، با یک مشکل مواجه شد. پس از نصب نهایی نصب شد، معلوم شد که آن را به طور پیش فرض نصب شده و در پایین صفحه (قسمت پایین صفحه سایت) نصب شده است.

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

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

قبل از اینکه شما شروع به جایگزینی عنوان سایت کنید، باید آدرس تصویر را بدانیم. اگر شما کار می کنید مرورگر موزیلا. فایرفاکس، شما باید دکمه راست راست را روی کلاه (تصویر زمینه) قرار دهید و روی دکمه سمت راست کلیک کنید، "تصویر پس زمینه Open Background" را در کادر محاوره ای فشار دهید.

در یک پنجره جدید، یک تصویر از کلاه های سایت باز می شود. در نوار آدرس مرورگر (بالا)، آدرس کلاه سایت ما (تصاویر) ثبت شده است. آدرس هدر من به نظر می رسد این است: کپی و ذخیره این آدرس.

حالا ما می بینیم که جایی که تصویر ما در میزبانی دروغ می گوید: پوشه WP-Content؛ پوشه تم؛ پوشه Zeestyle؛ پوشه Imagis در نهایت، نام تصویر header_bg.png است. این در آینده برای ما مفید است.

که در مرورگر گوگل آدرس کروم تقریبا نیز یاد می گیرد. ما ماوس را به کلاه سایت می آوریم، دکمه سمت راست را فشار دهید، کادر محاوره ای کپی URL را انتخاب کنید، همچنین لینک را کپی و ذخیره کنید. قالب هایی وجود دارد که تصاویر با یک راه حیرت انگیز باز می شوند.

بعد، یک عکس را در یک پنجره جدید باز کنید و بتوانید با آن کار کنید. شما می توانید آن را در فتوشاپ یا ویرایشگر دیگر برای تصاویر ویرایش کنید. کار با کلاه سایت من در برنامه PixLR انجام شد (این فتوشاپ آنلاین) درباره این موارد در مقالات "" و "" بیشتر بخوانید.

پس از اتمام تصویر، باید با همان گسترش و همان ابعاد هندسی به عنوان تصویر قدیمی ذخیره شود. برای ذخیره نام، تصویر ویرایش شده تغییر نام (من آن را انجام می دهم کل فرمانده) نام نام header_bg.png نام را تعیین می کنیم. این نام از لینک بالا گرفته شده است (هر نام خود را دارد).

تصویر را جایگزین کنید (CAPS) سایت را می توان از طریق FTP یا به طور مستقیم بر روی سرور انجام داد، من به طور مستقیم انجام دادم. برای انجام این کار، ما به میزبانی ما بروید، وب سایت ما را باز کنید، پوشه public_html را باز کنید، پوشه محتوای WP، تم ها، zeestyle، تصاویر را باز کنید و هدر ما را پیدا کنید (تصویر) - header_bg.png.

ما تصویر را حذف کردیم و یک تصویر جدید ویرایش شده را در جای خود دانلود می کنید. ما به روز رسانی و رفتن به سایت، من نیز آن را به روز رسانی و ببینید که کلاه ویرایش شده ما (تصویر) نصب شده است. همه چیز بسیار ساده است - جایگزینی هدر سایت ساخته شده است.

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

دلیل آن یافت شد و حذف شد. واقعیت این است که قالب من در هدر و در پایین صفحه نمایش داده شده توسط مستطیل است که به سادگی با آبی تیره، تحت رنگ قالب اصلی نقاشی شده است. بنابراین معلوم می شود که منبع کلاه و Futret همان تصویر بود (مراجعه کنید به مرجع بالا)، بنابراین تغییر تصاویر CAP از تغییرات کلاه و تصویر از پاورقی.

برای حل این مشکل، لازم است که لینک ها را تقسیم کنید، یک تصویر جداگانه برای کلاه و به طور جداگانه برای آینده ایجاد کنید. برای انجام این کار، ما به AdminPanel از سایت ما بازگردیم، در " ظاهر"،" ویرایشگر "و" سبک "را انتخاب کنید،" جدول سبک "(Style.css).

پیدا کردن پاورقی و دیدن نام تصویر ما در خط - سابقه و هدف: URL (تصاویر / header_bg.png) بدون تکرار # 1D4C82؛ پیش از کد "جدول سبک" بهتر است ذخیره شود. اگر به یک خطا اجازه دهید، همیشه می توانید به حالت اصلی بازگردید.

ما به یاد می آوریم که header_bg.png نام تصویر هدر ما است. در حال حاضر در کد به جای هدر ما نوشتن پاورقی (نگاه کنید به صفحه نمایش)،

بقیه لمس نمی کنند ما فایل را به روز می کنیم، به سایت بروید، به روز رسانی کنید و ببینید که همه چیز در جای خود قرار گرفته است. کلاه ویرایش شده در جای خود، جایگاه دارای یک ویرایشگر قدیمی است. این کار را می توان تکمیل کرد. قالب وب سایت ساده آماده است.

فقط در مورد، من یک تصویر از پاورقی را در سرور قرار می دهم، شاید در آینده من ویرایش کنم. برای انجام این کار، کلاه کلاه به تغییرات و تغییر نام فرمانده کل - به جای header_bg.png نوشتن footer_bg.png و پور آن را در میزبانی. تصویر را به پوشه تصاویر، جایی که تصویر کلاه ما واقع شده است را فشار دهید.

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

با احترام، ایوان کونپن.

P.S. برای به درستی ایجاد یک وبلاگ، به درستی ارتقا یافته است، شما باید همه چیز را در یک دنباله سخت انجام دهید. چنین توالی در کارت هوش من نشان داده شده است، که من در تجربه خودم توسعه دادم. . این مفید خواهد بود و شما همچنین می توانید کتاب رایگان را نیز دانلود کنید "نحوه نوشتن مقاله برای وبلاگ".

دریافت مقالات جدید وبلاگ به طور مستقیم از طریق ایمیل. فرم را پر کنید، روی «اشتراک» کلیک کنید

ما یک سری درس ها را برای ویرایش قالب جوملا 2.5 شروع می کنیم. در این درس ما نگاه خواهیم کرد

لازم است بلافاصله بگویم که این فرآیند بر روی قالب های مختلف توسعه دهندگان مختلف به شیوه خود انجام می شود. بنابراین، من سعی خواهم کرد که اصل جستجو برای موقعیت موقعیت حقوقی، لوگو و ویرایش CSS را بگویم. همانطور که همیشه توصیه می کنم تمام دستکاری ها را با سایت انجام دهید سرور محلی Denwer به منظور ناراحتی اجازه ندهید یک قالب را در این سایت نصب کنید.

برای شروع، لازم است تعیین کنیم که کدام موقعیت ماژول هدر ماست و چه چیز دیگری در هدر موقعیت ها وجود دارد. برای تعیین موقعیت های ماژول ها در قالب جوملا 2.5. پس از سایت ما استخدام می کنیم tp \u003d 1. به این ترتیب، آن را به نظر می رسد: http: // your_sight / tp \u003d 1.

ما صفحه را به روز رسانی می کنیم (F5) و ... من چیزی را نمی بینم. خیلی ب بخش اداری سایت نمایش غیر فعال از موقعیت های سایت. ما به صفحه مدیریت می رویم، به تنظیمات بروید

و صفحه نمایش موقعیت ها را روشن کنید، همانطور که در عکس زیر نشان داده شده است. فراموش نکنید که زنده بمانید

ما دوباره صفحه را به روز رسانی می کنیم. همه چيز. موقعیت ماژول ها ظاهر شد. ما می بینیم که چند نفر از آنها وجود دارد: هدرر، لوگو، شمارنده، بنر. در عین حال ما می بینیم که اندازه های شرطی از موقعیت ها برجسته شده اند (شمارنده، بنر)، اما Headerbar، Logo.

ما منطقی درک می کنیم که موقعیت ماژول Headerbar مسئول هدر سایت و موقعیت آرم برای لوگو است.

اعتقاد شخصی من این است که همیشه باید راه های ساده ای را برای حل مشکل بررسی کنید، و اگر آن را انجام ندهید، سپس به عمق صعود کنید. ساده ترین چیز برای رفتن به تنظیمات قالب جوملا 2.5 خود و ببینید که کدام تنظیمات وجود دارد. در هر صورت، همانطور که در هنگام نصب به سادگی قالب در جوملا 2.5، و یا پس از نصب قالب جوملا 2.5 از راه اندازی QuickStart، اولین چیزی که باید به تنظیمات قالب بروید و با قابلیت های راه اندازی آن مقابله کنید. در عین حال، حتی نیازی به Russify Joomla 2.5 وجود ندارد، زیرا الگوی خود به زبان روسی ترجمه نخواهد شد.

بسیاری از توسعه دهندگان قالب در تنظیمات آن امکان ویرایش می کنند hAPES (هدر)، و همچنین پاورقی (پاورقی) سایت و بسیاری از لباس های دیگر. با این حال، در میان بسیاری از تنظیمات در این قالب، مسیر نور یافت نشد.

بنابراین، دانستن موقعیت هدر، به عنوان Headerbar به "توسعه - ماژول مدیر" و در "انتخاب موقعیت" منوی کشویی ما به دنبال یک موقعیت headerbar است. این وجود ندارد و این درست است، زیرا در قالب الگو وجود ندارد. فقط یک لوگو وجود دارد. درست ترین I. راه سریع خروجی هدر در سایت در "Module Manager" دکمه "Create" را فشار می دهد.

و در انتخاب نوع ماژول، "کد HTML" را انتخاب کنید. با آن، ما نه تنها می توانیم شرکت کنیم کد HTMLاما همچنین یک عکس از کلاه های ما را ارسال کنید.

با این حال، برای خروجی هدر به موقعیت ماژول باید از پیش آماده شود، و برای این ما باید عرض و طول موقعیت ماژول را بدانیم. به یاد داشته باشید پلاگین سرد Firebug برای فایرفاکس و شروع به استفاده از آن. با این گسترش، ما موقعیت Headerbar را مطالعه می کنیم و می بینیم

چه نوع موقعیتی با استفاده از file layout.css پاسخ داده می شود و ارتفاع آن 110 پیکسل است. به هر حال، شما می توانید عرض را به اندازه مورد نیاز خود را تغییر دهید فایل CSS. در حال حاضر لازم است که طول کلاه ما را تعیین کنید. در اکثر قالب ها، عرض در تنظیمات تنظیم شده است. ما به قالب ما می رویم و در تنتور ما می بینیم که طول قالب ما 1100 پیکسل است. حالا ما می توانیم هدر ما را با پارامترهای لازم با استفاده از برنامه ویرایش گرافیک آماده کنیم (به عنوان مثال. نرم افزار آدوبی فتوشاپ.) من نمی گویم که چگونه انجام می شود. این کل سایت ها را اختصاص داده است.

فایل آماده شده با کلاه به پوشه "تصاویر - داستان" نزدیک است، اما نه الگو. حالا ما آن را با استفاده از ماژول "کد HTML" قرار می دهیم. هدرهای مخفی ما موقعیت Headerbar را انتخاب می کنیم و همچنان ادامه داریم.

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

رانده شد. ما اکنون لوگو را ویرایش خواهیم کرد. دانستن موقعیت ماژول، یعنی لوگو آن را بررسی کنید. ما به "Extensions - Module Manager" می رویم و در "مدیر موقعیت" منوی کشویی ما به دنبال یک لوگوی موقعیت هستیم. چنین مسیری برای تصویر با نام Logo.png وجود دارد. اما غیر فعال کردن آن، ما تغییرات در سایت را نمی بینیم. بنابراین، این تصویر تنها زمانی استفاده می شود که نورد به سادگی قالب برای جوملا 2.5 نصب شده است. اما هنگام نصب قالب جوملا 2.5 از شروع سریع "Quickstart" چگونه ما از یک عکس از پوشه دیگری استفاده می کنیم. و به طور طبیعی از قالب.

بنابراین، ما شروع به دنبال راه دیگری هستیم. باز هم، با استفاده از پلاگین Firebug برای فایرفاکس، ما آرم قالب را بررسی می کنیم و می بینیم

چه نوع موقعیتی مسئول یک فایل layout.css است و برای دیدن جایی که آن است (مسیر به فایل) آن را در یک برگه جدید باز کنید. از طريق notepad ++ Programs باز و به دنبال یک رشته 259.

در اینجا ما می توانیم با عرض، طول لوگو آزمایش کنیم. فراموش نکنید که ذخیره کنید و صفحه سایت را به روز کنید تا نتیجه را مشاهده کنید. یکی دیگر از مزایای بزرگ Notepad ++ چیزی است که شما همیشه می توانید به حالت منبع فایل بازگردید، اما فقط اگر شما پنجره دفترچه یادداشت ++ را بسته اید. بازگشت به حالت اولیه با استفاده از دکمه "لغو".

خوب، برای تغییر طراحی آرم، ما نیاز به فتوشاپ ادوبی و دانش ابتدایی این برنامه خواهیم داشت.

بنابراین ما به شما نگاه کردیم نحوه ویرایش (تغییر) هدر در قالب جوملا 2.5.

موفق باشید به شما در تلاش های شما.