Search Results for 'adjust page width'

[Bill Murray]

The Metric theme uses home.php. The instructions you linked to are designed to use an internal page for a home page, which isn't really what you are trying to do.

For your needs, you would be better to a) restore the original home.php and edit it to suit your needs b) add widget areas or adjust the styling of existing widgets.

For (b), Metric already has home middle widgets. You could put recent posts in a widget area. If you want that area to be full width, all you need to do is adjust the styling of the home middle widgets (ie, make the home middle widget 1 full width and float left).

Hope that helps.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[wp guy]

One way to do it - below. Look in your CSS and in this example I set the home.middle-2 width with to 0 and adjusted the widths of the other areas. Of course, you can play with it as you want.

.home-middle-1 {
float: left;
width: 600px;
margin: 0;
padding: 0 20px 0 0;
}

.home-middle-2 {
float: left;
width: 0px;
margin: 0;
padding: 0;
}

.home-middle-3 {
float: right;
width: 305px;
margin: 0;
padding: 0;
}

[AnitaC]

Okay so now, you need to add this to the bottom of your CSS - this is the CSS for Featured Page 1 widget area:

#featured-page-4 {
width: 300px;
float: right;
}

Then we have to adjust the slider. Change this to about 960 for now:

.home-featured {
width: 500px;
}

Then, change the SLIDER width to about 525px.

Let's see how that looks.

---

Need help with customization or troubleshooting? Reach out to me.

[tylerholloway]

Thanks, both of those work.  One final question: how do you get the right side of the sidebar to align with the right side of the page?

I want the widgets to align with the right edge of the header logo, but I can't quite them there.  I changed the "display" value from inline to "right", but that didn't seem to help.  Any ideas?

The website is http://tylerholloway.net.

Thanks!

[Andrea Rennick]

    I don't see anything on how to set up the home page to look like the demo. I started by making it a full-width (it looks like that in the demo, no?), but I had trouble with padding issues (I have another post in the forum about that). Seems I have to adjust the CSS, so I skipped the home page and moved on for now.

 

Dragging the widgets to the areas specified is exactly how to set up the home page. 🙂 No, you do not make a page full width. You do not even make a separate page. 🙂

---

**forum signature**
If you need technical support for your theme please file a ticket.

The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

[jodzeee]

Yes, the AgentPress theme. Got it.

I'm pretty new to all this, so unfortunately, sometimes I'm not clear on what's a WP default versus part of the theme.

I'm still working my way through it, but specifically, here are some things I noticed:

I was able to follow the instructions pretty easily through maps and videos, after that it got trickier

As I mentioned in another post, I had trouble getting the thumbnails to work for the category listings (am I supposed to assign a Featured Image?)

I also found it challenging to get the Additional Photos to work (because there was no size setting)

In the tutorial, it mentions something about the property map shortcode - typo?

A few notes about how to configure the gallery plugin would be nice too - I happened across it and found I had choices — but I can't find it anymore! 🙁 Maybe this is a default WP thing, but it'd be nice to point out anyway

I don't see anything on how to set up the home page to look like the demo. I started by making it a full-width (it looks like that in the demo, no?), but I had trouble with padding issues (I have another post in the forum about that). Seems I have to adjust the CSS, so I skipped the home page and moved on for now.

"Add Slider to the Widget Area" is mentioned. What is this - where on the demo is it shown?

That's all the farther I've gotten in the tutorial. Still tweaking and learning...

p.s. Why can't I get the bullets to work in this editor?

Thanks!

[Au Coeur]

