Changing the presentation of posts

Hi Phil!

It is great you have created a child theme for your customizations!

What you are talking about is changing the style of your content and the styling language is called CSS or Cascading Style Sheets.

You created a styles.css file when you created your child theme. This is where you put your styling (CSS code) so it effects all posts globally.

The code you created has both HTML and CSS. We are going to just use the new CSS you created and use the existing HTML code.

But first you need to find out the CSS class for the div for the post. To do that you use Firebug in Firefox or Chrome. Or you could post your url and I’ll find the div element for the post for you.

Here are some instructions for using Firebug:

CSS basics
This is for people who are pretty new to CSS and have never used or heard the word Firebug. It is not theme-related but deals with CSS+Firebug usage, which is essential for easy modification of any styles.

Change styling
You look at your page and say to yourself, “I would like to restyle that element right there on the my page”. But how do you know what the CSS class or id you need to specify in your custom.css? Without tools this would be hard – thankfully both Firefox and Chrome makes it easier.

Enter Firebug
This addon that exist both for Firefox and for Chrome (as a lite version) will save you a lot of time. I use it my development all the time – it’s incredibly useful.

* Download for Firefox
* Download for Google Chrome

Installed it? Good. Now, go to your website and right click on any element you want. For example, let’s say you want to recolor the dropcap shortcode text color, that you’ve just inserted on your page. To find out what class or ID this element uses, right click on it and select “Inspect Element with Firebug”. This will open up a window at the bottom. To the left side you should see the HTML. On the right, the CSS.

Try hovering over the HTML-section for the button. You will see that the button will be highlighted so that you can easily see what element you are viewing. The HTML would look something like this: <span class=”dropcap”>L</span>

The CSS should appear on the right side in the Firebug window (If it doesn’t, click on the <span> part of the code, and it will appear). You should see something like this:

