Search Results for 'adjust page width'

[wendycholbi]

Hi Beth,

In your case, I don't think you need to redo your header to a 2000px width, because it's transparent over a white background, so even if the screen is wider than 1349 pixels, you won't see the edge of the header image the way you would have with Jamese's apple image.

I'd suggest trying the code in my post above, with one modification: Instead of setting the width of #subnav ul to 970px, give it a max-width of 100%, as many of the other selectors already have. That should let the navigation menu stretch the full width of the page while allowing it to wrap on smaller screens (on my laptop screen, for instance, which is 1280px wide, the last two navigation menu items will wrap rather than stretching off the screen and forcing me to scroll to see them).

Doing this will show the entire header to users with screens at least 1349px wide, but users with smaller screens will see the header clipped on both sides. If you want to show smaller versions of your header to users with smaller screens, you might check out Nick the Geek's Genesis Responsive Header plugin, which lets you upload multiple smaller header images (and tells you exactly how wide each of those smaller versions needs to be for optimal viewing on the most common device sizes).

If you also want the content area and/or sidebar to be wider, you'll also need to add some code to adjust those areas. This thread has several code snippets for a person who wanted to widen his site to 1100px; you can borrow the snippets for things like #content-sidebar-wrap and #content. If you do this you'll also need to adjust the width of #inner in my code above so it's wide enough to hold both the content area and the sidebar.

I hope this helps -- let me know how it works out!

 

---

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

[Reginald]

Hi all!

I am curious. I been trying to search but not sure what to do.

1. Create a floating side bar on the right (currently I have a right sidebar but is there a way I can make it floating?)

2. How do I adjust the width of the blog? I mean, I want to extend a bit towards the left (for the blog or page wide). How can I do so?

Sorry, trying to phrase something but not too tech geek so, Sorry!

Hope to hear from you and thank you!

---

Website | Facebook | Twitter | Google+ | Editorial Sumo

[pessacake]

Hello,Last year I had my site done by a group that used Genesis/Legacy as a basis to design a theme. Unfortunately they disabled a lot of the easy features for accessibility. I am wondering where and what I should be looking for to adjust primary menu to display "Vertically" rather then "Horizontally."

http://metcalfinstitute.org/

#nav #menu-primary-menu li.current-menu-item a { background-color: #07455c; }
#nav #menu-primary-menu li.current_page_parent a { background-color: #07455c; }
#nav #menu-primary-menu li a { text-decoration: none; color: #fff; padding: 7px 25px; cursor: pointer; }
#nav #menu-primary-menu li:Hover { z-index: 1; }
#nav #menu-primary-menu li a:Hover { background-color: #07455c; }
#nav #menu-primary-menu li.sfHover a { background-color: #07455c; }
#nav #menu-primary-menu li ul { position: absolute; top: 27px; left: 0; background-color: #016e85; width: 300px; padding: 0; }
#nav #menu-primary-menu li li li { text-align: center; display: inline-block; float: left; margin: 1px 0 0 0; }
#nav #menu-primary-menu li ul li a { padding: 7px; display: inline-block; background-color: #016e85; }
#nav #menu-primary-menu li.sfHover ul li a { padding: 7px; display: inline-block; background-color: #016e85; }
#nav #menu-primary-menu li ul li a:Hover { background-color: #07455c; cursor: pointer; }

[Susan]

Hi, Kim:

To adjust the width of your content and sidebar areas, you are going to need to look in a number of areas on your stylesheet.

To adjust the sidebar with, look for line 1140:

/* Primary / Secondary Sidebars
------------------------------------------------------------ */

.sidebar {
 display: inline;
 float: right;
 font-size: 13px;
 width: 300px;
}

Adjust the width of your sidebar.
Then, depending on how much you adjust that down, you will want to make similar adjustments (up) to the following areas:
On line 589: (this controls the content width of your site if you have just the primary sidebar:

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

Now, the Adorable theme also has the home page widget areas,
On line 1648, look for:

/* Home Page Widgets
------------------------------------------------------------ */

#fefloat: left; atured-top {
 padding: 10px 0 0 0;
 width: 700px;
 }

#featured-full {
 border-bottom: double #ddd;
 float: left;
 padding: 0;
 width: 700px;
}

#featured-top p, #featured-bottom-stuff p, #featured-full p {
 font-sittom-stuff { border-top: double #ddd; float: left; padding:ze: 14px;
}

