Styling New Category Pages and Updating Category Titles on Backstage with Bon Jovi Wordpress Site

<p>This technique was first used on the Backstage with Jon website.
https://backstagewithjon.bonjovi.com/category/tourdiary/</p>

<h2 id=“tableofcontents”>Table of Contents</h2>

<ol>
<li>Update category page styling.</li>

<li>Update collection page titles.</li>
</ol>

<h2 id=“updatethecategorypagestyling”>UPDATE THE CATEGORY PAGE STYLING</h2>

<h3 id=“theproblem”>THE PROBLEM</h3>

<p>The site uses slightly different styling for each category template, so each new category template needs to have styling applied.</p>

<h3 id=“thesolution”>The Solution</h3>

<p>Locate a category template that should be duplicated. Open the browser inspector and find the code that is modifying the template. For the News category, below is the code. Simply add the page class to each section and save the doc.</p>

<pre><code>body.category-tourdiary .fusion-page-title-row, body.category-news .fusion-page-title-row, body.single-post div.fusion-page-title-bar.fusion-page-title-bar-center, body.archive .fusion-page-title-bar, body.single-post .fusion-page-title-row {
background-image: url(/wp-content/uploads/2016/09/jbjbs_4.jpg) !important;
background-position: center center;
background-size: cover;
}
body.category-tourdiary .fusion-page-title-bar-center, body.category-news .fusion-page-title-bar-center, body.single-post div.fusion-page-title-bar.fusion-page-title-bar-center {
padding: 0;
margin: 0;
}
body.category-tourdiary .fusion-page-title-row .hero, body.single-post .fusion-page-title-row .hero, body.archive .fusion-page-title-row .hero {
font-size: 0 !Important;
color: transparent !important;
background-image: url(/wp-content/uploads/2016/09/Backstage-Logo-Header.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
margin-bottom: 25px;
}
body.category-tourdiary .fusion-page-title-wrapper, body.category-news .fusion-page-title-wrapper, body.single-post .fusion-page-title-wrapper, body.archive .fusion-page-title-wrapper {
width: 70%;
float: right;
}
body.category-tourdiary .fusion-page-title-bar, body.category-news .fusion-page-title-bar, body.single-post .fusion-page-title-bar {
height: 320px;
height: 30vw;
}
body.category-tourdiary .fusion-page-title-row h1, body.category-news .fusion-page-title-row h1, body.single-post .fusion-page-title-row h1, body.single-post h4 {
color: #b63e3f !important;
letter-spacing: .3px;
text-transform: uppercase;
}
body.category-tourdiary .fusion-page-title-row .hero, body.category-news .fusion-page-title-row .hero, body.single-post .fusion-page-title-row .hero {
font-family: Montserrat_SemiBold;
text-align: center;
line-height: 80px;
font-weight: 400;
font-style: normal;
color: #b63e3f;
font-size: 80px;
letter-spacing: 0;
}
body.category-tourdiary .fusion-blog-layout-grid.fusion-blog-layout-grid-3 .post, body.category-news .fusion-blog-layout-grid.fusion-blog-layout-grid-3 .post {
vertical-align: text-top;
float: none;
}
body.category-tourdiary .fusion-post-wrapper .date, body.category-news .fusion-post-wrapper .date, body.single-post .date {
font-size: 16px !important;
font-family: Montserrat_Light !important;
margin-bottom:15px;
}
body.category-tourdiary .fusion-post-content h2, body.category-news .fusion-post-content h2 {
height:3vw;
font-size: 16px !important;
line-height: 16px !important;
letter-spacing: .1px !important;
text-transform:uppercase;
}
</code></pre>

<hr />

<h2 id=“updatecollectionpagetitles”>UPDATE COLLECTION PAGE TITLES</h2>

<h3 id=“openthefollowingfile”>Open the following file:</h3>

<p>Avada-Child-Theme/includes/font-end/page<em>title</em>bar.php</p>

<p>Currently the category title is being added on line 193.</p>

<p>The following code does all the work, modify as needed:</p>

<pre><code><?php if ( $title ) : ?>
<?php // Add entry-title for rich snippets ?>
<?php $entry_title_class = ( ! Avada()->settings->get( ‘disable_date_rich_snippet_pages’ ) ) ? ’ class=“entry-title”’ : ‘’; ?>

    <h1><?php single_cat_title(''); ?></h1>

<?php endif; ?>
</code></pre>