[sangfroidweb]

kdeaton,
Did you ever figure this out? I just realized that Genesis now uses h1's in archives instead of h2's I just checked the theme demos and it looks like the html5 ones use h1's and the older themes use h2's. Does it not matter if there are a ton of H1's on a page now? I actually add an h1 title to my archives... but if all the post titles are also h1's... my main title loses all it's importance.....

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi! I would fix them after --- this will reduce the chances of having to do it twice. Once migrated over to WP and Genesis, the markup will probably be different than it is right now in it's static HTML form. If the markup is different, new CSS rules may need to be written to make it responsive.....so save a step and do it all at one time. 🙂

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Anitac,

I think you're right.. I was just putting it out there in case. Given it's the global wrap, I think it would be useful, for instances where you want the whole page to style a certain way. I would like the ability to add a class based on some condition, and then style the css for that class accordingly. If anyone else ever needs this.. I ended up adding another global wrap inside this one, via genesis_before_header and genesis_after_footer hooks.. then apply my class to that wrap instead.

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hey, I'm sure you would have checked this, but you aren't using a special page template on that page that could be overriding the layout, are you? Does it happen on any other pages?

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

So, have you tried making the .content-sidebar #content wider and it's not taking?

What it looks like in Firebug is that the sidebar is set to 300px wide and the content is set to 590px wide, so they aren't filling up the available width leaving that space in between.

 

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

As far as centering the menu horizontally, I would try setting the navigation ul to display:inline-block; and set the text-align on it's parent container (or some ancestor) to center. This wouldn't be foolproof in every browser, but would work in most.

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Whoa...I think I need to rethink the line-height advice! When you select one of the regular navigation items, it's crazy tall and hoses the navigation layout. Let me see if I can think of another way to do it....maybe someone else has an idea.

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hey!! I see what you are talking about now...I'm sorry, I missed it before. It looks like you may have Genesis structural wraps enabled which is adding that extra .wrap div inside of the .inner div. That .wrap is being constrained by the css found on line 387:

.wrap, #header, #inner {
margin: 0 auto;
max-width: 1080px;
}

Structural wraps may be activated on purpose, and if it is, you will need to just re-adjust the CSS to accommodate that (I can look at that for you if you need help) . If it's not on purpose, then you should just remove the code that is enabling the structural wraps for the #inner div.

Check your functions file for code that looks like the code from this snippet:

//* Add support for structural wraps
add_theme_support( 'genesis-structural-wraps', array(
'header',
'nav',
'subnav',
'inner',
'footer-widgets',
'footer'
) );

This code is enabling the extra wrap for each of the divs listed in the function. Here is a link to the snippet explanation: http://my.studiopress.com/snippets/structural-wraps/

Check that out and let me know. Hope this makes sense!

Thanks!

Liz 🙂

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi!

The #inner div is being set to 940px wide (which seems to be breaking the mobile responsiveness also).....I would change this to width:100% .

Let me know how it goes.

🙂

 

Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi!

Can you tell me which page you have tried to set to full width? Also, is the page showing that it is set to full width when you look at it in the admin and it's just not appearing correctly on the site?.... or is the change just 'not taking' and it continues to show being set to content-sidebar in the admin as well as on the site.thx!

Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi!

You can try adding this at the bottom of the Mobile Responsive section of the stylesheet. Because the header image width is 1100 pixels wide, we have to set the background-size larger than 100% at this very small screen width, which is counter-intuitive, but works in Firebug.

It's super important that this rule is set ONLY on screens smaller than 385pixels (or so) wide. Because there is not yet a section for this in the mobile responsive part of the stylesheet, we need to add it at the bottom.

@media only screen and (max-width: 385px) {

#header {
background-size:300%;
}

}

I also noticed that the footer is too wide at the smallest screen size. This is an easy fix --- just change the padding and width of the footer area to percentages adding up to no more than 100%. I notice this starting at screen width 1023. So, add the following in that section of the stylesheet (between 2092 and 2252)

#footer {
padding: 20px 4%;
width:92%;
}

Hope this helps!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi!
One way to approach this (centering the menu text vertically with the logo) is to set the line height for the top level menu items (only) to be equal with the height of the logo by adding a line like this:

#header .menu > li > a {
line-height: 108px;
}

For adding the custom background, do you mean you want to add it in the header?...I wasn't sure what you meant by 'thru the middle part'.

