Executive: Problems Adding a Full-Width Featured Post Widget

Community Forums Forums Design Tips and Tricks Executive: Problems Adding a Full-Width Featured Post Widget

This topic is: resolved

This topic contains 7 replies, has 2 voices, and was last updated by  braddalton 1 year ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #54010

    sacousino
    Participant
    Post count: 18

    Hello, I am using the Executive Widget at http://www.exclusiveeventsatsea.com.

    I modified the theme code to add a second “call to action” style widget so i can plug in a full-width Featured Post widget.

    The excerpt text butts right up against the featured image for the post, and when I tried to modify the CSS to add a bit more space, it threw off the alignment for all the other Featured Posts/Pages on the home page. (I had tried modifying the margins for .executive-home .featuredpost img)

    I’m lost at what else I can do. Help?

    #54024

    braddalton
    Participant
    Post count: 9412

    What code did you use?

    Always best to test any PHP code modifications locally if you’re planning on developing yourself and not an experienced coder.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #54094

    sacousino
    Participant
    Post count: 18

    I simply copied the theme’s css for .executive-home .home-cta, renamed it slightly (.executive-home .home.cta-2) and used a white background instead of the dark one on the original widget aera. I inserted the widget area in home.php, and registered the sidebar area in functions.php.

    The space shows up correctly, and I have no problems adding widgets and the like to it, but the widget area itself isn’t the issue. It’s the Featured Post widget and how it looks in the space.

    If you go to the site now (www.exclusiveeventsatsea.com) and scroll down to see the Norwegian Epic Cruise Ship Review blog post, you will see the featured image for that post butts up against the post excerpt on the image’s right side. I can’t seem to get a decent space in between those two without screwing up the alignment on everything else on the home.php that uses a featured image.

    #54191

    braddalton
    Participant
    Post count: 9412

    Simply add some padding:
    [css]
    .alignleft {
    float: left;
    padding-right: 10px;
    }
    [/css]


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #54239

    sacousino
    Participant
    Post count: 18

    Thanks, Brad –

    WHERE does this padding go? I can’t add it to the .executive-home .home-cta-2 widget code, as that already has its own padding that defines the widget space.

    #54243

    braddalton
    Participant
    Post count: 9412

    I added this as a new rule in the child themes style.css file using Firebug and it works.

    So simply add it at the end of the style.css file and delete your browser cache.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #54297

    sacousino
    Participant
    Post count: 18

    Brad,

    THANK YOU! That did the trick! I admit I’m a little confused how that worked as it’s not attached to any specific css styling (like the styling for the standard featured post widget) so if you get the chance I’d appreciate a little clarification on that, though it isn’t a demand!

    I appreciate your help!

    #54324

    braddalton
    Participant
    Post count: 9412

    What you can do is use an existing class when adding new widgets. This way you don’t need to add any CSS code.

    If you use Firebug, you see what the classes are and can then style them in real time using your browser.

    I haven’t seen your PHP code but can tell which classes you’re using by whats generated.

    Please mark this as resolved. Thanks.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.