(The site is http://www.nantucket-bucket.com/, but it has a maintenance screen up so you can’t see it…)

I have added the grid loop and am trying to get posts to order alphabetically by title, but orderby doesn't seem to be working.  Here is the code:

 
/**
* Possibly amend the loop.
*
* Specify the conditions under which the grid loop should be used.
*
* @author Bill Erickson
* @author Gary Jones
* @link http://code.garyjones.co.uk/genesis-grid-loop-advanced/
*
* @return boolean Return true of doing the grid loop, false if not.
*/
function child_is_doing_grid_loop() {

// Amend this conditional to pick where this grid looping occurs.
// This says to use the grid loop everywhere except single posts,
// single pages and single attachments.
return ( ! is_singular() );

}

/**
* Grid Loop Arguments
*
* Specify all the desired grid loop and query arguments
*
* @author Bill Erickson
* @author Gary Jones
* @link http://code.garyjones.co.uk/genesis-grid-loop-advanced/
*
* @return array $arguments
*/
function child_grid_loop_arguments() {

$grid_args = array(
'orderby' => 'title',
'order' => 'ASC',
'features' => 0,
'feature_content_limit' => 0,
'feature_image_size' => 0,
'feature_image_class' => 'aligncenter post-image',
'grid_content_limit' => 0,
'grid_image_size' => 'grid-thumbnail',
'grid_image_class' => 'aligncenter post-image',
'more' => __( 'Continue reading →', 'genesis' ),

);

$query_args = array(
'posts_per_page' => 15,
);

return array(
'grid_args' => $grid_args,
'query_args' => $query_args,
);
}

add_action( 'genesis_before_loop', 'child_prepare_grid_loop' );
/**
* Prepare Grid Loop.
*
* Swap out the standard loop with the grid and apply classes.
*
* @author Gary Jones
* @author Bill Erickson
* @link http://code.garyjones.co.uk/genesis-grid-loop-advanced/
*/
function child_prepare_grid_loop() {

if ( child_is_doing_grid_loop() ) {
// Remove the standard loop
remove_action( 'genesis_loop', 'genesis_do_loop' );

// Use the prepared grid loop
add_action( 'genesis_loop', 'child_do_grid_loop' );

// Add some extra post classes to the grid loop so we can style the columns
add_filter( 'genesis_grid_loop_post_class', 'child_grid_loop_post_class' );
}

}

add_action( 'pre_get_posts', 'child_grid_query' );
/**
* Grid query to get the posts that will appear in the grid.
*
* Any changes to the actual query (posts per page, category…) should be here.
*
* @author Bill Erickson
* @author Gary Jones
* @link http://code.garyjones.co.uk/genesis-grid-loop-advanced/
*
* @param WP_Query $query
*/
function child_grid_query( $query ) {

// Only apply to main query, if this matches our grid query conditional, and if it isn't in the back-end
if ( $query->is_main_query() && child_is_doing_grid_loop() && ! is_admin() ) {

// Get all arguments
$args = child_grid_loop_arguments();

// Don't edit below, this does the logic to figure out how many posts on each page
$posts_per_page = $args['query_args']['posts_per_page'];
$features = $args['grid_args']['features'];
$offset = 0;
$paged = $query->query_vars['paged'];
if ( 0 == $paged )
// If first page, add number of features to grid posts, so balance is maintained
$posts_per_page += $features;
else
// Keep the offset maintained from our page 1 adjustment
$offset = ( $paged - 1 ) * $posts_per_page + $features;

$query->set( 'posts_per_page', $posts_per_page );
$query->set( 'offset', $offset );
}

}

/**
* Prepare the grid loop.
*
* Only use grid-specific arguments. All query args should be done in the
* child_grid_query() function.
*
* @author Gary Jones
* @author Bill Erickson
* @link http://code.garyjones.co.uk/genesis-grid-loop-advanced/
*
* @uses genesis_grid_loop() Requires Genesis 1.5
*
* @global WP_Query $wp_query Post query object.
*/
function child_do_grid_loop() {

global $wp_query;

// Grid specific arguments
$all_args = child_grid_loop_arguments();
$grid_args = $all_args['grid_args'];

// Combine with original query
$args = array_merge( $wp_query->query_vars, $grid_args );

// Create the Grid Loop
genesis_grid_loop( $args );

}

/**
* Add some extra body classes to grid posts.
*
* Change the $columns value to alter how many columns wide the grid uses.
*
* @author Gary Jones
* @author Bill Erickson
* @link http://code.garyjones.co.uk/genesis-grid-loop-advanced/
*
* @global array $_genesis_loop_args
* @global integer $loop_counter
*
* @param array $grid_classes
*/
function child_grid_loop_post_class( $grid_classes ) {

global $_genesis_loop_args, $loop_counter;

// Alter this number to change the number of columns - used to add class names
$columns = 3;

// Be able to convert the number of columns to the class name in Genesis
$fractions = array( '', 'half', 'third', 'fourth', 'fifth', 'sixth' );

// Only want extra classes on grid posts, not feature posts
if ( $loop_counter >= $_genesis_loop_args['features'] ) {
// Make a note of which column we're in
$column_number = ( ( $loop_counter - $_genesis_loop_args['features'] ) % $columns ) + 1;

// Add genesis-grid-column-? class to know how many columns across we are
$grid_classes[] = sprintf( 'genesis-grid-column-%d', $column_number );

// Add one-* class to make it correct width
$grid_classes[] = sprintf( 'one-' . $fractions[$columns - 1], $columns );

// Add a class to the first column, so we're sure of starting a new row with no padding-left
if ( 1 == $column_number )
$grid_classes[] = 'first';
}

return $grid_classes;

}

Any ideas on why this isn't working?

---

Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

[wendycholbi]

Yep, try this:

.content-sidebar #content, .sidebar-content #content {
width: 620px;
}

