QueenMother305

i don’t want the price to show on the index page of marketplace. i don’t know how to do css. could someone please provide needed css to hide price or please tell me where the file is so i can delete the line of code for this item?

 

thank you. 

 

i have attached a mobile view screenshot with a circle around what i’m trying to remove...

 

Be the first person to like this.
JohnJr

Well, today you going to learn :)

Open to that location using Firefox.  Then right click on the area you want to change and click inspect element.

A new window will appear, and it takes a few seconds to find that spot you right clicked on.  Now my example gave the price of FREE, so that is what I right clicked on and inspected the element...see image.  Although ITEM PRICE is highlighted now, it was on the word Free (line below) but I know I want to get rid of the price/item price, so I left click on the code to highlight the CSS for Item Price.  This is where you can fool around without affecting your site because if you refresh the screen after goes back to what your real code says.  So you can change fonts size...color..etc to see what your page will look like after you enter the new code in your CSS file.  In this case, I added the word: display: none; which should hide it...and don't forget the semicolon at the end of the line.  You will now see the price disappear.  But this is only tempory as you need to update your file.  So looking at this example, I see on the right side of the column called THIS ELEMENT that the CSS div name is called (.market-app.listing article .item-outer .item-inner .item-price) and it is located at line 67009 in my bootstrap.css file.  Your bootstrap CSS file is located in your theme folder. So if you are using the material theme, it would be PF.Site/flavors/material/flavors/bootstrap.css. ; Now what I use to do is to that line and change or add the difference...but I found it a pain in the butt every time I upgraded.  So now I paste I copy that whole first element (.market-app.listing article .item-outer .item-inner .item-price) including like on this example the font size...all the way down to the width size and then I delete what I know is already in this file.  So if I changed the font to 25px instead of 20px.  I would delete everything (not the name of course) except (font-size: 25px;).  Now although the computer will still render 20px at the beginning of the file...since this is at the end, it will render this last.  Now, in this case, you delete everything and add (display:none;).  Now I write that file name down in excel or notepad, and I copy all the stuff I pasted at the end of the file.  This way when I rebuild the core or upgrade it set everything back to its original state.  So then I open my excel spreadsheet and copy that big chunk of CSS code and paste it and upload to my server and I am back to where I was at.  This is a good way since upgrades to add additional CSS so only pasting at the end will always let you have all the new stuff as well as the stuff you changed in one copy and paste movement.  Will be back ... gotta pick up my kid.  If you right click on the image below and click view image, you will see the image in its full size...I hope.

Last update on August 8, 2018 by JohnJr.
JohnJr

I forgot to say on the left side shows rendered code and on the right side of the image shows css for the highlighted area on the left.  I also forgot to mention that on the right if the section of the CSS does not list a CSS file but instead says "inline", then the CSS is code file(.php, .html...etc.) for that section..not in CSS file that ends (.css).

QueenMother305

I forgot to say on the left side shows rendered code and on the right side of the image shows css for the highlighted area on the left.  I also forgot to mention that on the right if the section of the CSS does not list a CSS file but instead says "inline", then the CSS is code file(.php, .html...etc.) for that section..not in CSS file that ends (.css).

 

omg john i appreciate your in depth reply but all of that is so confusing. lol

 

can u please just tell me where to find the file so i can delete the line of code hardcoded in the app?

Spaninet

Hi QueenMother305,

 

Here is the code to hide the price of all items of the main page of Marketplace app.

It doesn't hide the price in the item details page.

 

.item-price {

    display: none;
}

 

Tested with Material template.

 

Regards.

Last update on August 9, 2018 by Spaninet.
Spaninet

BTW, I forgot to say you need to put that CSS code in Appearance >> Themes >> Edit (your default theme) >> CSS and put it at the bottom.

QueenMother305

thanks john and spaninet. you guys always reply. i dont know what i would do without ya'll and spirog. very helpful. thank you!

Spaninet

Thinking to create a page with simeple css tips like this, what do you think?

Be the first person to like this.
JohnJr

In the past I always put my css in the bootstrap.css because in the beginning the css editor did not work for me...but I just tested it last week and it works perfect for at least bootstrap css.  Have not tried it on add-ons css yet.  Just wanted to update this thread so future user won't paste it in the bootstrap.css and instead use the css editor.

Be the first person to like this.
Spaninet

In the past I always put my css in the bootstrap.css because in the beginning the css editor did not work for me...but I just tested it last week and it works perfect for at least bootstrap css.  Have not tried it on add-ons css yet.  Just wanted to update this thread so future user won't paste it in the bootstrap.css and instead use the css editor.

 

It's not needed. I always put the css directly in styles section when editing a theme.

Be the first person to like this.
JohnJr

Are you talking about the css editor in the theme editor because that what I was saying works now.  Not sure when it was fixed but in the beginning it was not working correctly.

Be the first person to like this.
Spaninet

Are you talking about the css editor in the theme editor because that what I was saying works now.  Not sure when it was fixed but in the beginning it was not working correctly.

 

Yes, before most issues where related to cache. I had to manually remove chache files. Now it works better.