Computing desk
< August 24	<< Jul \| August \| Sep >>	August 26 >

Welcome to the Wikipedia Computing Reference Desk Archives
The page you are currently viewing is an archive page. While you can leave answers for any questions shown below, please ask new questions on one of the current reference desk pages.

August 25[edit]

Overriding Default Caption Color in Wordpress Theme[edit]

I'm hosting a Wordpress site and using the Enfold theme. I have set the caption color to white, because that's what most of my pages use: however, there are a few pages where I need the caption to be black. How do I override the default caption color for just those pages? I think I can define a new class for that caption, but I'm not sure how to insert it into the page, or how to make sure it is processed after the default style sheets (Wordpress themes have dozens of rules for each element, so I have to insert the new rule in just the right place). OldTimeNESter (talk) 16:02, 25 August 2017 (UTC)[reply]

If its just a couple of pages you can also use inline styles. Another option is to use a class with !important. The priority of different types of CSS is described over at Cascading_Style_Sheets#Sources. If you give me the URL then I can have a look. (((The Quixotic Potato))) (talk) 17:42, 25 August 2017 (UTC)[reply]

For example:

<style>
.caption {color:red;}
.caption {color:blue;}
</style>

<p class="caption">Potatoes</p>

The caption will be blue because the CSS rules are processed in order.

If we change it to:

<style>
.caption {color:red;}
.caption {color:blue;}
</style>

<p class="caption" style="color:green;">Potatoes</p>

then the caption will be green, because inline styles overrule the <style> tag.

But if we change it to:

<style>
.caption {color:red !important;}
.caption {color:blue;}
</style>

<p class="caption" style="color:green;">Potatoes</p>

then it will be red, because of the !important.

You can add inline styles (example #2) by editing the HTML of a Wordpress page or post (The WYSIWYG editor has a "Text" tab on the top-right which allows you to edit the HTML).

You can edit the stylesheet of a Wordpress theme by visiting yourdomainname.com/wp-admin/theme-editor.php (replace yourdomainname.com with your domain name). You'll see a bunch of filenames on the right side of the screen, click on the one that is called style.css. This way you can use example #3.

If you make changes to a Wordpress theme stylesheet they will be overwritten the next time you update the theme. The best way to avoid that is using a Wordpress child theme, but explaining how to do that is a bit too much work.

(((The Quixotic Potato))) (talk) 18:02, 25 August 2017 (UTC)[reply]

The Quixotic Potato, thank you for the detailed answer. I'm going to see if I can make this work. OldTimeNESter (talk) 17:37, 28 August 2017 (UTC)[reply]