WordPress Page Duplicate Plugins do not duplicate CSS Styling

November 10, 2016 8:06 AM

Typically when I want to duplicate a page, I'll just copy/paste the code from the page I want to duplicate into the new page. Mission accomplished, everything looks/works as you'd anticipate. With this latest site though, when I do that not all of the CSS styling 'comes across' to the new page. It's minor, but my divs lose their background-color and borders. It's more aggravating than anything else.

The theme is one I've built using some software called Artisteer. I've used Artisteer to build dozens of sites and have never run into this issue. I'm not sure if the issue is with my theme, or WordPress.

I've tried it with several different pages and the result is the same. The divs lose their fill & border.

GAH!

It's almost as if there is css code unique to the page. But, I've never seen anything like that before.

I've tried several page-clone plugins and they all work just as if I'd copied / pasted the actual code.

What am I missing here?

Thank you.

posted by bricksNmortar to Computers & Internet (11 answers total)

Best answer: What do you mean by "copy/paste the code from the page...". What code and where are you copy/pasting it?

I'm happy to help.

You're working in WordPress, correct? I don't understand what you're describing about cloning and duplicating.

In-line CSS is certainly a thing. Some plugins and themes will add it to the HTML dynamically. It can be added as stand alone element definitions, or it can be added as style=".." to individual tags.

It sounds like you're not doing a "Vew Source" to have a look.
posted by humboldt32 at 9:42 AM on November 10, 2016

It has been a while since I tinkered with Wordpress themes but it is possible to make multiple page templates, and assign a template to the page. Also, you can make page-specific templates. Google for "Wordpress Template Hierarchy".
posted by IAr at 9:52 AM on November 10, 2016

Response by poster: "What do you mean by "copy/paste the code from the page...". What code and where are you copy/pasting it?"

In edit mode I can edit Visually, or by looking at code. I'm looking at the code & copying/pasting it. It is essentially the 'source' for the page I'm editing, minus all the WordPress gobbily-gook.
posted by bricksNmortar at 10:02 AM on November 10, 2016

Best answer: Are you sure there's no page specific styling for the first page? You can target a specific page pretty easily in CSS (the body tag normally has a class such as page-id-12 for example), so maybe those pages have been specifically styled?

It could be that the original page has a different template than the duplicated page as well

If you could provide a link to the pages in question it might help.
posted by backwards guitar at 1:21 PM on November 10, 2016

Best answer: Ok, so you're copy/pasting Page content, some of it being HTML and CSS. So something in that pasted content is calling a style sheet somewhere, but the location has been borked somehow.

If you can post a link it's easy enough to see by doing a little an Inspect console.

Edit:

Ah, the unique page identifier in a class name mentioned above is a likely culprit.
posted by humboldt32 at 1:48 PM on November 10, 2016

Response by poster: Here's an example.

original page - hidden-fastener-metal-roof-panels/

The copied / pasted version: DUPLICATED hidden-fastener-metal-roof-panels/

Here's a representative block of code from the start of the DIV. I can't see any kind of page identifier.

div class="art-content-layout-wrapper layout-item-2"
div class="art-content-layout layout-item-3"
div class="art-content-layout-row"
div class="art-layout-cell layout-item-4" style="width: 33%;"

I wouldn't think that copying this div code would change the styling.. but as you can see from the two links above, the copied page loses the background, border, padding, and margin. W.T.F. am I missing here?
posted by bricksNmortar at 2:33 PM on November 10, 2016

Best answer: Did you already take a peek under the hood with Chrome web inspector?

I'm seeing that in the unduplicated version, styles are coming from line 56 (index) and that a style is applied to .art-content .post-1113 only in the original. So something is tippy canoe.

As to why, I have no idea. It doesn't make sense of you're just straight up copy pasting. But the post ID might make a difference.

Temporary fix until you figure it out might be to install Duplicate Post. YMMV, but it could solve your problem short term.
posted by OlivesAndTurkishCoffee at 4:34 PM on November 10, 2016

Best answer: Something is writing in-line css to the HTML of the good page. It's lines 56 - 67.

Do you have something like OH Add Script or similar adding custom code to the good page, maybe?
posted by humboldt32 at 7:17 PM on November 10, 2016

Response by poster: Thanks so much for your insights, it's helped. A least I know now what is going on. I'm not sure why though.

I tried the Duplicate Post plugin, and other similar ones, to no success.

I can just copy the inline CSS on the duplicated pages and hopefully get things right.

Thanks again for your other sets of eyes!
posted by bricksNmortar at 3:13 AM on November 11, 2016

Best answer: Okay, if you're following, or perhaps come across this post IN THE FUTURE.

The solution I ended up with was to copy the custom CSS from the source page and then add it to the duplicated page in the form of an HTML snippet, wrapped of course with < style > and < /style >.

I also removed from the source CSS the post ID / page ID identifier so that, for instance, the 3-column layout CSS is now generic and can be used on any page wher eI want to replicate the nice-looking 3-column layout.
posted by bricksNmortar at 6:49 AM on November 11, 2016

Best answer: Well done.
posted by humboldt32 at 9:11 AM on November 11, 2016