1.2.Frontend Css / Styles / Layout
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)
documentor id 5