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.

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

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

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

/*Remove line under grid layout posts*/
.block-article article {     
  border: none; 
}

/*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; 
}

/*Fix category link on single posts*/
.pinterest-share img {
    top: -1000px;
}

/*Adjust height of sliders*/
.landing-slider .home-gallery-img, .full-slide .home-gallery-img {
  height: 600px;
}

/*Adjust height of sliders on mobile devices*/
@media screen and (max-width: 767px) {
 .landing-slider .home-gallery-img, .full-slide .home-gallery-img {
    height: 350px;
  }
}

/*Constrain width of slider on blog*/
.blog .main-gallery.flickity-enabled {
  margin: 0 auto;
  max-width: 1205px;
}

/*Remove page titles*/
.page-template-default .entry-title {
    display: none;
}

/*Adjust height of featured images on pages*/
.page-featured-img {
    height: 500px;
}

/*Adjust height of page featured images on iPad*/
@media screen and (max-width: 960px) {
.page-featured-img {
  height: 360px;
  }
}

/*Adjust height of page featured images on iPad Mini*/
@media screen and (max-width: 767px) {
.page-featured-img {
  height: 280px;
  }
}

/*Adjust height of page featured images on Mobile*/
@media screen and (max-width: 467px) {
.page-featured-img {
  height: 170px;
  }
}

/*Change background transparency of white boxes on sliders*/
.main-gallery .entry-header {
    background: rgba(255,255,255,0.6);
}

/*Customize buttons*/
.large-button a {
    background: #555;
    color: #fff;
    padding: 0.9em 2.5em;
}

/*Update link style on landing page*/
.landing-inner p a {
    color: #bf0157;
    font-weight: bold;
}

/*Remove slider and CTA boxes from blog pages other than the first*/
.blog.paged .main-gallery,
.blog.paged #cta-boxes {
  display: none;
}

/*Adjust size of white boxes on CTA overlays*/
.image-block h3 {
  max-width: 210px;
}

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

/*Center copyright text (when not using footer menu)*/
.site-info {
  text-align: center;
}
.site-copyright {
  float: none;
}

/*Remove white boxes from home page slider*/
.page-template-page-landing .main-gallery .entry-header {
    display: none;
}

/*Make full width posts as wide as rest of layout*/
.analogue-featured, .analogue-posts, .row-article {
   max-width: 100%;
}

/*Adjust max width of pages*/
.page .site-content {
    max-width: 1000px;
}

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

AnalogueStation Seven