0
Welcome Guest! Login
0 items Join Now

SOLVED Gantry5, g-grid, JCE and preview

  • SOLVED Gantry5, g-grid, JCE and preview

    Posted 6 years 4 months ago
    • Hi,

      I have one question regarding JCE, previewing an article and g-grid.

      I've made templates for JCE like
      <div class="g-grid">
      	<div class="g-block left size-50">
      		<div class="g-content">
      			<figure>
      				<a href="images/artikel/verdecke/verdeckbeispiele/bayliner_265/thumbnails/thumbnails/thumb_edelstahlgestaenge_bayliner_02.jpg" target="_blank" data-rokbox="1"><img src="http://placehold.it/400x300" alt="" /></a>
      				<figcaption style="text-align: center;">Bildunterschrift</figcaption>
      			</figure>
      		</div>
      	</div>
      	<div class="g-block size-50">
      		<div class="g-content">
      			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
      			<p>&nbsp;</p>			
      		</div>
      	</div>
      </div>

      which I drop into articles and edit them.

      However within the JCE editor I don't get a good preview, the editor window looks like this:

      This image is hidden for guests.
      Please log in or register to see it.



      Is there a possibility to get a better preview inside JCE with the g-block next to each other instead of above and beyond each other?

      Mabye loading a css file inside the JCE?

      Thanks for helping in advance,
      Björn
    • Last Edit: 6 years 4 months ago by Björn Hallier.
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 21542
    • Thanks: 3086
    • messin' with stuff

    Re: SOLVED Gantry5, g-grid, JCE and preview

    Posted 6 years 4 months ago
    • I'm not familiar with JCE and it's Preview feature so you'd have to ask the Plugin dev about that... but basically, the CSS Gantry uses on the Frontend isn't available on the backend for the custom G-Grid stuff
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
  • Re: SOLVED Gantry5, g-grid, JCE and preview

    Posted 6 years 4 months ago
    • The solution is quite simple: just copy the template's css files inside the "custom css field" of JCE.



      This image is hidden for guests.
      Please log in or register to see it.




      Important: after each line add a comma (which I forgot in the first run).

      After that you get a nice grid preview inside JCE.


      This image is hidden for guests.
      Please log in or register to see it.



      Maybe this will helps others since you can directly see the grids and edit them.

      I do not understand why there is no FAQ section here in the forum since 80-90% of all topics are always the same (css) questions over and over again.
      This would help a lot of people and maybe could also be a part of the normal gantry documentation (last time I forgot how to reach a certain page via itemid - very time consuming to find it again).
    • Last Edit: 6 years 4 months ago by Björn Hallier.
    • The following users have thanked you: Matt

    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 21542
    • Thanks: 3086
    • messin' with stuff

    Re: SOLVED Gantry5, g-grid, JCE and preview

    Posted 6 years 4 months ago
    • Documenting JCE stuff would not likely ever be part of our documentation, but ALL of our documentations is hosted on GitHub... every page has an "Edit This Page" link where you can submit revisions that will be reviewed fairly quickly and considered for inclusion :) Thank you for posting your solution here!
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:

Time to create page: 0.041 seconds