• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Infinity Pro: Add background images to widgets without ?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Infinity Pro: Add background images to widgets without ?

This topic is: not resolved

Tagged: background images, Infinity Pro, widgets

  • This topic has 7 replies, 4 voices, and was last updated 5 years, 8 months ago by t-west.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 19, 2017 at 6:22 am #201490
    Boblebad
    Participant

    Hi

    I'm trying to figure out how to background images to widgets that does not have them. When looking at settings and background images, there's only the ones used and no possibility to add new ones.

    How are they add and also added to the CSS without showing up in the CSS of the site or in the widgets ?

    All the best
    Carsten

    February 19, 2017 at 6:49 am #201494
    Brad Dalton
    Participant

    Link to the site in question please.

    There's 4 steps:

    Step 1 : Change the class in each widget in front-page.php from solid-section to image-section

    Step 2 : Modify the PHP code in customize.php to include all widgets

    Step 3 : Modify the PHP code in output.php to include all widgets

    Step 4 : Modify the CSS in style-front.css for each widget which now uses a image.

    You can also add default background images for each new widget in the images folder.


    Get Help – Book Consultation.

    February 19, 2017 at 6:55 am #201497
    Victor Font
    Moderator

    Anything you do in the WordPress customizer is added as inline CSS, meaning it is added to the page header when the page is generated. It's easy, however, to change the widgets that have images with Infinity Pro. There is a filter. Add this to the theme's /lib/helper-functions.php file.

    add_filter( 'infinity_images',  'add_infinity_pro_widget_images');
    function add_infinity_pro_widget_images($images) {
        $images = array( '1', '2', '3', '4', '5', '6', '7' );
        return $images;
    };

    This adds images to all widget areas. Remove the numbers you don't want. Change the classes in front-page.php from solid section to image-section.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    February 19, 2017 at 12:44 pm #201612
    Boblebad
    Participant

    Thank you Victor 🙂

    That was a nice and easy way to do it and it all shows up under settings.

    February 19, 2017 at 1:01 pm #201616
    Brad Dalton
    Participant

    No need to modify the CSS?


    Get Help – Book Consultation.

    February 19, 2017 at 1:44 pm #201617
    Boblebad
    Participant

    Works just perfect. I can add images without any trouble at all. No need to anything else than add Victor's code 🙂

    February 19, 2017 at 1:53 pm #201618
    Boblebad
    Participant

    Ohh, just a question.

    How will this work on a child theme where i put the changes to Infinity Pro. Will it go look for helper-functions.php by itself ?

    And what does the style.css need to hold these days to work ?

    May 21, 2017 at 4:04 pm #206813
    t-west
    Member

    @Boblebad After you were able to add background images to those widgets, could you just add a text widget and write text over the background image?

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble