To customize styles and colors, navigate to Elevated › Instagram Feed, open the wizard, and proceed to Step 6 (Styles). Under the Customize Elements panel, you can expand individual accordion panels to adjust visual styling parameters for your Feed, Header, Post, and Popup. These controls allow you to modify background colors, margins, padding, border displays, semi-transparent hover states, and modal lightbox window aesthetics.
Navigate to Elevated › Instagram Feed inside your WordPress dashboard administration sidebar. Click the My Feeds tab, locate your target feed from the list, and click the blue Edit button to launch the wizard.
At the top of the workspace, click step 6 (Styles) on the stepper progression timeline to open your color and spacing styling panel.
Click to expand the Feed accordion panel in the left-hand column to adjust the baseline grid boundaries and structural background settings:
Click to expand the Header accordion panel to customize the background and text colors of your profile detail banner:
Click to expand the Post accordion panel to customize the visual overlay cards that appear when a user hovers their cursor over an image:
Click to expand the Popup accordion panel to customize the styling elements inside your lightbox modal popup window:
Click Next to save your color configurations and proceed to Step 7 (Complete).
All color controls inside the styling panel accept both standard hexadecimal codes (e.g., #FFFFFF) and RGBA values (e.g., rgba(255, 255, 255, 1)). While hexadecimal inputs are standard for displaying solid, opaque color layers, configuring inputs with rgba(r, g, b, a) allows you to add transparent colors where necessary.
Using a semi-transparent setting (such as rgba(0, 0, 0, 0.6)) on hover cards or background overlays is a design best practice. It ensures that text, like counts, and comment details display clearly while keeping your background page content or post thumbnail images subtly visible beneath the overlay layer.
Style modifications are not showing up on the front-end of the website
If your color, padding, or border modifications are missing on your public pages, click the Save changes button inside the active wizard step to verify that your settings have been written to the database. If changes are still missing, your system is likely serving cached styles. Navigate to the Settings tab at the top of your dashboard and click the red Clear Cache button under the Clear Cached Media configuration setting to force your public pages to rebuild.
Hover card overlays are solid black and block my images
This occurs if your Hover Card Background Color has been set to a solid hexadecimal color. Open Step 6 (Styles), expand the Post accordion panel, click the Hover Card Background Color swatch, and adjust the opacity slider down to an alpha level such as 0.5 or 0.6 to restore the transparency overlay.
Lightbox text and user comments are unreadable
If the text inside your popup modal is unreadable, it is typically caused by a low contrast ratio between your background and font choices. Open the Popup accordion in Step 6 and ensure that your Text Color contrast matches your Background Color. For example, if you set the Background Color to dark gray or black, change the Text Color to white or light gray to maintain readability.
