Honestly, I just didn’t see the “view demo” link under the screenshot.
But it is there.
You get to a certain age and your eyes play tricks on you.
Sorry.
Looks fine for me
One of the major flaws of WordPress is that it is a PITA to make a header responsive. I’ve never figured out why WP has never fixed this to make it easier.
First of all there are two ways to get the logo graphic in the header… use the WP way where you have to make sure the logo is the exact size, OR disable the custom header in functions.php and use CSS via the background-image attribute to load your header. Google for Carrie Dill’s site as she has a good tutorial on all of this.
Now to make it responsive, the proper way is to use what is called an @media query. There are tons of tutorials on this as well. For the Legacy theme with HTML5 enabled I put the header in this way:
/*===========HEADER====================*/
.site-header {
height: 180px;
}
/* put the banner in the title-area instead of in the header class*/
.header-image .title-area {
background: url(http://www.xxxxx.com/wp-content/uploads/banner-logo.jpg) no-repeat;
height: 180px;
}
I then make another copy of my logo but this time only 380 px side and whatever height I want. I use a media query to make it responsive:
@media only screen and (max-width: 480px) {
.header-image .title-area {
background-image: url(http://www.xxxxx.com/wp-content/uploads/new-banner-320.jpg) !important;
background-repeat: no-repeat;
height: 51px;
min-height: 0px;
}
.site-header {
height: 51px;
}
}
There might be plugins available to to all of this. At one time Nick The Geek had a nice Genesis Responsive Header plugin but when HTML5 was rolled out he never updated it.
My guess is that you can use the media query when using the WordPress method of putting in a header so that may be easier for you. But I’ve found that disabling the WP header logic in functions.php and using my own CSS is less prone to problems.
Hope this helps a little bit. Yeah, it really IS a PITA to do a responsive header. Maybe use Chrome’s “inspect element” on this site and look at the custom.css I coded to maybe help you. http://www.sweetdreamsfactory.net/ Note, this may not be the best way to do it, but it works for me. Since Genesis rolled out HTML5 everything has gotten progressively harder. If you don’t have a good understanding of CSS and some of the stuff in functions.php, you are best advised to hire someone to do all of this for you.
I figured it out. Because of a plugin I had there was this in the CSS:
.entry-meta {
display: none;
}
See the tail end of this thread. It may help.
https://appfinite.com/topic/why-is-site-header-width-set-to-90-in-new-version-of-legacy/
I’m trying to figure out why the !important attribute is necessary.
Also, I found that putting the background-image in #header and the background-color in .wrap only works on the new Legacy HTML version. It does not work on the old version where you have to put the background-image AND background-color in the #header.
This seems to work quite well for http://justbeadad.com/wp/:
@media only screen and (max-width: 400px) {
#header {
background-image: url(http://justbeadad.com/wp/wp-content/uploads/dad-header-320.jpg) !important;
background-repeat: no-repeat;
height: 52px;
min-height: 0px;
}
}
Thanks for all your help on this. The Genesis Responsive header made things easier, but the report on the Gen board is that it does not work for HTML5 themes and that Nick is fixing it… no idea when it will be released. All in all the above is probably a better solution… the fewer plugins the less potential conflicts you have down the road.
How do you add the images manually?
I made a version of the logo which is 320 px width.
I added the background-image to the style.css under .site-header:
@media only screen and (max-width: 480px) {
.site-header {
width: 100%;
background-image: url(http://surgeonsstory.com/wp/wp-content/uploads/surgeon-header-trans-320.png);
}
But it does not load…. no change. What am I doing wrong?
Just point me in the right direction.
Thanks.
UPDATE
UPDATE
I put in a !important and it worked. Don’t know why.
background-image: url(http://surgeonsstory.com/wp/wp-content/uploads/surgeon-header-trans-320.png) !important;
I took out the above line and it looks OK on an iPad, but not on an iPhone. Any ideas on what to do?
Looks like this background-position code in line 2941 of the style.CSS is killing me:
.header-image .site-header,
.header-image .site-header .wrap {
background-position: center top !important;
}
Is there any way to make this theme work with the Genesis Responsive Header plugin… or is there any way to make the header responsive?
I did exactly as you suggested… created a .png transparent logo (just text) and put it in the header-wrap using a a purple color code. Is that what you suggested? Or did you want me to use .site-header class?
.site-header, #header {
background-image: url(http://surgeonsstory.com/wp/wp-content/uploads/surgeon-header-trans.png);
background-repeat: no-repeat;
margin: 0px;
}
#head-wrap {
background-color: #290A58;
}
Worked fine. It is not responsive, I thought I could fix it with the Genesis Responsive Header plugin but no go. Any idea how to get this to be responsive? It is only a couple of hundred px wide. Should not get cut off when screen is small.
Al
Nobody can/will respond to this?
Genesis is weird. If you don’t put something in one of the other widget areas (like “welcome” or one of the “home bottom” boxes, none of the widget areas show and homepage defaults to a blog page. Throw a text widget with some typing in it in “welcome” and see if slider shows.
Great solution. I tried it. Works well. Now we don’t have to change all our medical slides for this client’s slider.
Question: Why did they change Legacy to 1140? I notice a lot of themes are moving to a higher width? What was wrong with 960? What is ‘magical’ about 1140 (or 960?)
Thanks for all your help on this. I really learned a lot in the process.
UPDATE: I took one slide and placed it on a 1140 ‘canvas’ with a black background, put it on the site and just as you said, it centers fine.
It was always easy to ‘find’ slides .jpg that are 960×350 out of the box, so to speak… as it is a common size. But 1140×350 isn’t so we are going to have to do more work for this theme.
Maybe we’ll just still with the old Legacy of 960… if I can find a clean copy of it somewhere. Is there on on your site I can download?
OK, that was the explanation I was looking for. Switching themes is not an option as client wants Legacy. We will take our 960 slide and using a graphics program ‘paste’ on an 1140 wide background… or find larger slides.
This is the first time we’ve ever used an 1140 wide theme. I wish they had not changed Legacy to the larger size. The 960 worked just fine… and now it is gone.
I looked at the demo. Yes, it works. Your slides are 1140 wide. So they center in the slider fine when the screen is stretched.
My slides are 960 wide. They left justify in the slider container area when stretched.
So what do I do to make these center? As I say, since Legacy has the width of the slider set in css to 1140 the only way I can get it to work is override the CSS, as I said above.
Tell me what to set and where, and we’ll see if it works. If you like I can give you login access to the site if you send me an email address to send it to. The site has just been started so there isn’t much in it except a couple of slides and some placeholder text.
One last item. When you change the Maximum slide width in the Gen. Responsive Settings page you are setting the “maximum” (obviously). If you have a 960 px slide and set above to 360, the system resizes your slide. Very nice.
However, Legacy has 1140 in the css and if a slide is less than 1140, as I do, it is not going to center when the screen width is maxed out. If left justifies it in the 1140 (width) “container.”
As I noted above, the only way I’ve found to get a slide smaller than 1140 to center when screen is stretched, is to override the Legacy CSS.
Am I on the right track or am I still not getting it. I fail to see what or where I set to 1140 if slides are 960. (I chose 960 because they have a smaller file size than 1140 but still larger enough to see well.)
I hope to get an answer soon on this. Most likely there is something I’m just not understanding, so please pardon my ignorance. However, I’m not a newbie… to all of this… yet I’m not in the league with guys/gals who write themes.
I send my humble obeisance.
Site: http://surgeonsstory.com/wp/
Just a bit confused.
You have the wrong width set, this theme is 1140px not 960px. Once you change it to 1140px, use the Regenerate Thumbnails plugin so it will automatically adjust all of your thumbnails/images to the size you set in the slider settings.
Here is what I did:
My 2 slides are 960 x 350.
I changed to the Genesis Responsive Slider.
I set the “Maximum slider with (in pixels) in Genesis Responsive Slider setting page to 1140.
I did the Regen.
No change. When I stretch the screen width, at a certain point the slide is not centered. (Works fine at smaller widths.)
So where do I change something to 1140?
I looked in the CSS and saw the slider was set to 1140.
`slider .wrap {
background-image: url(images/slide-shadow.png);
background-position: center bottom;
background-repeat: no-repeat;
margin: 0 auto;
padding: 30px 0 5px !important;
width: 1140px;
}`
Using Chrome Inspect I changed it to:
.slider .wrap {
width: 960px;
}
That worked.
I did not make this permanent as I doubt this is the best way to do it.
Perhaps you can explain just a bit more?
I really appreciate your help on this but I don’t understand where I am to change it (what?) to 1140.
Thank you.
UPDATE: I tried using the Genesis Responsive Slider. Same problem. So this is obviously a Legacy 1.3 (HTML5 update) theme issue.
Even when I turn off HTML5 in functions.php, I get the same issue.
I have to assume that there is a bug somewhere in Legacy 1.3.
I wonder where I can find the previous ver. of Legacy. Maybe it is on the Studio Press site? I can’t put the 1.3 theme on a client site the way it is now. I hope Wes can/will fix this ASAP.
I think I get it now. But I still have 2 questions.
I’ve updated to Gen 2.0.
The old Optimal works just fine.
Tell me about “new” Optimal.
If I update to the new Optimal, must I add the code (which is what?) to make Optimal into an HTML5 theme? And if I do that, do I have to change all my CSS?
OR, will the new Optimal work fine with Gen 2.0 without (HTML5) modification.
Thanks.
Let me ask two questions.
1. We have a couple of hundred lines of CSS overrides to various classes and ID. Since some of the classes (I’m not sure yet which ones) were changed in Gen 2, is there any backward compatibility to stndard things like #header {…} overrides?
2. There is nothing (today) that we need Gen 2 for. However we would like to upgrade. Will old Optimal work the same with Gen 2 as it does with Gen 1? And out of curiousity, will new Optimal work with Gen 1 or does it require Gen 2 (I assume it does.)
Thanks.
Was there an update of Optimal? I didn’t know. I assume it has a new CSS… meaning I better be darn careful when I update to make sure I save a copy of the old one.
Maybe this is a good time to say that people should be using a “custom.css” and not the CSS of their theme… in case of updates. With Genesis it is easy to use a custom.css by just putting the link HTML in the “before header” box in the Gen Theme Options screen.
We do this for our clients. I guess we should do it for our own site now!!! 馃檪
That is really a good idea. I had not thought of that. I should have because I did something similar on the Legacy theme when I had to add three more home-bottom widget areas for this work-in-progress http://66.39.125.194/wp/
What I tried and which worked OK is putting text widget below the featured page widget in the welcome sidebar area. The text widget had some html <div> code so I could style the text.http://brandylanepublishers.com/wp/ But your solution will give me a bit more control.
Thanks.
I didn’t mean to ‘trash’ the product. If you look at http://soliloquywp.com/features/ you see that you get a lot for the money and for our biz it was worth the $99. But it is NOT worth $99 EVERY YEAR. Adobe can get away with the rental model as can Apple because there are not substitutes for Indesign or OS X if you are making your living as a graphic designer. But if you make your living as a web monkey you have tons and tons of (free/low-cost) substitutes for almost everything you do or use.
I might (but not really sure) have paid Soliloquy maybe $10-$20 a year for updates… but not $99. To me that is just a money-grab. The product has many fine features but at the end of the day, I just need a slider and to save $99 I can easily get by with the Gen Responsive Slider plugin.
Anyway, for me, Soliloquy is ‘broken’ in that it is not working well with Adapt and Gen 2.0. and Bluehost. I don’t know where the fault lies… but the Gen Slider works fine… so I have to say it is somewhere in the Soliloquy code. I put in a support tix this morning so we’ll see what the outcome is. If it isn’t fixed in a few days I’ll move to the Gen Slider when the client site goes live.
I like the Soliloquy slider as it was designed by someone close to the Genesis folks, although it does not require the framework. What I like best about it is that I don’t have to pop my slides as featured images on pages/posts. It has its own slide loader that pops them right into the media library so it saves me a step. It also makes it easy to determine the order of the slides. In the Gen Responsive Slider you have to mess with the dates or IDs, etc. It is a nice product but I think it is a bit overpriced and I don’t like their “rental model.” If you don’t pay each year you don’t get updates or support… and it’s like $99 if you have the “pro” license for unlimited websites. No way would I pay that, but all the early buyers are grandfathered in so we get updates for life. I don’t think his biz model will work… not for a slider anyway… not when there are tons of others that do pretty much the same job, if not quite as elegantly. It was worth $99 one-time. It would not be worth $99 a year to me. YMMV.
I was pretty sure it had nothing to do with the theme… but I’m just covering the bases. I put up a note on the Soliloquy board. Seeing as I don’t get the latency with the Gen Responsive Slider it really does point to the slider. But I thought it might be a combo of the Adapt theme running on 2.0 with this 3rd party plugin.
The slider runs fine with Legacy… but on a different ISP.
Thanks.
Design changes? Like what?
Your current Readme says that there are 5 homepage middle area boxes, but there are only 4 widget areas so I figured it must be a typo.
Please document the design changes if you can.
I put all my CSS in a custom.css. But I put it in the theme folder… so that was probably not the best idea. I probably should move it up to WP-Content so that an upgrade to the theme won’t clobber it. Either that, or save it somewhere, do the upgrade… and move it back in. (I’m assuming that a theme upgrade replaces the current folder… everything in it.)
Well, I installed the current Adept with Gen 2.0 and the only thing that didn’t seem to work is for it to show your readme.txt file on the Gen Theme Options page. Not sure that is a Gen 2.0 issue or an Adpet issue. Otherwise everything else seems to work OK… but I’ve not tried the portfolio. Here is the work-in-progress site http://brandylanepublishers.com/wp/ if interested.
I’ve done some research on this and there seem to be 3 ways to add Google fonts to a Genesis child theme:
1. via code in functions.php
2. via @import in CSS
3. via HTML in header (using Simple Hook plugin)
Which way is recommended by the Appfinite gurus? Or does it not matter?
I don’t know what issue he is referring to. When I asked him to explain he just said quote: “It could also be something added to the theme.” I don’t know how that relates to javascript or maybe he meant that there is something else in the theme that was causing the problem. I didn’t follow up on it since his workaround was effective.
SOLVED!
Who is the dumbest web guy on the planet? I’m raising my hand here! Nick wrote me and said to simply paste in the URL of the logo-graphic (from Media Lib) and click “save.” Worked just fine. I never would have thought about bypassing the WP Thickbox media loader logic. I figured that it did something special to the graphic. It doesn’t. It just finds the URL… which anyone can get from the Media Library!
Man, am I stupid or what?
(Oh, he said the issue might be a javascript conflict between his plugin and the theme.)
Thanks, Nick. You da man!! (And I’m the idiot!)
Sure, I can wait. Actually I have no choice since I can’t get it to work on this other site. It is strange. I click the plugin’s upload button and it takes me to the media loader asking me to choose an image… standard WP stuff. The plugin substitues “I want this as a logo’ next to a button, but when pressed all I do is go back to the plugin’s page… nothing is uploaded. And yet the media uploader works fine when not using the plugin interface.
I spent part of the day reading the code of the plugin but without a strong foundation in WP’s functions and classes, it was no help… I didn’t see anything that jumped out at me.
I’m looking forward to whatever tutorial you come up with because I am not a big fan of WP plugins, but sometimes you gotta use ’em. (I found a nice slider this weekend called Soliloquy which I’m testing on our site (http://www.newmediawebsitedesign.com) with Optimal… has a number of features that I wish the Genesis Responsive Slider plugin had.)
Please post here when the tutorial is done so I will be alerted.
Thanks again.
Thanks for the note. Man, I’ve tried everything and looked everywhere… set permissions, deactivated plugins, reloaded the plugin, took out the header-right text widget… and for the life of me I can’t figure out what the problem. Maybe it has something to do with permissions on their server but the only ones owned by “nobody” is uploads directory. If I knew what “upload” function in the plugin actually did, maybe I could fix the code. I don’t think it actually takes the image and puts it into the uploads folder, but perhaps if it does and the folder is owned by “nobody” maybe that is an issue? But I doubt it. Very strange. If you have any other clues for me to look at, please let me know.
I tried it with both Legacy and Agency and got the same results as with Optimal. I put in a support ticket and Studio Press said:
This is actually a limitation of the WordPress more tag. 聽The WordPress more tag is specifically designed not to work on single posts or pages (inner) pages.
The widget will recognize the more tag but, since the tag is a WordPress function, WordPress controls its behavior. The default behavior is that it will not work on single posts or pages. This, of course, is its base functionality since hiding the content on the single post would prevent the content from ever being seen.
Of course, this is a Feathered Page widget in a footer area and it seems strange to me that there would be a difference in the code that is executed for the footer on a homepage vs. an interior page.
It’s not really important to me… I was just playing around to see how things work in Genesis (new to this platform…. been using Elegant Themes and are not happy with them so we are abandoning that company for Gen.
I tried it with a different page. 聽Same thing.
However, when I put in the character content limit of 50 it worked fine on home and on the test page.
The read-more works fine on home page footer but not a content page.
No, I don’t have any plugins active except Gen Responsive Slider.
When I get a chance I’ll try it with a different theme… but like you say I don’t see how a child theme could be at fault unless you have some special code in functions.php 聽or home.php that messes with the footer? I looked and didn’t see anything.
All in all, not a big deal… it just surprises me. I left a post on the StudioPress site about it and maybe someone will explain it.
Have you been able to replicate it with Optimal?
How would we add a new color? We can make the gradient file. How can we get it into the Genesis dropdown menu?
Assuming this is a lot of work, how would be bypass the Gen setting? Maybe substitute our own gradient file with one of yours… using the same name? Or could this be done by just putting it in Media Library and changing something in CSS… background: url(xxxx)?
Elegant Themes has a shortcode collection, one of which is for a slider. I’ve not tried it.
It would not make a difference in our shop because with Gen (child) themes we hardly ever mess with any of the theme’s PHP files. If what we want can’t be done in functions.php or via CSS, we don’t do it. Then again what we offer our clients is probably totally different from what others offer.
From my own standpoint, the 1152 grid concept is kind of a solution to a problem most clients don’t have… or care that much about. I’m not saying it is a bad thing, it is simply a “feature” that our clients are not concerned with. So I would say, from our standpoint, that you should go ahead with the upgrade.
On a related note, I decided to buy the Layer Slider. The learning curve looks huge… but perhaps for our graphic arts people it won’t be that big a deal. Their demo sliders work well with Optimal. Whether we will have use for it will be determined later… and not by me.
While I’m here, can I ask if you know where there is a good short code for a testimonial box that works will with Gen themes… Optimal? I’ve got the Elegant collection but have not tried any of them with a Gen theme.
Thanks for the help. We bought the Optimal theme and will use the Gen Slider. The Layer Slider you use cost $15 and looks very nice but we try to stay away from 3rd party plugins as much as possible. We don’t have many issues with 3rd party Gen themes like yours, but we’ve “lost some hair” dealing with some plugins that were not vetted by the SP people.
You did a nice job designing Optimal… gives us a lot of flexibility on where we want to place content… sort of reminds me of a Bootstrap theme.
Curious, how come you don’t sell all of your themes through the SP site. You have two of them there… Legacy and Optimal. I forgot I could have bought Optimal via SP, as I did Legacy a month ago. No problem, the extra $8 is no big deal… maybe better you get it than SP?
Nice theme. You do good work. We’ll be back.
I don’t think I explained it correctly. I wanted a small logo to be in the header. In order to do that I had to follow the code in this post:
https://appfinite.com/topic/customize-header-image-height/#post-3323
Without the code in function.php, WP will want you to crop to some small size. The standard WP Header option is designed more for a background image than a logo.
What I don’t understand is that if Legacy is a “standard” Genesis theme, why can’t we simply name our graphic logo.png, upload it to the theme’s image directory, set the image option in the Genesis settings and it would auto-load without any code. That is the Genesis “way” from what I understand. My guess is that Legacy came out before Genesis adopted this procedure? No matter what, you need to a brief tutorial on how to add a logo to your theme. It should not take more than 10 minutes to write and post. This is a premium theme vetted by Studio Press and it should have this documented. It took me half an hour to find the answer when it should have taken me half a minute.
I tried to edit above but now it won’t let me. Must be a time-out.
Why does the Bottom box not allow me to have any coloration in the text? 聽Same with other text attributes (bold, italics, etc.) If you go to
http://newparadigmsolutions.org/wp/
and click the red button you will see there is some red in the page text. Won’t show up on the box?
Thanks.
NEVER MIND. I FIGURED IT OUT… EXCEPT FOR MAKING THE BUTTON ROUND.
Thanks for the tip. I didn’t know where Legacy gets its “Read more…” 聽from. I put in
a.more-link { color: red;}
and it worked fine. What I’d like to have is round button. If I just upload a button graphic called learn-more-button.png 聽and add:
background: url(images/learn-more-button.png) repeat-x;
would that work?
Is there a way to upload a red-button.png and then overlay it with white 聽“Learn more” text? (You can see my CSS is weak!!)
Here is the site we’ve started with Legacy (just test data and pix in it now… waiting for client to get back to us.)
Thanks.