Setting widget span

Support Area Forums Foundation Setting widget span

Viewing 10 posts - 1 through 10 (of 10 total)
URL to the page in question:
  • Author
    Posts
  • #10307
    Eric Morse
    Participant

    I’d like to change the span of one or more widgets on my Home page. Specifically, rather than having three widgets in three columns, I’d like one to be 1-col wide and another to be 2-cols wide.

    Also, for some reason, I have a bunch of padding between my logo and nav menu. I want them to be adjacent. I’m assuming this is easy to set, I just haven’t found it?

    Thanks,
    Eric

    #10308
    Bill Robbins
    Participant

    Eric,

    I’d be glad to help out. If you’ll send over the URL to your site and also let me know which widgets on the home page you’d like to have be 1 column or 2 columns wide, I’ll send over the code to make that happen. I’ll also take a look at your logo too.

    Thanks,
    Bill

    #10309
    Eric Morse
    Participant

    Thanks Bill! The site is: http://20children.org — still very early in development.

    Thanks again!
    Eric

    #10310
    Eric Morse
    Participant

    Oh, and I was hoping to expand the “Latest News” widget … though ideally I’d like to know how to do this going forward, as I’m still messing with layout, etc.

    Thanks!

    #10311
    Bill Robbins
    Participant

    Eric,

    Here’s how to take out the space between your logo and the navigation bar. Go to the Theme Options page and select the Styling tab. Scroll down to the Custom CSS box and paste this:

    
    #logo {
    	margin: 0;
    }
    
    #logo h1,
    #logo p {
    	line-height: 0;
    }
    

    Update your settings and that will make the change for you there.


    For the widgets, WordPress assigns each widget a unique ID that we can use to style it specifically. The downside is the WordPress dashboard doesn’t supply those in a way that we can easily find. So to find it, you first have to visit the page where your widget is on the front side of your site.

    Once there, view the source code of that page. You can usually do that by right clicking and selecting “View Source.” Look through the code until you see something that looks like this:

    
    <div id="featured-page-2" class="widget featuredpage shadow">
    

    That’s the start of the Featured Page widget on your home page. We can use the featured-page-2 to assign a style that only affects that instance of that widget. Here’s what it would look like to make that widget span two columns instead of just one:

    
    @media only screen and (min-width: 1024px) {
    	
    	#home-widgets #featured-page-2 {
    		width: 630px;
    	}
    }
    

    The first line is a media query which we use to only make that change on a large browser window. That way we won’t affect smaller devices.

    The next section is the actual snippet for that widget. Since it’s on the home page, we have to include the #home-widgets at the beginning in order to change the width.

    To make a widget two columns, you’ll use 630px as the width. To make it full width, you’ll use 100% instead.

    Place that in your Custom CSS box and update your settings. That should do it for you.

    If you have any questions or trouble, let me know,
    Bill

    #10312
    Eric Morse
    Participant

    BOOM! Fantastic — thanks Bill!

    #10313
    Eric Morse
    Participant

    Hi Bill,

    I have another question now — it’s more of a general WP question than a specific Foundation question — is it possible to give a page a title, but have it appear in the nav as something other than the page title?

    #10317
    Bill Robbins
    Participant

    Eric,

    You can do that. When you’re setting up you navigation, look in the right hand side of the screen where you can rearrange your items. Each item will have it’s name, the type of link it is and also a down arrow. If you click the down arrow, it will open up more options for you. You can change the label for your menu item there.

    Once you’re finished, click save on your menu and that should take care of it. That’s a great way to have longer page titles with a more compact navigation structure.

    If you have any trouble, let me know,
    Bill

    #10354
    Eric Morse
    Participant

    Aha! Thanks again.

    #10355
    Bill Robbins
    Participant

    Anytime.

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Setting widget span’ is closed to new replies.