Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Is it possible to change styles in only specific page in Magento 2?

SOLVED
Go to solution
‎09-24-2018 02:46 AM
‎09-24-2018 02:46 AM

Is it possible to change styles in only specific page in Magento 2?

Hi Everyone,

 

I am newbie here and started learning Magento 2 a few months ago.

I am going to change the search bar styles in only main page. but once add custom css, it applies to all pages.

 

Please let me know if someone knows how to apply custom css to only specific page.

Thanks.

Labels:
0 Kudos
Reply
1 ACCEPTED SOLUTION

Accepted Solutions
‎09-25-2018 09:03 PM
‎09-25-2018 09:03 PM

Re: Is it possible to change styles in only specific page in Magento 2?

Hi @simon_jang

 

Yes, you can do for few pages as per your requirement and for this you need to make changes in CSS. In Magento, every page have one unique class so we can target the page design by using that unique class. Let me share screen shot for same.

search.png

Please check it by using this kind of method. Let me know if you still facing any issue.

 

if issue solved,Click Kudos & Accept as Solution

View solution in original post

Reply
8 REPLIES 8
‎09-24-2018 03:46 AM
‎09-24-2018 03:46 AM

Re: Is it possible to change styles in only specific page in Magento 2?

Hello @simon_jang

 

Welcome to the community.

 

You can follow below steps to include css on specific page:

 

Create your file in this location:
app/code/vendor/modulename/view/frontend/web/css/customcss.css


But before you do that the key folder is called "modulename". This is usually your theme or you can choose any other module you have in there. For this example we have a folder vendor called Lifetime (it is a theme but it really doesn't have to be theme. You can choose any Vendor. Once you do that make sure you follow the rest of your path and create that custom css file. 


So, in this case, our path would be:


app/code/vendor/Lifetime/view/frontend/web/css/customcss.css
(notice how module name is changed to lifetime)

STEP 3:
Go back to your page and update your Layout Update XML to say:
<head>
  <css src="Lifetime_Module::css/lmg.css"/>
</head>

Notice how Lifetime is placed instead of initial Vendor.

STEP 4.
You must deploy new static resource after. To do that log into your site via SSH and go into your root folder. 
Run this command and wait until it is done:
php bin/magento setup:static-content:deploy
Refresh cache and you are good to go!

 

Manish Mittal
https://www.manishmittal.com/
Reply
‎09-24-2018 05:24 AM
‎09-24-2018 05:24 AM

Re: Is it possible to change styles in only specific page in Magento 2?

Hello @Manish Mittal

 

Thank you for your reply.

 

Yes. That is just the way to add custom css to magento system.

I am already doing it to change the layout, block styles.

But What I mean is that the changes through that way is applied to all pages.

I want to change styles of search bar in only main page.

If possible, I'd like to add inline css to main page(html).

 

Please let me know if you know that way.

Thanks.

 

0 Kudos
Reply
‎09-24-2018 05:29 AM
‎09-24-2018 05:29 AM

Re: Is it possible to change styles in only specific page in Magento 2?

@simon_jang

 

Understanding home page is main page so you can do like as follows:

 

Go to in admin:

 

Content > Pages > Select your home page that you want edit.

In the content area, you can add your CSS inline - also cuts the number of calls down.

 

 <style xml="space"><!--
.product-item .product-reviews-summary .reviews-actions, .catalog-category-view .action.tocart, .action.primary, .action.tocompare, a.action.tocompare, .action.tocompare, .product-item-actions .actions-primary+.actions-secondary { display: none; }.product-item .price-box {margin: 5px;}.product-item-details {text-align: center;}
--></style>

 Hope that helps. Please clear cache and run commands if required. 

Manish Mittal
https://www.manishmittal.com/
0 Kudos
Reply
‎09-24-2018 06:42 AM
‎09-24-2018 06:42 AM

Re: Is it possible to change styles in only specific page in Magento 2?

Hi @simon_jang

I believe you have to check this Masonry View for Products Magento 2 Extension

0 Kudos
Reply
‎09-24-2018 06:57 AM
‎09-24-2018 06:57 AM

Re: Is it possible to change styles in only specific page in Magento 2?

@Ankit_S

Thank you for your reply.

I've checked the extension. but I am going to change minor style, specially change the background color of search bar in only main page.

 

I am going to add following code.

background-color: #272822 !important;

 

Is it impossible? Smiley Happy

Regards,

0 Kudos
Reply
‎09-25-2018 09:03 PM
‎09-25-2018 09:03 PM

Re: Is it possible to change styles in only specific page in Magento 2?

Hi @simon_jang

 

Yes, you can do for few pages as per your requirement and for this you need to make changes in CSS. In Magento, every page have one unique class so we can target the page design by using that unique class. Let me share screen shot for same.

search.png

Please check it by using this kind of method. Let me know if you still facing any issue.

 

if issue solved,Click Kudos & Accept as Solution

Reply
‎09-25-2018 10:28 PM
‎09-25-2018 10:28 PM

Re: Is it possible to change styles in only specific page in Magento 2?

Hello @simon_jang

 

Yes, you can add that code if it fix your problem:

background-color: #272822 !important;

 

Manish Mittal
https://www.manishmittal.com/
0 Kudos
Reply
‎09-26-2018 12:23 AM
‎09-26-2018 12:23 AM

Re: Is it possible to change styles in only specific page in Magento 2?

Hello @simon_jang,

 

If you want to change some style on the specific page then you can find the unique class in body tag like catalog-product-view, cms-home etc... Please add this class in above your CSS code then please deploy static content and clear cache. It will work.

 

--
If my answer is useful, please Accept as Solution & give Kudos

 

0 Kudos
Reply