رفتن به مطلب

چطور این رنگ رو برای سربرگم انتخاب کنم


hugo92

پست های پیشنهاد شده

سلام خدمت دوستان عزیز

میخوام سربرگ سایتم رو مشابه این سایت کنم

لینک ها تنها برای اعضای سایت قابل نمایش است.

ولی همونطوری که میبینین طیف تیره بودن رنگ قرمز انگار از سمت راست به چپ سربرگ تغییر میکنه.

میخواستم ببینم چطوری میتونم این نوع رنگ رو برای سربرگم در وردپرس انتخاب کنم؟

و خواهشی که دارم اینه که یه مقدار ساده تر بهم توضیح بدین ، تازه واردم.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

سلام

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

  • لینک ها تنها برای اعضای سایت قابل نمایش است.

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

.header {
  background-image: linear-gradient(90deg,#6e0000 calc(50% - 600px),#a90303 calc(50% + 600px));
}

نمونه ای با همین رنگ ساختم که می تونید چک کنید:

  • لینک ها تنها برای اعضای سایت قابل نمایش است.
  • Like 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

سلام مهندس جان ممنون از لطفت

ممکنه بفرمایین تو کدوم فایل باید بذارم ، چون نتونستم فایل html این قسمت رو پیدا کنم

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

توی یکی از فایل های CSS قالبتون!

آدرس سایتتون رو بدید کد رو براتون آماده کنم قرار بدید

  • Like 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

در 8 دقیقه قبل، Masih گفته است :

توی یکی از فایل های CSS قالبتون!

آدرس سایتتون رو بدید کد رو براتون آماده کنم قرار بدید

ممنون مهندس

اینه:  لینک ها تنها برای اعضای سایت قابل نمایش است.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

فایل main.min.css در این مسیر رو در فایل منیجر باز کنید:

wp-content/themes/generatepress/assets/css/main.min.css

این کد رو آخر این فایل قرار بدید و بعد کش مرورگر رو پاک کنید:

.top-bar {
    background-image: linear-gradient(90deg,#6e0000 calc(50% - 600px),#a90303 calc(50% + 600px)) !important;
}

تا یه همچین چیزی داشته باشید:

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

و اگه قصد دارید هیدر سایتتون همچین چیزی باشه:

لینک ها تنها برای اعضای سایت قابل نمایش است.

بجای اون کد بالا، این کد رو قرار بدید:

.top-bar {
    background-image: linear-gradient(90deg,#6e0000 calc(50% - 600px),#a90303 calc(50% + 600px)) !important;
}
.site-header {
    color: #FFF !important;
    background-image: linear-gradient(90deg,#6e0000 calc(50% - 600px),#a90303 calc(50% + 600px)) !important;
}
.main-navigation .main-nav ul li > a, .main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: #FFF !important;
    background-color: #302f2f;
}

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

در 20 ساعت قبل، Masih گفته است :

سلام

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

  • لینک ها تنها برای اعضای سایت قابل نمایش است.

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

.header {
  background-image: linear-gradient(90deg,#6e0000 calc(50% - 600px),#a90303 calc(50% + 600px));
}

نمونه ای با همین رنگ ساختم که می تونید چک کنید:

  • لینک ها تنها برای اعضای سایت قابل نمایش است.

 

در 43 دقیقه قبل، Masih گفته است :

توی یکی از فایل های CSS قالبتون!

آدرس سایتتون رو بدید کد رو براتون آماده کنم قرار بدید

 

در 19 دقیقه قبل، Masih گفته است :

فایل main.min.css در این مسیر رو در فایل منیجر باز کنید:

wp-content/themes/generatepress/assets/css/main.min.css

این کد رو آخر این فایل قرار بدید و بعد کش مرورگر رو پاک کنید:

.top-bar {
    background-image: linear-gradient(90deg,#6e0000 calc(50% - 600px),#a90303 calc(50% + 600px)) !important;
}

تا یه همچین چیزی داشته باشید:

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

و اگه قصد دارید هیدر سایتتون همچین چیزی باشه:

لینک ها تنها برای اعضای سایت قابل نمایش است.

بجای اون کد بالا، این کد رو قرار بدید:

.top-bar {
    background-image: linear-gradient(90deg,#6e0000 calc(50% - 600px),#a90303 calc(50% + 600px)) !important;
}
.site-header {
    color: #FFF !important;
    background-image: linear-gradient(90deg,#6e0000 calc(50% - 600px),#a90303 calc(50% + 600px)) !important;
}
.main-navigation .main-nav ul li > a, .main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: #FFF !important;
    background-color: #302f2f;
}

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

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

یک سوال دیگه هم دارم مهندس ، بین نوار بالا و سربرگ ، سایتی که عرض کردم یک خطی داره که اینها رو از هم جدا میکنه (انگار نوار رو حالت جعبه میکنه)

ممکنه بفرمایین من چطور میتونم این خط مشکی رو ایجاد کنم؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

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

ممکنه بفرمایین من چطور میتونم این خط مشکی رو ایجاد کنم؟

این کد رو زیر کدهای قبلی اضافه کنید:

.top-bar {
    border-bottom: 2px solid #000000;
}

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

  • Like 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...