Customizing appearance

Here’s how you can tweak the appearance of InvePress blocks:

Default block styles

To mess with the default style of your fund blocks, hop into your WordPress admin panel and head over to InvePress > Settings. Under the Blocks section, you can switch things up for each block.

Individual block styles

For some real one-on-one time with your fund block, you can do the styling while adding or editing a block in your post or page. Just click the block settings in the right panel, find the Styles tab, and work your magic on that block’s look.

Reusable blocks

Ever wish you could save a block’s style for later? You can! In the WordPress visual editor, after adding a block, you can adjust its style. Once you are happy with the look, click the three-dot menu button in the block toolbar. This opens a menu where you can choose Create pattern/reusable block. Give it a name and decide if you want it to sync (changes apply everywhere you have used it). Click Create, and you are set. Your block’s style is saved for future use. When you want to add it again, just type the name, and voila!

CSS customization

If you are feeling super fancy and want to dive deep into customization, you can use CSS styles in your website’s template. Each InvePress block comes with its own CSS class and sub-classes for specific elements. Plus, you can even add a unique class for each block. While inserting or editing the block in your post or page, click the block settings in the right panel, then the Advanced section. There, you can add your individual classes for specific blocks. Get creative! Check out example below.

This is the used CSS code.

.my-custom-class-round-top {
  border-top-right-radius: .25rem;
  border-top-left-radius: .25rem;
}
.my-custom-class-round-bottom {
  border-bottom-right-radius: .25rem;
  border-bottom-left-radius: .25rem;
}
.my-custom-class {
  background: #008FFB;
  padding: 0 0 2rem 0;
  overflow: hidden;
  color: #FFFFFF;
}
.my-custom-class ::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
.my-custom-class .wp-block-invepress-performance-line-chart-period-selector,
.my-custom-class .wp-block-invepress-performance-line-chart-date-selector  {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-content: stretch;
  justify-content: space-between;
  padding: 0;
}
.my-custom-class .wp-block-invepress-performance-line-chart-period-selector button {
  margin: 0;
  padding: .75rem 0;
  border-radius: 0;
  border: 1px solid #03A9F4;
  width: 100%;
  margin-left: -1px;
  border-top: 1px solid #008FFB;
  color: #FFFFFF !important;
}
.my-custom-class .wp-block-invepress-performance-line-chart-period-selector button:hover {
  background: #00B1F2;
}
.my-custom-class .wp-block-invepress-performance-line-chart-date-selector label {
  margin: 0;
  border-radius: 0;
  border: 1px solid #03A9F4;
  width: 50%;
  margin-left: -1px;
  border-top: 1px solid #008FFB;
  text-align: center;
  padding: .75rem .25rem;
}
.my-custom-class .wp-block-invepress-performance-line-chart-period-selector button:first-child,
.my-custom-class .wp-block-invepress-performance-line-chart-date-selector label:first-child {
  border-left: 1px solid #008FFB;
  margin-left: 0;
  border-top-left-radius: .25rem;
}
.my-custom-class .wp-block-invepress-performance-line-chart-period-selector button:last-child,
.my-custom-class .wp-block-invepress-performance-line-chart-date-selector label:last-child {
  border-right: 1px solid #008FFB;
  border-top-right-radius: .25rem;
}
.my-custom-class .apexcharts-tooltip > div {
  background: #03A9F4 !important;
}
.my-custom-class table tr:hover {
  background-color: #00B1F2 !important;
}
.my-custom-class table tr:first-child:hover {
  background-color: #008FFB !important;
}
.my-custom-class table tr:hover span {
  color: #FFFFFF !important;
}
.my-custom-class table tr:hover .date, 
.my-custom-class table .date,
.my-custom-class .footer {
  color: #81D4FA !important;
}
.my-custom-class .footer {
  text-align: right;
  margin-right: .5rem;
}
.my-custom-class table .date {
  display: block;
  line-height: 1rem !important;
}

Block CSS classes and sub-classes for specific elements that you can play around with.

Performance Line Chart

.wp-block-invepress-performance-line-chart
.wp-block-invepress-performance-line-chart-date-selector
.wp-block-invepress-performance-line-chart-period-selector
.wp-block-invepress-performance-line-chart .footer

Performance Bar Chart

.wp-block-invepress-performance-bar-chart
.wp-block-invepress-performance-bar-chart .footer

Performance Table

.wp-block-invepress-performance-table
.wp-block-invepress-performance-table table.horizontal
.wp-block-invepress-performance-table table.vertical
.wp-block-invepress-performance-table .date
.wp-block-invepress-performance-table .name
.wp-block-invepress-performance-table .footer 

Statistics Table

.wp-block-invepress-statistics-table
.wp-block-invepress-statistics-table table.horizontal
.wp-block-invepress-statistics-table table.vertical
.wp-block-invepress-statistics-table .name
.wp-block-invepress-statistics-table .footer

Breakdown Chart

.wp-block-invepress-breakdown-chart
.wp-block-invepress-breakdown-chart .footer

Breakdown Table

.wp-block-invepress-breakdown-table
.wp-block-invepress-breakdown-table table.vertical
.wp-block-invepress-breakdown-table .name
.wp-block-invepress-breakdown-table .footer

Congrats! You’ve spent a lot of time carefully designing chart and table templates that match your visual style. It would be nice to use them in print as well. But you know what? We’ve got it covered.