Show preview of an iframe live instead of the bootstrap page.

[tijj]

Hello,

Is there a tweak to show the changes live on an iframe? Example - http://getuikit.com/docs/customizer.html

I am building a Joomla theme using your script. I cannot load the main index.php with the customiser options so need to show the actual site in an iframe while making the changes.

Thanks

[ilikeprograms]

Hmmm, I will have to have a think about this one. I have a few ideas of how I could get this to work, could you give a bit more information, for example about how you loading cluckles etc. Then I might be able to think of a solution for you.

I havent done much for a while on cluckles, as it has been the holidays and my grandad dies, but I will start working on it again soon.

So im guessing you want the sidebar (where you can choose the colors etc) on the left side, then an iframe with the frontend of Joomla on the side?

Then for it to change the theme in the iframe right?

[tijj]

Thanks for the response. Yes - want to implement a light weight version of the uikit customiser - http://getuikit.com/docs/customizer.html Another example - http://bootstrap-live-customizer.com/ Sidebar on the left and the iframe (joomla front end on the right). This will only be accessed by the administrators.

I will be loading chuckles using a button from the administrator of Joomla template manager. This button will open the customizer and allow users to make changes and see whats happening to the theme. They can then click SAVE which will then write the css file for in the /templates/css/theme.css file. The front end will never know about the less or customizer because all it reads will be theme.css.

I sell Joomla memberships so I will be glad to make some donations from my profit. (I am serious :) -

Thanks

[ilikeprograms]

Hmmm yeah that sounds about right :)

I designed it so it can use iframes, but the idea of more that you load the whole thing in an iframe, not just the section on the right hand side. I dont think it would be much more work to get it to do what you need.

I will have to have a think about how you could do it.

How far have you gotten so far? If I know whay you have done I might be able to get an idea of how you think it should work, then we can figure it out :)

Oh an btw, thanks for trying out Cluckles :)

[tijj]

Thanks. This is how I am planning to do it. ---php page start ---

-- code for left side bar -- -- Will contain all the sections for the boostrap based theme --- --- Jumbotron -- --Fields--- --- Color-- --More Fields--- --- End of Sidebar ---

-- Start of iframe -- --- Load the Joomla page -- -- Code will be like this and will ensure that the user can see any Joomla front end page -- -- ifrme id="cm-theme-preview" src= ?ph p ech o $this['system']->url ? -- /iframe-- ---- -- End of Iframe --

-- End of customiser page --

This is a general idea of what I am trying to do. I am currently getting the sidebar and the iframe ready.

[tijj]

Hi, Can you please send me the iframe code that you already have? Thank you !!

[ilikeprograms]

The "iframe" code I already have is the files in the Docs folder, I think there are instructions in the README on how to generate it into what I upload to the website.

However I dont think that will do what you need (by all means take a look, I may be wrong). I may have some time to look at getting a solution for you this weekend.

[ilikeprograms]

Hey, Have been working on some changes tonight. I'm working what you want to do into the next release. Once I have it working I could send you a zip of the build, or you could wait for the release version.

It's a work in progress so it might still be a week or two.

[tijj]

Thanks for your hard work. I have been able to make it work by doing the following. I would love to use chuckles if we can achieve this the simplest way. This is what I did:

1. I downloaded https://github.com/uikit/uikit and then moved it to my localhost
2. I then just navigated to the customizer.html on my localhost which looks like this - http://getuikit.com/docs/customizer.html
3. As you see- The iframe is on the right and less changes on the left.

I am NOT yet able to apply this to php in Joomla backend because Joomla does not allow me to embed iframe in the admin screen and shows an access forbidden error.

Thanks for all your help. If chuckles can do this, I am sure it will be simpler that what uikit has done but is definitely a good idea to look at uikit.

Thanks

[ilikeprograms]

Hmmm, I have used cluckles primarily to customise Twitter bootstrap, so haven't officially looked at supporting UiKit yet.

If I can get the frame stuff working I suppose I might be able to look into adding support for UiKit, but that would take a while!

So did you just try to use or something to try to embed joomla locally ?

Sent from my iPhone

On 16 Feb 2015, at 01:55, tijj [email protected] wrote:

Thanks for your hard work. I have been able to make it work by doing the following. I would love to use chuckles if we can achieve this the simplest way. This is what I did:

1. I downloaded https://github.com/uikit/uikit and then moved it to my localhost
2. I then just navigated to the customizer.html on my localhost which looks like this - http://getuikit.com/docs/customizer.html
3. As you see- The iframe is on the right and less changes on the left.

I am NOT yet able to apply this to php in Joomla backend because Joomla does not allow me to embed iframe in the admin screen and shows an access forbidden error.

Thanks for all your help. If chuckles can do this, I am sure it will be simpler that what uikit has done but is definitely a good idea to look at uikit.

Thanks

— Reply to this email directly or view it on GitHub.

[tijj]

Hi - I am not trying to customize uikit. I used uikit customizer to customize bootstrap. So - I am not requesting you to support Uikit. Please dont waste your time in doing that. All I am stuck with now is transfering my working html based customizer to Joomla admin's php code.

In html, I just used this "/" instead of "localhost/index.php" and it works - Shows Joomla site in the iframe. The way they(uikit) do it is they have a jquery file called _test.js which as code to pull push less variables to the iframe.

Thanks