تغییر چیدمان لوگو و عنوان

[BetaMaster 0]

سلام

من میخواهم در قالب GridHub لوگو در سمت چپ و عنوان وبسایت بعد از آن قرار بگیرد. ممنون میشوم بگویید CSS قالب چطور باید اصلاح شود.

لینک قالب: https://wordpress.org/themes/gridhub/

با سپاس

[asadiy4n 2807]

سلام

به انجمن خوش آمدید

شما اول قالب رو نصب کنید و ادرس آنلاینتون رو قرار بدید تا ببینیم و بتونیم کمک کنیم

[BetaMaster 0]

در 4 ساعت قبل، asadiy4n گفته است :

سلام

به انجمن خوش آمدید

شما اول قالب رو نصب کنید و ادرس آنلاینتون رو قرار بدید تا ببینیم و بتونیم کمک کنیم

سلام،
ممنون از پاسختون. من روی لوکال هاست دارم تستش میکنم ولی دموی لایوش موجوده:
https://demo.themesdna.com/gridhub/

 لوگو و عنوان سایت وسط چین است و در تنظیمات قالب هیچ آپشنی برای تعیین محل لوگو و عنوان سایت نداره. بنابراین فکر میکنم باید CSS اش اصلاح بشه. لینک CSS قالب:
https://demo.themesdna.com/gridhub/wp-content/themes/gridhub/style.css

اگر نیاز به فایل های قالب دارید:
https://downloads.wordpress.org/theme/gridhub.1.0.3.zip

ویرایش شده دی 99 توسط BetaMaster

[asadiy4n 2807]

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

[BetaMaster 0]

در 5 دقیقه قبل، asadiy4n گفته است :

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

بله از نسخه رایگان استفاده میکنم که همه مشخصات رو تقدیمتون کردم. در دموی ارسالی لوگو نداره ولی لیک CSS رو دادم و میتونید چک کنید (اینجا: https://demo.themesdna.com/gridhub/wp-content/themes/gridhub/style.css ).

من اصلا CSS بلد نیستم ولی با یک نگاه ساده به CSS متوجه شدم با تغییر center به left در قسمت زیر از CSS قالب عنوان به سمت چپ منتقل میشه:

.gridhub-header-full-active .gridhub-logo{float:none;width:100%;-webkit-box-flex:0;-webkit-flex:0 0 100%;-moz-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;-webkit-box-ordinal-group:1;-webkit-order:0;-moz-box-ordinal-group:1;-ms-flex-order:0;order:0;text-align:center;}

اگر این خط رو با CTRL+F  در CSS سرچ کنید همه تنظیمات logo مشخصه. فقط یه نفر نیاز هست که سواد CSS داشته باشه و بگه چیکار کنم که لوگو هم بشه چپ چین بشه.

 

[asadiy4n 2807]

این کد رو css اضافی قالب قرار بدید

.site-branding{display: inline;}
.site-branding .gridhub-custom-logo-image,
.site-branding .gridhub-custom-logo-info{float: left;}
.site-branding .gridhub-custom-logo-image{
  height: 100%;
  display: flex;
  align-items: center;
}

ولی اگر نتیجه مطلوبتری میخواید باید یه عکس دمو با با ادیتور عکس بسازید تا از رو اون عکس راهنماییتون کنم

[BetaMaster 0]

در 2 ساعت قبل، asadiy4n گفته است :

این کد رو css اضافی قالب قرار بدید

.site-branding{display: inline;}
.site-branding .gridhub-custom-logo-image,
.site-branding .gridhub-custom-logo-info{float: left;}
.site-branding .gridhub-custom-logo-image{
  height: 100%;
  display: flex;
  align-items: center;
}

ولی اگر نتیجه مطلوبتری میخواید باید یه عکس دمو با با ادیتور عکس بسازید تا از رو اون عکس راهنماییتون کنم

از پاسخگویی و پیگیری های مستمر شما صمیمانه سپاسگزارم.

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

.gridhub-header-full-active .gridhub-logo{text-align:left;}

تنها مشکل اینه که نوشته توضیحات سایت زیر لوگو قرار میگیره گه من دوست دارم جلوی آن باشه یا لوگو بره سمت راست و نوشته سمت چپ باشه (در یک سطر و نه زیر هم). راه حلی برای این به نظرتون میرسه؟
 

با سپاس مجدد

 

[asadiy4n 2807]

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

.site-branding{
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center;
  padding: 0 20px;
}

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

flex-direction: row-reverse;

 

[BetaMaster 0]

یک دنیا تشکر از محبتتون.این دقیقا همان چیزی هست که مد نظر داشتم.
پیگیری و مهارت شما قابل تحسین و تقدیر است.

ویرایش شده دی 99 توسط BetaMaster

[asadiy4n 2807]

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