dang!!...where was that guide now??
-
-
- Vee Burris
- Newbie
- Posts: 9
- Thanks: 0
-
Hello Dan and thank you very much for your time, a friend was actually able to get the top right menu's to show up on the front page thanks for that, it turns out the top right menu on the front page and the one on the rest of the pages were different as one was coming from the ambrosia demo, and the other from the ambrosia default, anyways that's all sorted out, but if I could take advantage of your help I will supply the user credentials to see if you can please let me know where I can find the Horizontal menu that appears on the 404 page of the template as I see if you go to the homepage and in the address bar enter/404 after the initial link so therecoverysource.org/404 you can take a look at the 404 page, here the top right menu that appears there is still the default one that comes with the ambrosia template and I cannot seem to find it. If you could help with that I would greatly appreciate it.
Thank you Sir, let me know if you have any questions.
Edit please disregard the above, thank you Dan I seem to have found the 404 page top-right menu and am editing it now.
thanks - Last Edit: 9 years 2 months ago by Vee Burris.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
This is a reference list of the particles that come bundled with our Gantry 5 templates.
This is a reference list of the particles that come bundled with our Gantry 5 templates.
Topaz- Accordion
- Block Content
- BookBlock
- Branding
- Copyright
- Custom HTML
- Date
- Grid Content
- Grid Statistic
- Image Grid
- Info List
- Joomla Articles
- Logo / Image
- Menu
- Mobile Menu
- Newsletter
- OffSidebar Toggle
- Owl Carousel
- Popup Module
- Pricing Table
- Simple Content
- Simple Counter
- Simple Menu
- Social
- To Top
- Accordion
Interstellar- accordion
- blockcontent
- branding
- contenttabs
- copyright
- customhtml
- date
- flexslider
- gridcontent
- gridstatistic
- imagegrid
- infolist
- logo/image
- menu
- mobilemenu
- mosaicgrid
- newsletter
- newsslider
- owlcarousel
- popupmodule
- pricingtable
- simplecontent
- simplecounter
- social
- totop
Photon- accordion
- blockcontent
- branding
- contenttabs
- copyright
- customhtml
- date
- flexslider
- gridcontent
- gridstatistic
- imagegrid
- infolist
- logo/image
- menu
- mobilemenu
- mosaicgrid
- newsletter
- newsslider
- owlcarousel
- popupmodule
- pricingtable
- simplecontent
- simplecounter
- social
- totop
Galatea- blockcontent
- branding
- copyright
- customhtml
- date
- flexslider
- gridstatistic
- imagegrid
- infolist
- logo/image
- menu
- mobilemenu
- mosaicgrid
- newsletter
- offsidebartoggle
- owlcarousel
- popupmodule
- pricingtable
- simplecounter
- social
- totop
Antares- animatedblock
- blockcontent
- branding
- contact
- contentlist
- contenttabs
- copyright
- customhtml
- date
- flexslider
- gridcontent
- gridpromogallery
- horizontalmenu
- imagegrid
- infolist
- logo/image
- menu
- mobilemenu
- newsletter
- overlaytoggle
- popupgrid
- popupmodule
- pricingtable
- promocontent
- promoimage
- simplecounter
- social
- testimonial
- totop
Xenon- blockcontent
- branding
- chartist
- contact
- contentlist
- copyright
- customhtml
- date
- flexslider
- gridcontent
- horizontalmenu
- imagegrid
- infolist
- logo/image
- menu
- mobilemenu
- newsletter
- newsslider
- newsticker
- overlaytoggle
- popupgrid
- popupmodule
- pricingtable
- promocontent
- promoimage
- simplecounter
- social
- testimonial
- totop
Isotope- blockcontent
- branding
- contact
- contentlist
- copyright
- customhtml
- date
- flexslider
- flippingcontent
- gridcontent
- horizontalmenu
- imagegrid
- infolist
- logo/image
- menu
- mobilemenu
- newsletter
- overlaytoggle
- popupgrid
- promocontent
- promoimage
- simplecounter
- social
- testimonial
- totop
Kraken- blockcontent
- branding
- contact
- contentlist
- copyright
- customhtml
- date
- gridcontent
- gridstatistic
- horizontalmenu
- iconmenu
- imagegrid
- infolist
- joomlaarticles
- logo/image
- menu
- mobilemenu
- newsletter
- promoimage
- sidemenu
- simplecounter
- social
- swiper
- totop
Requiem- animatedblock
- blockcontent
- branding
- contact
- contentlist
- copyright
- customhtml
- date
- gridcontent
- gridpromogallery
- gridstatistic
- horizontalmenu
- iconmenu
- imagegrid
- infolist
- logo/image
- menu
- mobilemenu
- newsletter
- promocontent
- promoimage
- simplecounter
- social
- testimonial
- totop
Salient- animatedblock
- blockcontent
- branding
- contact
- contentlist
- copyright
- customhtml
- date
- horizontalmenu
- imagegrid
- infolist
- logo/image
- menu
- mobilemenu
- newsletter
- promocontent
- promoimage
- simplecounter
- social
- testimonial
- totop
Ambrosia- branding
- contact
- contentlist
- copyright
- customhtml
- date
- horizontalmenu
- imagegrid
- infolist
- logo/image
- menu
- mobilemenu
- newsletter
- promoimage
- simplecounter
- social
- tabimage
- totop
Ethereal- blogcontent
- branding
- contact
- contentlist
- copyright
- customhtml
- date
- etherealblock
- horizontalmenu
- iconheadline
- imageblock
- imagegrid
- imageoverlay
- infolist
- logo/image
- menu
- mobilemenu
- newsletter
- numberheadline
- promoimage
- simplecounter
- slideshow
- social
- swiper
- totop
Callisto- branding
- contact
- contentlist
- copyright
- customhtml
- date
- imagegrid
- infolist
- logo/image
- menu
- mobilemenu
- newsletter
- promoimage
- simplecounter
- social
- totop
- Last Edit: 8 years 8 months ago by DanG.
The following users have thanked you: deiahil
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Amanda Doane wrote:
This is where I am getting lost: the contact.html.twig file I need to edit does not match up (well enough for me to figure it out) with these instructions.
Please see the guide AMP Series - 5-AMP Series - Contact Map particle
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Vee Burris wrote:
...see if you can please let me know where I can find the Horizontal menu that appears on the 404 page of the template as I see if you go to the homepage and in the address bar enter/404 after the initial link so therecoverysource.org/404 you can take a look at the 404 page, here the top right menu that appears there is still the default one that comes with the ambrosia template and I cannot seem to find it.
Okay update your old version to Gantry 5.2.3. Then go to " Customizing the Error Page " and it will explain how to get to the Error Outline and then make your changes to the Horizontal Menu particle.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
This table shows how module class suffix's, Gantry 5 CSS classes and Gantry 5 Block variations work:
CSS selector element pathing CSS selector appears here Joomla Module-Manager [Some g-modulePosition] module class suffix ->> This image is hidden for guests.
Please log in or register to see it.<div class="moduletable dang-mcs"> Gantry 5 Particle [some Particle]->> Particle TAB ->> CSS Class ->> This image is hidden for guests.
Please log in or register to see it.<div class="g-[some Particle] dang-CSS-Class"> Gantry 5 Particle [Some g-modulePosition] ->> Block TAB ->> CSS ID ->> This image is hidden for guests.
Please log in or register to see it.<div id="dang-CSS-id" class="g-block"> Gantry 5 Particle [Some g-modulePosition] ->> Block TAB ->> CSS Classes ->> This image is hidden for guests.
Please log in or register to see it.<div id="dang-CSS-id" class="g-block dang-Block-CSS-Classes"> Gantry 5 Particle [Some g-modulePosition] ->> Block TAB ->> Variations (Box Orange)->> This image is hidden for guests.
Please log in or register to see it.<div class="g-block box-orange dang-Block-CSS-Classes"> - Last Edit: 9 years 1 month ago by DanG.
-
The following users have thanked you: oj09
-
-
-
- djaver
- Newbie
- Posts: 12
- Thanks: 0
-
Hi,
Thank you for your Tutorials.
Is this Info List AMP modification still valid today? I noticed the screen shots for this AMP only, tell me "You are not authorized to see this attachment" even though Im logged in and can see all the other AMP screenshots on the same page.
I attempted to implement the Info List particle option that enables a new Target field.
When I made the changes to the custom yaml and twig override files, and went back to the particle I received a "server error 500" popup. So I thought clearing the cache may fix it, it did not. After refreshing my browser I could not access the frontend or backend of the site. Just a white screen and "waiting for page" to load....and it eventually caused my IIS server to completely hang for all my web sites, and began queing up many worker processes on the server. I had to completely restart the server. I never had a minor code change hang my server like that; but then again I am new to TWIG and YAML files.
The code modifications even without the images seemed pretty straight forward, but obviously something went wrong. So I went ahead and removed the custom particles, restarted IIS and now I have my site back to normal.
BUT I really would like to implement this target option if this modification is still valid. Maybe I can view the screens shots for this AMP to see if I did something wrong?
I have the Callisto template (which was initially installed using RocketLauncher about 6 months ago). Are Rocket Launched sites just as stable? Are they not recommended for Production use? Could that be causing this issue?
Thank you for your assistance. - Last Edit: 9 years 1 month ago by djaver.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
djaver wrote:
Hi,
Thank you for your Tutorials.
Is this Info List AMP modification still valid today? I noticed the screen shots for this AMP only, tell me "You are not authorized to see this attachment" even though Im logged in and can see all the other AMP screenshots on the same page.
THERY ARE BACK UP - 2-AMP Series - Info List particle
This image is hidden for guests.
Please log in or register to see it.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
In Gantry 4 we have some responsive grid classes that can be used to create responsive custom widths for your content.
However these classes didn't get migrated to Gantry 5 so this is my version of them.
When using these classes, create your HTML code for a gantry-width block, then set the percentage of the row that block should use.
You repeat this process until the accumulated total of your blocks is equal to a 100% for any given row.
This is the basic structure of the gantry-width blocks:
This image is hidden for guests.
Please log in or register to see it.
In Mobile view, these blocks will stack on top of each other while in Tablet or Desktop view, these blocks will scale responsively.
If you want some spacing or a margin between your blocks, use the gantry-width spacer class.
Gantry 4 class name Gantry 5 class name gantry-row g-row gantry-width-container g-width-container gantry-width-%% g-width-%% gantry-width-spacer g-width-spacer
The available custom widths are .g-width-10, .g-width-15, .g-width-20, .g-width-25, .g-width-30, .g-width-33, .g-width-40, .g-width-50, .g-width-60, .g-width-66, .g-width-70, .g-width-75, .g-width-80, .g-width-90.
Here are some examples along with the code that created them.
EXAMPLE 1
This image is hidden for guests.
Please log in or register to see it.
Here we use our Custom Gantry-Widths to create a one row/four column pricing table.
<div class="g-width-spacer"> <p class="nomarginbottom">All plans come with awesome support by email and phone. There is no hidden fee!</p> </div> <div class="g-width-container"> <!-- Column1 - Basic --> <div class="g-width-25"> <ul class="rt-table"> <li class="rt-table-title">Basic</li> <li class="rt-table-price">$28</li> <li class="rt-table-description">Globally incubate standards compliant channels</li> <li class="rt-table-item">5GB Storage</li> <li class="rt-table-item">10 Users</li> <li class="rt-table-item">20 Emails</li> <li class="rt-table-cta-button"><a class="readon" href="http://www.rockettheme.com/joomla/templates/osmosis">Sign Up</a></li> </ul> </div> <!-- Column2 - Standard --> <div class="g-width-25"> <ul class="rt-table"> <li class="rt-table-title">Standard</li> <li class="rt-table-price">$58</li> <li class="rt-table-description">Globally incubate standards compliant channels</li> <li class="rt-table-item">25GB Storage</li> <li class="rt-table-item">20 Users</li> <li class="rt-table-item">30 Emails</li> <li class="rt-table-cta-button"><a class="readon" href="http://www.rockettheme.com/joomla/templates/osmosis">Sign Up</a></li> </ul> </div> <!-- Column3 - Titanium --> <div class="g-width-25"> <ul class="rt-table"> <li class="rt-table-title">Titanium</li> <li class="rt-table-price">$88</li> <li class="rt-table-description">Globally incubate standards compliant channels</li> <li class="rt-table-item">50GB Storage</li> <li class="rt-table-item">30 Users</li> <li class="rt-table-item">40 Emails</li> <li class="rt-table-cta-button"><a class="readon" href="http://www.rockettheme.com/joomla/templates/osmosis">Sign Up</a></li> </ul> </div> <!-- Column4 - Platinum --> <div class="g-width-25"> <ul class="rt-table rt-table-last-col"> <li class="rt-table-title">Platinum</li> <li class="rt-table-price">$288</li> <li class="rt-table-description">Globally incubate standards compliant channels</li> <li class="rt-table-item">500GB Storage</li> <li class="rt-table-item">100 Users</li> <li class="rt-table-item">200 Emails</li> <li class="rt-table-cta-button"><a class="readon" href="http://www.rockettheme.com/joomla/templates/osmosis">Sign Up</a></li> </ul> </div> </div> <div class="clear"></div>
EXAMPLE 2
This image is hidden for guests.
Please log in or register to see it.
This is a straight forward example of a one row/four column presentation of alternating text content and images.
<div class="g-width-spacer"> <p>Free <strong>10 days trial</strong> on all plans. No credit card needed! Need a bigger plan? <a href="http://www.rockettheme.com/joomla/templates/osmosis">View Professional Plan</a>.</p> </div> <div class="g-row"> <div class="g-width-container"> <!-- Row1 Column1 - Text --> <div class="g-width-25"> <div class="g-width-spacer"> <a href="#">Dropdown Menu</a> <p>A Dropdown Menu system, with inline icons, multiple columns and much more.</p> <p> <a href="#" class="button button-3 button-small">Learn More</a> </p> </div> </div> <!-- Row1 Column2 - Image --> <div class="g-width-25"> <div class="g-width-spacer"> <span class="rt-image"> <img src="http://localhost:8081/Xenon/images/rocketlauncher/features/overview/img-04.jpg" alt="image"> </span> </div> </div> <!-- Row1 Column3 - Text --> <div class="g-width-25"> <div class="g-width-spacer"> <a href="#">Positions</a> <p>Unlimited positions, with drag and drop add, delete, move and resize capabilities.</p> <p> <a href="#" class="button button-3 button-small">Learn More</a> </p> </div> </div> <!-- Row1 Column4 - Image --> <div class="g-width-25"> <div class="g-width-spacer"> <span class="rt-image"> <img src="http://localhost:8081/Xenon/images/rocketlauncher/features/overview/img-05.jpg" alt="image"> </span> </div> </div> </div> </div> </div>
EXAMPLE 3
This image is hidden for guests.
Please log in or register to see it.
The first Particle Block is a two row/two column photo gallery.
<!-- Block-size50-Left - Row1 --> <div class="g-row"> <div class="g-width-container"> <!-- Block-size50-Left - Row1 - Image Left--> <div class="g-width-50"> <div class="g-width-spacer"> <div class="rt-image-effect"> <img src="images/rocketlauncher/home/fp-feature/img-01.jpg" alt="image" /> <div class="rt-image-effect-caption"> <p> <a href="/component/content/article?id=1&Itemid=111"><i class="fa fa-fw fa-file-text-o"></i></a> <a href="http://www.rockettheme.com/joomla/templates/myriad"><i class="fa fa-fw fa-file-image-o"></i></a> <a data-rokbox href="/images/rocketlauncher/home/fp-feature/img-01.jpg"><i class="fa fa-fw fa-search"></i></a> </p> </div> </div> </div> </div> <!-- Block-size50-Left - Row1 - Image Right--> <div class="g-width-50"> <div class="g-width-spacer"> <div class="rt-image-effect"> <img src="images/rocketlauncher/home/fp-feature/img-02.jpg" alt="image" /> <div class="rt-image-effect-caption"> <p> <a href="/component/content/article?id=1&Itemid=111"><i class="fa fa-fw fa-file-text-o"></i></a> <a href="http://www.rockettheme.com/joomla/templates/myriad"><i class="fa fa-fw fa-file-image-o"></i></a> <a data-rokbox href="/images/rocketlauncher/home/fp-feature/img-02.jpg"><i class="fa fa-fw fa-search"></i></a> </p> </div> </div> </div> </div> </div> </div> <div class="clear"></div> <div class="g-row"> <div class="g-width-container"> <!-- Block-size50-Left - Row2 - Image Left--> <div class="g-width-50"> <div class="g-width-spacer"> <div class="rt-image-effect"> <img src="images/rocketlauncher/home/fp-feature/img-03.jpg" alt="image" /> <div class="rt-image-effect-caption"> <p> <a href="/component/content/article?id=1&Itemid=111"><i class="fa fa-fw fa-file-text-o"></i></a> <a href="http://www.rockettheme.com/joomla/templates/myriad"><i class="fa fa-fw fa-file-image-o"></i></a> <a data-rokbox href="/images/rocketlauncher/home/fp-feature/img-03.jpg"><i class="fa fa-fw fa-search"></i></a> </p> </div> </div> </div> </div> <!-- Block-size50-Left - Row2 - Image Right--> <div class="g-width-50"> <div class="g-width-spacer"> <div class="rt-image-effect"> <img src="images/rocketlauncher/home/fp-feature/img-04.jpg" alt="image" /> <div class="rt-image-effect-caption"> <p> <a href="/component/content/article?id=1&Itemid=111"><i class="fa fa-fw fa-file-text-o"></i></a> <a href="http://www.rockettheme.com/joomla/templates/myriad"><i class="fa fa-fw fa-file-image-o"></i></a> <a data-rokbox href="/images/rocketlauncher/home/fp-feature/img-04.jpg"><i class="fa fa-fw fa-search"></i></a> </p> </div> </div> </div> </div> </div> </div> <div class="clear"></div>
The second Particle Block is a one row/three column Image & Text layout.
<!-- Block-size50-Right - Row1 --> <div class="g-row"> <!-- Block-size50-Right - Row1 - Column1--> <div class="g-width-33"> <div class="g-width-spacer"> <div class="rt-icon-badge rt-text-accent2"><span class="fa fa-desktop"></span></div> <h5 class="medpaddingtop rt-text-accent2">Responsive Layout</h5> <p>A responsive layout automatically adapts to the viewing device, allowing for tablets.</p> <a href="/component/content/article?id=1&Itemid=111" class="readon4">Read More</a> </div> </div> <!-- Block-size50-Right - Row1 - Column2--> <div class="g-width-33"> <div class="g-width-spacer"> <div class="rt-icon-badge rt-text-accent3"><span class="fa fa-th"></span></div> <h5 class="medpaddingtop rt-text-accent3">Editable Structure</h5> <p>The template manager offers configuration options to individually control each module.</p> <a href="/component/content/article?id=1&Itemid=111" class="readon3">Read More</a> </div> </div> <!-- Block-size50-Right - Row1 - Column3--> <div class="g-width-33"> <div class="g-width-spacer"> <div class="rt-icon-badge rt-text-accent2"><span class="fa fa-mobile-phone"></span></div> <h5 class="medpaddingtop rt-text-accent2">Mobile Support</h5> <p>Vermilion has responsive styling for smartphones, but also benefits from a mobile.</p> <a href="/component/content/article?id=1&Itemid=111" class="readon4">Read More</a> </div> </div> </div> <div class="clear"></div>
This is what the iphone6 view looks like of the above three examples:
This image is hidden for guests.
Please log in or register to see it.
EXAMPLE 4
This image is hidden for guests.
Please log in or register to see it.
This is a one row/five column presentation of text content.
<div class="customrt-center"> <p>Will You be the Next to Join Our Happy Clients?</p> <br> <div class="g-row"> <div class="g-width-container"> <!-- Row1 - Column1--> <div class="g-width-20"> <div class="g-width-spacer"> <a target="_blank" href="http://www.rockettheme.com/joomla/templates/hadron"><img class="rt-transparent-image" src="images/rocketlauncher/pages/portfolio/img-18.png" alt="image"></a> </div> </div> <!-- Row1 - Column2--> <div class="g-width-20"> <div class="g-width-spacer"> <a target="_blank" href="http://www.rockettheme.com/joomla/templates/acacia"><img class="rt-transparent-image" src="images/rocketlauncher/pages/portfolio/img-19.png" alt="image"></a> </div> </div> <!-- Row1 - Column3--> <div class="g-width-20"> <div class="g-width-spacer"> <a target="_blank" href="http://www.rockettheme.com/joomla/templates/corvus"><img class="rt-transparent-image" src="images/rocketlauncher/pages/portfolio/img-20.png" alt="image"></a> </div> </div> <!-- Row1 - Column4--> <div class="g-width-20"> <div class="g-width-spacer"> <a target="_blank" href="http://www.rockettheme.com/joomla/templates/spectral"><img class="rt-transparent-image" src="images/rocketlauncher/pages/portfolio/img-21.png" alt="image"></a> </div> </div> <!-- Row1 - Column5--> <div class="g-width-20"> <div class="g-width-spacer"> <a target="_blank" href="http://www.rockettheme.com/joomla/templates/stratos"><img class="rt-transparent-image" src="images/rocketlauncher/pages/portfolio/img-22.png" alt="image"></a> </div> </div> </div> </div> <div class="clear"></div><br><br> <p><a target="_blank" href="http://www.rockettheme.com/joomla/templates/ricochet" class="readon">Join Now</a></p></div>
EXAMPLE 5
This image is hidden for guests.
Please log in or register to see it.
This is a three row/two column presentation of Image & Text with the left-right positioning alternating for each row.
<div class="example1"> <!-- Row1 - Image Left --> <div class="g-row"> <div class="g-width-spacer"> <div class="g-width-container"> <div class="g-width-33"> <div class="g-width-spacer"> <span class="rt-image"> <img src="images/rocketlauncher/features/overview/50/img-04.jpg" alt="image"> </span> </div> </div> <div class="g-width-66"> <div class="g-width-spacer"> <a class="g-title-subhero" href="#">Dropdown Menu</a> <p>A Dropdown Menu system, with inline icons, multiple columns and much more.</p> <p>One of the newest additions to the Gantry framework coming in Gantry5 is the powerful Menu Editor.</p> <p>This global administrative panel gives you the ability to quickly and easily enhance your site’s menus.</p> <p> <a href="#" class="button button-3 button-small">Learn More</a> </p> </div> </div> </div> </div> </div> <!-- Row2 - Image Right --> <div class="g-row"> <div class="g-width-container"> <div class="g-width-66"> <div class="g-width-spacer"> <a class="g-title-subhero" href="#">Positions</a> <p>Unlimited positions, with drag and drop add, delete, move and resize capabilities.</p> <p>One of the most difficult and time-consuming tasks associated with migrating your Joomla site from one template to another is having to reassign all of your modules from one position naming scheme to another.</p> <p> <a href="#" class="button button-3 button-small">Learn More</a> </p> </div> </div> <div class="g-width-33"> <div class="g-width-spacer"> <span class="rt-image"> <img src="images/rocketlauncher/features/overview/50/img-05.jpg" alt="image"> </span> </div> </div> </div> </div> <!-- Row3 - Image Left --> <div class="g-row"> <div class="g-width-container"> <div class="g-width-33"> <div class="g-width-spacer"> <span class="rt-image"> <img src="images/rocketlauncher/features/overview/50/img-06.jpg" alt="image"> </span> </div> </div> <div class="g-width-66"> <div class="g-width-spacer"> <a class="g-title-subhero" href="#">Variations</a> <p>A Dropdown Menu system, with inline icons, multiple columns and much more.</p> <p>One of the newest additions to the Gantry framework coming in Gantry5 is the powerful Menu Editor.</p> <p>This global administrative panel gives you the ability to quickly and easily enhance your site’s menus.</p> <p> <a href="#" class="button button-3 button-small">Learn More</a> </p> </div> </div> </div> </div> <!-- Row4 - Image Right --> <div class="g-row"> <div class="g-width-container"> <div class="g-width-66"> <div class="g-width-spacer"> <a class="g-title-subhero" href="#">Presets</a> <p>Unlimited positions, with drag and drop add, delete, move and resize capabilities.</p> <p>One of the most difficult and time-consuming tasks associated with migrating your Joomla site from one template to another is having to reassign all of your modules from one position naming scheme to another.</p> <p> <a href="#" class="button button-3 button-small">Learn More</a> </p> </div> </div> <div class="g-width-33"> <div class="g-width-spacer"> <span class="rt-image"> <img src="images/rocketlauncher/features/overview/50/img-07.jpg" alt="image"> </span> </div> </div> </div> </div> <!-- Row5 - Image Left --> <div class="g-row"> <div class="g-width-container"> <div class="g-width-33"> <div class="g-width-spacer"> <span class="rt-image"> <img src="images/rocketlauncher/features/overview/50/img-08.jpg" alt="image"> </span> </div> </div> <div class="g-width-66"> <div class="g-width-spacer"> <a class="g-title-subhero" href="#">Responsive</a> <p>Unlimited positions, with drag and drop add, delete, move and resize capabilities.</p> <p>One of the most difficult and time-consuming tasks associated with migrating your Joomla site from one template to another is having to reassign all of your modules from one position naming scheme to another.</p> <p> <a href="#" class="button button-3 button-small">Learn More</a> </p> </div> </div> </div> </div> <!-- Row6 - Image Right --> <div class="g-row"> <div class="g-width-container"> <div class="g-width-66"> <div class="g-width-spacer"> <a class="g-title-subhero" href="#">Typography</a> <p>Unlimited positions, with drag and drop add, delete, move and resize capabilities.</p> <p>One of the most difficult and time-consuming tasks associated with migrating your Joomla site from one template to another is having to reassign all of your modules from one position naming scheme to another.</p> <p> <a href="#" class="button button-3 button-small">Learn More</a> </p> </div> </div> <div class="g-width-33"> <div class="g-width-spacer"> <span class="rt-image"> <img src="images/rocketlauncher/features/overview/50/img-09.jpg" alt="image"> </span> </div> </div> </div> </div> </div>
EXAMPLE 6
This image is hidden for guests.
Please log in or register to see it.
This is a complex example using five columns with multiple rows in each column.
<div class="rt-center example1"> <div class="g-row"> <div class="g-width-spacer"> <!-- COLUMN 1 --> <div class="g-width-25"> <h2>On AIR</h2> <!-- COLUMN 1 ROW 1 --> <div class="g-width-container"> <!-- ROW 1 --> <div class="g-width-50"> <div class="g-width-spacer"> <a href="#"><span>Nervousness</span><br></a> </div> </div> <div class="g-width-50"> <div class="g-width-spacer"> <a href="#"><span>Stand-ups</span><br></a> </div> </div> </div> <div class="g-width-container"> <!-- ROW 2 --> <div class="g-width-50"> <div class="g-width-spacer"> <a href="#"><span>Live Shots</span><br></a> </div> </div> <div class="g-width-50"> <div class="g-width-spacer"> <a href="#"><span>Voice Quality</span><br></a> </div> </div> </div> <div class="g-width-container"> <!-- ROW 3 --> <div class="g-width-100"> <div class="g-width-spacer"> <a href="#"><span>How to Use a Teleprompter</span><br></a> </div> </div> </div> </div> <!-- END OF COLUMN 1 --> <!-- COLUMN 2 --> <div class="g-width-25"> <h2>Production</h2> <!-- COLUMN 2 ROW 1 --> <div class="g-width-container"> <!-- ROW 1 --> <div class="g-width-50"> <div class="g-width-spacer"> <a href="#"><span>Field Videos </span><br></a> </div> </div> <div class="g-width-50"> <div class="g-width-spacer"> <a href="#"><span>Interview Shots</span><br></a> </div> </div> </div> <div class="g-width-container"> <!-- ROW 2 --> <div class="g-width-50"> <div class="g-width-spacer"> <a href="#"><span>Stand-up Shoot</span><br></a> </div> </div> <div class="g-width-50"> <div class="g-width-spacer"> <a href="#"><span>Get Good Audio</span><br></a> </div> </div> </div> </div> <!-- END OF COLUMN 2 --> <!-- COLUMN 3 --> <div class="g-width-25"> <h2>Broadcast Journalism</h2> <!-- COLUMN 3 ROW 1 --> <div class="g-width-container"> <!-- ROW 1 --> <div class="g-width-50"> <div class="g-width-spacer"> <a href="#"><span>Why be a Journalist</span><br></a> </div> </div> <div class="g-width-50"> <div class="g-width-spacer"> <a href="#"><span>Fairness & Accuracy</span><br></a> </div> </div> </div> <div class="g-width-container"> <!-- ROW 2 --> <div class="g-width-100"> <div class="g-width-spacer"> <a href="#"><span>Characteristics of Good Reporter</span><br></a> </div> </div> </div> <div class="g-width-container"> <!-- ROW 3 --> <div class="g-width-100"> <div class="g-width-spacer"> <a href="#"><span>Characteristics of News</span><br></a> </div> </div> </div> <div class="g-width-container"> <!-- ROW 4 --> <div class="g-width-15"> <div class="g-width-spacer"> <a href="#"><span>Legal</span><br></a> </div> </div> <div class="g-width-15"> <div class="g-width-spacer"> <a href="#"><span>Libel</span><br></a> </div> </div> <div class="g-width-35"> <div class="g-width-spacer"> <a href="#"><span>Libel and Private People</span><br></a> </div> </div> <div class="g-width-35"> <div class="g-width-spacer"> <a href="#"><span>Copyright Fair Use</span><br></a> </div> </div> </div> <div class="g-width-container"> <!-- ROW 5 --> <div class="g-width-50"> <div class="g-width-spacer"> <a href="#"><span>Common Mistakes</span><br></a> </div> </div> <div class="g-width-50"> <div class="g-width-spacer"> <a href="#"><span>Using Active Voice</span><br></a> </div> </div> </div> </div> <!-- END OF COLUMN 3 --> <!-- COLUMN 4 --> <div class="g-width-25"> <h2>Interviewing</h2> <!-- COLUMN 4 ROW 1 --> <div class="g-width-container"> <!-- ROW 1 --> <div class="g-width-100"> <div class="g-width-spacer"> <a href="#"><span>The Live Shot Interview</span><br></a> </div> </div> </div> </div> <!-- END OF COLUMN 4 --> </div> </div> </div> <!-- EXAMPLE END -->
This is what the iphone6 view looks like of the above three examples:
This image is hidden for guests.
Please log in or register to see it.
This is the CSS file that makes this all work, [JOOMLA-ROOT]\templates\rt_templateName\custom\scss\g-width.scss :
/* GANTRY5 DEVELOPMENT MODE ENABLED. WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost! For more information on modifying CSS, please read: http://docs.gantry.org/gantry5/configure/styles http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet */ /*** gantry-row g-row gantry-width-container g-width-container gantry-width-xx g-width-xx gantry-width-spacer g-width-spacer ***/ .g-width-container { -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .g-width-container { display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } .g-row, .g-row:before, .g-row:after { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } .g-row { margin: 0 -15px; } .g-container [class*="g-block"], .g-container [class*="g-width"] { min-width: 0; } .g-width-block { display: block; float: left; } .g-row .g-width-container { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; flex-flow: row wrap; margin: -0.25rem; } .g-width-spacer { margin: 15px; } .gantry-block-center { margin: auto; float: none !important; } .g-width-10, .g-width-15, .g-width-20, .g-width-25, .g-width-30, .g-width-33, .g-width-40, .g-width-50, .g-width-60, .g-width-66, .g-width-70, .g-width-75, .g-width-80, .g-width-90 { display: block; float: left; } .g-width-10 { width: 10%; } .g-width-15 { width: 15%; } .g-width-20 { width: 20%; } .g-width-25 { width: 25%; } .g-width-30 { width: 30%; } .g-width-33 { width: 33.3333333333%; } .g-width-40 { width: 40%; } .g-width-50 { width: 50%; } .g-width-60 { width: 60%; } .g-width-66 { width: 66.6666666667%; } .g-width-70 { width: 70%; } .g-width-75 { width: 75%; } .g-width-80 { width: 80%; } .g-width-90 { width: 90%; } .g-width-100 { width: 100%; } // typically 30rem to 47.938rem @include breakpoint(large-mobile-range) { .g-width-20, .g-width-25, .g-width-30, .g-width-33, .g-width-40, .g-width-50, .g-width-60, .g-width-66, .g-width-70, .g-width-75, .g-width-80, .g-width-90 { width: 100%; } }
To make it accessible you need to call it from your Custom CSS file, [JOOMLA-ROOT]\templates\rt_templateName\custom\scss\custom.scss:
// import breakpoints @import "dependencies"; // import gantry-width @import "g-width";
- Last Edit: 8 years 10 months ago by DanG.
-
The following users have thanked you: Wesley Derbyshire, Susanne Allen, djSoft, Heim Robert, Waves Web Design, anitaweb
-
Time to create page: 0.080 seconds