Custom Twenty Fifteen CSS

2016-03-03_15-08-16 Final Blog Logo

Welcome to my Twenty Fifteen Theme Modified Cascading Style Sheet [CSS]. Read http://wp.me/PEmnE-Bt to see how CSS works. Explore this style sheet and copy, if you want. If you do, credit Cycling Experiences… and jalexartis@cyclingexperiences.com. These articles explain some of the modifications I have made.


#follow_button_widget-2 {
/* place the follow Button exactly where I want it */
left: 158px;
margin-top: 5px;
position: absolute;
top: 33px;
}

header#masthead.site-header {
/* set spacing around blog title */
margin-bottom: 20px;
margin-top: 25px;
}

h1.site-title, p.site-title {
/*set the masthead font size I want for posts and pages */
font-size: 33px;
}

.main-navigation {
/* set space after menus */
margin-bottom: 10px;
}

div.menu-social-links-container {
/* center 5 icons */
margin-left: 20px;
}

nav#social-navigation.social-navigation {
/* set space after icons */
margin-bottom: 25px;
}

.wp-caption-text {
/* reduce CE logo caption text size, italicize, bold & center it */
font-size: 11px !important;
font-style: italic;
font-weight: bold;
text-align: center;
}

aside#text-395027716.widget.widget_text {
/* create space beneath blog purpose */
margin-bottom: 20px;
}

.widget {
/* set tighter widget spacing on sidebar */
line-height: 1;
margin-bottom: 0;
}

h2.widget-title {
/* Position h2 titles */
font-size: 12px;
margin-top: 7px;
margin-bottom: 5px;
text-align: center;
}

.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
/* Change sidebar text of posted articles titles */
font-size: 10px;
font-weight: normal;
line-height: 1.2;
margin: 5px 0 3px;
text-align: center;
}

.widget_jetpack_display_posts_widget .jetpack-display-remote-posts img {
/* set the space following sidebar featured images for post to 5px */
margin-bottom: 5px;
}

.widget_blog-stats {
/* center blog stats */
text-align: center;
}

aside#gravatar-2.widget.widget_gravatar {
/* create space above gravatar*/
margin-top: 10px;
}

.widget_calendar caption {
/* set position & style for calendar month */
font-size: 12px;
margin: 5px 0 0;
text-align: center;
text-transform: capitalize;
}

.widget_calendar td, .widget_calendar th {
/* make digits smaller and shorten calendar rows */
font-size: 10px;
line-height: 1.175;
}

.widget_calendar table {
/* set space after calandar & distance from month to calendar-top */
line-height: 1.5;
margin-bottom: 10px;
}

.wf-active .widget-title {
/* set font size for legal and disclaimer title */
font-size: 102px;
}

.textwidget > :last-child {
/* set text style and line height for legal and disclaimer content*/
font-size: 10px;
line-height: 1;
}

.site-main {
/* remove site-top padding so .hentry class controls article spacing */
padding-top: 0;
/* Set spacing after "OLDER POST" at bottom of page */
padding-bottom: 20px;
margin-left: 20px;
}

a.post-thumbnail {
/* reduce spacing after the featured image to match spacing after post title */
margin-bottom: 28px;
}

.hentry {
/* reduce space between articles and reduce whitespace above post titles */
margin-top: 20px !important;
padding-top: 4%;
}

.entry-title {
/* set font size for all posts; center the title; and reduce space after it */
font-size: 16px !important;
margin-top: -14px !important;
margin-bottom: 14px !important;
text-align: center;
}

.site .tiled-gallery {
/* reduce spacing after the after galleries and before post content */
margin-bottom: 14px;
}

.entry-content {
/* reduce space left, right, and after post */
padding-bottom: 15px !important;
padding-left: 35px;
padding-right: 40px;
margin-left: 17px;
}

.entry-footer {
/* reduce space around entry footer; use smaller font and center footer */
font-size: 10px;
padding: 10px;
text-align: center;
}

p {
/* change the look of paragraphs--tighter */
font-size: 90%;
line-height: 1.4;
margin-bottom: 10px;
margin-right: 10px;
text-align: justify;
}

blockquote {
/* change the look of block quotes */
font-size: 15px;
line-height: 1.3;
margin: 0 25px 24px;
vertical-align: -40em;
}

.page-title, .comments-title, .comment-reply-title, .post-navigation, .post-title {
/* Use smaller fonts for previous and next navigation */
font-size: 15px;
}

.post-navigation a {
/* reduce white space above and below previous and next navigation */
padding-bottom: 30px;
padding-top: 10px;
}

.author-info {
/* reduce space above and below author info */
padding-bottom: 20px;
padding-top: 20px;
}

.comments-area {
/* reduce space above and below comment form box */
margin-top: 40px;
padding-bottom: 40px;
padding-top: 20px;
}

.comments-area #respond form {
/* reduce spacing between the comment prompt and the comment form box */
margin-top: 5px;
}

