تغییر لوگو در قالب باوهاوس
این راهنمایی به شما کمک خواهد نمود که لوگو دلخواه و مورد نظر خود را در قالب باوهاوس اعمال نمائید.
این راهنمایی در خصوص طراحی لوگو نیست و فرض بر این می‌باشد که شما لوگو خود را تهیه کرده و فایل یا آدرس آن را در اختیار دارید.
شما نیاز به دو لوگو برای حالت‌های تیره و روشن دارید. در صورتی که یک لوگو برای هر دو حالت می‌خواهید استفاده کنید در تمام راهنمایی‌ها لوگوی حالت دوم را هم همان لوگوی حالت اول قرار دهید.
جایگذاری لوگو
در صورتی که به فولدر images مراجعه کنید چهار فایل در فرمت svg مشاهده خواهید نمود که دو لوگوی متفاوت در دو حالت تیره و روشن را نمایش می‌دهند. لوگو تایتل‌ها عنوان و لوگو را در داخل خود دارند ولی لوگوهای خالی تنها طرح لوگو را در خود دارند.
بصورت پیشفرض در قالب از لوگوی تنها استفاده شده است. اما شما می‌توانید این مورد را تغییر داده و لوگوی دلخواه خود را قرار دهید.
لوگو یا لوگوهای خود را در داخل فولدر images قرار دهید. در صورتی که فایل شما تنها شامل طرح لوگو و بدون تایتل می‌باشد و در فرمت svg می‌باشد آن را تغییر نام داده و جایگزین فایل‌های logo.svg و logo-w.svg نمائید.
logo-w.svg در صفحات تیره به کار رفته است و دیگری در صفحات روشن.
با تغییر نام و جایگذاری فایل‌های خود بجای فایل‌های موجود کافی است صفحه را مجدد بارگذاری نمائید تا لوگوی خود را مشاهده نمائید.
Bauhause/
├─ /
├─ images/
│ ├─ logo.svg
│ ├─ logo-title.svg
│ ├─ logo-title-w.svg
│ ├─ logo-w.svg
در صورتی که فایل شما در فرمت دیگری است یا اینکه نیت استفاده از لوگوتایتل را دارید و یا می‌خواهید بدون تغییر نام از لوگوی خود استفاده کنید پس در ادامه مستندات مرتبط با نحوه‌ی تغییر لوگو در داخل کدهای HTML را مطالعه خواهید نمود.
لوگوها در همه‌ی صفحات در دو بخش هیدر و فوتر قرار گرفته‌اند.
در صورتی که می‌خواهید سریع لوگوی خود را جایگزین نمائید کافی‌است در ویرایشگر خود در بین همه صفحات
جستجو زده و متن images/logo.svg را با images/your-logo.svg جایگزین نمائید.
همچنین برای حالت تیره متن images/logo-w.svg را با images/your-logo-w.svg جایگزین نمائید.
your-logo-w.svg و your-logo.svg را با اسم فایل‌های خود جایگزین نمائید.
اما در صورتی که می‌خواهید از لوگوتایتل استفاده کنید بایستی تغییرات بیشتری در المان لوگو اعمال نمائید. در همه‌ی فایل‌های HTML به دنبال کدهای زیر بگردید و بنابه راهنمایی لوگوی خود را جایگزین آن نمائید.
HTML
<img alt="باوهاوس - مدرسه معماری" src="images/logo.svg" />
<div class="brand-info">
<div class="brand-name">باوهاوس</div>
<div class="brand-text">مدرسه معماری</div>
</div>
در کد بالا بجای logo.svg و logo-w.svg لوگوهای خود را قرار دهید و المان brand-info را همراه با المان‌های داخل آن پاک کنید.
صحه‌ی اصلی تمام‌صفحه در حالت روشن ساختار لوگوی متفاوتی دارد و برای تغییر لوگو بدنبال کد زیر در این فایل بگردید:
HTML
<img class="brand-img" alt="باوهاوس - مدرسه معماری" src="images/logo.svg" />
<img class="brand-img-white" alt="باوهاوس - مدرسه معماری" src="images/logo-w.svg">
<div class="brand-info">
<div class="brand-name">باوهاوس</div>
<div class="brand-text">مدرسه معماری</div>
</div>
از آنجا که این صفحه در حالت اسلایدی نمایش می‌یابد و اسلایدها یکی در میان تیره و روشن هستند بنابرین لوگوی تیره در اسلاید روشن نمایش می‌یابد و لوگوی روشن در اسلاید تیره.
بمانند نمونه کدی قبلی نیز پس از جایگزینی لوگوهای خود در صورتی که از لوگوتایتل استفاده می‌کنید المان brand-info را بهمراه المان‌های داخلی حذف کنید.
جایگذاری فیوآیکان
فیوآیکان (favicon) یک آیکون کوچک می‌باشد که در تب مرورگر نشان داده می‌شود و پیدا کردن تب در بین دیگر تب‌ها را آسان‌تر می‌کند همچنین در موتورهای جستجو و دیگر سرویس‌های شناسایی وب‌سایت‌ها نیز به عنوان لوگوی وب‌سایت استفاده می‌گردد.
بصورت پیشفرض از همان لوگو در قالب بمنظور favicon استفاده شده است. اما درصورتی که نیاز است تا لوگو یا فایل متفاوتی برای فیوآیکان استفاده شود در ادامه نحوه‌ی تغییر فیوآیکان آورده شده است.
در تمامی صفحات به دنبال کد زیر بگردید و آدرس موجود در داخل صفت href را با آدرس فیوآیکان خود جایگزین نمائید.
HTML
<!-- Favicons -->
<link rel="shortcut icon" href="images/logo.svg">
در صورتی که تغییرات بدرستی انجام شده باشند پس از بارگذاری مجدد صفحات خود باید وب‌سایت خود را با لوگو و فیوآیکان جدید مشاهده نمائید.
در صورتی که فیوآیکان جدید را مشاهده نمی‌کنید یکبار هارد رفرش نمائید و درصورتی که هنوز فیوآیکان تغییر نیافته است از آدرس درست فایل خود و جایگزینی صحیح آن مطمئن شوید.