Adding Theme CSS to html page

RapidWeaver Classic Themes
1

Hi all.

I’m using Multitheme’s Lode theme, and was hoping to use an iFrame as a target for a LOT of links. I have 400 or more pages, and in an effort to reduce the legwork, I wanted to load a plain html page into a targeted iFrame when a link is clicked.

However, I have two major issues. The first is that I can’t get a js to automatically adjust the height of the iframe to work, no matter what I do. The second, and more important issue, is that the html pages in RW has zero CSS formatting applied, and even the theme css isn’t added.

This means each page loaded into the iframe has zero formatting, just plain-old text in Times (only standard inline tags work – etc). Needless to say, this looks terrible on the page, so is a none starter.

I’ve tried looking at the theme package, to see where / what CSS is called, and tried to put a few links on the html page (sidebar CSS / Head etc), but no joy. Nothing seems to work.

Has anyone had this issue? Has anyone had any luck getting theme CSS into a plain html RW page? Or can anyone think of a method that would prevent making 400+ pages manually in RW?

2

You can not apply CSS styling to content inside of an iFrame it’s a different scope.

3

As of RW8 (or RW7?) an HTML page type will not include a theme by default.

However the setting does still exist in the Page Inspector (Page Options tab, furthest right) to turn a theme back on again and apply it to the page:

39

As for responsive iFrames, historically they are difficult to do. Not all websites respond particularly well to being framed within another website.

There are some free jQuery plugins available that can do responsive iFrames, again of varying degrees of success.

I would personally be tempted to see if there are other methods of scraping the content or data you want. For example, if the pages on the other website come from a database, CSV file or CMS, there may be methods to simultaneously pull that same data into your website. And obvious performance gains of doing it that way, as opposed to pulling in entire webpages.

1 Like
4

Oh yes: missed that little tick box!

Yes, I’m having issue with the iFrame, although I’ve had it working very successfully with basic HTML content on other projects. I’m trying to introduce as little code / scripts as possible, but I think it’s going to be too big a task, so a rethink is probably in order.

5

Yes, I know how tricky getting css injected into iFrames is.]

I was talking about putting the CSS in the actual page that’s in the frame (I will be making and hosting those). That way, the text will be correctly pre-styled when it sits in the frame.

My problem is that I can’t see which css to grab from the them, as there are so many!

6

If you need to make and host the HTML pages, then what’s the benefit of doing it outside or RW and then having to pull then in to an iFrame? Why not dump the HTML into an HTML page (or stack)?

7

Time mainly. Pasting 400-500 bits of HTML code into separate HTML pages isn’t practicable for us. Not to mention it would swell our master file considerably. Plus, we can easily automate the creation of basic HTML pages, which could then be pipped into the RW site.

However, I’ve just found that this approach won’t enable us to provide direct links to author pages, so it’s back to the drawing board, I think.

I have managed to get the method to work, though, so I may use this for other projects / needs.

8

Wouldn’t you still need to have 400-500 RW pages and setup all of their meta tags, etc. for SEO?

You may want to look at a CMS solution that you can probably automate content creation. For something like this, I’d probably look seriously at Total CMS by @joeworkman.

Edit: We could help you find the necessary CSS to include on the pages, but I don’t think embedded iFrames are a very good solution for this. That’s why I shifted the focus a bit to how best to accomplish this.

1 Like
9

Fwiw, I purchased the Grab stack from Yuzool for a similar purpose - but not for a volume of 400-500 pages, so I don’t know if this solution would work for you.

See the Grab stack here: https://store.yuzool.com/item/grab-stack

10

If we could pull-in the data in the fashion I originally intended, then we would still need 400-500 files, but they could be easily constructed by us (automatically from our database, wrapping the content in HTML as needed), as the much of the content is already prepped, including meta.

This would be a huge time saver over adding individual RW pages, which would need to have all that meta data and html manually copied / pasted into separate RW pages.

I’ll keep looking, as it’s possible there’s a CMS system I could use for this purpose, but I’m not sure I want to add and pay for another ‘system’ just to do this part of the site. It’s likely we’ll just bite the bullet and dive into manual pages.

11

I’m not sure that would let us link to the content as we need. But it’s certainly something I can use elsewhere: I’ll take a deeper look.

12

I’m still not clear on how you envision pulling the 400-500 pages into a site with RW. At first, I thought these were actual pages and you didn’t want to move the content into RW. That sounds to me like you’d need to have 400-500 pages in RW (for navigation, etc.) with the same header/footer content in RW and a middle section that you’d pull in from your other system. Doing it like this, you’d need to have all the meta data in the RW pages, as the other HTML content would only be pulled into the body of the page.

Do you think you can do this without creating the 400-500 pages in RW? If so, can you mockup a few pages and post a test link? It would be easier to understand what you envision.

I’m reasonably confident we can find the relevant CSS you’d need to include in the included HTML to format it similar to the rest of the site. I don’t think the CSS for the included content is the complicated part of what you want to do.

13

Yes, I think firefighting whilst posting is a bad idea!

Well at the moment I don’t envisage it! It’s becoming too problematic, and taking too much time over other methods.

Originally, it wasn’t full pages, just partial HTML sections. The iframes missed the CSS styling of the parent page, but I managed to fix this. However, the method proved to be less than ideal for a number of reasons (SEO and linking are just two), despite being very effective from the end-user perspective.

After looking at it again, I considered using separate RW pages, but with the size of our database, that would require heavy copy / pasting, and a hefty RW master file to admin.

My next option was to create a full HTML page outside of RW. We can easily do this with our existing meta data, html, and edited body text (via scripting a FilemakerPro database export). But, again, I’d need to get the important theme / page elements from RW first: this was the bit I was initially having issues with, but in relate to the iFrame content (the partial HTML pages).

From our perspective, I think the best / quickest / lightest method is to create these html pages outside of RW using our automation, and simply link to them in the RW site. The pages don’t need to be in the site menu, so that’s not a problem. They’ll also have minimal styling.

I’ve had some progress getting the correct styles, so my next step is to generate a sample html page output from RW using our chosen theme and some sample content, then create a script to replace / insert the correct elements. This would get around the copy / paste hell.

Not sure if that clarified things or not?! I’m hoping to look at this today, so we’ll see how that goes!

14

It did clarify things, and I think you have a good handle on the drawbacks of some of the way to accomplish this.

I think you should be able to pull the top (header and nav) and bottom (footer) sections from a published page and use that HTML code in building your pages from FMP. Depending on where your generated pages go in the site, you may need to adjust the links to the CSS files. The only downside I see is needing to replace that HTML code and regenerate the pages from FMP if you change the top and bottom of your site. Although, you probably won’t need to do that very often.

Good luck.

15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.