কুড়ি সতেরোতে আমি কীভাবে শিরোনাম চিত্রের উচ্চতা পরিবর্তন করব?

Question

বিশ শতকের থিমটিতে আমি শিরোলেখের চিত্রটির উচ্চতা (শিরোনাম মিডিয়া বিভাগে নির্দিষ্ট) কীভাবে পরিবর্তন করব?

বিশেষত আমি এটি হোম পৃষ্ঠায় পরিবর্তন করতে চাই কারণ এখানে এটি প্রায় পুরো পৃষ্ঠা পূরণ করে। আমি চাই এটি আরও খাটো হোক। বিল্ট-ইন সম্পর্কিত পৃষ্ঠা যেমন এটি অন্য পৃষ্ঠাগুলিতে যেভাবে প্রদর্শিত হয় তার ভাল উচ্চতা রয়েছে তাই যদি আমি এটি অনুকরণ করতে পারি যে হোম পৃষ্ঠায় আমি সন্তুষ্ট হব। সুনির্দিষ্ট নিয়ন্ত্রণ কীভাবে করা যায় তা জানা থাকলেও দুর্দান্ত।

Comments

theme-twenty-seventeenপূর্ববর্তী বছরগুলিতে সংশ্লিষ্ট ট্যাগগুলি মনে হচ্ছে এমন কোনও ট্যাগ কেন নেই তা নিশ্চিত নন ।

— ব্যবহারকারী

এটি একটি ভাল প্রশ্ন, দু: খের এখনও কোনও সুস্পষ্ট উত্তর নেই। কামনা এটি একটি ফিল্টার 🤷🏻‍♀️

— জার্কার্ক

স্ট্যাক ওভারফ্লো সম্পর্কিত সম্পর্কিত প্রশ্ন

— মনিকা পুনরায় ইনস্টল করুন - বিদায়

Answer 1

আমি সিএসএস কোডটির (অংশ) খুঁজে পেয়েছি যা উচ্চতাটি নিয়ন্ত্রণ করে wp-content/themes/twentyseventeen/style.css।

বর্তমানে কোড 3629 লাইনে অ্যাডমিন বারটি দৃশ্যমান না হলে (আদর্শ বেনামে ব্যবহারকারী) প্রযোজ্য এমন কোড রয়েছে

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}

যখন অ্যাডমিন বার প্রযোজ্য এবং কোড হয় (যেমন আপনি যদি লগ ইন) বর্তমানে লাইন 3646 এ দৃশ্যমান

.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
  height: calc(100vh - 32px);
}

এবং তারপরে বর্তমানে মোবাইলে প্রযোজ্য কোডটি 1638 লাইনে রয়েছে:

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
        display: table;
        height: 300px;
        height: 75vh;
        width: 100%;
}

আমার শিশু থিমের স্টাইল.এসএসএস-এ CSS এর এই তিনটি বিভাগ অনুলিপি করে এবং heightবৈশিষ্ট্যটি সংশোধন করে আমি হোম পৃষ্ঠায় শিরোনামের ইমেজটির জন্য উচ্চতাটি টুইঙ্ক করতে সক্ষম হয়েছি। আমি উচ্চতা সেট 30vh, calc(30vh - 32px)এবং 30vhপ্রত্যেকটি বিভাগে যথাক্রমে। আমি প্রথম height: 1200pxএকা রেখেছি ।

নোট করুন উচ্চতার উপাদানটি সেট করা হয়েছে 100vhযা ভিউপোর্টের উচ্চতার তুলনায় উচ্চতার আকারকে মাপ দেয়। সুতরাং 100vh ভিউপোর্টের 100%, যখন ভিউপোর্টের 50vh 50%।

একটি স্বতন্ত্র বিষয় হ'ল হোম পৃষ্ঠায় শিরোনামের চিত্রের জুম এবং অবস্থান অন্যান্য পৃষ্ঠাগুলির চেয়ে আলাদা।