I believe the default width is 590 pixels. Increase this width by the same number of pixels you decreased your sidebar by. So if your sidebar went from 280 pixels wide to 250 pixels wide, that's a decrease of 30 pixels, so to compensate, you'd want to add 30 to the default content width, so it would be 620 pixels as in my example code above.

And keep in mind that this code will be specific to pages that are displaying the Primary Sidebar only. If you are going to have any pages that use both the Primary and Secondary sidebars, you'll need additional code-tweaking.

Hope this helps! I'd love to see a link to your site to see how it's working.

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[Steve@316 Design]

I had the DCG set full page width on several other sites. Then after upgrade to Gen. 1.9 and a problem I created myself (had spaces in theme folder names. Now fixed) Had to go back to all affected sites and readjust things, widgets, header & backgrounds, etc. Anyways, this site has a full page width DCG and I went and check to make I did this. But the DCG is still overlapping the side bar.

Thanks in advance,

Steve

---

Steve Adams | 316 Design | 619.726.9923
We live the lifestyles that we promote.™

[Brian Bourn]

Find this in your CSS and adjust the width

.agency-landing #inner {
	margin: 20px auto;
	width: 800px;
}

---

Bourn Creative | bourncreative.com | Twitter

[Bill Murray]

1) For "sticky title", are you referring to the company name at the very top, above your banner in the ID #header? This is a bigger issue than it seems, because if you remove it (which you can), you'll lose an H1 tag on the home page and end up with an empty title tag. Is your goal to make the banner the top of the page? Perhaps you could move it below the banner? That keeps the on page SEO elements.

2) Re footers: Check out Dave Decker's Genesis Widgetized Footer plugin. You can easily add your own full width widget area above or below the 3 footer widgets, or drop 2 of the 3 existing widgets.

3) If you're making changes like adding widgets and moving elements, be sure to check how your site looks on mobile devices and adjust your stylesheet accordingly (see mobile responsive elements at the bottom).

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Bill Murray]

I respectfully disagree with Susan on the "1 question per thread" concept. That applied in the old forum, but this is arguably a community forum with looser rules. If I have to look at your site to make a recommendation, it's easier to look at all of your issues in 1 place than 4 threads, especially since that involves following a link to your site. I tend not to answer people that make rapid-fire multiple posts, but that's just me.

