[briansteeleca]

Cool, thanks for mentioning that EZEarache, it made my night even better. ☺

[briansteeleca]

Here's another starting point if you prefer not to use plugins...

The first step is to back up your database. (You may as well back up all your files as well.) The database can usually be backed up with phpMyAdmin in your web host's control panel, or you can do it with a separate app. On a Mac, I use Sequel Pro, but of course there are Window's apps that will do the job just as well. It's usually as simple as logging into your database server, choosing the database that you want to back up, and doing a File > Export, typically exporting as SQL with the default settings.

Then I use an awesome tool called Database Search And Replace Script In Php. I won't go into details on how to use it because they've already done that on their page. I've used it hundreds of times and never had a problem.

Important: After updating your database with the new domain name, always go into your WordPress admin panel, then go to Settings > Permalinks (I recommend setting it to Post name) and click the Save button to clear the cache, otherwise you'll rip your hair out trying to figure out why your links aren't working properly!

As long as you back things up first and know things can be restored to the initial state, you don't have to worry about doing something wrong.

[briansteeleca]

That's taking you to the admin login, so if you know your username and password you should be able to log in. If you don't know your password, you can click the Lost your password? link, enter your email address and reset it. If you don't remember your username, I'm afraid I can't help you get back in.

[briansteeleca]

It looks like a problem with the plugin. When the first thumbnail caption is 3 lines, and the one beside it is less than 3 lines, the plugin is setting a min-height property that is larger that the one to the right and pushing the other image down. I'm not sure why it's not doing that on the first row though.

A quick and dirty fix may be to force a min-height on all of the thumbnail panels like so in your child theme's style.css:

.nrelate_default .nr_panel {
  min-height: 178px !important;
}

Not perfect, because the rows won't resize with the captions, but it's better than what you're seeing now. The other option would be to use jQuery, but that's more involved, and it may compete with how the plugin is already doing it.

[briansteeleca]

Do you want your navigation to sit right under your header like the Outreach Pro demo? If so, they've used the Primary Navigation Menu location (under Menus > Manage Locations) to do that.

I'm not sure if that helps but it may be helpful to have a look at the Outreach Pro Theme Setup doc if you haven't already.

[briansteeleca]

Try this: FTP into your site again with Filezilla, then go into the /home3/kumtesau/public_html/wp-content/themes/ folder, find the news-pro folder, and rename it to news-pro-broken.

WordPress will see that the theme is missing and revert to a default theme. You should now be able to log into your WordPress admin panel. Once logged in, Appearance > Themes, click on the Add New button, then the Upload Theme button, upload the zip file for the News Pro theme, and click the Install Now button.

That will install a fresh version of your theme, and as long as you haven't touched your database, it should still be in tact.

[briansteeleca]

One thing to keep in mind when you're using z-index is that the element with z-index must have positioning to work. Most of the time you can just add position: relative to make it work.

On your site, the stacking order looks correct now, but your .logo div needs background-color: #fff if you don't want the navigation bar to show through.

[briansteeleca]

I'm sorry Dana, but I just noticed Nick's last comment about his plugin:

Thanks for trying it out but I’m afraid that there isn’t a way to use it for the HTML5 themes right now.

So it probably won't work with your theme.

[briansteeleca]

There's a plugin called Genesis Responsive Header that may solve your problem.

And here's a video called Responsive Header in WordPress (Genesis Framework) that explains how to use it.

[briansteeleca]

I can see a problem with your classic loop: the variable $item doesn't exist.

To get your properties I think you can use get_post_meta():

<?php
$property_price = get_post_meta($post->ID, 'property_price', true);
?>
<div class="property_price"><?php echo $property_price; ?></div>

[briansteeleca]

I'm hoping someone can help me with this:

In the Parallax Pro demo, I'd like to display the Pricing Table as a custom post type (with custom fields) rather than HTML markup in a text widget, but I can't figure out how to make it work.

This is what I tried: in front-page.php, create a custom loop, loop through the posts, and if the post type is plan, store the markup for the pricing table in a variable called $pricing_table_markup.

Then, modify the genesis_widget_area like so:

genesis_widget_area( 'home-section-1', array(
	'before' => '<div class="home-odd home-section-1 widget-area"><div class="wrap">',
	'after'  => $pricing_table_markup . '</div></div>',
) );

(Repeat for all 5 home-sections...)

This doesn't work because there's no relationship between the condition in my custom loop ( if ( get_post_type( $post ) == 'plan') {...} ) and the genesis_widget_areas. Because $pricing_table_markup gets populated once in the loop, it shows up in every section as you can see here:

http://parallaxpro.briansteele.ca/

I only want to output the pricing table code in the widget area that's set to display the custom post type plan. Can someone point me in the right direction?

[briansteeleca]

Ha, that's interesting - it sounds like it gets the message across though.

I like the idea of a custom post type so that it's all in one place if that's possible. Using the Parallax Pro demo home page as an example, the page is fairly simple, so the Featured Post widget with a Homepage Section category should work for most sections. (I suppose the posts can be under Posts or in a Homepage Section custom post type to keep it separate from a blog.)

