Default Theme Setup

Default Theme Setup

If you choose to use the default theme there are a few things you need to know.

  1. Under the “WP Inventory” tab you need to go to “Settings”.  Then, the tab “General”.  Then the sub-tab “Item Display”.
  2. For the “Theme” option, select “Default Theme”.
  3. Now on the “Display” page you need to set the image or images at the top of the “Details” page settings if you want the two column display.  The system looks for the image or images field at the top of the list and if it is there, it lays-out the image/images to the left and all other fields to the right.  If you do not set the image or images at the top, it will layout in a single column.
  4. In addition, as an option, you can put the “Make” and “Model” field side by side if they come together in the sequence.  So in your display settings if you drag the “Make” field in, and then “Model” directly under it, the system will put them on one line separated by a ” – “.  Here is an example of what the page may look like once you take these actions:

Do Your Own Styling

Use your own styles

You can add your own styles to affect the display

If you are comfortable with CSS and would like to add your own styles, simply write your CSS to your theme’s style.css file.  If you are using a child theme, you would write it to the style.css file in that child theme’s folder.  Child themes are used commonly in 3rd party, purchased, WordPress themes.  Child theme style sheets allow you to override styles from plugins or the parent theme.  See the codex here for a more in-depth review of child themes.

Default Style Options

Default style options

The WP Inventory Manager comes with a standard set of styling options.  If you choose not to use our styles, you can turn them off in the settings.  Our styles are meant for layout only and we try very hard not to do anything that will interrupt your theme’s styles.  We don’t set font sizes, colors, and keep all styles contained within our html wrapper.  Most of the styles revolve around the detail page layout to support a two column design.  To achieve this, simply make sure that the image or images field is the first item in the display settings list here:

This would result in the details page looking like this:

 

Where the images are on the left, and all the rest is on the right.

Note: See how “Laptop” and “MacBook Pro (early 2013)” are side by side?  That is the “Make” and “Model” fields.  If they are put one after the other as they are in the screen shot label settings above; then they will display inline like this.

And lastly, if you want to make the labels show up with these, you just have to navigate to your labels setting page again and scroll down to the bottom.  You will want to set the setting “Display labels on Detail” as depicted in this screen shot:

And after you save, you can go back to the front end and refresh and it will now look like this:

Styling

Customize the Look of Your Inventory

Styling your inventory pages

By default, WP Inventory is configured to use many of your theme’s styles as possible. However, not every theme is the same, and sometimes elements will not style as appropriate. Or maybe you want to customize your inventory listing beyond the default theme styles. It is possible to style and give your inventory pages a nice look in a few different ways.  One way is to use your own custom styles.  Simply write your styles to your theme or child theme’s style.css file.  Another way is to hire an outside web developer do it for you based on a professional web design, and refer them to our CSS documentation (linked below).