Adding a module position to Gantry template
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
I have read the documentation on the Gantry site regarding adding a new module position to the template, however, I have a question regarding adding a module position that is not a default "6-position" row.
I am trying to implement a position which will hold a full-screen background image. as the position will need to not be constrained by the 12-column grid, and it needs to be at the lowest position (z-index) I would like advice on how to implement it in Gantry.
Looking through templateDetails.xml it strikes me that creating a single position similar to fullwidth would probably be the best way (meaning, a position that does not have an a, b, c, d, e or f layouts). How would I create a position such as fullwidth?
My second question is, where would I best add that to each of the three files so that it is positioned ideally as a background.
For index.php, should I add the div immediately after the opening <body> tag or immediately before the closing </body> tag?
For templateDetails.xml, should I place the <position>bgimage</position> immediately after the opening <positions> tag or immediately before the closing </positions> tag?
Likewise, for template-options.xml, does it matter where I add the module position within the <fieldset name="layouts" label="LAYOUTS"> ... </fieldset>? I suspect that it makes little difference in terms of front-end display where the fields are added in this file, as this adds control factors to the backend.
Finally, I am using a module called eXtro Responsive Background Slider http://www.extro-media.de/en/shop-s/joomla-extensions-module-plugins/responsive-background-slideshow-detail.html and I am wondering if I will need to add a Custom Module Layout or Custom Module Chrome so that this module is optimally configured.
Any advice would be highly appreciated. - Thank you.
Ali Samii
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
I must ask, :frown: why would you put a background image in position? How would you upload the image on that position using the file uploaded feature in gantry or using the module?
Why don't you simply make a style feature in Gantry settings that will change the background image just like you change the color. - Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
Thank you for not answering my questions!
The purpose is to have a background slideshow that rotates images, and this uses the jQuery Supersize plugin. Of course, if I just want to have a static image, I could easily just add it as a CSS style, but that is not what I am trying to do.
Regardless, rather than question my reasoning for wanting to do something, I would appreciate it if you could answer my questions. I asked very specific questions, which can be easily answered, I am assuming. - Thank you.
Ali Samii
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
For index.php, should I add the div immediately after the opening <body> tag or immediately before the closing </body> tag?
You add it in front that way the background will load first.
For templateDetails.xml, should I place the <position>bgimage</position> immediately after the opening <positions> tag or immediately before the closing </positions> tag?
Place it after the opening of position tag
Likewise, for template-options.xml, does it matter where I add the module position within the <fieldset name="layouts" label="LAYOUTS"> ... </fieldset>? I suspect that it makes little difference in terms of front-end display where the fields are added in this file, as this adds control factors to the backend.
You don't need to add this.
And last thing you need to do is add this position in index.php start the div just after the body opening.
<div id="position_name"> <?php echo $gantry->displayModules('pos_name','basic','basic'); ?> </div>
hope this helps!
update!
and of course in css make z-index to -999 to position_name id.
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Shazdeh
- Elite Rocketeer
- Posts: 4984
- Thanks: 29
-
Hi,
you can create a module position that supports only one column (like the Drawer position in most templates). Where you define it in the templateDetails file or where you add it in the index.php file is arbitrary, when you display it you use CSS to position it behind everything else on the page.
BTW, there is this plugin for WordPress which does just that: wordpress.org/plugins/rokgallery-background-slideshow/ ; might be helpful. - Please don't PM unless requested
Consider using the custom stylesheet for all your CSS customizations: gantry-framework.org/documentation/wordp...custom_stylesheet.md .
Please provide the URL to the issue.
And please mark the thread as solved if the issue is resolved.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
I woud also suggest to use position absolute for that div with top, bottom, left and right set to 0 and of course use the z-index as Damir suggested.
Questioning about your reasoning for a question is often an important part in doing support because Damir can really not know your level of experience in coding/joomla/css ...
We have only limited resources for support.
We do the best we can. Damir offered his helped (and believe me ... he is a skilled guy)
and all he got from you is:
"Thank you for not answering my questions!". A bit sad ...
-
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
Thank you Damir, Shazdeh and Henning.
Quick follow-up, for any one of you who'd like to chime in. As regards image size, what would you recommend as max width for the image (actual file, as the supersize.js jQuery plugin does scale the image up/down as needed). And is there an aspect ratio that is preferable (3:2, 4:3, 5:4, 8:5 16:9) or something else?
Thanks
PS, no disrespect meant towards Damir. I am going on 48 hours no sleep, so I may be a bit brash. My choice of words were poor. - Thank you.
Ali Samii
-
-
-
- prim
- Preeminent Rocketeer
- Posts: 17290
- Thanks: 217
- I would say 16:10 if you want wide-screen since computer-screens are mostly 16:10 these days instead of 16:9 which are for TVs...
- Please reply with a direct link to the issue & create a new thread for each new issue.
A template is only as good as the content that goes into it - DanG
-
-
-
- voltayr
- Newbie
- Posts: 10
- Thanks: 0
-
Wanting to duplicate a position.
In the spectral joomla theme i see that the social media buttons float and are allocated to the social position.
So this is my first time adding a position i did the following
opened up the index.php and templatedetails.xml from spectral and copied
<?php /** Begin Social **/ if ($gantry->countModules('social')) : ?>
<div id="rt-social">
<?php echo $gantry->displayModules('social','basic','basic'); ?>
<div class="clear"></div>
</div>
<?php /** End Social **/ endif; ?>
and placed this into the same place in the vermilion index.php file
i also copied the
<position>social</position>
and put that into the templatedetails.xml file for vermilion
I think im missing a step, i then went into the template manager/vermilion/features to place the social buttons into the "social" position but the position doesnt show... i think i now need to add this to gantry but getting lost in the code.
What am i missing?
Thanks,
Voltayr
-
Time to create page: 0.065 seconds