Simple CSS

For plug and play solutions in Design > Custom CSS.



Change your horizontal lines

In this code, you can change your horizontal ruler (hr) options. In purple is the line thickness, in red is the line style that can be dotted or dashed, and in blue is the line color in hex code. Play around and see what you get! Margin set to 0 deletes most of the extra space around the line. Read more here.

.sqs-block hr {
border-top: 1px solid #ffffff;
border-bottom: none;
background-color: transparent;
margin: 0; }

Give your site a border

In purple is the border thickness and in blue is the line color in hex code.

body {margin: 7px !important; background-color: #ffffff;}


Delete your header

Don't need header space above the body section? This fixes that.

#page-body-header { display: none; }

Change your carousel summary titles

Here, you'll see the code we used on this website. In purple is the font family that you can change to any Google font you have installed on your website. In blue is the font color, and in red is the font size.

.sqs-gallery-design-carousel .summary-title a {
font-family: balboa-plus-inline;
font-size: 20px;
color: #000000; }

Give your forms some personality

In this code, you can change the look of your forms. In purple is the line thickness, in red is the line style that can also be dotted or dashed, and in blue is the line color in hex code. Below is what is used on our site!

.form-wrapper .field-list .field .field-element{
border: none;
border-bottom: 5px solid;
border-color: #a2c4c9;
background: #ffffff; }

Name *

Change newsletter block's "Subscribe" font

With this code, you have the ability to change the font of "subscribe" in the newsletter block. In purple, you can change the font family. In blue, you can change the color and red changes the font size. Read more here.

.newsletter-block .newsletter-form-header-title {
font-family: Europa;
margin: 0 0 0px 0;
color: #CB5C4D;
font-size: 35px;
text-align: center; }

Change the line menu colors

Here, you can change the colors of the 3 lines in the expandable menu that some templates have. Just change the colors in red to whatever you want!

 .top-bar {
background-color: #CB5C4D !important; }

 .middle-bar {
background-color: #a2c4c9 !important; }

 .bottom-bar {
background-color: #CB5C4D !important; }

Delete padding around images

Think the extra space around your images feels clunky? Use this code.

.sqs-block.image-block { padding: 0; }

Stylize your folder dropdown

In purple is the background color of the folder dropdown.

.nav-folder-item, .footernav-folder-item { background-color: #ffffff
In gold is the border width in pixels. Red is the style of the border and blue is the border color.
.nav-folder-list:before { border-bottom: 8px solid #ffffff; }
In green are the link colors that will show in the folder.
.nav-folder-link, .footernav-folder-link { color: #ffffff; }

Check out the nav links at the top to see a working example of this.

Change email placeholder

Here, you can change the email placeholder in every instance an email can be entered. The words in red are the only things you need to change!

This code must be copied and pasted in the header/footer injection section to work.

<script src="//"></script>

<script> $(document).ready(function () { $('.email').find('input').attr('placeholder', 'write what you want here'); }); </script>

Hide close function on announcement bar

Don't want visitors to close your announcement bar? Throw this in CSS and it'll hide the 'x' button.

.sqs-announcement-bar-close {display: none;}

Unnecessary Details is a community of creatives who bring the unnecessary details from their careers and professions to light. We believe the value in the unseen happenings of creative jobs often goes unnoticed and can cheapen our careers.

We aim to change that.


Something not working? Let me know.