layout Structure Classes Names

Before you know Css Documentation You Must Know The Classes Names Used in Layout Structure Becuase you will Develope Css Code Based On Css Classes Names Because There are many of classes names in Store Theme Based On Store Section Forexample Header Section ,Body Section,Shopping Card And So on .

The picture Upper Describe Classes Names Used with every Section, there are 6 Topper Classes Names in Store.

master-wrapper-page:This class Is The master class name in the store if you change any thing in it the changes will be effect all clsses names under it like master-column-wrapper or footer.

header:This class is for Header Section not to header Tag , the header class name is for all elements in header Section like logo and menus and so on.

This class has two sub classes names under it .

header-upper:is for upper place of store like myaccount,language list and currency list and so on.

2. header-lower:is for lower place in header section like menu and logo and shopping card icon,Search text and so on .

3. header-menu:is for header menu in store .

4. master-wrapper-content:This class for all Store Content in all page like main page and login page and blog and so on.
5. master-column-wrapper :also same master-wrapper-content class because the prev class is the parent of this class.
6. footer:this is for footer section in store like copy right and menu and newsletter section and so on.

NOTE

The perfer way To develop Css Code is write Classes start from parent classes

.master-wrapper-content .master-column-wrapper .Slider-image{
color:red;}
or
.master-column-wrapper .Slider-image{
color:red;}

All Classes inside one of this six classes So in most times if you writes without parent classes doesn't work because the style of parent classes is affects it, Because that the prefer way is write it with parent class with !important keyword to force the style to be applied.

Some Classes has Many parents inside it So you don't need To add all parents only Add The last Two parent classes if not work add third parent classes

.master-wrapper-content .master-column-wrapper .form-warper .right-form .input-text .img{
color:red;}

.form-warper .right-form .input-text .img{
color:red !important;}

INFO

You can know the parent of classes in developer console in browser like google chrome or firefox ,
You Test it in Developer console before write it in Css Editor

NOTE

You Must Know Not All Css Reference Used In All Store Is Here This Reference Is Css Parent Reference .

All Classess Names In Css References Is Public Css Not Specify To Current Theme Every Theme Used Css Parent Reference And also Has Own Reference .

TIP

You Can Used this Refrences In Any Themes Because This Is The Parent Css And All Themes used.

INFO

There Are Defai