MarketPress: MP page content loses all formatting in Headway theme

I've been working on a locally-hosted test site using MarketPress in Headway theme (all are current versions, including the new MP 2.2). I've recently come to realize that the MP page content formatting I've been seeing in Headway is not being styled with the normal/proper MP styles. In the hope that someone may have a quick fix for this, let me describe the problem:

Let's say I activate Twenty-Eleven theme, and ignore for this exercise the overall site formatting. If I do that, the content of the various MarketPress pages (both "standard" pages that appear in the WP Page list and those created on the fly, such as the "Track Your Order" page) is nicely formatted with borders, different font sizes, colors, boxes, etc, according to MP's CSS styles.

Now I activate Headway, and on "standard" pages I use a single pass-through Content leaf and nothing else. (On-the-fly created pages presumably have zero leafs, since they don't appear in any of the Visual Editor lists and are thus not editable in Headway.) If I do that, all (or in some cases, most) of the MP styling disappears from the MP page content. The content of the page is, in stark contrast to what it was in Twenty Eleven, just a bunch of unstyled text (and, in my case, a product thumbnail or two).

I don't understand how, or why, this happens. MP page content looks great in Twenty Eleven and terrible in Headway. To this relative novice, it appears that Headway in some fashion either fails to recognize MP styles or prevents MP CSS styles from taking effect. The MP style sheet is rather complex (to me, anyway), but, as a test, I was able to get one or two page content styles to work by rewriting the style so it started with Headway's standard custom style body.custom selector (and maybe one or two other tweaks). Is this normal? Is this what I need to do to get MP styles to work -- re-edit every MP style in its style sheet to conform to Headway's body.custom selector in custom CSS standard? Other plugins seem to pass through their styles no problem, so I am mystified why MP (apparently) doesn't.

Thanks to anyone who can provide an insight (and hopefully a simple fix) for this.

  • DavidM

    Hi Robert,

    I haven't come across anything like that in my own usage with the latest versions of MarketPress and Headway myself, but there's got to be some reason if you're seeing those types of visual issues.

    To help get an idea for what you're seeing, could you maybe post a screenshot of a MarketPress page in the Headway Visual Editor?

    Also to add, one of the great beauties of Headway is being able to use the Live CSS editor to easily make visual adjustments, even to MarketPress elements. I use that all the time to extensively customize the MarketPress display.

    Perhaps with a screenshot we can get some css fixes to sort this.

    Thanks,
    David

  • Robert

    David--

    Thanks for the reply. And for the tip about the Live CSS Editor. I'll give it a shot.

    But first, the issue at hand. I thought I had a small epiphany about this during the afternoon. But since then I'm much less sure I understand what's going on. Briefly, my thought was that MP uses shortcodes on its system pages, and Headway (by default, anyway) uses a Content leaf with Pass Through selected to display it. Would things be different, I wondered, if I removed the shortcode from the page and put it in an HTML/PHP leaf? But then I realized that MP creates a lot of pages that Headway doesn't even know about (Order Status, etc), and these aren't styled properly either. So it can't just be a problem with the leaf.

    As for screen shots: Posting images here is new to me, so bear with me if I fumble around. I've got a number of screen examples to show you, so maybe I'll divide them up among several posts (for all I know at this point, I'll be required to do that).

    Just a comment about the screen shots. I did take some of the Visual Editor for the MP system pages (ie, the pages that are listed in the WP Page list and that Headway can see and edit). But there's not much to see. MP just puts a shortcode on the page, and Headway uses a pass-through Content Leaf to display it. All you see in the Visual Editor is the shortcode. You need to actually generate a proper page to see what's going on. So that's what I did.

    I'll try to put the Visual Editor screen shots in this post. Wish me luck!

  • Robert

    Well, it's the weekend and I've continued to ponder what is going on here. As I look at MP content in Twenty Eleven, I have to wonder if *some* of the differences I see are simply the result of basic Twenty Eleven styling. But I find it hard to believe that *all*, or even most, of the differences are due to that. Is Twenty Eleven styled so skillfully that it can make MP's rather specialized Shipping Info and Shopping Cart pages, which look pretty grim in Headway, so attractive? I find that hard to believe.

    So I looked at some other MP pages, and compared them again in Headway and Twenty Eleven. At risk of flogging a dead horse (or making the forum server mad at me), I attach some screen shots in the next few posts for further perusal.

    In this post, I show the MP Category Archive page. The first is in Headway Visual Editor. I can't control the content in the Visual Editor (as far as I am aware), so it shows only a single product. In addition to the main content (the product), note also the unstyled shopping cart widget on the right. Second is a Category Archive page in Twenty Eleven. (Note that the shopping cart widget does not appear because I've put it in a leaf in Headway.)

  • Robert

    One final comment. In Twenty Eleven, I went into the MP folder and completely disabled marketpress.css. And nothing happened to the page styling. So it appears that all the styling I see is simply Twenty Eleven after all. I'm pretty surprised. Especially since this implies that I have a lot of work to do to make MP pages in Headway look as good as they do (with no work) in Twenty Eleven. Or am I still missing something?

  • Robert

    I thought I'd bump this up in case David missed my screen shots from over the weekend. Interested in your thoughts on what I've shown here, David.

    And I'm just wondering: The promo page for MarketPress says one of its big features is "beautiful preset CSS styles". As shown above, my standard MP Shopping Cart and Shipping Info (among other MP content) are basically unstyled and pretty unattractive. I've had to create CSS for essentially the entire content for these pages. Where are the "beautiful preset CSS styles" for the Shopping Cart, Shipping Info etc? Have I totally overlooked something? (Under MP>Store Settings>Presentation>Store Theme I have Classic turned on; but it seems to do little except style a few MP buttons.)

  • DavidM

    Hiya Robert,

    Really sorry I missed responding on this, and thanks for the screenshots, they definitely help to see what's occurring.

    So basically, those styles are actually due to the fact that Headway itself doesn't define styling for those by default. What you potentially could do is copy over portions of the stylesheet from Twenty Eleven and paste them in the Visual Editor in order get those styles in there.

    Just to reiterate, if you install MarketPress on a site that doesn't have much styling at all, perhaps even none, it'll basically look similar to those screenshots you posted. That is due to Headway's not defining styles itself, which actually is usually a good thing since you'd have to override any styles it defines with your own, ending up with 2 styles, meaning twice the page-load.

    Really, I think copying over Twenty Eleven's stylesheet might just do the trick, though it seems a bit odd!

    Hope that helps!

    -David

  • Robert

    David--

    Thanks for the reply. When I didn't hear back from you, I decided to try copying over Twenty Eleven's styles (as you later suggested). It's working pretty well, though it's a bit tedious to do and requires tweaks and modifications to work correctly in Headway.

    I still have to wonder, though, about MarketPress's promotion of its "beautiful preset CSS styles". If I have to copy Twenty Eleven's styles, or fix Headway's lack of styling, just what "beautiful presets" is MP talking about here? I realize that MP promotion is not your responsibility; I'm just throwing this out in the hopes that those who are responsible will either tone down the hype or clarify just what they're talking about. Under Headway, at any rate, MP does not look "beautiful" right out of the box, and it requires a great deal of work to make it look "beautiful". A serious effort to make the next iteration of MP look good right out of the box would not be amiss, I think.

  • Mason

    Hiya Robert,

    I suppose we should say 'beautiful out of the box with a WordPress theme'. I don't have a lot of experience with Headway personally, but I believe it's more of a theme builder. It provides you with a really nice way to create a theme, but it is starting you with a blank canvas.

    For any plugin that's providing a front-end display there's a balance between dictating the styling (the more you do so, the more themes will be broken) and providing minimal styling so the theme can take control (but needs more manual customization on minimal themes).

    Our thinking was that any WordPress theme should, at minimum, provide the basics that is included with the default theme. Products like Headway, Thesis, and even Genesis are awesome as they allow for rapid development, but they also stray far away from 'default' WordPress to work their magic. This means you'll always have a tension there when combining these products.

    Anyway, that's what we're to help with! And, hopefully, this is nearly sorted for ya now, but if you have any specific questions on some of the CSS bits, just let us know and we'll see what we can do.

    Thanks!