.dropcap{color: #444444;display: block;float: left;- etc -}

And there we go! You’ve found the CSS class you are looking for, and all the CSS styling that is currently used for this element.

There are many good Firebug introduction videos out there on YouTube. Here is one short and simple one I found useful: View Video

As shown here, Firebug also allows you to preview styling changes directly in your browser window. It’s great when you want to see how something looks before adding it. It can also be used to test to remove HTML or CSS values, and many other things.

Adding CSS to your child theme styles.css:

Go to Appearance->Editor

There you will see the files in your child theme including the styles.css file where you want to add your CSS code.

Thanks to Firebug, we now know that our dropcap element is called .dropcap. We want to change the text color to red, so all we need to do is to add this to our custom.css file:
.dropcap { color: red; }

Save it, and your dropcap text should now be red!
This method can be used to restyle any element on your website. It is also useful to use for troubleshooting, to see what CSS styling you may have added that breaks the page and so on.

In your case you may find by right clicking on a post that the div for a post is has been given the CSS class post-content. Then your CSS you would add to the styles.css file would look like this:

.post-content {
   width: auto;
   float: left;
   padding: 0px 10px;
   border-radius: 5px;
   border: 1px solid #00bfff;
   text-align:justify;
   background-color: #e1e8e2;
}

Cheers! Stacy

Hi Phil, you’re on the right track here. By moving those styles out of the post itself and into the theme, you make it more robust and easier for your other contributors to use.

The best solution is not to apply those styles directly in single.php, but to use a CSS class to apply them automatically.

Looking at the output of a Daisychain site, it looks like the entry-content class neatly wraps all the post content on the single page. So if you target that class, then the styles should get applied to the right place.

A child theme is a great way to do this and you’ve got one set up already – yay!

So you can add the styles you want into the style.css file of your child theme.

(You’re right that normally you’d want to copy files from the parent theme into the child theme in order to edit them and over-ride parent theme functionality, but with the CSS things work a little differently. Make sure your child theme’s style.css file has an “@import” line in it… this automatically brings in all the styles from the parent theme & you just add to them here. If you haven’t already, read the Codex page about child themes: https://codex.www.ads-software.com/Child_Themes )

Below the @import, you’ll need to add something like

.single .entry-content {
  width: auto;
  float: left;
  padding: 0px 10px;
  border-radius: 5px;
  border: 1px solid #00bfff;
  text-align: justify;
  background-color: #e1e8e2;
}

The addition of “.single” to the selector is so that this block of styles only gets applied to entry-content blocks on single post pages and not anywhere else on the site.

Hi Stacy & Jon,
thank-you both for your detailed and informative replies. I understand much more now and have now discovered the ‘Inspect Element’ feature in Chrome….thanks Stacy.
The .post-content mod had no effect on the display.

The.single .entry-content has worked, but not quite as I want it to.

Have a look at the site, it’s not finished yet, and don’t be put-off by the French. https://coc.capmedia.fr.
Go into Archives from the main menu, select ‘les nouvelles du club and then choose ‘Les echos’. The red border line is the line created by the new mod of .single .entry-content (I changed the color to red for clarity). Notice the uneven width of the block within the red, and that it wraps around the social media icons and the Previous/Next post arrows. This post was created with no additional html content.

Now look in Archives/Les match des Seniors and select say Seilh vs COC 20/04/2014. Now you can also see a blue border line. This is the line created by using html directly with the content of the post. The border line is centralised on the page and it only wraps the content,and not the social media icons or the Previous/next arrows.

It is the blue line that I am striving to set automatically.

Any further help/advice would be very much appreciated.

Thanks
Philip

Phil-

You were right in the beginning. There is no div that goes just around the content. The .entry-content div includes the social media icons and the bottom post navigation.

You do have to change single.php. I tried to download the theme but it doesn’t seem to be on www.ads-software.com any more. Did you try asking the theme designer here? He seems pretty responsive.

Here is a entry in the Codex that tells you how to do it.

You would first need to copy single.php to your child theme folder. Make the changes right in the editor. You might want to create a copy of your site on your local computer or in a development sub-directory so you can try changes out.

A work around is to always put the div my-custom-content around your content but the styling in your CSS file.

Ciao, Stacy

Stacy’s info about firebug is fantastic – and as you’ve obviously discovered, most of it applies to Chrome’s Inspect Element/Developer Tools feature too.

When you look at https://coc.capmedia.fr/seilh-vs-coc-20042014/, you can see both the red line that’s been added by our CSS in style.css and also the blue line that’s been added by the HTML that’s manually added to the post.

If you use Inspect Element on that page (you can use CTRL-F in the HTML window to search for specific elements) and look for the entry-content class you can see how that’s working. And the line immediately below that is the my-custom-content ID that you’ve been adding manually around your content.

Now we have a problem here. The first approach at this point would be to target a different class to apply our styles to. Except there isn’t one in this case – entry-content is too broad and the correct one, my-custom-content, is being entered manually in the actual content.

The second approach is to edit the PHP code and add a new class of our own in there that we can target.

Checking the theme documentation here: https://daisychain.tomastoman.com/wp-content/themes/daisychain-premium/docs/documentation.html#page-templates, it suggests that the social media buttons are added by the code in the page template. This is a good thing for us because it means we can hopefully insert some code between the end of the code that outputs the main page content and the beginning of the code that outputs the social media buttons.

At this point your child theme comes in handy. Take a look in the parent theme’s single.php and see if you can find a line that mentions ‘class=”entry-content”‘ in it. This’ll be the line that’s output before the page content.

I found what appears to be an older version of Daisychain’s single.php here: https://themes.svn.www.ads-software.com/daisychain/1.0.0/single.php

This appears to not have the social media icons but hopefully it’s close enough that we can get a feeling for how the page works.

In the online single.php, you can see the line that contains the opening entry-content tag, immediately after that is the PHP line that calls WordPress to output your content and then after that it starts dealing with the navigation links (I’m assuming the copy on your site has some social media code in there before the navigation links).

If that looks a bit like your file then we’re good. Copy your parent single.php into the child theme and edit it. In this case you can do it using the WordPress built-in code editor, although I generally don’t recommend that because, with a lot of files, if you create an error then you won’t be able to get back into WordPress to fix it. The safest way is to download the file, make a backup copy, edit it locally, then upload it again. You can use FTP for this or, if you have it in your web server hosting, the cPanel file manager. We’re good with this particular file though, so edit it however you’re most comfortable.

Anyway, once you’ve got single.php in your child theme, you want to edit the child copy.

Immediately before the
<?php the_content(); ?>
line you want to add a line that looks like
<div class='post-content'>

This will open our new tag just before the content is outputted and gives it a class name that we can target with styles.

Then immediately after the the_content line, before anything to do with social media buttons, you want to add another line:
</div>

That’ll close the last opened div tag (which in this case is the one with our post-content class on it).

Save and upload your new single.php file and check that everything still works. Because we haven’t added CSS for that class yet, things should look exactly how they looked before.

Then you go into your child theme style.css and change the selector line for our group of new styles so we target our newly added class:

.single .post-content {
  width: auto;
  float: left;
  padding: 0px 10px;
  border-radius: 5px;
  border: 1px solid #00bfff;
  text-align: justify;
  background-color: #e1e8e2;
}

Save that back and we should be done! There’s a chance that, when the theme author added the social media icons, he re-organized the structure of the file. Let us know if things look wildly different in there.

Hi Jon & Stacy,

Jon, thanks very much for such a comprehensive guide.

I’m delighted to say that it has worked 100% exactly as I wanted it to, so I’m a very happy boy this morning.

I am going to continue learning about HTML/CSS and PHP so that I can further fine tune our club website.

Thanks again for all your help,

Philip

Fantastic! Glad it’s working – code and site look great.