WordPress.org

Ready to get started?Download WordPress

Forums

Amend Widget Widths and Positions in Twenty Thirteen (33 posts)

  1. francsutherland
    Member
    Posted 1 year ago #

    Hi,
    I'm using a child version of Twenty Thirteen.
    There are four widgets in the footer. Three custom menus and a text box.
    I can't control the width and positioning of the widgets (as far as I can tell) using CSS as the absolute positions and widths are in the style tag at the code level.
    e.g.
    <aside id="nav-menu-3" class ="widget widget-nav-menu masonry-brick" style="position:absolute; top:0px; left:265px;>
    It seems that the widths and positions of the footer widgets are being generated by a function rather than CSS.
    Does anyone know how to bypass or change that?
    Thanks,
    Franc.

  2. stacyduval
    Contributor Day Volunteer
    Posted 1 year ago #

    What child theme are you using? Could you post a link to your site?

  3. paulwpxp
    Font hero
    Posted 1 year ago #

    Actually, for Twentythirteen, widgets in footer area are controlled by Masonry script. It helps arrange the layouts in different screenwidths.

    To modify this, you have to dequeue and enquue your own JS. Take a look at theme's JS folder, the file is functions.js.

    It might be possible to leave the JS as is and use !important in CSS but not sure if that'd work, even if it did, still not as good as adjusting the JS.

  4. francsutherland
    Member
    Posted 1 year ago #

    Hi Stacy, Thanks for replying. I'm making my own Child Theme. It isn't online at the moment, I'm setting it up locally using XAMPP.

    Hi Paul, Thanks for replying. I've found the part in functions.js you were referring to:

    /**
    	 * Arranges footer widgets vertically.
    	 */
    	if ( $.isFunction( $.fn.masonry ) ) {
    		var columnWidth = body.is( '.sidebar' ) ? 228 : 245;
    
    		$( '#secondary .widget-area' ).masonry( {
    			itemSelector: '.widget',
    			columnWidth: columnWidth,
    			gutterWidth: 20,
    			isRTL: body.is( '.rtl' )
    		} );
    	}

    - How do I dequeue this version and enqueue my own child version?
    - I'm not too sure how to read this function. Is the 228:245 a range of widths? Is it possible to replace these with percentages instead? I have four widgets in the footer and would like them in a horizontal row, but with the current settings the fourth one is placed below the third (at my screen resolution) but there is room for them to be in a row.

    Thanks again!

  5. paulwpxp
    Font hero
    Posted 1 year ago #

    but with the current settings the fourth one is placed below the third (at my screen resolution)

    This sounds like you're fixing the site to look good specific to your device only.

    When there is no widget in Secondary Widget Area ( sidebar on the side ), the four widgets in footer area will display as four columns in one row already. But with certain screenwidth, they will not fit in one row, and it's okay, there is nothing wrong with elements not fitting in and go into another row in smaller screen.

    You could try to control the width of widget in footer via CSS using media query. But the Masonry might get in the way, if not wanted just dequeque it all together.

    How do I dequeue this version and enqueue my own child version?

    To dequeue the script, just make a function like theme does,
    http://themes.trac.wordpress.org/browser/twentythirteen/1.0/functions.php#L158

    and then hook into the same hook. Dequeue using wp_dequeue_script() with the right handle and enqueue using wp_enqueue_script() with similar paremeters that theme uses excepts that child theme uses get_stylesheet_directory_uri() instead of get_template_directory_uri().

  6. francsutherland
    Member
    Posted 1 year ago #

    Hi Paul,
    Thanks for getting back to me and sorry about the delay in responding.
    Can you tell me if I am reading the function correctly? Is the 228:245 a range of allowed widths? How does that function read in normal language?
    Thanks again,
    Franc.

  7. francsutherland
    Member
    Posted 12 months ago #

    Hi all,
    I am trying to alter the widget widths in the footer of a child theme based on twentythirteen. I have four widgets in Main Widget Area and none in the Secondary Widget Area. At resolution 1024x768 the Masonry javascript function is not placing all four widgets in a row although there is room for them, it is taking the fourth and placing it below the third. I would like to place them all in a row by either amending the widget widths, margins or padding. I am not familiar enough with Javascript to see what settings to change for that. I think I have tracked down the function in functions.js responsible.

    /**
    	 * Arranges footer widgets vertically.
    	 */
    	if ( $.isFunction( $.fn.masonry ) ) {
    		var columnWidth = body.is( '.sidebar' ) ? 228 : 245;
    
    		$( '#secondary .widget-area' ).masonry( {
    			itemSelector: '.widget',
    			columnWidth: columnWidth,
    			gutterWidth: 20,
    			isRTL: body.is( '.rtl' )
    		} );
    	}

    Can anyone tell me how to set the widths, margins and paddings for the widgets?
    Many thanks,
    Franc.

  8. keress
    Member
    Posted 11 months ago #

    I had this problem and worked around it rather simply by just creating another sidebar element in functions.php and then calling for that in the footer.php. Now I'm just running on css like I wanted.

  9. sportsreporter of ny
    Member
    Posted 11 months ago #

    Hi, Not sure if I'm in the right forum but here goes:

    The home page of my site, http://www.sportsreporters.com, used to contain four rotating photos that corresponded to the four most recent articles posted. Now, it looks like this:

    Warning: include(/home/vg008web00/55/86/3018655/web/wordpress//wp-content/plugins/content-gallery/gallery.php) [function.include]: failed to open stream: No such file or directory in /home/vg008web00/55/86/3018655/web/wordpress/wp-content/themes/playmaker2/home.php on line 25

    Warning: include() [function.include]: Failed opening ‘/home/vg008web00/55/86/3018655/web/wordpress//wp-content/plugins/content-gallery/gallery.php’ for inclusion (include_path=’.:/usr/share/php:/usr/share/pear’) in /home/vg008web00/55/86/3018655/web/wordpress/wp-content/themes/playmaker2/home.php on line 25

    Can someone please help me? Thanks.

  10. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    @sportsreporter of ny - no, this isn't a good place - you're using a diffferent theme and your problems are not the same at all. You can start a new thread here:

    http://wordpress.org/support/forum/themes-and-templates#postform

  11. francsutherland
    Member
    Posted 11 months ago #

    Hi Keress,
    Would you mind sharing your code?

  12. dennisdbn
    Member
    Posted 11 months ago #

    Hi,

    I think I'm seeing the same problem.

    With the theme twentythirteen, if I have no widgets in the right hand sidebar, the footer widget area uses the full width of the theme.

    But once you have any widgets in the right hand sidebar, the footer widget area reduces its width with the width of the main content area.

    What I want is for the footer widget area to be the full theme width, i.e. the width of the main content plus the right hand sidebar. So adding a widget to the righthand sidebar does not reduce the width of the footer widget area.

    Below the footer widget area is the 'site info' area. This does not get reduced.

    Is this the same problem you've got francsutherland?

    Does anyone know how to fix it?

  13. esmi
    Forum Moderator
    Posted 11 months ago #

    As per the Forum Welcome, please post your own topic.

  14. aynex
    Member
    Posted 11 months ago #

    I'm having the same problem and haven't found a solution yet. I see that the problem is that the absolute left position generated for the fourth widget is 496px, the same position of the third widget. I don't know how to change this. Does anyone know?

  15. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    @aynex - did you read esmi's post above? Please follow it.

  16. francsutherland
    Member
    Posted 11 months ago #

    Hi @aynex. I think the 496px is calculated by the masonry functionality which is the javascript part controlling the layout of the footer. (If anyone can correct this, please do!).
    I want to find out where the masonry calculations are done so that I can change the constants used so that the columns are closer together.
    Does anyone know how to do this?

  17. MontyVision
    Member
    Posted 10 months ago #

    I have exactly the same issue. I need my widgets on the footer to be closer to each other when viewed on a full resolution screen. Could someone explain step-by-step how to dequeue and enquue your own JS?

    PaulWpXp, you are right on the money but I am no expert and taking the wrong steps here is probably not a good idea.
    I too am using a child theme of twenty thirteen and obviously with CSS alone it is impossible to change this.

    Keress, if you could share your method of "creating another sidebar element in functions.php and then calling for that in the footer.php" that would also be greatly appreciated from all of us trying to resolve this issue.

    Thank you in advance

  18. esmi
    Forum Moderator
    Posted 10 months ago #

    As per the Forum Welcome, please post your own topic.

  19. dennisdbn
    Member
    Posted 10 months ago #

    I had a very similar issue. I solved it with a simple edit to style.css.

    I just removed the following:

    .sidebar .site-footer .widget-area {
    	max-width: 724px;
    	position: relative;
    	left: -158px;
    }
  20. MontyVision
    Member
    Posted 10 months ago #

    Hello Esmi (Forum Moderator)
    Even though I am having a similar issue and I don't know how to resolve it, I need to start a new topic?
    Please advise

    Thank you

  21. esmi
    Forum Moderator
    Posted 10 months ago #

    I need to start a new topic?

    Yes.

  22. Daniel
    Member
    Posted 10 months ago #

    Hei Franc

    - I'm not too sure how to read this function. Is the 228:245 a range of widths?

    I tried to find an answer to that too, and can tell you this:

    var columnWidth = body.is( '.sidebar' ) ? 228 : 245;

    means: if the body-tag has the class "sidebar" then columnWidth should be 228px. If not, the columnWidth should be 245px. Nothing more actually. Masonry is doing the rest (http://masonry.desandro.com/options.html#columnwidth)

  23. whycomeimsocool
    Member
    Posted 9 months ago #

    Hello! I am having a similar issue, when upon "fixing" it, creates a different issue. Looking for some help here, extreme beginner.

    In the footer of my page bachtogauss there are 2 widgets - Subscribe, and Archives. I am trying to move the Archives box over to the right, so that it's approx 400px from left instead of current setting of 265px.

    I have identified the html for the box and have tried this css:

    #archives-2 {left:400px !important;
     position:  relative !important;
     }

    with and without the position setting. Here's the problem.

    Originally, when the window size became smaller, Archives would jump down underneath Subscribe. When I change from 265 - 400px with above code, Archives looks great in full window size, but gets stuck out to the right and slightly under Subscribe when any smaller. It breaks the mobile look.

    Looking for help on achieving:

    - Archives out 400px from left in full window size
    - Archives jumping directly underneath Subscribe in smaller windows, exactly as it does when the setting is 265px from left.

    Sorry for wordiness - it's hard to describe this stuff without a visual.

    I have no idea how to mess with the Masonry js stuff, and am hoping for a css resolution. This is the relevant js:

    element.style {
        left: 265px;
        position: absolute;
        top: 0;
    }

    I am working in a child theme. I also tried following these instructions for dequeueing js and whatnot, but that left me with 2 footers (the original and the broken css one), and then no footer at all.

    Thanks so much!

  24. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    @whycomeimsocool - please start your own thread - as this one is outdated and not the same question(s).

    http://codex.wordpress.org/Forum_Welcome#Where_To_Post

  25. whycomeimsocool
    Member
    Posted 9 months ago #

    Sorry for my confusion, but

    a) this thread is called Amend Widget Widths and Positions in Twenty Thirteen, and I am trying to amend a widget's position in Twenty Thirteen, and

    b) there was just a post 3 weeks ago, and you were somehow able to respond to me within minutes of my posting. That doesn't strike me as outdated.

    I like your username… do you do yoga?

  26. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Sorry if my post was not well-worded - we ask people to do so because it's often quite confusing having multiple people in the same thread - and your situation is probably not be identical - which is why the guidelines say:

    Unless you are using the same version of WordPress on the same physical server hosted by the same hosts with the same plugins, theme & configurations as the original poster, do not post in someone else's thread. Start your own topic.

    So please do that if you want help.

    As to my user name - thanks - yes, I'm a long-time fan of Bikram yoga, though haven't been practicing too much lately.

  27. whycomeimsocool
    Member
    Posted 9 months ago #

    Very well then, thank you for that information! Being my first time on here, I was ignorant of those rules - my fault.

    I am more of a fan of Ashtanga and the like, because in my opinion it's more about Ayurvedic tradition and healing. Bikram, being heated, strikes me more as a "workout" people practice to "sweat", and therefore less spiritually aligned. Of course this is a general statement regarding what I've noticed in life, I mean to pass no judgement :)

    Thanks again -

  28. Dirk Kremers
    Member
    Posted 7 months ago #

    So to get control over the css for footer widgets, all you have to do is

    1. delete the line
    wp_enqueue_script( 'jquery-masonry' );
    from functions.php or

    2. add the lines

    function twentythirteen_scripts_styles() {
    if ( is_active_sidebar( 'sidebar-1' ) )
    wp_dequeue_script('jquery-masonry')}

    to your child themes' functions.php
    ?

    I did the first thing. Not sure whether the second option works.

  29. ViscoDesign
    Member
    Posted 7 months ago #

    I had exactly the same issue and simply changed the values in function.js to 200 : 220 with a gutterWidth of 10.

    if ( $.isFunction( $.fn.masonry ) ) {
    		var columnWidth = body.is( '.sidebar' ) ? 200 : 220;
    
    		$( '#secondary .widget-area' ).masonry( {
    			itemSelector: '.widget',
    			columnWidth: columnWidth,
    			gutterWidth: <strong>10</strong>,
    			isRTL: body.is( '.rtl' )
    		} );
    	}

    This worked for a content width of 980px.
    Not an ideal solution as it will probably be reverted after a Twenty Thirteen update, so it's probably best to somehow deregister the parent JS and enqueue a new one.
    See this tutorial: http://wp.tutsplus.com/tutorials/creative-coding/how-to-modify-the-parent-theme-behavior-within-the-child-theme/

  30. Dzynit
    Member
    Posted 7 months ago #

    To anyone running across this post looking for help with the same problem, I used this: http://slobodanmanic.com/444/flexible-horizontal-sidebars-wordpress-twenty-thirteen-child-theme/

    But you have to download his zip and copy the code because there seems to be some code missing from the snippets that are right in his post.

Topic Closed

This topic has been closed to new replies.

About this Topic