ম্যাজেন্টো 2 এ ফাঁকা থিম শৈলীর ওভাররাইডিং


10

আপনি কীভাবে ম্যাজেন্টো 2-তে ফাঁকা থিমটি উত্তরাধিকার সূত্রে কোনও কাস্টম থিমের জন্য নেভিগেশন শৈলীর উপর নজর রাখবেন?

theme.cssআমার app/design/frontend/<Vendor>/<theme>/web/cssফোল্ডারে আমার একটি ফাইল রয়েছে তবে আমি সচেতন যে ম্যাজেন্টো 2 কম ব্যবহার করে। আমি আমার theme.cssস্টাইলশীটের মধ্যে শৈলীগুলি সহজেই ওভাররাইড করতে পারি, তবে আমি ব্যবহার চালিয়ে যেতে চাই না !important

এছাড়াও, আমি বুটস্ট্র্যাপ 3 ব্যবহার করছি এবং আমি ধরে নিচ্ছি যে ফাঁকা থিমের স্টাইলগুলি বুটস্ট্র্যাপের সাথে মেলে এমন কোনও স্টাইল নির্দেশকে ওভাররাইড করবে। এটির কাছে যাওয়ার সর্বোত্তম উপায় কী?

উত্তর:


16

অভিভাবক থিম থেকে শৈলীগুলিকে ওভাররাইড করতে বা প্রসারিত করার জন্য ম্যাগেন্টো দ্বারা প্রস্তাবিত দুটি উপায়:

1. সহজ উপায়

প্রসারিত করা:

আপনার থিম ডিরেক্টরিতে একটি web/css/sourceউপ-ডিরেক্টরি তৈরি করুন । (আপনি ইতিমধ্যে এই অংশটি সম্পন্ন করেছেন) _extend.lessসেখানে একটি ফাইল তৈরি করুন ।

ডকুমেন্টেশন অনুযায়ী :

"যখন আপনি পিতামাতার থিমের সমস্ত কিছুর সাথে খুশি হন, তবে আরও শৈলী যুক্ত করতে চান তখন _extend.less ব্যবহার করে একটি থিম প্রসারিত করা সহজ বিকল্প" "

অগ্রাহ্য করা:

_extend.lessফাইলটি তৈরির পরিবর্তে আপনি একটি _theme.lessফাইল তৈরি করেন । এক্ষেত্রে আপনার পিতামাতার কাছ থেকে আপনার প্রয়োজনীয় সমস্ত ভেরিয়েবলগুলি অনুলিপি _theme.lessকরতে হবে, সেগুলিও পরিবর্তন করা হবে না including তারপরে আপনার পরিবর্তনগুলি করুন।

ডকুমেন্টেশন অনুসারে , অপূর্ণতাটি হ'ল:

"যখনই পিতামাতার _Theme.less আপডেট করা হয় তখন আপনাকে নিজের ফাইলগুলি পর্যবেক্ষণ করতে এবং ম্যানুয়ালি আপডেট করতে হবে" "


2. কাঠামোগত উপায়

প্রসারিত করা:

এই পদ্ধতিটি আপনাকে আরও ভাল পদ্ধতিতে আপনার কোডটি সংগঠিত করতে দেয়। আপনার পরিবর্তনগুলি কাঠামোগত করা হবে। আপনার সমস্ত পরিবর্তনগুলি অন্তর্ভুক্ত করতে একটি একক _extend.less ফাইল ব্যবহার না করে আপনি পরিবর্তন করতে চান এমন Magento UI লাইব্রেরি থেকে প্রতিটি উপাদানগুলির জন্য একটি প্রসারিত ফাইল তৈরি করুন।

বলুন আপনি বোতাম এবং নেভিগেশন উপাদানগুলি থেকে শৈলী প্রসারিত করতে চান। আপনার থিম ডিরেক্টরিতে 2 টি ফাইল তৈরি করুন: _buttons_extend.lessএবং _navigation_extend.less, তারপরে সংশ্লিষ্ট ফাইলের প্রতিটি উপাদানগুলির জন্য আপনার পরিবর্তনগুলি যুক্ত করুন।

তারপরে আপনি _extend.lessএই কোডটি যুক্ত করে ফাইলটি তৈরি করুন :

@import '_buttons_extend.less'; 
@import '_navigation_extend.less';

অগ্রাহ্য করা:

আপনার থিম ফাইল UI 'তে উপাদান আপনি পরিবর্তন (চাই সংশ্লিষ্ট একটি অনুলিপি তৈরি _buttons.less, _navigation.lessইত্যাদি) এই ফাইলটি অগ্রাহ্য করবে _buttons.lessপিতা বা মাতা থিম।

