Magento 2 Custom Theme : Which files to edit in order to customize home page / category css?

Question

I'm trying to insert some CSS changes, after already inserting the html changes in the "content" part of the Home Page cms page.Changes to category pages will follow the same process, once proven that it works.

I'm trying to install a Custom Bootstrapped CSS Grid (it doesn't matter which one, I just need to insert one and edit it to suit my layout needs)

http://cf.dev.thedt.com/ is my M2 working station

Please help me understand which files i need to edit in order to customize my layout. I have attached an images with the structure as best as it can fit

I've tried modifying

/web/app/design/frontend/Smartwave/porto/Smartwave_Porto/layout -> default.xml

(as explained under devdocs.magento -> override theme layouts)

It doesn't change anything on the home page. (I can't paste it, it's too long)

Either I inserted the css modification in the wrong place, or it's the wrong file, or something cache related (all cache disabled with custom theme by default)

To identify easily the structure, I'll post two screenshots :

By browsing I've also discovered :

Porto/web/css/source content - less files Should I change the less files instead? _theme.less? _layout.less?

Please help me sort this out. I only need one example, I'll copy and adapt it as much as it takes after that.

p.s. I'm modifying the Porto Parent Theme because the Child Theme doesn't have any files in it (I did create it)

Answer 1

• 1) How to add your custom Design on Home page for easily editing and managing.

  Lets take a example for layout of home page showing below element in descending order as you like https://banbayu.com/ . Here are total 7 sections on your home page.

  1) Header 2) Navigation 3) Slider 4) Image section 5) Text Section 6) Image section 7) Footer

  Header, Navigation and Footer are already coming so will create blocks for the rest of sections

  Create a block for slider

  Go to Admin > Content > Blocks > Add New Block

  Create block and name it whatever you want like Homepage slider And paste your slider HTML code in content section.

  Create a widget

  Go to admin > content > widgets > add widget

  Select type as CMS static Block and choose your theme ( porto as you are using )

  Give title ( homepage slider ) / Assign to Store Views / Sort Order to 1 ( just after page header/navigation )

  From widget options select block you create for slider

  Add layout update Display on specified page / Page: CMS HOME PAGE / Container: After page header

  This way you can display block for individual sections of your homepage by sorting order 1,2,3,4 what order you want for you sections

2 ) Adding your custom CSS/LESS or updating existing CSS/LESS

Add your custom CSS/LESS in your porto theme or any theme using _extend.less. This is not in your theme so you need to create it here

app\design\frontend\Smartwave\porto\Magento_Theme\web\css\source\_extend.less

You can write your own CSS/LESS here or paste any copied from jsfiddle, bootnip or any webiste.

run below commands to work css effectively

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

In whole procedure keep your cache disabled

Editing in your bootstrap files app\design\frontend\Smartwave\porto\web\bootstrap\css\bootstrap.css

For editing existing LESS\CSS you must have extended module in your custom theme for example editing cart page css

app\design\frontend\Smartwave\porto\Magento_Checkout\web\css\source\module\_cart.less

Run upgrade/deploy commands after changing in LESS files

I hope this will help you out

Thanks