** How to override CSS in your foodpress menu

We get lot of people asking how to hide some parts of the menu. There are so many options available for hiding pieces but I understand sometimes you just want that one thing hidden that is missing from options. Things like these (hiding elements from the menu or any other alteration to menu layout) can be easily done with CSS codes. Here is how.

Step 1:

Open inspector in chrome or safari or even firefox. In windows it is F12 for chrome, Mac = Command + Alt+i

This should open a window like this below your website. Pay attention to the inspector icon. Click on this and then you can move your mouse over the web page and over the calendar and select each individual element (that you want to change)

Step 2:

Click on an element you want to edit within the page in the menu. In the above example we want to edit the event times on calendar event row. Now look on the right side pane.

Copy this CSS elements name class structure. In this example it would be:

.fp_box h5.fp_subheader

This is the CSS class names that we can use to apply new styles to change styles ONLY to event time HTML element (in this case). In a similar way you can find the previously applied styles to one single HTML element of the calendar you want to change.

Step 3:

Now go to foodpress> Styles page and paste this CSS class string you copied for the element you want to edit from the inspector.

Troubleshooting

If the styles you write doesn’t make any change on front-end:

Solution #1: Clear cache on your browser and website

Solution #2: the class name for the element you are trying to change styles may not be strong enough to override existing styles. What you need to do is before the class name of the element include class names and ids of parents of the element.

If that doesn’t override the styles you are trying to change, use !important  after the style property.

Doing this yourself

Once you get a hold of how to find the correct CSS class names for an individual element in the foodpress menu it is really easy to use this to alter the menu to the exact way you want it to be.