But the pricing table section seems to be an exception - I'm thinking it may need its own custom post type (Pricing Table) with custom fields for the title and features for each plan. I can update front_page.php to output the pricing table markup if it exists, and it can be slotted into the appropriate Home Section widget with the Genesis Sandbox Featured Content Widget.

It's not exactly all in one place because they'll have to use two separate post types for the homepage: Homepage Section and Pricing Table, but I think that should be fairly easy to understand, and there's no HTML for the user to contend with.

Does that make sense, or am I overcomplicating it?

[briansteeleca]

If I understand correctly, when you add your image to a post, you will see Attachment Display Settings > Link To - you can specify a relative custom URL that links to your post, for example:

/path-to-your-post/

If you've already added your image, click on your image in the post and then click on the edit icon (pencil) so you can change the Display Settings to your custom URL.

Also, if you haven't already, make sure that in Settings > Permalinks your choose Post name and save. In your post, you can find the Permalink path to your post directly under the title.

This is standard WordPress functionality and not specific to Genesis.

[briansteeleca]

Thanks for sharing your strategies uwitness, that's exactly what I'm looking for.

I like the idea of the user being able to use the Visual editor, so those widgets with special pages sounds like a good approach.

In the past, I've found myself popping into the Text tab to add some wrappers and classes for styling, but I'm always concerned they may inadvertently get stripped out by someone using the visual editor since they aren't visible. Maybe shortcodes can solve that problem?

I have tried the Black Studio Widget, but don't have a lot of experience with it. It looks good, but it's interesting to hear that it pushed down your content. Someone on the forum just had a problem with a large gap on their site content and it turned out to be a bunch of <p>&nbsp;</p> that were generated from TinyMCE Widget (or maybe they had hit return a bunch of times without noticing). Either way, it sounds like it may be something to watch out for.

[briansteeleca]

No problem Lauren, tag team! 😉

[briansteeleca]

Good news, glad I could help.

[briansteeleca]

The easiest way is to fix this is with CSS.

In your child theme, open style.css with a text editor, and search for this:

.beautiful .site-header-banner

Now, add display: none;

So your rule should end up looking like this:

.beautiful .site-header-banner {
    height: 200px;
    display: none;
}

That should remove the gap between the header and welcome message.

The second gap seems to be in the widget that displays your Welcome message. It looks like you're using Black Studio TinyMCE Widget, so in that widget, click on the HTML tab (top right) and remove any <p>&nbsp;</p> that you see at the bottom of the message.

That should remove the gap between welcome and the first post.

[briansteeleca]

Jenny, I understand how Ren could interpret your comment as being "snippy", but I don't believe that was your intent. Sometimes there are misunderstandings when we communicate in this fashion, so why don't we just move on...

Ren is correct, this sounds like you have an HTML problem rather than CSS. Possibly a set of HTML tags (http://en.wikipedia.org/wiki/HTML_element) that aren't closed properly. The bottom line: something is outputting some bad HTML code. Unfortunately, these sorts of problems can be difficult to troubleshoot.

A good place to start is type your domain into the W3C Markup Validation Service (http://validator.w3.org/) and see what errors are found in your HTML document. In your case, there's a lot, but a single markup error such as this can cascade into hundreds. Something is outputting bad HTML, so now is the difficult task of figuring out what it is.

google-site-verification shows up early in often in the report, so that's probably a good first place to look. Is there a plugin that adds that code? Looking at your HTML source code, this may offer a clue:

<!-- All in One Webmaster plugin by Crunchify.com -->

So I'd suggest disabling that plugin, and see if that fixes the problem. If not, then start disabling other plugins one by one. If it's still there, you're probably going to need to get some help outside of this forum.

[briansteeleca]

Thanks for the reply, Lauren, those widgets sound like a good start then. I'd like to take the Parallax Pro example above and figure out a way to make it editable in a way that doesn't expose markup to the user. I'm thinking custom fields may be the way to go.

I'll take a crack at it next week, but if anyone else would like to share their strategies, I'd be very interested in hearing them. 🙂

[briansteeleca]

Hi Dana,

It would be easiest if your header image used an img tag with the width set to 100% and the height set to auto - then it would resize the same as your slider, but it would still probably look to small on a phone.

Working with the structure you already have, I'd recommend that you use 3 different background images: one for 768 and below, one for above 768 and below 1024, and your current image for 1024 and above.

In style.css, you have two media query breakpoints that you need to deal with:

@media only screen and (max-width: 1023px) { }
@media only screen and (max-width: 768px) { }

In each, set your appropriate background image and set a new min-height (or height) to accommodate the image. An aside: you should design your images with room on each side so they'll still look good at the smallest width within each breakpoint.

After doing that, you'll want to remove the following from the max-width 768px breakpoint (because you don't want the background to resize):

background-size: contain !important;

Sorry it isn't easier, but I think that should accomplish what you want.

[Author]

Posts