WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Theme: Twenty Eleven Child] Making Custom Div Look Like a Widget (4 posts)

  1. sbeest
    Member
    Posted 9 months ago #

    I have added a custom field to my posts and have edited the code in single.php so that the custom field appears above my sidebar. You can see an example here: sample post.

    The "Book Details" section is actually the custom field and everything below it is widgets in my sidebar. However, to get the "Book Details" section to look like the widgets I've used the following code:

    float: right;
    margin-right: 0%;
    width: 204px;
    margin: 0 0 2.2em;
    background: #000;
    padding: 20px;
    border-style: solid !important;
    border-color: #999999 !important;
    border-width:2px !important;
    font-size: 13px;

    This, however, doesn't seem right. It looks right (visually speaking), except in mobile devises and I feel the float, margin, width are all very specific and not fluid like the widgets. I was wondering if anyone knew where I could find the code or what I need to change so the custom field displays exactly like a widget would in the sidebar - the same, margin, width (without being specific), float, position, etc.

    Any help would be appreciated. Thanks!

  2. esmi
    Theme Diva & Forum Moderator
    Posted 9 months ago #

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

  3. paulwpxp
    Font hero
    Posted 9 months ago #

    First of all, remove width:1000px; from #page. That's ruining the responsiveness of site layout.

    To imitate the layout of sidebar, you just need to duplicate its properties.

    The theme sidebar's markup is like this.

    <div id="secondary" class="widget-area">
    	<aside class="widget">
    	</aside>
    </div>

    Your markup should to be like this.

    <div class="post-details">
    	<aside class="widget">
    	</aside>
    </div>

    Then go over style.css of parent theme and search for any instance of #secondary that has layout property in it, replicate ones to use with .post-details.

    Note: it would be nice if parent theme use class, not id for #secondary. So that we could just grap it to use just like .widget class.

  4. sbeest
    Member
    Posted 9 months ago #

    You are an absolute legend. The fix that I found wasn't specifically what you said above, but was related to the aside. Instead of using a div class I used an aside class in the sidebar.php and removed most of the properties above, from "float" down to "margin" as these can be inherited.

    Now the section displays just like the other widgets in all browsers. Thank you very much for your help, esmi and paulwpxp.

Reply

You must log in to post.

About this Topic