CSS Codes & Tricks

A lot of customers ask me for random codes to tweak and customize Socrates. I add a lot them to this page as requests come up.

Use Ctrl-F and search for a keyword to find something quickly.

Most of these codes can be added simply by copying and pasting into

Appearance > Customize > Additional CSS

If you click in any box below you’ll see an icon appear which pops a window so you can easily copy the code..

How to underline text links in Post and Page Content.

By default we don’t add text-decoration to our links, but it’s easy to add to Additional CSS using this code. This only affects the post content area.

.blog-post-single, .page-single a {text-decoration:underline}

How to change the Soc Headline Shortcode font

The soc headline shortcode inherits the body font by default. You can change the font style using this code and your desired font.

.soc-headline {font-family: Montserrat;}

How to completely hide the mobile hamburger icon

Add this to custom css

@media only screen and (max-width: 767px) {
body #mobile-navigation {display: none;}
}

How to hide the mobile hamburger icon and show the full menu.

@media only screen and (max-width: 767px) {
body #mobile-navigation {display: none;}
body #navigation-inner, body #navigation-aside-inner { display: block!important;}
}

Part 2 – If you have created and designated a “Mobile” menu you need this code instead.

@media only screen and (max-width: 767px) {
body #mobile-navigation, .menu-primary-menu-container {display: none;}
body #navigation-inner, body #navigation-aside-inner { display: block!important;}
}

How to Unhide the Top Menu in Mobile

@media only screen and ( min-width: 320px ) and ( max-width: 1023px ) {
	body #top-bar-navigation {
		display: inline;}
		}

How to make the entire site “left sidebar”.

I deliberately didn’t add a left sidebar option.. I may in the future, but for now.. it’s literally this easy.

Add this to Additional CSS.

body #content {margin-right: 0;float: right;}
#sidebar.with-border {padding-right: 15px;border-right: 1px #eee solid;border-left:0px;padding-left:0px;}

How to hide the underline on widget titles and adjust padding.

#sidebar .widget-title:after {height:0px}
#footer-widgets .widget-title:after {height:0px}
#sidebar .widget-title .widget-title {margin-bottom: 10px;}
#footer-widgets .widget-title {margin-bottom: 10px;}

If you want to hide underlines on post/page titles goto Appearance > Customize > Other.

Add A Border Box Around The Sidebar Widgets (tweak as needed)

#sidebar .widget {border:1px #000 solid;padding:15px;}

Make Search Box in Navbar Background White

If you use a colored navbar background, but want the search box background a different color, just add this to Additional CSS box in Customizer


#header-search {background-color: #fff;}

How to hide featured image above single post title.

.blog-post-single-thumb {display: none;}

How to hide the “continue reading” button or change text.

You can change the text of this button in Appearance > Customize Other

To hide it add this to Customize > Additional CSS

.post-s1-read-more {display: none;}

If you’re using the Masonry Templates you’d need this code to hide the buttons.

.post-s2-read-more {display: none;}

How to change the post/page inner background.

We don’t recommend changing the inner background of post content because your visitors will always prefer dark text on white background, changing this will only hurt the visitor experience and your potential sales. (there’s a reason why you rarely see it anymore).


.body-general-layout-wrapped #page-inner {background-color: #f4f4f4;}

How to add an icon shortcode to a button

We use Font Awesome 4.5 and any icon will work in our icon shortcode. You can also nest the icon shortcode inside a button shortcode. So for example if you wanted an External Link icon inside a ghost button you could use this code.

[soc_button color='ghost' size='huge' href='#' target='new' align='left' rel=''][icon type='fa fa-external-link'][/icon] Button Link[/soc_button]

How to add clickable phone and mail icons to a widget or post.

This will create a 3x clickable font awesome icon if pasted in a custom html widget or text mode of a post. I added a div class so you can use Additional CSS if you want to improve the styling. If you want to add this to a header widget and have it display in mobile or tablets see code above.

Here’s another tutorial on adding to Top Bar Menu.

<div class="clicktocall">
<a href="tel:1-800-555-1212">[icon type='fa fa-phone fa-3x'] 1 800-555-1212[/icon]</a>
</div>

<div class="clicktoemail">
<a href="mailto:info@example.com">[icon type='fa fa-envelope fa-3x'] Email[/icon]</a>
</div>

How to make the mobile menu kick in later.

This code will change the breakpoint to 748px

 
@media only screen and ( min-width: 768px ) and ( max-width: 1023px ) {
	body .wrapper,
	body.body-general-layout-wrapped #page-inner {max-width: 748px;	}	
	body #top-bar-navigation {display: inline;}
	body #navigation-inner,
	body #navigation-aside-inner {
		display: inline !important;	}
	body #mobile-navigation {	display: none;}
}

How to change the footer menu and copyright text font size and color.

 

#footer-navigation .menu > li > a {
    color: #000;
    font-size: 12px;
    text-transform: uppercase;
}
#footer-copyright {
font-size:12px;
color: #000;
}

How to add a top margin to the logo or site title. Useful in Speaker Theme

 
.site-title {margin-top:5px}

How to add a gradient background color to the sections.

Add a section shortcode
Remove the bgcolor=”f4f4f4″ from section shortcode
Wrap the section in a DIV ID using Element shortcode
Add the gradient background css for that DIV ID to Additional CSS

Example

 
[soc_element tag="div" id="gradient-bg"][soc_full_section textcolor="#444" margin_top="0" margin_bottom="0" margin_left="0" margin_right="0" padding_top="25" padding_bottom="25" padding_left="0" padding_right="0"]Section content[/soc_full_section][/soc_element]

