Modify Css/Styles/Layout – WPPizza Documentation

Layout (Menu Items, General)

super_admin_v3x — Fri, 03 Jul 2020 12:15:44 +0000

If you wish to alter the display of the WPPizza menu items – alongside many other layout elements – from the installed default, use any of the options below

Goto “WPPizza ->Layout”

Goto “Style” on that page and choose from one of the style options available (currently “default”, “responsive” and “grid” ) as your main / base menu item layout.

Adjust all other layout options on that page as required
Change the order of how elements are displayed by adjusting the “elements” attribute of the shortcodes on your pages according to the shortcode documentation

For full shortcode attributes list available refer to that same documentation please.
Adjust the css according to the css documentation here

In 99% of cases a combination of the above the should let you adjust the layout as you require to fully integrate with your chosen theme I would think (make sure you test any changes you make on multiple devices ).
However, if you still feel the need to modify the templates themselves please refer to the templates documentation

Frontend Css / Styles / Layout

super_admin_v3x — Tue, 13 Jun 2017 14:07:02 +0000

Although the css has been written so that it works with many themes out of the box (see http://demo.wp-pizza.com – all themes use the same default stylesheet) it is also deliberately kept quite bland.
So the chances are, you will probably want to adjust some things (i.e css) here and there to work and fit in with your particular theme.

There are several option you have if you want to do this (for your own sanity, I would suggest you use just one of them and stick to it for any changes you need to make now or in the future):

Option 1: if the theme you are using provides an option to enter your custom css somewhere, you could enter your additional css declarations there
Option 2: you can add your custom css in WPPizza ->Layout -> Custom CSS. If your webserver permissions allow it, adding declarations into that field will create a file named wppizza.style.css. If writing permissions are missing, inline css will be generated instead. (ensure you are entering valid css)
Option 3 (see below): you can use a dedicated wppizza.custom.css file or completely replace existing WPPizza css files with your own

Option 3 Details: using dedicated css files – using wppizza.custom.css to only override selected declarations

CREATE the following directory structure in your child theme: /[absolute]/[path]/[to]/wp-content/themes/[my-child-theme]/wppizza/css/
CREATE a file called wppizza.custom.css in that directory (or copy it from wp-content/plugins/wppizza/templates/css/ to that directory)
ADD your required css declarations to that file (wppizza.custom.css will be read AFTER all other wppizza css files)
make sure WPPizza -> Layout -> Style -> Include CSS / Stylesheet is still checked/enabled
Note: wppizza.custom.css will only be read if it resides in the above mentioned directory. simply editing wp-content/plugins/wppizza/templates/css/wppizza.custom.css in place will not work

using dedicated css files, completely REPLACING selected css files

Note: As it is possible (using the relevant shortcodes) to use different layouts for different pages (or indeed each category displays), the WPPizza frontend css used consists of more than one file.
Namely :

[plugin-path]/wppizza/css/wppizza.css (main wppizza style)
[plugin-path]/wppizza/css/wppizza.default.css (selected declarations when using default style)
[plugin-path]/wppizza/css/wppizza.responsive.css (selected declarations when using responsive style)
[plugin-path]/wppizza/css/wppizza.grid.css.php (selected declarations when using grid style – note: this is a php file to account for dynamically setting gridsizes etc! )
[plugin-path]/wppizza/css/wppizza.rtl.css (if the current language is rtl)

if you want to overwrite any or even all these completely:

CREATE the following directory structure in your child theme: /[absolute]/[path]/[to]/wp-content/themes/[my-child-theme]/wppizza/css/ (same as above)
COPY any/all of above mentioned files from [plugin-path]/wppizza/templates/css/[one of the files above] to /[absolute]/[path]/[to]/wp-content/themes/[my-child-theme]/wppizza/css/[one of the files above]
ADD/EDIT your required css declarations to those files as required
make sure WPPizza -> Layout -> Style -> Include CSS / Stylesheet is still checked/enabled
Note: wppizza.custom.css – as outlined previously can still be used additionally if you so wish and will be loaded after

although you could also use your main theme and create the above mentioned directory structure there, using a child theme is by far the better and recommended way to do this – see WordPress Child Themes)

Modify Css / Styles / Layout

super_admin_v3x — Tue, 13 Jun 2017 14:05:38 +0000

please refer to the relevant sub-sections depending on whether you want to edit frontend or admin styles / css

Admin Css / Styles / Layout

super_admin_v3x — Tue, 13 Jun 2017 14:07:26 +0000

As with the frontend, CREATE the following directory structure in your child theme: /[absolute]/[path]/[to]/wp-content/themes/[my-child-theme]/wppizza/css/
Recommended Way: if you want to customise some admin css declarations, CREATE styles-admin-custom.css in /[absolute]/[path]/[to]/wp-content/themes/[my-child-theme]/wppizza/css/ and add your declarations as required. This file file be read AFTER the main admin css.
Optional: if you want to actually overwrite ALL declarations, COPY styles-admin.css from wppizza/css to /[absolute]/[path]/[to]/wp-content/themes/[my-child-theme]/wppizza/css/ and overwrite. If you do, only this file will be read. Any future amendments to the css of the plugin itself will not be read, so know what you are doing.
if you must, you can do both of the above

Again, you could also use your main theme and create the above mentioned directory structure there, but using a child theme is by far the better and recommended way to do this – see WordPress Child Themes)