• 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

How to do visual adjustments on Front Page 4 module and widgets in Atmospher Pro

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 › How to do visual adjustments on Front Page 4 module and widgets in Atmospher Pro

This topic is: not resolved

Tagged: Atmosphere Pro, featured page, front page

  • This topic has 14 replies, 2 voices, and was last updated 4 years, 8 months ago by Doug.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • May 20, 2018 at 1:07 am #220091
    Doug
    Participant

    This is my home page

    Home

    On the Front Page 4 module (titled Featured Productions), I’d like to make changes to the way each Genesis - Featured Page widget is being displayed.

    I’m not sure where to edit this, and am guessing it uses CSS? Here are the visual adjustments I’d like to make:

    1 - Increase the size of each widget and it’s image
    2 - Add a background color to each widget (white)
    3 - Change the background color of the entire Front Page 4 section

    Greatly appreciate any input on where to adjust this

    http://arrovox.com/
    May 20, 2018 at 8:07 am #220097
    Brad Dalton
    Participant

    You can inspect each element, find the existing CSS rules and modify theme to change the styling.


    Get Help – Book Consultation.

    May 22, 2018 at 7:49 pm #220172
    Doug
    Participant

    Thanks. That link was very helpful.

    I’ve located the element I’m wanting to change. I want to increase the dimensions of the image class img.entry-image.attachment-page so that it displays a larger thumbnail image.

    Example of how the images display in the desktop browser window. Featured Productions font-page-4 section of http://www.arrovox.com
    (If I shrink the browser window, the images jump to a much larger. I was looking for window dimension settings, but didn't see that in the HTML or CSS windows.)

    I thought I would see an area named img.entry-image.attachment-page in the CSS window, and could then change it's parameters to test my results. However, I’m not seeing anything with that title.

    Can you tell me if img.entry-image.attachment-page is the right element, and if so, where to modify it so it increases the display dimensions of the thumbnail for the page’s featured image?

    Thanks

    May 23, 2018 at 11:32 am #220187
    Brad Dalton
    Participant

    You can set the image width and wrap it in a media query.

    Add @ before media on the 1st line of this CSS

    media only screen and (max-width: 800px) {
    
        .front-page-4 .featuredpage img {
            width: 100px;
        }
    
    }
    

    Change the 800px and the 100px to suit your own requirements.

    .featuredpage is a class used only for the Genesis featured page widget


    Get Help – Book Consultation.

    May 26, 2018 at 2:55 pm #220250
    Doug
    Participant

    Thanks, Brad.

    I tried adding that code and adjusting the width amounts, but am not seeing any change in results.

    I’ve added it to the Appearance > Customize > Additional CSS window, and also to style-front.css doc.

    One thing I’ve noticed that’s odd is, when I shrink the browser size down significantly, the thumbnails popup to a large size. A size very close to what I’m trying to get.

    I’m curious if that behavior sounds odd to you, and if you could clarify where I need to put the code you posted.

    Here are 2 screengrabs, if helpful.

    Widget-InspectImage

    front-style.css screen grab

    Thanks
    Doug

    May 26, 2018 at 3:34 pm #220252
    Brad Dalton
    Participant

    Add CSS at the end of your style.css file and clear caching.


    Get Help – Book Consultation.

    May 26, 2018 at 4:10 pm #220256
    Doug
    Participant

    Thanks, Brad

    Just tried that but it still isn't working. And was sure to clear the cache (using Chrome on a Mac).

    Here's a screen of the code in the style.css doc
    https://drive.google.com/open?id=1WVoeitcAkOzik5vXwEjX-lue01YLrv0A

    Here's a snapshot of the front-page-4 section on the homepage at http://www.arrovox.com
    https://drive.google.com/open?id=1vbp3wdnceIL0zhEtsTiamv04gNHlJ1aB

    Do you see anything I might be doing wrong?
    thx
    doug

    May 26, 2018 at 4:44 pm #220257
    Brad Dalton
    Participant

    Hey Doug

    The CSS rule will not render until the screen width hits 800px because its wrapped in a media query.

    Based on my testing, it works. Tested twice.

    Otherwise, you can remove the media query

     
    .front-page-4 .featuredpage img {
            width: 300px;
        }
    

    Get Help – Book Consultation.

    May 27, 2018 at 10:38 am #220266
    Doug
    Participant

    Thanks Brad.

    I'm still seeing the tiny thumbnails when the screen is larger than 800p.
    https://drive.google.com/open?id=1vbp3wdnceIL0zhEtsTiamv04gNHlJ1aB

    I had some changes made to the site a few months ago, and perhaps there's a conflict in the code somewhere.

    May 27, 2018 at 1:54 pm #220271
    Brad Dalton
    Participant

    Where did you paste the CSS?

    Also note, you can change the image size using the featured page widget settings.


    Get Help – Book Consultation.

    May 27, 2018 at 6:40 pm #220277
    Doug
    Participant

    Thanks, Brad.

    I pasted the CSS into the style.css doc, at the very bottom. I've since removed it, as I was trying other things. But could put it back.

    Regarding the featured page widget settings, yes, that was the first thing I tried, but I wasn't seeing any results that worked. My images are rectangle, so they won't work at the largest, 1200x1200 size. So I went the next largest horizontal size, 728x0. The "0" didn't make any sense to me, but figured maybe it was a way to enable it to scale.

    Where I was confused is that the 728x0 didn't make it anywhere close to 728p wide. So thought it wasn't working for some reason.

    I also tried removing the "50%" part of this
    a.alignleft, a.alignnone, a.alignright {
    max-width: 50%;
    }

    That's working for the desktop, but the mobile images are still tiny. So now I'm trying to sort out why the mobile images are still small, and where to change that.

    May 27, 2018 at 8:18 pm #220278
    Brad Dalton
    Participant

    You can add a custom image size in functions.php and regenerate thumbnails or upload the featured image to each page again.

    add_image_size ( 'front-page-4', 300, 100, TRUE );
    

    Modify the width and height values to anything you like.

    I wouldn't modify in CSS unless you have a clear understanding what the modification will do.


    Get Help – Book Consultation.

    May 27, 2018 at 10:13 pm #220288
    Brad Dalton
    Participant

    You could also write the CSS like this :

    .front-page-4 .featured-content .entry-image {
    	max-width: none;
    	width: 250px;
    }
    

    In your case, i suggest you use the widget settings to change the image size.


    Get Help – Book Consultation.

    May 29, 2018 at 2:52 pm #220360
    Doug
    Participant

    Thanks, Brad. I would definitely prefer to use the Widget settings, but they don't seem to be working for me. When I select 728x0, which 728w should be more than wide enough, they continue to be tiny thumbnails, and I can't figure out why that doesn't make the thumbnails larger.

    May 29, 2018 at 4:33 pm #220364
    Doug
    Participant

    Brad

    Want to give you an update.

    In the style.css, I changed the following from 50% to 100%

    a.alignleft,
    a.alignnone,
    a.alignright {
    Max-width: 100%;
    }

    That seems to have fixed the desktop and mobile versions.

    It seems to be working on every browser I test it on, so I think I'm good on this.

    Thank you for your help on this. Greatly appreciate it.
    doug

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 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