Author: dan

Make the Feature Posts Module Images Link to the Post

The Extra Theme comes with a Featured Posts Module which lets you easily display a selection of posts in a prominent slider. To get to one of the posts, your users normally have to click on the post title, quite a small target. Here’s how to make it so that clicking anywhere on the image of the currently featured post takes them to the post. First, add the following jQuery code to Extra to make the background featured images into links: <script> jQuery(function($){ $('.featured-posts-slider-module .et_pb_slide').click(function(){ var url=$(this).find('h3.entry-title a').attr('href'); if (url) { document.location = url; } }); }); </script> You can add this to the theme by pasting it into "Extra > Theme Options > Integration > Add code to the head of your blog", after anything else that is in there. Though not necessary, you might also want to add the following CSS to turn the mouse pointer into a “hand” icon when hovering over the image, to help your users identify the image as a clickable link. .featured-posts-slider-module .et_pb_slide:hover { cursor: pointer; } .featured-posts-slider-module .et_pb_slide .post-content:hover { cursor: auto; } To add the CSS code to Extra, paste it into Extra's custom CSS box, which you can find from your WordPress admin menu at "Extra > Theme Settings > General > Custom CSS". Paste it after any other code already in...

Read More

Change the Extra Logo Link

By default, the Extra Theme logo links back to the homepage. But this can easily be changed with the following jQuery snippet: <script> jQuery(function($){ $('.et_extra a.logo').attr('href','https://www.google.com'); }); </script> You can add this to the theme by pasting it into "Extra > Theme Options > Integration > Add code to the head of your blog", after anything else that is in there. Just change https://www.google.com to your desired URL. Divi Booster supports changing the Extra logo link (v2.6.5 onwards). You can set the link URL on the Divi Booster settings page at “Header > Main > Change logo link...

Read More

Removing the Page Background / Create Blank Fullwidth Pages

The Extra Theme’s default page template includes a background color, sidebar and a colored “highlight” bar. If you’d instead like to start with a page which is completely blank, so that you can design it entirely in the Divi Builder, here’s a simple way to do it. On the page edit screen, locate the “Page Attributes” box which should be just below the “Publish” box on the right hand side of the screen. There you’ll find a “Template” dropdown menu. Change this to “Fullwidth” and now when you view your page you should find that the background and other features of the default template have been removed, leaving you with a nice blank canvas to work on. Here’s what that option looks like: Note that if you want to display the sidebar on this page, you can add it into your layout using the built-in “Sidebar”...

Read More

Change the Blog Feed Standard Module’s Accent Color Bar

The Extra Theme’s “Blog Feed Standard” module is styled with a top border bar. The color of this bar is determined by the color of the category of posts being shown, or in the case of the “all” category a default color is used (#00a8ff). If you want to override the color used, here’s a couple of ways to do it. Changing the Blog Feed Standard accent color via the module options To change the accent color on a single blog feed standard module, you can use the custom CSS option within the module settings. In the module settings, go to the Advanced (formerly Custom CSS) tab and enter the following in the “Main Element” box: border-color: red !important; This will change the bar to red, and will work whatever categories are selected for display. Changing the Blog Feed Standard Accent Color via CSS Another way to change the accent color is using CSS. The following CSS snippet will change the accent color for all instances of the module: .posts-blog-feed-module { border-color: red !important; } To add the CSS code to Extra, paste it into Extra's custom CSS box, which you can find from your WordPress admin menu at "Extra > Theme Settings > General > Custom CSS". Paste it after any other code already in...

Read More

Changing the Color of Widget Titles

If you want to change the text color of the Extra Theme’s widget titles, you easily do so with the following CSS: /* Change widget title text color */ .et_pb_extra_column_sidebar .et_pb_widget .widgettitle { color: black; } You can add this to the theme by pasting it into the “Custom CSS” box found in the ePanel at “Extra > Theme Options > General Settings” (at the very...

Read More

About Extra Booster

Extra Booster is a site about the Extra Theme by Elegant Themes. It is a collection of my tips for making the most out of the theme.

Get Extra!

Affiliate Disclosure

The site is partially supported by affiliate links, which may earn me a small commission if you click on them. There is no cost to you and I only link to products I use myself.