⚠️ We cannot guarantee that any added pieces of code will work in every case inside of Showit.
There are a few design elements with WordPress elements that you are not able to directly control with Showit Design App settings. This is a list of a few simple CSS hacks that can remove unwanted features or formatting. Copy and paste the desired codes into the Custom CSS box under the Single Post template's Advanced Settings tab.
CSS Codes
Fix Broken Canvas Background Images on Blog Template Pages
With a recent Wordpress update, we've found that images across the board (not just Showit) are having issues. Most commonly you may see a canvas background image broken on one of your blog template pages. The code below will fix that until Wordpress puts out a fix of their own.
img.sbg-i {
max-width: none;
}
Decrease the Default Spacing Between Image Blocks
This code can be used to decrease the default gap between images in a post. You can adjust the gap manually by changing the "0px" number. Copy and paste this code:
figure.wp-block-image {
margin-bottom: 0px
}
For more options, check this article here.
Remove Gallery Block Left Margin
This code will remove the 20px offset built into the WordPress "Gallery" block:
ul.blocks-gallery-grid {
margin-left: 0px !important;
}
Remove Gallery Borders
This code is used to remove the grey border around images in a gallery in a blog post. Copy and paste this code:
se-t {white-space: normal;}
.gallery a img { border: 0 !important; }
Remove the Blog Title Underline on Hover
On your main blog page, blog titles will be underlined during hover-over with the mouse. Copy and paste this code to remove it:
.se-wpt a, .se-wpt a:active, .se-wpt a:focus, .se-wpt a:link, .se-wpt a:visited, .se-wpt a:hover {
text-decoration: none;
}
Make Font Bold on Hover
Make the font bold instead of underlined when hover-over with the mouse. Copy and paste this code to make that happen:
Note: You need to have a font in Showit that can be bolded for this to work.
.se-wpt blockquote {
margin: 0ps;
padding: 0px;
background: none;
max-width: 700px;
color: rgba(131,132,127,1);
line-height: 1.2;letter-spacing: 0em;
font-size: 50px;
text-align: center;
font-family: Playfair Display Bold;
font-weight: 400;
font-style: normal;
}
.se-wpt-pc a, .se-wpt-pc a:active, .se-wpt-pc a:focus, .se-wpt-pc a:link, .se-wpt-pc a:visited, .se-wpt a:hover {
text-decoration: none;
font-weight: 800;
}
Remove Font Changes on Hover
This code is used to remove font adjustments for inline blog links upon mouse hover. Copy and paste this code:
.se-wpt-pc a, .se-wpt-pc a:active, .se-wpt-pc a:focus, .se-wpt-pc a:link, .se-wpt-pc a:visited, .se-wpt a:hover {
text-decoration: none;
}