এটি সবচেয়ে ভাল উপায় কিনা তা নিশ্চিত নন। আমি আরও ভাল বিকল্পের জন্য উন্মুক্ত তবে এখন পর্যন্ত এটি একটি বেসিক স্তরে কাজ করছে।

Comments

এটি সিএসএসের একটি বিজোড় গোছা বলে মনে হচ্ছে না। সর্বোচ্চ-উচ্চতা 500px এবং উচ্চতা 100vh পাওয়ার জন্য আমি এটি চেষ্টা করি নি (তবে আমি আত্মবিশ্বাসী এটি কার্যকর করবে না)। উদাহরণস্বরূপ, 500px সর্বোচ্চ উচ্চতা পর্যন্ত ভিউ পোর্টটি পূরণ করুন।

— মাদিবাদ

আপনি কি @ মিডিয়া অনুসন্ধানগুলি অন্তর্ভুক্ত করেছিলেন? তিনটি পৃথক বিভাগ রয়েছে যাতে এটি মোবাইল ডিভাইস বনাম কম্পিউটার স্ক্রিনে আলাদাভাবে কাজ করতে পারে (তৃতীয়টি অ্যাডমিন বার সহ কম্পিউটার স্ক্রিনের জন্য)। আমি এই একই প্রশ্নের সাথে লড়াই করে চলেছি, এবং আমার শিশু থিমটি সোর্স থিমটি মিডিয়া অনুসন্ধানগুলি (এমনকি গুরুত্বপূর্ণ!) ওভাররাইড করতে পারি না।

— এরিক হ্যারিস

Answer 2

কেবল ড্যাশবোর্ড থেকে থিমটি সম্পাদনা করুন এবং থিম বিভাগ "কাস্টম সিএসএস" এ নিম্নলিখিত সিএসএস সংজ্ঞা যুক্ত করুন:

.has-header-image.home.blog .custom-header {
    height: 26vh;
}

Answer 3

@ ব্যবহারকারীর উত্তরে আমি একটি মন্তব্য দিয়েছি (এটি একটি দুর্দান্ত নাম);) আমি ভেবেছিলাম আমি এটিকে এগিয়ে দেব।

আমি থিম ফাইলটি সরাসরি সম্পাদনা করছি কারণ আমি একটি থ্রো-অ্যাওয়ে ডকার পাত্রে কাজ করছি এটি ধারণাটির আরও প্রমাণ। এটি একটি শিশু থিমের সাথে মানিয়ে নেওয়ার জন্য কিছু টুইট করার প্রয়োজন হবে।

ইন content/themes/twentyseventeen/style.css3680 ~ 3670ish মধ্যে এলাকায় যেখানে হেডার ইমেজ মিথ্যা নয়।

মূল কোড:

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}

আকার পরিবর্তন (এবং অর্ডার) লগ-আউট ভিউ অর্জনের জন্য যথেষ্ট ভাল:

  height: 100vh;    
  height: 100%; 
  max-height: 500px;

আমি যে সমস্ত ঘাঁটি পৌঁছায়নি সেগুলি coverাকা vhদেওয়ার %জন্য আমি এবং ত্যাগ করেছি max-height, তবে তারপরে max-heightআপনি যা করছেন তার জন্য সেট করুন ।

এই সমস্ত জন্য একটি সতর্কতা আছে:

এটি পিক্সেলের একেবারে শীর্ষ অংশ। সুতরাং যদি না আপনারা যদি সেই অঞ্চলে চিত্রের একটি দুর্দান্ত অংশ না পান ... এটি কৃপণ দেখাচ্ছে (অনেকগুলি মাথা কাটা)

আরও অনুসরণ করতে (যখন আমি এটি বাছাই)

Answer 4

আপনি চিত্রটি ক্রপ করে এটি পরিবর্তন করতে পারেন। ওয়ার্ডপ্রেসে কাস্টমাইজার হিসাবে একটি বিকল্প রয়েছে। চিত্র ক্রপ করার জন্য আপনাকে নীচের পদক্ষেপগুলি অনুসরণ করতে হবে।

    1) Go appearance->customize
    2) Header media
    3) add a new image and then crop that image as per your needs and you go.