CSS

 
#gradient-bg {
background-color: rgb(226, 226, 240) !important;
background-image: linear-gradient(270deg, rgb(190, 217, 245) 0%, rgb(237, 237, 247) 50%, rgba(237, 237, 247, 0) 100%) !important;
}

How to fix link color issues in footer with Social and Tag Clouds (will fix in next update)

 

#footer-widgets .social-widget a {
    color: #222;
}
#footer-widgets .widget .tagcloud a {
    color: #fff;
}

How to create background opacity on page container

Add this code and adjust the 0.5 value to change opacity.

 

.body-general-layout-wrapped #page-inner {
	background: rgba(255, 255, 255, 0.5);}

How To Change Default Button Colors

If you love our buttons, but would like to slightly adjust any color to match your theme colors you’d do it with Additional CSS. Find the button code from style.css and replace hexcode.

Button

Here’s the default blue code. Right click it and click “Inspect” in Chrome. You can see the background, border, text and hover colors listed. Below you’ll see the code from our style.css file.

Paste in Additional CSS and change the color codes.

 
.soc_button.soc_blue, .soc_button.soc_blue:visited {background: #428bca !important;border: 1px solid #2e6da4 !important;color: #FFF !important;}
.soc_button.soc_blue:hover {background: #45749b !important;}

How to Add A Inner Shadow To Socrates Buttons

 
.soc_button {box-shadow: 0 2px 4px 0 rgba(0,0,0,.2), inset 0 -4px 0 rgba(0,0,0,.2);}

How to Hide Featured Images On Index or Blog Page

We have an option to disable on single posts in Customize > Other, but not an option for the index or blog pages.

However, a quick fix is to add this to custom css.

 
.post-s1-thumb {display: none;}

How to Center Images on mobile in columns

Sometimes when you add an image to a column you want it left aligned on desktop, but centered on mobile. If you run into that issue drop this code in custom css to center images, but make sure image has “no alignment” by default.

 
@media only screen and (max-width: 768px) {
    img {
        display: block;
        margin: 0 auto;
    }
}

How to change Top Menu Bar link design

Here’s the CSS that controls the top menu bar. Paste this in Additional CSS and adjust as needed.


#top-bar-navigation .menu>li>a {
    color: #fff;
    opacity: .8;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
}
// Top bar Submenu

#top-bar-navigation .menu ul li a {
    color: #fff;
    opacity: 0.5;
    font-size: 11px;
}

How to Add Border to top of Primary navbar when using light header background color

#navigation {
    border-top: 1px #e4e5e7 solid;
}

How to add Social Icons to header widget area.

Adjust this code with your links, and drag custom html widget to Header widget and paste this code. You can grab other social icon code here. See this tutorial as well.


<a rel="nofollow" href="https://twitter.com/" ><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i> </a> <a rel="nofollow" href="https://www.facebook.com/"> <i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i> </a> <a rel="nofollow" href="https://www.pinterest.com/"><i class="fa fa-pinterest-square fa-2x" aria-hidden="true"></i></a>

How to center the footer copyright and menu in Socrates (Speaker has an option for this)

Add this to additional CSS

#footer-copyright {float: none;text-align: center; }
#footer-navigation {float: none;text-align: center;margin-top:15px; }

Here is the default copyright and affiliate link code if you need it again

Copyright $copy$ $current_year$ | Powered by <a target="blank" href="https://www.socratestheme.com/" rel="nofollow">Socrates</a>

How to make sidebars display ABOVE content in mobile view. Effective if you’re using Accordion Menu in sidebar.

@media (max-width: 780px) {
.wrapper {display: flex;flex-direction: column;}
.wrapper .col-8 {order: 2;}
.wrapper #sidebar {order: 1;}
}

Change 3 Column Widgets into 2 small, 1 wide widths.

Adjust percentages as needed but leave 6% for margins. This will make last column wide, to make first column wide change (3) to (1)

#footer-widgets .widget.col-4:nth-child(3) {width:53%;} 
#footer-widgets .widget.col-4 {width: 20%;}

How to remove UPPERCASE settings on Socrates Menus & Sub Menus

#top-bar-navigation .menu > li > a, #top-bar-navigation .menu ul li a, #navigation .menu > li > a, #navigation .menu ul li > a, #navigation-aside .menu > li > a, #navigation-aside .menu ul li > a, #mobile-navigation-menu a, #footer-copyright, #footer-navigation .menu > li > a {
    text-transform: none;
}

See more “Text-Transform” CSS Options Here.

How to change Top Bar Menu Font Size

#top-bar-navigation .menu > li > a {
    font-size: 11px;
}

How to create a Hover Background on Tabs with border bottom, as well as Active Tab highlight?

#navigation { border-bottom:3px solid #53af22;}
#navigation-inner .menu > li > a {line-height: 35px;padding: 0 17px;}
#navigation ul a:hover, #navigation li.current-menu-item { background: #53af22 !important;}
#navigation .menu > li {margin-right: 0px;padding-right: 0px}

How Do Center Primary Navigation?

#navigation-inner {
text-align:center!important;
float:none!;
}

How To Hide Dates In Comments

.comment-meta-date {display:none;}

How To Hide Category on Prev/Next Post Thumbnails

.post-s2-cats {display:none;}

How To Change The Tag Cloud Widget Button Text Color

By default the button text is white assuming most customers are using dark buttons. You can change the button text color using this code

 .widget .tagcloud a {
  color: #fff !important;}