3

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 : Porto Directory Content

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)

1 Answer 1

4
  • 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

3
  • thank you very much for your detailed answer Manoj. I've done the first steps, i'm waiting to get in touch with the guy hosting my migration site in order to deploy the commands. I'll get back to you with the progress afterwards! I really appreciate your support. Have a nice weekend! Commented Jul 29, 2017 at 11:03
  • Thank you very much Manoj, your answer was helpful and explicit and above all addressed my problem! Much obliged! Commented Aug 8, 2017 at 18:23
  • Your welcome Horace Foca Commented Aug 9, 2017 at 0:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.