Comments

হ্যাঁ ..... এটি উত্তর না। আমি এটি করেছি এবং এটি চিত্রটির সেই অংশে জুম করে। এটি একটি খুব সংকীর্ণ চিত্র তৈরি করে তবে পর্দাটি ভেসে ওঠে

— মাদ্রিবাদ

Answer 5

হেডার চিত্রটি প্রদর্শনের জন্য ব্যবহৃত সিএসএসের জন্য আপনি ফায়ারব্যাগ (বা পৃষ্ঠার উত্স কোডটি দেখুন) ব্যবহার করতে পারেন। তারপরে পরিবর্তনটি করতে সিএসএস যুক্ত করুন। আপনি যে সঠিক সিএসএস ব্যবহার করছেন তা থিমের উপর নির্ভরশীল।

ফায়ারব্যাগ আপনাকে কীভাবে চান তা পেতে অস্থায়ীভাবে সিএসএস পরিবর্তন করতে দেয়, তারপরে সেই নতুন সিএসএসকে থিমের সিএসএস পৃষ্ঠায় অনুলিপি করুন (যদি এটির বিকল্প থাকে)।

যদি আপনার থিমটিতে কোনও 'কাস্টম সিএসএস' বিকল্প নেই, তবে সর্বোত্তম উপায় হ'ল চাইল্ড থিম তৈরি করা (তার উপর প্রচুর টিউটোরিয়াল), এবং সেই শিশু থিমের স্টাইলস সিএসএস পৃষ্ঠায় আপনার কাস্টম সিএসএস যুক্ত করুন। (মূল থিমটি কখনই পরিবর্তন করবেন না; আপনার পরিবর্তনগুলি পরবর্তী থিম আপডেটে ওভাররাইট করা হবে))

Answer 6

আমি প্রথম চাইল্ড থিম সেট করে এটির কাছে পৌঁছেছি (ডাব্লুপি দ্বারা প্রস্তাবিত পদক্ষেপ)। তারপরে চাইল্ড থিমের স্টাইল.এসএস ফাইলটিতে আমি নীচের সিএসএস যুক্ত করেছি। প্রথম বিভাগটি প্রথম পৃষ্ঠায় চিত্রটির উচ্চতা নিয়ন্ত্রণ করে; দ্বিতীয় বিভাগটি প্রথম পৃষ্ঠায় চিত্রটির জন্য স্থানটির উচ্চতা নিয়ন্ত্রণ করে। কাজের জন্য দু'জনেরই মিল থাকতে হবে। আমি এমন কিছু লাইন মন্তব্য করেছি যা আমার স্থির উচ্চতার চিত্রটিতে হস্তক্ষেপ করেছে। এখন হোম পৃষ্ঠায় আমার শিরোনামটি অন্য সমস্ত পৃষ্ঠাগুলির মতোই একই।

.has-header-image .custom-header-media img, 
.has-header-video .custom-header-media video, 
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    /* height: 100%; */
    height: 400px;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    top: 0;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    width: 100%;
}
.twentyseventeen-front-page.has-header-image .custom-header-media, 
.twentyseventeen-front-page.has-header-video .custom-header-media, 
.home.blog.has-header-image .custom-header-media, 
.home.blog.has-header-video .custom-header-media {
    height: 400px;
    /* height: 100vh; */
    /* max-height: 100%; */
    overflow: hidden;
}

Comments

"প্রথম বিভাগটি চিত্রটির উচ্চতা নিয়ন্ত্রণ করে; দ্বিতীয় বিভাগ চিত্রের জন্য স্থানটির উচ্চতা নিয়ন্ত্রণ করে।" - কেবলমাত্র প্রথম পৃষ্ঠায় আমার মনে হয়?

— রুপ

রূপটি সঠিক: "কেবলমাত্র প্রথম পৃষ্ঠায়" তাই আমি উত্তরটি সম্পাদনা করেছি।

— পিফিনলে