thx! Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi!
There is a max-width of 960px being set on the #header div. First change that max-width to 1138px. Then, there is still a padding of 10px being set on the #wrap div that will keep the header content 10px away from the edge of the site. If you want the header content to go all the way to the edge, you will need to remove this padding from #wrap.

This will affect the lower portion of the site (#inner)...so you may have to adjust the padding on #inner to replace the padding you just removed from #wrap.

Also, your header image will need to be wider to fit all the way across the larger space of 1138px.

Hope this helps!

Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi! It looks like you got this sorted out. Let me know if you have other issues or if I'm looking at the wrong thing.
🙂
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi!
On page 133 of style.css, the height of the header is being set explicitly to 100px. Just change that height to match the height of your header image and it should work.

#header {
height: 225px;
width: 960px;
}

Hope this helps!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Stephen,

Glad I could help. I thought I submitted a second message after realizing I hadn't answered the second question. I must have zoned out before hitting the submit on that one. I'm glad you were able to find the solution. The page I recommended listed one of the same solutions as on the page you found.. so  you're all set!

 

Eddy

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi, do you have a link where we can look at it?
thx!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Stephen,
Doh! Forgot to answer part 2...

http://www.binaryturf.com/genesis-tip-customize-genesis-post-excerpts-5-minutes/

the first code snipet on that page has a little function to add a filter to the excerpt output. Basically it uses the get_permalink() function to grab the link of the current post in "the loop" and uses it as the href in the markup. The rest can be anything you want. Add any other link properties like a title, and of course the text can be anything you want.. "Read More...", "Continue Reading...", "You'd be NUTS to not read the rest of this!!!!"...

Hopefully that get's it done!

Eddy

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Stephen,

We haven't used the Fremedy theme before but I may be able to offer some help. I think if you just replace the instances of is_home() with is_front_page() that should do the trick. I downloaded the theme and took a quick look and I don't see that it has a homepage template (home.php) which seems to imply that it will default to using the blog template for the homepage. Unless you change the settings/reading to "Front page displays" to "A static Page" and then set a page? If you've done that, then the is_front_page() function should only return true when the page you set on that settings/reading "Front Page Displays" is the current page. And should return false when you're on the blog page. Note there are a few places where it makes that check.. some to enqueue  the necessary javascripts and some to include the markup in the html.

Hopefully that does the trick for ya!

Eddy

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi!

So, I see those lines (23 and 28) are actually in the stylesheet for the Social Icons plugin. Since we can't reliably edit that stylesheet (our changes would be overwritten with an update to the plugin), we instead write a CSS rule in our stylesheet that has more specificity and will therefore supercede the other. You can do this by adding extra selectors which is why we are adding 'body' in front of the rule. It tells the browser that we are talking about something more specific than the other stylesheet is, and to follow our rule instead.

It looks like you have got some of this working, but I wanted to point out that you should add these mobile responsive CSS rules in the  section of the stylesheet for screens less than 768 pixels (between lines 2220 and 2288) so that these changes only display on that size screen.

Also, I would add any global rules you are adding to the stylesheet above the Mobile Responsive section of the stylesheet instead of at the end of the stylesheet where they can potentially supercede the Mobile Responsive rules.

So, starting from where you are now......

Currently on line 176 -- move this block to the Mobile Responsive section for screens less than 768 pixels ( This section is between lines 2220 and 2288) so that these changes only display on that size screen. Right now, this rule is being applied at all size screens, and we only want it to happen on the <768 size.

body .simple-social-icons ul {
display: block;
float: none;
margin: 0 auto;
padding: 0;
text-align: center;
}

Currently on line 184 -- also move this block to the Mobile Responsive section for screens less than 768 pixels (between lines 2220 and 2288) so that these changes only display on that size screen.

body .simple-social-icons ul li {
background: none repeat scroll 0 0 transparent !important;
border: medium none !important;
display: inline-block;
float: none;
list-style-type: none !important;
margin: 0 6px 12px !important;
padding: 0 !important;
}

And it looks like you are almost there with the welcome text -- add this block to the Mobile Responsive section for screens less than 768 pixels (between lines 2220 and 2288) so that these changes only display on that size screen.

body .welcome-text {
float: none;
margin:0px auto;
}

Let me know how it goes. 🙂

Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[Author]

Posts