#featured-bo 10px 0 0 0;
 width: 700px;
}

.featured-top-left {
 float: left;
 width: 340px;
 }

.featured-top-right {
 float: right;
 width: 340px;
 }

.featured-top-left .featuredpost {
 height: 420px;
}

.featured-top-right .featuredpost {
 height: 420px;
}

#featured-top .wrap, #featured-full .wrap, #featured-bottom-stuff .wrap {
 margin: 0;
 padding: 5px 0 0 0;
 }

#featured-top p, #featured-bottom p, #featured-bottom-stuff p {
 margin: 0;
 padding: 5px 0 0 0;
 }

#featured-full .widget, #featured-top .widget, #featured-bottom-stuff .widget {
 margin: 0 0 15px 0;
 padding: 0;
 }

.featured-bottom-left {
 float: left;
 width: 340px;
 }

.featured-bottom-right {
 float: right;
 width: 340px;
 }

You'll need to adjust the widths in each of those areas, keeping in mind that for the featured top and bottoms, you will only make 1/2 the adjustments (for example, if you widen your content by 100px, you will only want to make each of the featured top and bottom areas 50px wider).
Let me know if you need additional assistance.

[Sara]

Thanks for responding!

Actually, I have the full width layout, that is how I removed the sidebars.

What I want to do is decrease the full page width and increase the white space on either side of what I already have.  The text of my posts is enormous and the headlines are gigantic.  I just want a normal looking blog, not an elephant sized one.

Where can I adjust the width of the full page?

 

[Carla the Moose]

I try not to depend on lots of plugins, but even the plugins didn't seem to help.

If you want full-width excerpts, you can adjust the width of the columns in your CSS. Just search for this div and change the percentage to 100%:

`.genesis-grid-even, .genesis-grid-odd {
width: 100%;
}`

Cheerios!

[ratracegrad]

Roger,

 

How to you get the page a little bit transparent?

.footer-widgets, #wrap { background-color: rgba(255,255,255,0.80); margin: 2rem auto; max-width: 1080px; overflow: hidden; }

The rgba includes the standard red, green, blue with an alpha channel. An alpha channel sets the transparency level. He has it at 80% which provides the transparency level.

 

How do you get a full page logo across the top?

.header-image #title a {
    background: url('images/header.png') no-repeat;}

You will also need to adjust the  min-height for your #header and header-image from the default 87px to the height of your image. Full screen headers are 1080px wide.

Hope that helps.

 

Jennifer

 

[Doak Heggeness]

You need to understand want you want to accomplish, instead of blindly copying something. You need to add a new set of selectors ( #home full image ) to your style.css file, since you created a new widget and . You probably want to copy the basic style from the three widgets below, since you probably want them to align the same?

#home-middle {
width: 960px;
margin: 0 auto 0;
padding: 0 0 5px 0;
overflow: hidden;
}

So you need to create...

#home-full-image {
width: 960px;
margin: 0 auto 0;
padding: 0 0 5px 0;
overflow: hidden;
}

You will probably have to adjust the padding to align them.
Any error in syntax and it will not work.

---

Doak Heggeness, WordPress Development | Website

[matt.berg]

Could you post some code so we can see what you've tried?

Without seeing the code, it sounds like you might have to adjust more than one element. For example, looking at the www.hometeamaz.com/scottsdale/ page, if the #content-sidebar-wrap has a defined width, the #content and #sidebar divs must have a combined width equal to that. If you change the width of one you must change the width of the other. Basically make sure you're targeting the right element and make sure everything adds up.

Hope that helps!

[David Chu]

Hi,
That's a CSS question, not really a Genesis one. But I can give you a head start. Here is the CSS for their footer. The key ingredients that you need to know are "position: fixed", "left", and "bottom", which interact to stick that to the bottom. You can apply similar ideas to the Genesis footer CSS code in style.css. When you use these, you'll obviously need to adjust them to taste.

#footer {
  background-color: #000000;
  border-top: 1px solid #2B2B2B;
  bottom: 0;
  height: 36px;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 11;
}

I give the site demerits for hitting you with audio when you get there. 🙂 Also, the sticky footer as coded like the above should work fine, but if the visitor has a computer that's not very tall, like a laptop, and the page content is long, the bottom of the content will go below the sticky footer. This is a much more complex CSS situation, and well beyond the scope of a forum post here.

