Updating Gantry tutorial for adding module positions J1.7
-
-
- Jordan W
- Sr. Rocketeer
- Posts: 111
- Thanks: 2
-
Hello,
Is it possible to update this tutorial for Joomla 1.7?
www.gantry-framework.org/documentation/j...ing-module-positions
It contains obsolete recommendations and I'm unable to modify it myself.
Regards,
Jordan
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
- Hi, the only difference is in step 3, the <param> tag is now a <field> tag and it's located in template-options.xml, everything else is the same. Let me know if you have a specific issue you need help with.
- The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Tim Watson
- Sr. Rocketeer
- Posts: 149
- Thanks: 0
-
How do you get a new module row to show up in this tab of the template editor? I'm using Diametric template, and have added a new module row below "showcase" position. The trouble is, it doesn't contain the styling/texture information.
Here's a link:
logochairs.com/j25cms/index.php/product-...canvas-chair-item-12
The new position (called "example") is showing up as a white bar with the content left aligned, despite having the "Layout" settings setup as "Force Positions" position count 2, and the actual module in position "example-2".
I basically want it to look exactly like the showcase position as far as "Style" tab goes, but I am not sure how to associate this new row with the "showcase / bottom" style settings.
Can anyone advise?
Here is what I've done:In index.php of the template folder, I've added this after the "showcase":
<?php /** tim adding a module row after this **/ ?>
<div id="rt-exampleposition">
<?php echo $gantry->displayModules('example','standard','standard'); ?>
<div class="clear"></div>
</div>
<?php /** tim end **/ ?>
In the templateDetails.xml of the template folder, I've added this:
<position>example-a</position>
<position>example-b</position>
<position>example-c</position>
<position>example-d</position>
<position>example-e</position>
<position>example-f</position>
In the template-options.xml of the template folder, I've added this:
<fields name="example" type="position" label="TimsCustom_POS">
<field name="layout" type="positions" default="3,3,3,3" label="">
<schemas>1,2,3,4,5,6</schemas>
<words>2,3,4,5,6,7,8,9,10</words>
</field>
<field name="showall" type="toggle" default="0" label="FORCE_POS"/>
<field name="showmax" type="showmax" default="6" label="POS_COUNT"/>
</fields>
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, you need to assign the new HTML elements you have created with the backend settings or existing styles in the template. The template only contains styles for the module positions it comes with, like #rt-showcase{style, style, style} - there isn't any existing CSS for #rt-example{} - you have to add it yourself.
All the stuff in the color chooser is run through the styledeclaration.php file, you would have to add your new elements there, and find everything else style-wise in the CSS that is used for the existing elements you're trying to copy. There isn't really an easy answer, it's a lot of work.
Check out this tutorial, it's got an overview of how to get to the styledeclaration.php file: www.gantry-framework.org/documentation/j...-controlled-elements - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Tim Watson
- Sr. Rocketeer
- Posts: 149
- Thanks: 0
-
So there is not an (uncomplicated) way to make this new module row link up with the style settings that already exist for "Showcase / Bottom"? I don't need separate styling control apart from showcase, I just need to have the styling of the current showcase. So when I make a change to "showcase / bottom" style in the template manager, it affects the "showcase" positions and new "example" position.
Just making sure that I understand you correctly, that this isn't possible. Please confirm.
Henning - thank you for the "rt-container" div tip.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
you need to be aware that css is using classes and id's.
id's are only allowed to appear once on a html page.
so everything using id's cant be reused.
what is easy? I would say its rather easy to replicate the code but it really depends on your skills and how familiar you are with css and rt-stuff.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Henning is right on point. The reality of doing custom development is that it requires more work than using something that is already pre-built. There isn't any code or feature we could add into Gantry that would automatically style elements that you create, as the elements you create don't exist until you create them, so they can't be taken into account before hand. While Gantry is powerful, unfortunately it's not a magical all-knowing application that can accommodate your desires automatically. Anyone who can come up with something like that will be a billionaire.
It is possible to do what you're asking. To point you in the right direction, go into your template folder -> features -> styledeclaration.php. Find the piece of code that runs the showcase / footer sections backend styling, starting at line 73:This is just a snippet of it, there's about 15 lines total.// Showcase/Bottom Colors $showcaseColor = new Color($gantry->get('showcasepanel-accentcolor')); $showcaseBgColor = new Color($gantry->get('showcasepanel-backgroundcolor')); $css .= '#rt-showcase h1 span, #rt-showcase .module-title .title span, #rt-bottom h1 span, #rt-bottom .module-title .title span {color:'.$gantry->get('showcasepanel-accentcolor').';}'."\n";
What you want to do is take the existing elements, copy each of them and change the ID to your div ID, for example you would take:And add to it like this:$css .= '#rt-showcase h1 span, #rt-showcase .module-title .title span, #rt-bottom h1 span, #rt-bottom .module-title .title span {color:'.$gantry->get('showcasepanel-accentcolor').';}'."\n";Each element and it's selectors are separated by a comma, you just need to copy it, paste it and change the ID on the copy. It has to be the exact name of your div id. Do that on every line in that section and all the backend controls for Showcase / Footer will also control your new position. Or you could copy the whole section, paste it below, then modify the ID's to create a separate set of controls as outlined in the link I provided earlier.$css .= '#EXAMPLE h1 span, #EXAMPLE .module-title .title span, #rt-showcase h1 span, #rt-showcase .module-title .title span, #rt-bottom h1 span, #rt-bottom .module-title .title span {color:'.$gantry->get('showcasepanel-accentcolor').';}'."\n";
From there, dig into the CSS and do the same thing, overlays.css is a good place to start, search for #rt-showcase, find it and add your ID in the same way. For example, line 76 in overlays.css:Would become:/* Showcase - LIGHT */ #rt-showcase {box-shadow: inset 0 -1px 5px #000;}That's all there is to it, it's not very difficult. In this case you're tapping into styles that already exist and just assigning your element to use that styling. Much easier than styling from scratch. Depending on how complex the styling is, it may take some time to find everything. Firebug and Web Inspectors are your friends and can help you find stuff faster. Hope that helps./* Showcase - LIGHT */ #EXAMPLE, #rt-showcase {box-shadow: inset 0 -1px 5px #000;} - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Tim Watson
- Sr. Rocketeer
- Posts: 149
- Thanks: 0
-
I really, really appreciate your taking the time to explain this. I'll get started...
Thank you
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
No worries, if there was an easier way I would certainly share it.
I know where you're at, I was there not too long ago myself. Now I do this exact same thing every single day, only from scratch and I get paid well for it. Once you learn the tricks, it can pay off down the road. Happy hunting. - The difficult we do immediately, the impossible takes a little longer.
-
Time to create page: 0.047 seconds