Blog CSS Styling - Help!

Support
#1

We’re trying to style (basically everything) on the Blog page for: http://jeremygorham.com/blog/, we’re having trouble with the CSS and finding what exactly to code things.

Here’s a more specific list of things we’re trying to edit:

  • Recent post slider (at the top) - all the font’s and buttons

  • “See all Leadership Posts” separator - change the font and blue

  • Change font of posts & description on blog home page

  • Change styling of the sidebar

  • Change the font and styling of a blog post (i.e. http://jeremygorham.com/ok-not-to-be-ok/)

Thank you so much!

#2

Hi there,

The request is customization which is outside of our support scope and we will not be able to implement the styles for you, but we will do our best to put you on the right track. I will try to give you the correct selectors you can use to add your code inside. All the CSS code can go to X > Launch > Options > CSS or if you have a Child Theme inside the style.css file:

/* Recent Post Slider Date */
.blog .x-post-slider-entry .featured-meta {
    
}

/* Recent Post Slider Text */
.blog .x-post-slider-entry .h-featured span {
    
}

/* Recent Post Slider Button */
.blog .x-post-slider-entry .featured-view {
  
}

/* Recent Post Slider Button */
.blog .x-post-slider-entry .featured-view {
  
}

/* See all Leadership Buttons */
.blog .x-btn-filterable.x-btn {
  
}

/* Blog Homepage Title */
.blog .entry-title a {
  
}

/* Blog Homepage Description */
.blog .entry-content p {
  
}

/* Single Blog Post */
.single .entry-content p {
}

I used the Google Chrome Browser Developer Toolbar to find the correct selectors of the CSS:

We will not be able to implement the code for you and you need to do the changes yourself or you can use the paid services of freelance developers in the X Users Facebook Group.

Thank you.

1 Like
#3

Hello! Fabulous! Thank you so much for your guidance.

We figured out most of the coding but need help with the Post Category Filter in figuring out the Class. We used Developer Tools (which is amazing), but still can’t seem to get it right. Do you see something we don’t?

We tried:
.blog .x-index-filters.cf.selected {
.blog .x-option-set.unstyled {
.blog .x-filterable-index {

#4

Hi there,

Glad that we could be of a help :slight_smile: Here you can find the proper selectors for the Category Filter section:

/* The Box of the filter at the top */
.blog .option-set .x-index-filters {

}

/* Links to Categories */
.blog .option-set .x-index-filters-menu >li >a.selected {
  
}

/* The / separator of the links */
.blog .option-set .x-index-filters-menu>li:after {
  
}

Thank you.

1 Like
#5

You’re awesome! Thank you! Do you happen to know the code for the sidebar? Specifically the blog title, date, hover effect, and size?

Thanks!

#6

Hi There,

You can use these selectors to style the recent posts on the sidebar.

/*sidebar recent post title*/
.x-sidebar .h-recent-posts {

}

/*sidebar recent post title hover*/
.x-sidebar .x-recent-posts a:hover .h-recent-posts {

}

/*sidebar recent post date*/
.x-sidebar .x-recent-posts-date {

} 

/*sidebar recent post date hover*/
.x-sidebar .x-recent-posts a:hover .x-recent-posts-date {

}

Hope it helps,
Cheers!

1 Like
#7

Awesome! Thanks! Do you know how to remove the border of the recent posts? And how to stylize the border hover?

Thanks!

#8

Hello There,

Thanks for updating in!

To remove the border of the recent posts, please use this code:

.x-sidebar .x-recent-posts.vertical a {
    border-color: transparent;
}

.x-sidebar .x-recent-posts.vertical a:hover {
    border-color: red;
}

Hope this helps.

#9

Oh no, that didn’t work!

#10

Hey There,

I did not see that you added the code in the page. Did you removed it already because it is not working? Please put it back again.

By the way, I noticed an invalid css entry. Please remove this line.

Thanks.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.