Good luck, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[webenfoto]

I would like to adjust the height of the responsive slider on the home page....

Standard height is 300 px, but I would like it to be 600 px. (and 900 px width)

 

In the functions.php of my child theme I changed this:

/** Set Genesis Responsive Slider defaults */
add_filter( 'genesis_responsive_slider_settings_defaults', 'agency_responsive_slider_defaults' );
function agency_responsive_slider_defaults( $defaults ) {
$defaults['slideshow_height'] = '300';
$defaults['slideshow_width'] = '950';
return $defaults;
}

into

/** Set Genesis Responsive Slider defaults */
add_filter( 'genesis_responsive_slider_settings_defaults', 'agency_responsive_slider_defaults' );
function agency_responsive_slider_defaults( $defaults ) {
$defaults['slideshow_height'] = '600';
$defaults['slideshow_width'] = '900';
return $defaults;
}

but it won't work. Any help?!

 

Thank you!

 

Monique

[joycegrace]

Hi,

I think the only way around this is to set up your featured images at the design stage to be the size of the featured image setting on the home page. Then you would put another image on your actual post, that has been set to be the width of the post content area, and whatever height you want.

But if you want to change the width and height of the home page featured image boxes, you can do that in the functions.php file and as well in your css file. It should be very obvious where the image sizes are in the functions.php file, then you need to use Firebug to find the class to adjust it in your css as well.

---

Find me at Joyce Grace (http://www.joycegrace.ca)

[updatealan]

Hi Robin,

Thank you for your timely support! When I removed the last line of that code, as you suggested (above), it did turn the background to solid blue. However, I want the footer background to be the 'bg_footer2.png.'

The issue I'm having arises when I attempt to edit the CSS for the Secondary Navigation (the menu at the top of the page). What I'm trying to achieve is a reversal of the hover and drop-down backgrounds. When a visitor hovers over "CONDOMINIUM LIVING" or "WHAT WE DO," I'd like the background for the drop-down items to be 'bg_footer2.png.' (So that it's not confusing, going forward, I duplicated the 'bg_footer2.png' image, named it 'bg_secondarynavigation.png' and swapped that into the Secondary Navigation code.) When they roll over one of the items, I'd like the background to be solid blue. For reference, I'm pasting some CSS below. First, is the Secondary Navigation code, and second, some code from the bottom of the Style Sheet which seems to overwrite some of the of the Secondary Navigation code.  Any help would be much-appreciated! Again, thank you!

/* Secondary Navigation
------------------------------------------------------------ */

#subnav {
-moz-box-shadow: 0 1px 1px #000;
-webkit-box-shadow: 0 1px 1px #000;
border-top: 0px solid #000;
box-shadow: 0 0px 0px #1b2755;
height: 42px;
background:url('http://dtconfidential.com/wp-content/uploads/2013/04/bg_secondarynavigation.png');
margin: 0 0 0px;
overflow: hidden;
text-transform: uppercase;
font-family: 'Swis721 BT', arial, serif;
-webkit-text-stroke: 1px #1b2755;
}

#subnav .wrap {
font-family: 'Swis721 BT', arial, serif;
color: #fff;
margin: 0 auto;
width: 1060px;
text-transform: uppercase;
}

#subnav ul {
float: left;
width: 100%;
}

#subnav li {
float: left;
list-style-type: none;
}

#subnav li a {
background: none;
color: #1b2755;
display: block;
font-size: 12px;
padding: 10px 15px 10px;
position: relative;
text-decoration: none;
}

#subnav li a:hover,
#subnav li a:active,
#subnav .current_page_item a,
#subnav .current-cat a,
#subnav .current-menu-item a {
color: #4b8308;
}

#subnav li a .sf-sub-indicator {
display: block;
overflow: hidden;
position: absolute;
text-indent: -9999px;
}

#subnav li li a,
#subnav li li a:link,
#subnav li li a:visited {
background-color: #1b2755;
border: 0px solid #333;
border-top-width: 0;
color: #f5f5f5;
font-size: 12px;
padding: 4px 10px 4px;
position: relative;
text-transform: uppercase;
width: 148px;
}

#subnav li li a:hover,
#subnav li li a:active {
background-color: #747ead;
color: #fff;
}

#subnav li ul {
height: auto;
left: -9999px;
position: absolute;
width: 170px;
z-index: 9999;
}

