Forum Replies Created
-
AuthorPosts
-
wendycholbiMember
Aha. I can definitely answer your second question, and I have a suggestion about your first question.
To make your footer widgets lose that gap, add this code to Genesis --> Custom Code --> Custom CSS:
#footer-widgets { width: 970px; }
...unless you want the green background to stretch full-width but the widgets themselves to be centered, in which case try this (if you do this, you probably want to also remove the 1px white border in Genesis --> Design Settings --> Footer Widget Area):
#footer-widgets .wrap { width: 970px; margin: 0 auto; }
Two more things I noticed:
1. The code I gave you included a width/centering for the #nav, but you're using #subnav, so if you change both instances of #nav in my code to #subnav, you'll get a full-width navigation bar background, with the actual navigation items above the main body of the site. Try it and see what you think.
2. This is optional, but I think it might look better (on wider screens especially) if the site title wasn't all the way to the left, and the search bar wasn't all the way to the right. Here's a snippet that preserves your full-width header image, but moves the site title and header widget above the main body of the site:
#header .wrap { width: 970px; margin: 0 auto; max-width: 100%; }
Okay, going back to your first question. I think I've figured out a way to fix this (and this was a good exercise for me, so thank you for pointing out that the content area becomes unresponsive with my full-width header code).
Look at the last line of the code snippet above, where it says
max-width: 100%;
You'll need to add that "max-width: 100%;" line to to the declarations for #header, #inner, and #footer (before the closing curly bracket for each of those items) in the code you pasted into Genesis --> Custom Code --> Custom CSS.
I think that should do it, according to the testing I did in Firebug. But let me know if it doesn't work, OK?
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberYes, this is definitely possible, with some custom CSS. I have an example here:
http://style3.sitesetupkit.com/
Here's the basic CSS setup (this also makes the navbar background stretch the full width of the page, directly beneath the header). Paste this code into Genesis --> Custom Code --> Custom CSS:
/*for full-width header: set body width to 100%, center the #wrap, position header background in center of page, set width and centering on #nav, #inner and #footer*/ body { width: 100%; } #wrap { margin: 0 auto; } #header { background-position: top center !important; } #nav { width: 100%; } #nav ul { width: 970px; margin: 0 auto; float: none; } #inner { clear: both; margin: 15px auto 0; width: 920px; } #footer { width: 970px; margin: 0 auto; }
You'll also need to set the header width in Genesis --> Design Settings --> Header to the width of a header image that will stretch across the entire page (at least 2000px, but a small percentage of monitors are 2560px wide) to tell the header uploader in Appearance --> Header not to crop your header image when you upload it.
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberNice work with the Post Comment button!
For the Subscribe button, I got the selector wrong (I made an assumption that it was the same as the Post Comment button, which it's not). Try this:
/**Replace sidebar Subscribe button with custom image**/ #blog_subscription-2 input[type="submit"], #blog_subscription-2 input:hover[type="submit"] { background: url(IMAGE-URL-HERE) top left no-repeat; color: transparent; height: 74px; width: 72px; }
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberI can see that the CSS for the Post Comment button is missing a semicolon after the word "transparent". If you add that semicolon in, the Post Comment button should show up correctly.
For the Subscribe button, I don't see any of the custom CSS being applied, even though I can see that you've added it to your Genesis --> Custom Code --> Custom CSS. Hmm.
Can you please un-minify your CSS by going to Genesis -->Design Settings --> General Settings (very bottom of the page) and un-checking the "Minify CSS?" checkbox (generally it is a good idea to not minify while you're testing and tweaking, then once you are ready for launch, go ahead and minify to speed up your page load time).
If you're using any caching plugins/services, temporarily turn them off or at least purge the caches.
If un-minifying the CSS doesn't have any effect on the Subscribe button, leave it un-minified and post back here, and I will take another look and see if you need a different selector.
Fingers crossed!
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberD'oh, I should have remembered that the Post Comment text would show up, since the image is in the background. Here's an amended code snippet (same as above, substitute the image URL and put in the correct height and width:
/**Replace Post Comment button with custom image**/ #commentform #submit, #commentform #submit:hover { background: url(IMAGE-URL-HERE) top left no-repeat; color: transparent; height: 40px; width: 100px; }
I submitted a test comment, and did not see an error message, and my comment appeared on the page (visible only to me, because it says it's awaiting moderation -- you may have gotten an email about that). So the comment form appeared to work normally for me. When you clicked the image, were you logged in? Did you fill in the name and email fields?
And here's a similar code snippet for the Subscribe button in your sidebar widget (again, substitute the image URL, height, and width). This code will only affect one particular widget, the one with the id "blog_subscription-2":
/**Replace sidebar Subscribe button with custom image**/ #blog_subscription-2 #submit, #blog_subscription-2 #submit:hover { background: url(IMAGE-URL-HERE) top left no-repeat; color: transparent; height: 40px; width: 100px; }
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberYep, official support is probably a good idea, since the Design Setting for header background color isn't working as it is supposed to.
You might try un-minifying your CSS (go to Genesis --> Design Settings and uncheck the "Minify CSS?" checkbox in the very last metabox), saving changes, and seeing if that makes a difference. If you're running any caching plugins you can purge the cache(s) or temporarily turn them off.
I can see the yellow color is showing up in your CSS, but it's still being overridden by an empty header-image URL. Which is odd. The one thing I notice is that all your CSS stylesheets have long URLs with "pagespeed" in them -- if this is because some caching plugin or service is serving/caching/minifying your stylesheets, then you may need to fiddle with that plugin/service's settings to allow Design Settings changes to apply.
Did you try adding David's code snippet (with your yellow hex color inserted in it) to Genesis --> Custom Code --> Custom CSS? That snippet should force the header background color to change, but if that failed, you could add the !important declaration, and see if that works.
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberFor the Post Comment button in the comment form, try this:
1. Upload your custom image to your Media Library
2. Add this snippet to Genesis --> Custom Code --> Custom CSS (replacing IMAGE-URL-HERE with the URL of the image in your Media Library, and changing the sample image dimensions to the actual dimensions of your image):
/**Replace Post Comment button with custom image**/ #commentform #submit, #commentform #submit:hover { background: url(IMAGE-URL-HERE); height: 40px; width: 100px; }
I think that should do it.
The subscribe button will be similar code, you just need to find the right selector to pick out that specific button. If you need help finding that selector, you can use Firebug or post a link to a page on your site where the button is showing up (since right now your site is in maintenance/under construction mode).
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberOne quickie way to do it would be to use a sticky post for the static content that you want to appear on the top of your home page.
Another way to do it would be to add an additional widgetized area at the top of the home page, then use widget(s) to set up your static content.
Here's a Genesis tutorial on registering a new widget area: http://my.studiopress.com/tutorials/register-widget-area/
...and here's a more detailed tutorial by Brian Gardner on adding what he calls a "featured box" which is a widgetized area below the header on the home page: http://www.briangardner.com/kickstart-email-list/
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberDavid is right, now that your site is loading I can see that there is a background image that's overriding the Design Settings for background color.
The image is here: http://www.georgia-medicareplans.com/wp-content/themes/prose/images/header.png
...and it looks like it is supposed to be transparent, but it is still overriding the Design Settings.
Since it's just a transparent rectangle, and your site title and tagline are being shown as text, I suggest going to Appearance --> Header and removing the header image. Then the background-color setting in Genesis --> Design Settings --> Header should apply.
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberIt looks like the site is serving up a "mobile version" of certain pages (like the one you linked to above).
Do you have a plugin or alternate theme installed that is designed to create a mobile-only version of the site? Perhaps a plugin you installed or updated about a month ago, coincident with the onset of formatting problems? Whatever plugin/theme it is, it must not be correctly figuring out which devices are mobile (since it's showing me the mobile version of that page, even though I'm using a laptop with a full-size screen).
Or there's a conflict between that plugin and another plugin. That's always a possibility.
My first step would be to disable whatever's supposed to create the mobile-only site, and see if that fixes the issue. Prose is mobile-responsive already (although there are a few things you can do to improve the way Prose sites look and work on smaller screens), so if you can live without an entirely separate mobile version, I'd say that's best.
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberThere was a similar question asked in this thread: http://www.studiopress.community/topic/help-adding-design-flourish-between-posts/
That person wanted to add an image, which you could do by creating a divider , or you could use the same Simple Hooks method but instead of inserting an image, insert a horizontal rule tag:
<hr />
...or add styling to your horizontal rule to get it to be thicker and match your background (the color code I'm putting in is just an example):
<hr style="border: 2px solid #ff0000;" />
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberI have a possible solution, one that I've used successfully on client sites (though the two clients I can think of who've used it have since moved on to new designs, so I don't have a working example of my own to show you).
Summary: Since you're dealing with only two header images, you can create a custom body class that has a Basinger Consulting header. Any page/post that doesn't have that body class will have the default (blog) header. This is easiest with two headers that have the same pixel dimensions, so they can simply be swapped in for each other without altering the site width or header dimensions (although with more custom CSS, you could handle different sized headers as well).
1. Upload both headers to your Media Library. Copy the URL of the Basinger Consulting header.
2. Add this CSS snippet to Genesis --> Custom Code --> Custom CSS, replacing FULL-IMAGE-URL-HERE with the URL you just copied:
/*** Second header for use on Basinger Consulting-related pages only***/ .basinger-page #header { background: url(FULL-IMAGE-URL-HERE) no-repeat scroll top center transparent !important; }
3. On each page where you want to use this Basinger Consulting header, go to the page editing screen, and scroll down to the Layout Settings metabox. In the Custom Body Class field, type or paste:
basinger-page
...and save/update the page.
You might need to fiddle with the exact CSS, but the method is pretty simple. I would love to know if it works for you.
I'll also note that there are at least a few plugins that claim to let you assign header images on a per-page (and per-post, per-category, etc.) basis, but I have not tested any of these with a Genesis theme. So it's possible that you could get one of these to work: Unique Headers, Custom Header Images, WP Display Header (and I'm sure there are more).
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberThat is FANTASTIC -- I'm so happy to hear (and see) that you got it working! Good for you for keeping at it. And, seriously, remember this moment if (when) you feel overwhelmed by your own website, and things seem hard. You DID figure it out. That proves that you CAN figure things out.
Now, as for the issue of the image being taller than a line of text. One way to deal with this would be to put the image on its own line, so it appears below the post excerpt instead of on the same line as the last line of text.
If you insert a line-break tag right before the beginning of the link code, that will push the image to the next line.
Here's the beginning of the line of code (I won't reproduce the whole line, for simplicity and to avoid those pesky code-formatting problems):
return '<a class
If you insert a line-break tag, it will look like this:
return '<br /><a class
That will put the image on a line by itself, and by default it will appear at the beginning of the line (on the left side of the page). If you want it to appear on the right, possibly a more "natural" location for a Read More link, you can add the built-in WordPress class "alignright" to the image. Look for the beginning of the image tag in the code -- it looks like this:
<img src=
Add the class between "img" and "src" so you get this:
<img class="alignright" src=
I've put both of these small modifications into a copyable-and-pastable snippet on Github, which you should be able to see by visiting this link:
https://gist.github.com/wendycholbi/5393213
I hope this helps!
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberOkay, the forum keeps changing my code, even though I'm using the PHP shortcode to format it. I don't know why it's doing it. It keeps ADDING an anchor tag WITHIN the image tag, which is messing it up. So don't copy my code snippet above (now for some reason I can't even edit my post). I'm sorry about that.
Rahn and Dianna are on the right track, but if you copy-and-paste their code snippet, you will still get curly quotes and there's a weird HTML entity stuck in there.
My suggestion is to go back to the original Genesis code snippet from this page:
http://my.studiopress.com/snippets/post-excerpts/#content-more-link
Copy it (either directly into the Genesis --> Custom Code --> Custom Functions field, or into a text editor, not a word processor), and then replace:
[Continue Reading]
...with this line of HTML code (crossing my fingers that this formatting will work):
EDITED: Nope, there is no way I can get the code formatted right. Basically you need a correctly formatted valid link to your image, and I'm failing to give you one.
Let me know if you get anywhere with this. I can try to post a code snippet on one of my sites and then link to it, if you can't get a link to work.
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberLooks like there are some curly quotes causing issues (partly my fault if you copied-and-pasted my HTML above, because I didn't format it properly).
Try copying this code snippet (that I'll try to format correctly this time...) and overwriting your existing snippet:
/** Modify the WordPress read more link */ add_filter( 'the_content_more_link', 'custom_read_more_link' ); function custom_read_more_link() { return '<a class="more-link" href="' . get_permalink() . '"><img src="http://parentjob.com/wp-content/uploads/2013/04/read-more.png" alt="read more" title="Read more..." /></a>'; }
I got this snippet to work on my test site (showing your little heart "read more" image), so I'm confident it will work, if we can get past copy-and-paste-introduced issues.
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberOkay, that sounds like progress! Progress is good. Sounds like the code is working but the image URL isn't quite right.
Can you post a link to your site so I can see the red x in action?
And can you post your code snippet here so I can see what's happening with the URL?
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberTry the first snippet on this page: http://my.studiopress.com/snippets/post-excerpts/#content-more-link
In the snippet, replace [continue reading] with an HTML link to your image, with alt-tags identifying the image as Read More, like this: <img src="IMAGE-URL-HERE" alt="read more" title="Read more..." />
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberMake sure that you've updated to Genesis 1.9.2, and then after that, go to Dashboard --> Updates and look for a Prose update to version 1.5.2.
If you've updated to the latest Genesis (1.9.2) but you are still on Prose 1.5 or 1.5.1, you will have this CSS problem. Updating to Prose 1.5.2 will fix it. And the Prose 1.5.2 update doesn't become available/visible until after updating to Genesis 1.9.x, so you can't update the framework and the child theme simultaneously.
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
April 14, 2013 at 3:05 pm in reply to: Boxes / borders around content and sidebars in Prose theme #35466wendycholbiMemberI've heard a lot of good things about Dynamik -- thanks for the follow-up. I'm glad you found a solution!
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
wendycholbiMemberHmm. It looks like ordinary post content to me. Are you saying that when you edit a post, you can't see/edit that text in the post body?
I noticed that the most recent blog post doesn't include the RSS feed part, but the other blog posts do (so the text snippets aren't identical across all posts). This indicates to me that the snippets aren't being added by a plugin, but I could be wrong about that.
Do you have any plugins installed that allow you to add text snippets into posts? Possibilities include:
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
-
AuthorPosts