Community Forums › Forums › Archived Forums › Design Tips and Tricks › Executive: Problems Adding a Full-Width Featured Post Widget
- This topic has 7 replies, 2 voices, and was last updated 10 years, 8 months ago by Brad Dalton.
-
AuthorPosts
-
August 3, 2013 at 5:46 pm #54010sacousinoMember
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?
August 3, 2013 at 9:09 pm #54024Brad DaltonParticipantWhat 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.
August 4, 2013 at 8:04 am #54094sacousinoMemberI 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.
August 4, 2013 at 11:02 pm #54191Brad DaltonParticipantSimply add some padding:
.alignleft { float: left; padding-right: 10px; }
August 5, 2013 at 9:29 am #54239sacousinoMemberThanks, 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.
August 5, 2013 at 9:50 am #54243Brad DaltonParticipantI 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.
August 5, 2013 at 5:51 pm #54297sacousinoMemberBrad,
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!
August 5, 2013 at 9:03 pm #54324Brad DaltonParticipantWhat 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.