#subnav li ul a {
width: 150px;
}

#subnav li ul ul {
margin: -33px 0 0 169px;
}

#subnav li:hover>ul,
#subnav li.sfHover ul {
left: auto;

And, here is that (overwriting) code from the bottom of the Style Sheet:

/* AgentPress Gray
------------------------------------------------------------ */

body.agentpress-gray {
background-color: #000000;
}

.agentpress-gray h2 a,
.agentpress-gray h2 a:visited {
color: #CCC;
}

.agentpress-gray a,
.agentpress-gray a:visited,
.agentpress-gray #header ul.menu li a:hover,
.agentpress-gray #header ul.menu li a:active,
.agentpress-gray #header ul.menu .current_page_item a,
.agentpress-gray #header ul.menu .current-cat a,
.agentpress-gray #header ul.menu .current-menu-item a,
.agentpress-gray #header ul.menu li li a:hover,
.agentpress-gray #header ul.menu li li a:active,
.agentpress-gray #nav li.right a:hover,
.agentpress-gray #subnav li a:hover,
.agentpress-gray #subnav li a:active,
.agentpress-gray #subnav .current_page_item a,
.agentpress-gray #subnav .current-cat a,
.agentpress-gray #subnav .current-menu-item a,
.agentpress-gray .s,
.agentpress-gray .enews #subbox,
.agentpress-gray h2 a:hover {
color: #b4bcd8;
}

.agentpress-gray #nav li a:hover,
.agentpress-gray #nav li a:active,
.agentpress-gray #nav .current_page_item a,
.agentpress-gray #nav .current-cat a,
.agentpress-gray #nav .current-menu-item a,
.agentpress-gray #nav li li a,
.agentpress-gray #nav li li a:link,
.agentpress-gray #nav li li a:visited {
background-color: #ed008c;
}

.agentpress-gray #nav,
.agentpress-gray #nav li li a:hover,
.agentpress-gray #nav li li a:active,
.agentpress-gray #subnav li li a:hover,
.agentpress-gray #subnav li li a:active {
background:url('http://dtconfidential.com/wp-content/uploads/2013/04/bg_footer2.png');
}

.agentpress-gray #nav li a:hover,
.agentpress-gray #nav li a:active,
.agentpress-gray #nav .current_page_item a,
.agentpress-gray #nav .current-cat a,
.agentpress-gray #nav .current-menu-item a,
.agentpress-gray #nav li li a,
.agentpress-gray #nav li li a:link,
.agentpress-gray #nav li li a:visited,
.agentpress-gray #subnav li a,
.agentpress-gray #subnav li li a,
.agentpress-gray #subnav li li a:link,
.agentpress-gray #subnav li li a:visited {
color: #f5f5f5;
}

.agentpress-gray #nav li li a:hover,
.agentpress-gray #nav li li a:active,
.agentpress-gray #subnav li li a:hover,
.agentpress-gray #subnav li li a:active {
color: #fff;
-webkit-text-stroke: 1px #b4bcd8;
}

.agentpress-gray .listing-price {
background: #333;
}

.agentpress-gray .listing-text {
background: #cf1900;
}

.agentpress-gray .listing-wrap .more-link,
.agentpress-gray div.gform_footer input.button,
.agentpress-gray input[type="button"],
.agentpress-gray input[type="submit"] {
background-color: #444;
border: 3px solid #1b2755;
color: #b4bcd8;
background:url('http://dtconfidential.com/wp-content/uploads/2013/04/bg_footer2.png');
}

.agentpress-gray .listing-wrap .more-link:hover,
.agentpress-gray div.gform_footer input.button:hover,
.agentpress-gray input:hover[type="button"],
.agentpress-gray input:hover[type="submit"] {
border: 1px solid #1b2755;
background:url('http://dtconfidential.com/wp-content/uploads/2013/04/bg_footer2.png')
}

[Brad Dalton]

Install the Easing Slider Lite plugin and add this code to the end of your child themes functions.php file.

Adjust the width of the slider in the plugin settings and crop your images before you upload them.

Source: http://wpsites.net/web-design/image-slider-home-page-only/

If you want me to test this code for you on your theme, please send me a copy because its not part of the SP Pro Plus themes package so i don't have a copy. [email protected]

---

Get Help – Book Consultation.

[Doak Heggeness]

PageH,