div#infinite-handle {
/* reduce space to older posts button */
margin-top: 20px;
}

div#infinite-handle span {
/* reduce space above and below and left and right of the words older posts */
padding: 5px 10px;
}

.site-footer {
/* center text */
text-align: center;
}

.site-info {
/* reduce space above and below site footer */
padding-bottom: 10px;
padding-top: 10px;
}

.site .tiled-gallery {
/* reduce spacing after the after galleries and before post content */
margin-bottom: 14px;
}

div.slideshow-window {
/* changed slideshow background to white and removed border */
background-color: rgba(255,255,255,1);
border: 0;
}

.hentry .fb_iframe_widget, .hentry .googlemaps, .hentry .PDS_Poll, .site .hentry .presentation-wrapper, .site .hentry .jetpack-recipe, .site .hentry .slideshow-window, .site .hentry .video-player {
/* @media screen and (min-width:68.75em) ~ same bottom-margin for all media */
margin-bottom: 14px;
}

.widget {
width: 380px;
padding-right: 60px;
padding-left: 35px;
}

23 thoughts on “Custom Twenty Fifteen CSS”

  1. How did you reduce the line spacing in your “legal” and “disclaimer”?? I want to do exactly what your have in your sidebar but in my footer. No matter what I change I have no luck. I have made a copy of the footer.php in my child theme and have hacked it along with my style sheet to no avail. Thanks ahead for any ideas??

    Like

    1. Hello James,

      Here you are. I purposely placed REMs to understand what modified CSS does. In this case line-height. I use Chrome Inspect Element to find the element that I want to change. I hope this helps. –jalex

      .textwidget > :last-child {
      /* set text style and line height for legal & disclaimer content*/
      font-size: 10px;
      line-height: 1;
      }

      Like

  2. Hi great site Thank You for sharing your custom changes have learnt alot 🙂

    I am just having problems changing my .site-description colour I have tried but failing as bit of a newbie to WP (day four) hopefully you can help me out..

    Liked by 1 person

    1. Hello Simon,

      Happy that my modified CSS has helped you. The best I can offer you is to use Google Chrome’s Inspect Element to locate the code that you need to change for color.

      The best!

      James

      Like

      1. Hi James
        Thank you for the advice I have just discovered Inspect Element which is an invaluable tool.. still coming back to your site love the way you have modified twenty fifteen

        Happy cycling

        Simon

        Liked by 1 person

        1. You are welcome Simon.

          It is practically impossible to modify CSS without Inspect Element. I make some changes [using really large numbers] therein to know that I have to correct element.

          I am happy you like my site and find it useful to achieve what you want for your site. Please keep coming and send others.

          James

          Like

  3. Hi Jalexartis,
    Thank you for a wonderful tutorial….may I take the liberty to request a few “how to’s”?
    1. I want this page to be in line with the left side-bar, in other words to “get rid” of the 10 pixels or so space on the top..
    2. I would also like to eliminate some “white space” between Post title and the beginning of the post paragraph?
    I look forward to some assistance..
    Best Regards
    Theo

    Liked by 1 person

    1. Theo, good that you have achieved what you want using CSS.

      If you are not using Google Chrome Inspect Element, I recommend it to help you find the element to be changed.

      From there, it is a matter of trial, as you have done with my code, to determine the changes that give you the appearance you want.

      Good that my shared CSS helped.

      The best…

      James

      Like

    2. Good that you have achieved what you want using CSS.

      If you are not using Google Chrome Inspect Element, I recommend it to help you find the element to be changed.

      From there, it is a matter of trial, as you have done with my code, to determine the changes that give you the appearance you want.

      Good that my shared CSS helped.

      The best…

      James

      Like

  4. Hi jalexartis, great to find this site. Titles in my blog posts sit neatly right at the top of the entry box leaving no space and just how I want it. I’d like to achieve the same with my individual menu pages on the site too. The titles on these pages start off from slightly lower down leaving a fair bit of white space before the title. How can I fix this?

    Liked by 1 person

    1. Hello James,

      The best I can offer you is to use your browser’s Inspect Element to find the element that needs to change.

      More likely it will me margin-top or padding-top. I use layout for the element to enter a number and see the text move. Then, I know I have to element that I want to modify.

      Your menu pages are simply pages. So, I think you are looking to control page layout. Finding the element can take time. I have spent hours doing so. Sometimes I search and get helpful information for the Internet, e.g., WordPress.org.

      The best. Please let me know when you achieve what you want.

      The best.

      James

      Like

    1. Hello Aang,

      You will have to use the browser Inspect Element to determine the element that has to be adjusted. I recommend using Google Chrome Browser to make these adjustments.

      Although my Twenty Fifteen CSS is still available, as you see, I have move on to the Twenty Sixteen Theme. I have CSS for it as well.

      The best…

      James

      Like

Your comments please...

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s