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 library has some great resources that can help you get started making some CSS changes of your own, like this onethis 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 > Additional CSS. This allows all changes to be saved during theme updates.

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

/*Remove accent lines on site title*/
.paloma-accent {  display: none; } 

/*Change sidebar image to rectangle*/
.stnsvn-about-widget img {
    border-radius: 0;
}

/*Adjust link style*/
.entry-content a, .textwidget a {  color: #333;  font-weight: normal; }

/*Make uploaded logo larger*/
.header-logo img {  max-height: 200px; } 

/*Make Instagram prefooter stretch full width (when not using Newsletter prefooter for example)*/
@media screen and (min-width:768px){   
  #prefooter-ig {       
    width: 100%;   
  }    
  #prefooter .instagram-pics li {       
    width: calc(99.99% / 6);   
  } 
}

Display avatar images on comments
.comment .avatar {     
  display: inline-block; 
}

/*Force footer to bottom on short pages*/
body {
  position: relative;
}

.site-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

/*Reduce padding on mobile menu to fit without scrolling*/
@media screen and (max-width: 960px){
  .primary-nav li a, .primary-nav .sub-menu li a {
      padding: 0.1em 1em;
  }
}

/*Add border to comment form fields*/
#commentform textarea, 
#commentform input:not(.submit) {
  border: 1px solid #222;
}

/*Hide category on home page slider*/
.landing-latest-posts .entry-meta {
  display: none;
}

/*Hide category on blog page slider*/
.blog .main-gallery .entry-meta {
  display: none;
}

/*Adjust spacing of nav on smaller screens*/
@media screen and (max-width: 1200px) {
  .primary-nav li {
    margin-right: 0.5em;
    margin-left: 0.5em;
  }
}

Fix header size on mobile
/*Fix header size on mobile*/
@media screen and (max-width: 767px) {
  .home .site-header {
    height: auto;
  }
}

Fix font sizes on lists
#primary ul,
#primary ol {
  font-size: 0.85em;
}

Change hover background color of category buttons
/*Change hover background color of category buttons*/
#secondary li.cat-item a:hover, #secondary li.cat-item a:focus {
  background-color: #222222;
}

Change color of light button shortcode (necessary when using button color control in customizer)
/*Change light button background color*/
.light-button a {
  background: #34483d;
}

/*Change light button text color*/
.light-button a {
  color: #222;
}

Change color of squiggle on certain sections of home page

Just paste the following snippet into the Additional CSS box under Appearance > Customize:

/*Change squiggle color on 2nd section of home page*/

.home .landing-section:nth-of-type(2) path {
    stroke: #fff;
}

In the snippet above, the part that says "nth-of-type(2)", change the number 2 to whatever number section you want to target. For example in the Paloma theme demo, the second section would be the one titled "What We Do".

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

PalomaStation Seven