1) Glad Susan's suggestion worked, but there are many approaches to this. Another approach is to not move the menus at all, just disable primary/secondary navigation (ie, leave those settings blank). Then, either use CSS to adjust the width of your footer widgets where the left most one has 100% of the width, or drop 2 of them and adjust the CSS. In the 1 footer widget, put a custom menu. The best approach depends on your comfort level making different types of changes. A typo in PHP changes in functions.php can break your site; a typo in CSS rarely will.

2 & 3) This is CSS. When 1 element isn't there, others will move up. Grab Firebug if you're using Firefox. If you're comfortable editing PHP and adding/removing actions, CSS is easier. If you can't figure out which CSS elements to adjust, post back. Make all CSS adjustments in your child theme stylesheet.

4) Like 2 & 3, this is CSS. What change do you want to make? Changing titles is easy to do, but it will be influenced by how you add content. That is, if you add content via featured post/page widgets vs text widgets, the answer might be different. Since styling is an easy change, I recommend you identify HOW you'll get content onto your home page (ie, which widgets you'll use). The content can be random text. But with that approach reasonably finalized, you'll get better CSS styling tips.

Hope that helps.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[hsimpson]

How do I change the width of the drop-down menu to auto-adjust to the length of the page title? Right now it is at a fixed width so some items run down to 4 lines or more with longer page titles. I am sure this is a simple css fix for those in the know, not a newb like me. I searched around online and found a css trick that worked, but the page title auto adjusted but the shadow background did not so the text ran off the color and it looked horrible. Could not figure out how to make it work right. I also searched the forum before posting. Thanks!!

[Riavon]

Nice looking site, but there is a lot going on here. Are you sure you want to add even more to it? Especially more movement? I would caution you on that, simply due to the fact that you run the risk of overwhelming your visitors with a lot of visual activity that may take the focus off your primary objective, rather than enhance it.

That being said, with a quick glance at your site using Firebug, I can see that that your header area is structured in a way that you are using a background image in the body tag to style the top portion of the pages. This doesn't leave much room for flexibility in the design. I assume you want your yellow-background marquee area to be the full width of the browser window? Do you want the marquee to appear on all pages or just the home page?

If you want the yellow strip to appear the full width of the browser window, you would have to change the existing background image you're using now to incorporate a yellow strip where you want it to appear, then adjust your other settings, such as your #inner div so that it has a bigger top margin to allow for the additional height of the yellow marquee area.

If the theme's design was configured differently, you could add another div and everything would naturally move down as needed with the existing margins set. Also, the way your site is configured, the scrolling text will only go as wide as 960px which is the width of the #wrap div which contains all of your actual page content.

All that being said and done, if you have the Genesis Simple Hooks plugin, you can add your HTML for the scrolling marquee in the genesis_after_header Hook

Something similar to this:
<div class="marquee"><marquee behavior="slide" direction="left">Your slide-in text goes here</marquee></div>

The above code presumes that you add your .marquee to your style.css something like

.marquee {
width:100%;
height:40px; (whatever height you want it to be according to the height of the strip you create in the bg image)
text-align:center;
background-color:transparent;
padding:0
margin: 0 auto;
color:#000
font-size:14px
}

This is my best guess, and hopefully a place for you to start.

---

Twitter: @riavonentprises

[shewearswhite]

Hi all,
I would like to increase the width of the sidebar on my site and decrease the width of my main content. (In effect keeping the total width the same).
My website is http://www.shewearswhite.com
My main content was 740 and I have adjusted it to 640, my sidebar was 220 and I have increased it to 320.
The css I used in my stylesheet to adjust the widths is;
.content-sidebar #content,
.sidebar-content #content {
width: 640px;
}

.content-sidebar #sidebar,
.sidebar-content #sidebar {
width: 320px;
}

The problem is that when I adjust the width the sidebar divider line stays in the same place (except for the front page!) All other pages the line doesn't move. If anyone could guide me how to move the line on all pages it would be fantastic!
Any help would be be hugely appreciated!! Thank you.
Katie

[lisa.burgess]

Hello,