1) Uncomment out the following in the functions.php file:
/** Add support for custom header */
/* add_theme_support( 'genesis-custom-header', array(
'width' => 1060,
'height' => 120
) ); */

2) Go to Genesis/Theme Settings and change 'Header' settings to 'Image Logo.'
3)In Style.css add your image logo:

/* Image Header - Partial Width
------------------------------------------------------------ */
.header-image #title a {
background: url( 'images/my-logo.jpg' ) no-repeat;
}
4) You will need to adjust the height of your image or #header selector property 'heigh't to accommodate each other. You may also have to adjust the #title margin selector to your preference.

Hope this helps.

---

Doak Heggeness, WordPress Development | Website

[BennettGlobal]

Hello,

I am having a problem trying to figure out how to enlarge a photo within a post.  I have a photo of Robert Di Niro stored in my media library that's "1960 x 1278".  It's a great photo and high res.  When I add the photo into the post its reducing the size to "230 x 150".  I would like the photo to cover width of the post and remain in proportion.  My width would be 600.  The photo functions as the lead-in to the content below.  But, when I try to adjust the photo to a larger size by clicking on the image editor it becomes distorted.   When I go into the Text and change the code to reflect a larger size its still distorted.  I've played around with linking.  I've looked in my media library settings for options.  I'm stumped?  It seems to be automatically inserting as a thumbnail.

How do I fix the problem.  Here is a link to the page in question.  I've intentionally left it distorted.

http://www.entertainmentravel.com/2013/03/19/celebrity-restaurant-owners-bring-more-than-a-name/

Michael

 

 

[WMcKinley]

Hi,

I'm not sure if this will help, but if you are talking about the large gray image above the fold, I see the code on your page where it says the image is 500px in height. Perhaps you can adjust the image and specify a smaller pixel height.

<div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 500px; width: 1663px; z-index: -999998; position: absolute;">

If I change the 550px in FireBug to 420px it still looks good and accomplishes the task, but you would need to tweak the padding for the content inside the image so it looks right.

Hope this helps.

 

---

W. McKinley – PowerEmini.com

[ramseyp]

If you want the image just behind the #content div, you would change that line to read:

body.jeffrey #content {
background: url(images/Blue-Prints-in-Addison-670pxwide.jpg) left top no-repeat;
}

You can insure the image covers the whole space by using the background-size attribute (and for older IE browsers, there is a method for this that scales the image to fit the space on both width & height axes. Added to the CSS, it would look like this:

body.jeffrey #content {
background: url(images/Blue-Prints-in-Addison-670pxwide.jpg) left top no-repeat;
background-size: auto 100%; /* the first value is the width, the second is height. Adjust them as needed */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/Blue-Prints-in-Addison-670pxwide.jpg', sizingMethod='scale' );
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/Blue-Prints-in-Addison-670pxwide.jpg', sizingMethod='scale' )";
)

---

Community • Work • Conversations

[rajee]

I did it and get this error below
This webpage is not available
The connection to momsfocusonline.com was interrupted.

Here are some suggestions:

Reload this webpage later.
Check your Internet connection. Restart any router, modem, or other network devices you may be using.
Add Google Chrome as a permitted program in your firewall's or antivirus software's settings. If it is already a permitted program, try deleting it from the list of permitted programs and adding it again.
If you use a proxy server, check your proxy settings or contact your network administrator to make sure the proxy server is working. If you don't believe you should be using a proxy server, adjust your proxy settings: Go to the Chrome menu >Settings > Show advanced settings... > Change proxy settings... > LAN Settings and deselect the "Use a proxy server for your LAN" checkbox.

Error 101 (net::ERR_CONNECTION_RESET): The connection was reset.

And another error as

A fatal error occurred during profiling: Call to undefined function wp_pagenavi() in file /home/content/36/4617336/html/wp-content/themes/lifestyle_40/archive.php on line 40

 

Can you please let me know whether the default width is correct for #contentleft below?

 

style.css
#contentleft {
float: left;
width: 580px;
margin: 0px;
padding: 0px;
}

 

Thanks,

Rajee

[uncoordmommy]

I recently purchased Genesis and am trying to customize the PYT theme. I currently have content sidebar sidebar layout. I figured out how to adjust the widths of the sidebars, but I would also like to adjust the content width. I am guessing I will need to increase the entire page width to accommodate what I need. Also, I need to add spacing, everything is very smushed.www.theuncoordinatedmommy.com

Please help!