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

[hugo92 0]

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

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

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

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

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

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

[Masih 6,279]

سلام

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

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

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

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

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

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

[hugo92 0]

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

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

[Masih 6,279]

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

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

[hugo92 0]

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

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

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

ممنون مهندس

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

[Masih 6,279]

فایل 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;
}

 

[hugo92 0]

در 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;
}

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

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

[hugo92 0]

مهندس با کمی دقت برطرف شد .

یک دنیا ممنون از لطفتون و سایت خوبتون

[hugo92 0]

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

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

[Masih 6,279]

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

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

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

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

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