I am using the Education theme and have found that all of my content is spilling out into the secondary sidebar when browser is not at full width.  I did "move" the primary sidebar so that it displays under my content and adjusted the width of the content area.

It doesn't seem to affect the home page, but ALL INNER PAGES OF THE SITE.

If anyone has any ideas on what I did to break the layout, I would truly appreciate it.

URL: http://leeheagy.com/wp/

Thanks, Lisa

[DaveMora]

Hello,

AgentPress will help my friend simplified his life by being able list his properties but I am looking for someone to customize the main page by creating a slider similar to the one found at  http://themeforest.net/item/gymboom-a-responsive-fitness-gym-template/full_screen_preview/2794938  and possibly remove many of the elements found on the main page of the AgentPress theme ( http://demo.studiopress.com/agentpress/ ) and with out affecting how the theme works if we decided to bring some of the elements back in the future.

We want to make  a very simple homepage  with a large slider and a few feature property listings. We will remove most of the header, adjust width of the listed "From the Blog" since we will also remove the nesletter and testimonials, The slider will also be wider then the current image because we will remove the property listing, We will also remove most of the sections in the footer.

I am family enough remove sections and adjust the with. But, now familiar how to create a slider that can load an image and overlap some text.

If you can help with this please let me know if your hourly rate or a flat rate.

Thank you for your time,

- Dave

 

[apt513]

I have firebug.

I just inspected the element that is the home featured / slider (again) and nowhere does it say line 170 wrap. Maybe i missed something.

This is what i get under style;

.flexslider .slides img {

    display: block;
    max-width: 100%;

}

a img {

    border: medium none;

}

img {

    height: auto;
    max-width: 100%;

}

.outreach-blue .author-box a, .outreach-blue .author-box a:visited, .outreach-blue .menu-secondary li a:active, .outreach-blue .menu-secondary li a:hover, .outreach-blue .menu-secondary li:hover a, .outreach-blue .menu-secondary .current_page_item a, .outreach-blue .menu-secondary .current-cat a, .outreach-blue .menu-secondary .current-menu-item a, .outreach-blue .sidebar a, .outreach-blue .sidebar a:hover, .outreach-blue .sidebar a:visited, .outreach-blue .widget-area h4, .outreach-blue .widget-area h4 a, .outreach-blue #footer-widgets a, .outreach-blue #footer-widgets a:visited, .outreach-blue.outreach #genesis-responsive-slider a, .outreach-blue.outreach #genesis-responsive-slider a:visited, .outreach-blue #header .menu li a:active, .outreach-blue #header .menu li a:hover, .outreach-blue #header .menu li:hover a, .outreach-blue #header .menu .current_page_item a, .outreach-blue #header .menu .current-cat a, .outreach-blue #header .menu .current-menu-item a, .outreach-blue #sub-footer a, .outreach-blue #sub-footer a:visited, .outreach-blue #sub-footer h4, .outreach-blue #sub-footer .latest-tweets ul li.last a, .outreach-blue #sub-footer .latest-tweets ul li.last a:visited {

    color: #407AB4;

}

.outreach #genesis-responsive-slider a, .outreach #genesis-responsive-slider a:visited {

    color: #6AB446;

}

.outreach-blue a, .outreach-blue a:visited {

    color: #37689B;

}

a, a:visited {

    color: #589B37;

}

.slides, .flex-control-nav, .flex-direction-nav {

    list-style: none outside none;

}

body, h1, h2, h2 a, h2 a:visited, h3, h4, h5, h6, p, select, textarea {

    color: #333333;
    font-family: 'Lato',sans-serif;
    font-size: 16px;
    line-height: 1.5;

}

body:not([id]) {

    cursor: auto !important;

}

Which is why i wanted to know where was it in css. Is there another section of firebug i should be looking at?

I just want to make the slider section smaller since adjusting it in the slider properties doesn't work.

Since adjusting the size in the slider properties doesnt actually work, what it its purpose?