Even with a great looking theme you will often need to tweak the styling, or plan your markup so that the content generated by Toolset matches the existing style.

Below we briefly describe the relevant parts of the Toolset UI where you can apply or add CSS styling, before using the training site to cover several specific examples of customising the output.

Applying or adding CSS styles

Layout cells

Dialog for Layout cell options

When you insert a cell in Layout you have options to change the HTML tag used as a wrapper (e.g. from the default div to a section), and to add an ID or classes to the element so that you can target it with CSS.

Layouts rows

Dialog for Layout row settings

The same options are available if you edit a row, where you can additionally alter the row type to choose the Bootstrap container setting.

Adding custom CSS globally

You can add custom CSS rules to the page at Toolset -> Layouts CSS and JS. This generates a dynamic CSS file (with a long, seemingly random name) that is enqueued on all front-end pages after your theme stylesheet and so can be used to overwrite theme styles.

Adding custom CSS to Views

The various editors in a View or in a Views Content Template have a custom CSS editor (initially collapsed) where you can add your own style rules. These are added directly to the page HTML near the bottom of the body only on the pages where they are needed.

Learn by doing

We’ll look at several examples where we customise our training site:

  1. Global custom CSS rules for media object and strikethrough text style
  2. Add custom CSS to fix styling issues with the event search form
  3. Use Bootstrap classes to display event types as labels
  4. Leverage the theme CSS to reproduce the blog post meta styling on other post types

Add global CSS styles

Where we list events (e.g. on the event archive and event search pages) we want to display the event summary in the well-known media object format (thumbnail on the left, text content on the right) and we register some custom styles to do so. We also define a custom style to apply strikethrough text style.

If you check the page Toolset -> Layouts CSS and JS you will find the following styles were added, which can be used anywhere.

layouts-custom-css
/* Custom media object */
.media-block {
  display: flex;
  align-items: flex-start;
  margin: 0 0 1em 0;
}
.media-block > img {
  max-width: 100%;
  margin: 0 1em 0 0;
}
.media-block > div {
  flex: 1;
}

/* Text strikethrough style */
.strikethrough {
  text-decoration: line-through;
}

Fix styling issues with the event search form

When inserting filter controls in a View, by default the markup used corresponds to the Bootstrap specification (you will find the attribute output="bootstrap" is added to the filter control shortcodes).

With or without Bootstrap styling there are alignment issues with our search filter.

With Bootstrap
Filter controls with Bootstrap
Without Bootstrap
Filter controls without Bootstrap

We will stick with the default Bootstrap-styled output (which allows us to display the form elements inline).

In that case we will need to add custom CSS to

  • align the top of the search field with the event type dropdown
  • change the height of the dropdown to match the height of the search field
  • unset the rounded button corners added by Bootstrap
  • We will also add a tweak to reduce the top margin on the date field labels.

  • Edit the View Search Events. You can do this directly at Toolset -> Views, or you can edit the page Search events and open the View cell
  • Scroll down to the Filter Editor and paste the following CSS into the CSS editor
  • search-custom-css
    /* Align top of search box with event type select box */
    form input[name="wpv_post_search"] {
      margin-top: 0;
    }
    
    /* Adjust height of select box to match search field */
    select[name="wpv-event-type"] {
      height: 38px;
    }
    
    /* Override Bootstrap round button styling */
    .btn {
      border-radius: 0;
    }
    
    /* Remove top margin on date labels */
    form.wpv-filter-form label {
      margin-top: 0;
    }
  • Save the View and then verify the styling is updated on the front end

Use Bootstrap to style event categories as labels

Events have a taxonomy event type. On the event archive these are presented in the default output style, as links to the taxonomy term archive, separated by commas.

They are generated by the shortcode [wpv-post-taxonomy type="event-type"] and you can confirm how it looks on the front end using the Events -> All Events menu link.

Elsewhere, on the Upcoming Events and Search Events pages, we display the event type terms as labels.

Event types displayed as Bootstrap labels

We do that not by adding custom CSS but by taking advantage of existing style rules from Bootstrap.

The Bootstrap documentation shows that to display a span of text as a label we simply need to add label classes to it.

Let’s edit the event archive and add the event types as labels.

  • Edit the Events archive directly at Toolset -> WordPress archives
  • Edit the span surrounding the wpv-post-taxonomy shortcode and add the required label classes, e.g. <span class="label label-info">
  • Save the archive and view it on the front end at Events -> All Events

Oops. The wpv-post-taxonomy shortcode outputs the terms in a list separated by a comma, and all we have achieved is wrapping that comma-separated list in a single label.

Event types in a single Bootstrap label

We can fix this by getting creative with the taxonomy term separator, and instead of using a comma, use the separator to close the first span tag and open a new one that also has the label classes added.

This will give us the result we were looking for:

separator
<span class="label label-info">[wpv-post-taxonomy type="event-type" separator="</span> <span class='label label-info'>"]</span>

Leverage theme styles for Toolset content

The training site uses the OceanWP theme which comes with attractive default styling for post meta such as the post author and date on single blog posts.

We can use the browser dev tools to inspect the markup and CSS rules used to create the style so that we can replicate it elsewhere.

Using the browser inspector to study existing markup

We can see that the style comes from the theme stylesheet and requires little more than an unordered list with a class of meta.

If we wanted to display the same post meta for Event posts, for example, then our template for single events would need to include the following in a Visual Editor cell on the first row:

<ul class="meta">
	<li><i class="icon-user"></i>[wpv-post-author format="link"]</li>
	<li><i class="icon-clock"></i>[wpv-post-date]</li>
	<li><i class="icon-folder"></i>[wpv-post-taxonomy type="event-type"]</li>
</ul>

Need help?

Go to the Beyond the Basics support page and leave a comment. Nigel, the author of these pages, or one of the other Toolset team members will reply to you.

What’s next?

Step 7Further reading