Customizations Using CSS

Please note: We are unable to provide support for custom CSS or any theme customizations - understand that this is a DIY endeavour.

Do not edit the files located under Appearance > Editor; any changes made here will be overwritten during the next theme update.

We know it can seem intimidating at first, but getting a good grasp of CSS is one of the most powerful skills you can have when creating or modifying your own site. Our resource libraryhas some great resources that can help you get started making some CSS changes of your own, like this one, this one, and this one.

This article is not a full-blown tutorial on CSS (Google is your friend for that), but will provide you with a few snippets that will get you started.

How to make changes to CSS

We recommend that all changes to CSS be made using the Custom CSS box located under Appearance > Customize. This allows all changes to be saved during theme updates.

Screenshot-49.png

Other options include using the Jetpack plugin's custom CSS editor, or other available CSS plugins.

Constrain Size of Logo

.header-logo {     max-width: 600px;     margin: 0 auto; }

Adjust Blog Post Width

.single .entry-content, .single .parker-featured-img {     max-width: 700px; /*edit this number with desired width*/     margin: 0px auto; }

Adjust Link Style

.entry-content p a, .textwidget p a {     border-bottom: none;     color: #111;     font-weight: bold; }

Remove Feature Image from Post

.parker-featured-img {     display: none; }

Fix Post Titles in Archives

@media (min-width: 468px) {

    .block-article .entry-header {         height: 110px;     } }

Reduce Spacing on Secondary Menu

.secondary-nav a {

   padding-left: 1.5em;   padding-right: 1.5em; }

Change Size of White Boxes on Featured Slider

.home-gallery-cell .entry-header { width: 80%; max-width: 430px; }

Change Styling of Links

.entry-content p a, .textwidget p a { border-bottom: none; color: #111; font-weight: bold; }

Change Spacing in Lines of Body Text

p { line-height: 1.5em; }

Add Gravatar to Comments

.comment .avatar { display: inline; }

Center Feature Images

.parker-featured-img { text-align: center; }

Change Opacity of Landing Image Block Overlays

.image-block h3 {

   background: rgba(255, 255, 255, 0.5);

}

Note: You can edit the last number to change the opacity on a scale from 0 (transparent) to 1 (fully opaque).

Make uploaded logo image fit header space

.header-logo img {     max-height: 100%;     width: 100%; } .site-branding {     margin: 0;     line-height: 0; }

Please remember, we are unable to provide support for custom CSS changes or theme customizations - understand that this is a DIY endeavor.

ParkerStation Seven