Blog: Starting a new design for my blog – Part 3 (More Posts)
In this blog my focus will be on examining how to put together and style a single.php template. Now there’s no absolute correct way to do this, but what I’ll be doing is outlining what works for me when I work on projects like this.
The first thing is I pay particular attention to making a new Sass partial for a specific purpose. For instance, “single.scss” where styles for the single.php should go.
Using that as an example, I’ll import the style in the root Sass file.
@import "_assets/sass/single.scss";Before I go on, I want to do one other thing, which is to install a font and a main font variable to store it. One of my favourite fronts is Quicksand which is available from Google and I can add it to the body element in main.scss.
font-family: $font-main;I can now change this font stack in the config.scss file by defining a variable of the same name in the config file and giving it the string for the Quicksand Font.
$font-main: "Quicksand";And below is a link to the font as defined in header.php. With the font specified in the body selector in Sass, it will change the font everywhere text is used in the site unless there’s another font used elsewhere.
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Merriweather|Odibee+Sans|Quicksand&display=swap" rel="stylesheet">Let’s turn back to single.php. I’m working with the containing section element and all its child elements. The loop is inside the article element below. So that’s where the styling of the single post page will go.
<section class="single_php">
<article class="single">
</article>
</section>In the admin area, I made a new blog post that uses all of the formatting options offered by the classic WordPress editor. Each of the characters, lines, and features uses elements that can be selected using CSS as long as it is a child of the single_php class. Some of these selectors speak for themselves. For example, making a selection of text bold in the editor wraps the text in the <strong> element, <em> for italics, etc.
strong, b {
color: red;
}
em, i {
color: bisque;
}I put some top margins on the header and paragraph elements to provide some spacing on those.
p {
line-height: 2;
margin-top: 5px;
}This whole project is designed to be a way for me to discover how to make the best of styling code snippets in WordPress. What selectors do I need to use to select and manipulate their styling?
<section class="single_php">
<article class="single">
. . .
</article>
</section>The selectors for posts go in the .single class selector. Some of more basic ones are included below and they can all be styled as you desire.
hr { ... }
p { ... }
p {
a {
...
}
}
strong, b { ... }
em, i { ... }
h2, h3, h4, h5, h6 { ... }
ul,
ol {
...
}In order to centralise the section element, I’ve made it CSS Grid Container element. This means that although the class attribute is different it retains the CSS properties which allows me to use a template columns value that centalises the element.
section.single_php {
grid-template-columns: 1fr;
...
}With the simple formatting selectors in place, I can now focus on the wrapper elements given to us by the plugin. The snippets are handed using the Syntax Highlighter plugin with prism.js. And initially when I look at the page the wrapper elements are behaving the way I expected them to in that they extend beyond their containing element on smaller screens.
.hcb_wrap {
.hcb-clipboard {
}
pre {
width: 100%;
code {
width: 100%;
}
}
}This happens because <pre> elements use monospace typefaces that extend beyond their containing elements when there are no hard coded line breaks. They present on the screen the way they are typed in the markup. What I need is to maintain the monospace nature of the character set but also find a way to make sure that line breaks take place when they need to. I tried to use the wrap properties.
The standard wrap properties had no effect on how the browser handles white space. There’s a CSS property designed to do just that.
white-space: pre-wrap;So I added it to the <pre> element.
pre {
border: solid red 2px;
background: none;
width: 100%;
white-space: pre-wrap;
line-height: 1.6;
} So we need to use the whitespace property on the child element (<code>) and pre tags which changes the browser behaviour.
pre {
...
code {
width: 100%;
word-break: break-all;
background: none;
white-space: pre-wrap;
}
}Each time a code snippet is generated using the “Code Block” icon, it also brings with it the language text tag on the top right-hand side. This can be styled by using the “::before” CSS pseudo-class. You can apply all sorts of styles to it, including its position, so you can see the copy text icon, its background colour, and size.
pre::before {
right: 26px;
font-size: 18pt;
color: purple;
border-bottom: azure solid 1px;
box-shadow: yellowgreen 1px 3px;
}When you click on the icon, you get a little tooltip that tells you the corresponding text has been copied. This selector allows you to style how that looks so you can make it stand out better according to your design.
.hcb-clipboard {
font-weight: bold;
color: red;
}The next thing to do is to style the inserted images into your blog posts via the “add media” button. The containing element for this is actually .wp-caption, which wraps the image and the caption text inside it.
.wp-caption {
img {
}
p {
}
}The alignment of the images is actually controlled by the containing element using 3 classes.
- alignleft
- aligncenter
- alignright
I used the Sass parent selector to style these classes within the .wp-caption element. So every time there’s a new image element selected in the WordPress editor their alignment is controlled in the correct way using these classes
.wp-caption {
display: block;
margin: 0 auto;
&.aligncenter {
text-align: center;
margin: 0 auto;
}
&.alignleft {
text-align: left;
margin: 0 0 0 0;
}
&.alignright {
text-align: right;
margin: 0px 0 0 70%;
}
}I put a class selector on the opening <h2> element to allow me to center and underline the post title in single.php
<h2 class="post_headline"> <p>Single.php</p> </h2>And the CSS.
h2.post_headline {
text-align: center;
border-bottom: solid black 2px;
}Conclusion
It does seem like now I’ve found a big solution to the problem of how code snippets render if the browser, using the Code Syntax Highlighter plugin. There’s one key CSS property that helps out with this although you do need to use it on the code element within the <pre> element for it to work.
The element does have majority support in all the major browsers so should work for most users.
Next, it’s time to choose, use and examine the secondary section for WordPress widget area the theme supports them.