ওভাররাইড এবং প্রসারিত মধ্যে পার্থক্য লক্ষ্য করা গুরুত্বপূর্ণ ।

আপনি এই ডকুমেন্টেশনে ওভাররাইডিং বা প্রসারিত সম্পর্কে বা ফ্রন্টএন্ড ডেভেলপারদের গাইডে ম্যাজেন্টো 2 তে সিএসএস সম্পর্কে আরও পড়তে পারেন ।


সুতরাং আসুন আমি বলি যে আমার কাছে একটি ভেন্ডর_নামস্পেস ফোল্ডার রয়েছে, আমি সেখানে "ওয়েব / সিএসএস / উত্স / _extend.less" নামে অন্য একটি ফোল্ডার যুক্ত করেছি এবং ওয়েব / সিএসএস / উত্সে _extend.less-file- জানতে পারি সংশ্লিষ্ট ফাইলটি কোথায় আছে? আমি কি এটি সঠিকভাবে বুঝতে পারি
সর্বোচ্চ

হ্যাঁ, কেবল ফাইলটি তৈরি করুন web/css/source/_extend.lessএবং আপনার স্টাইলগুলি সেখানে রাখুন।
লুইস গার্সিয়া

আমি একটি _এসট্রেড.বিহীন ফাইল তৈরি করেছি যা একটি _স্লাইডার.বিহীন আমদানি করে: <theme_folder> / CSS / উত্স / উভয় ফাইল একই পথে রয়েছে তবে কাজ করছে না, _স্লাইডার.লেস-এ সমস্ত নিয়ম .css উত্পাদিত ফাইলগুলিতে পাওয়া যায় নি, আমি বিকাশকারী মোডে আছি এবং "পিএইচপি ম্যাজেন্টো সেটআপ: স্ট্যাটিক-সামগ্রী: স্থাপন করুন"
এক্সজেগা

আপনি কি আপনার ব্রাউজারের ক্যাশে মুছে ফেলেছেন?
লুইস গার্সিয়া

1
আমি কি <theme_folder> / CSS / উত্স / lib / ভেরিয়েবলগুলি ওভাররাইড করতে পারি? আমি কীভাবে কম ফাইলের ভেরিয়েবল পরিবর্তন করতে পারি? (ধরুন আমি উদাহরণস্বরূপ @ বাটন-ব্যাকগ্রাউন্ডকে ওভাররাইড করতে চাই) - আমাকে এটি _buttons_extend.less ভিতরে লিখতে হবে বা আমি সমস্ত লিন / ওয়েব / সিএসএস / উত্সকে ওভাররাইড করতে পারি / lib / ভেরিয়েবল
গোল্ডি

5

ফাউন্ডেশন ব্যবহার করার সময় আমারও একই সমস্যা ছিল। এটি করার সরকারী উপায় হ'ল নির্দিষ্ট মডিউলের কম ফাইলকে ওভাররাইড করা এবং সেখানে সিএসএস পরিবর্তন করা। এটি সংকলনের সময় ম্যাজেন্টো দ্বারা বাছাই করা হবে

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/debug-theme.html#debug-theme-style

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html

শেষ পর্যন্ত আমি ম্যাজেন্টো দ্বারা তৈরি সমস্ত ডিফল্ট সিএসএস ফাইলগুলি সরিয়ে দিয়ে শেষ করেছি। আমি কাস্টম সিএসএস লিখতে অনেক বেশি সহজ পেয়েছি, বিশেষত বুটস্ট্র্যাপের মতো কাঠামো ব্যবহার করে, সমস্ত মডিউলগুলির সমস্ত ওভাররাইড করার চেষ্টা করার চেয়ে। আপনি এটি এতে করতে পারেন:

app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
</head>
</xml>

স্টাফ কমিট করার ভাল উপায়। তবে প্রশ্নটি একটি সম্পূর্ণ থিম "প্রসারিত" এবং এটিতে আরও যুক্ত করার বিষয়ে।
মিগুয়েল ফেলিপ গিলেন কালো

না, প্রশ্ন ওভাররাইডিং সম্পর্কে।
কালো

0

আপনাকে স্টাইল-এম.এস.এস.এস. ওভাররাইড করতে চান তা বলুন , তারপরে web/cssআপনার থিমটির অনুলিপিটি লিখুন , এর নাম কাস্টম-স্টাইলস-এম.এস.এস.এস .

তারপরে আপনার থিমগুলিতে এই কোডটি ব্যবহার করুন default_head_blocks.xml :

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
        ...
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.