How can I create full browser width Showcase position in Gantry?

[WebTread]

Happy New Year all...

So I know this one might be a bit outside of the box but I've been racking my head trying to figure out how to recreate the full width Showcase position of a Gantry based template from RocketTheme "Ximenia" http://demo.rockettheme.com/joomla25/ximenia/

And bring that look to any of the new Responsive based Gantry templates by RocketTheme. I've posted to the RT forums and have yet to hear back on this and was kind of hoping one of the brilliant members of our little Gantry Google Group could maybe give me a hand. Keep in mind I am not asking anything about the slideshow. Just how to make the Showcase position stretch the full width of the browser window when past 1200px.

Again I know this probably is best for the standard forums and I rarely ask for help but maybe someone here knows how. I've looked in every css file in the responsive version of Ximenia and have copied the css style into Metropolis and have the look and feel part of the styling down perfect but can not find a single place any where in any file where it gets the showcase position to be full browser width and it's driving me crazy cause it has to be something simple that I am missing.

Thanks again for any assistance.

Grant

[patrick]

Hello Grant,

Firebug shows :

.main-bg-blue #rt-showcase {
    background-color: #3F8AAF;
    background-image: url("/joomla25/ximenia/templates/rt_ximenia/images/backgrounds/blue/bg-showcase.jpg");
}
#rt-showcase {
    background-position: 10% 0;
    background-repeat: repeat-x;
    position: relative;
    z-index: 0;
}

Image size is 2498 X 599
the image is large enough to cover all screen resolution... may be
patrick

[Grant Preston]

Hi Patrick,

Thanks for jumping in but yeah I have already included all CSS code I could find from Ximenia and none of it actually sets a width that I can find, and the image, while it is a super large image and I have the actual image uploaded and called to the page, it just resizes itself. And I've yet to figure out how they did it. Below is a link where I am working on this. Got a bite from a Moderator on RT and hopefully will get an answer from someone on this soon.

http://3steps.com.au

It really is a nice unique look to have a Showcase position or say that and a Footer position that will stretch the full width of the browser and keep the content centered, while staying responsive and the rest of the page conforms to the standard 1200px framework.

Just trying to figure out the best way to achieve what they did so I can use that in any other responsive Gantry template going forward.

Let me know if you have any other ideas or maybe someone else here has figured it out.

Thanks again,

Grant

[patrick]

Hi Grant,

In my gantry-custom.css :

 #rt-showcase {
background-color: #3F8AAF;
background-image: url(../images/bg-showcase.jpg);
height:250px;
}

It's just a test made with joomla copyright in showcase position. With a slideshow, it will be fine!
in gantry admin : showcase position 1 position count1

[Grant Preston]

Do you have this demonstrated somewhere? I don't know what you mean by

"In gantry admin : showcase position 1 position count1" unless you are referring to only on module in showcase-a. Which is what I have.

My question is how to achieve a width wider than the standard 1200px grid? So the Showcase position stretches from edge to edge of your browser no matter how wide you make your browser window. That while still keeping the showcase content centered and responsive inside the standard grid. Only the image takes up the full browser width along with the styling. Just like in the Ximenia template.

If you have achieved this in some other responsive template I would like to see the link.

Thanks

--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to
gantry-framework...@googlegroups.com
To unsubscribe from this group, send email to
gantry-framework-for-j...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org

<Accueil 2013-01-04 20-04-11.png>

[Alston Chapman]

Correct me if I'm wrong, but all the main level gantry positions like #rt-showcase already stretch full browser width. 

It's the .rt-container that limits width to the 960px and centers content. 

Is this not what you're looking for?

Sent from my iPhone

[patrick marangone]

I think you're right.

Patrick
www.sites-ce.com
Send from Android phone :-)

[Grant Preston]

No this is not correct. None of the main level gantry positions stretch full browser width on most templates. Only a few do and I have only seen it generally in the showcase and sometimes footer positions.

Only one template that is responsive currently does this and it is Ximenia found here http://demo.rockettheme.com/joomla25/ximenia/ and it wasn't originally a Responsive template. RocketTheme recently adapted it so it doesn't even use LESS.

All other positions stop at 1200px or there abouts and stretch no further. Yes the .rt-container is inset and holds the content which is why I don't want to affect that. But I have looked at the CSS code for Ximenia and I can't figure out how they are getting that look. Which is why I am seeking some assistance.

I don't care about the slideshow or any of that right now I am simply trying to get a background image to span the entire browser width while keeping the content restrained inside the standard template constraints just like Ximenia does.

Any one that can figure this out would be of great help. @Andy Miller any chance of dropping in a word to help me figure out how you did it in Ximenia with the showcase being full browser width and keeping content centered?

Best,

Grant

[Grant Preston]

Well Patrick and Alston,

Thanks for jumping in to try and help. Below is what I finally ended up going with...

First I decided since I couldn't figure out exactly how RocketTheme was pulling off a full browser width Showcase position I should stop trying to figure theirs out and just create my own solution; I'd rather use theirs but oh well...

So I came up with a suitable hack. Yes yes it uses a negative margin which I don't like to do but until someone from team RocketTheme can show me how it was done I will have to go with this in my rt_leviathan-custom.css

-----------------

/* SHOWCASE */

#rt-showcase {width: 3600px; margin-left: -1200px}

#rt-showcase .rt-grid-12 {margin-left: 1200px;}

#rt-showcase {position: relative; z-index: 0; background-image: url(../images/backgrounds/bg-showcase.jpg); background-position: 50% 0%; background-color: #8D3907;}

/* Showcase Styling */

#rt-showcase {box-shadow: inset 0 0px 6px rgba(0, 0, 0, 0.8);border-bottom: 1px solid #000;color: #222;}

#rt-showcase:after {border-bottom: 1px solid rgba(0,0,0,0.2);}

#rt-showcase a:hover {color: #fff;}

/* Showcase .module-surround Styling */

#rt-showcase .module-surround {background-image: url(../images/overlays/global/dark-25.png); border-radius: 15px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4); color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);}

/* Remove Styling for Smaller Screens */

@media only screen and (max-width: 767px) {

#rt-showcase {width: 100%}

}

-----------------

As you can see at the top I set the showcase width to 3600px since that is 3 times the width of the 1200px grid. Then I suck out 1/3rd of that by pulling -1200px left. Of course that pulls the grid over as well so I then add 1200px back and that keeps the content centered and still responsive.

Then in the 3rd line I call for the background-image and set it's position to 50% which centers it.

[Alston Chapman]

I should add, I've "hacked" the gantry template to create a wider body before, as well as eliminating side margins and padding. 

It was a pain, but it enabled me to offer a wider content than the standard offered by gantry. 

Overall I love the flexibility of gantry, I've no need to ever create one from scratch, and I do not like buying templates so gantry is my go-to template. 

Sent from my iPhone

[David Goode]

Hi Grant,

Ximenia is quite simple. Each of the main elements is full width as there is no 'external' contatiner. For example most template have body > bg > container which holds top, header, showcase etc.

In Ximenia it is body > bg > top > container then header > container etc.

This approach allows for the container to be left out or given specific css such as #showcase .rt-container {width: 1920px;} or anything else you wish.

Hope this helps.

David

RT Mod

David Goode
www.3cellhosting.com - Where personality, creativity and integrity come as standard.

Tel: 01803 392011
Mob: 07734 330029

This email message is confidential and for use by the addressee only. If the message is received by anyone other than the addressee, please return the message to the sender by replying to it and then delete the message from your computer. Internet emails are not necessarily secure. 3cellhosting does not accept responsibility for changes made to this message after it was sent.

[Michael]

Hello Grant,

I just saw this posted in another thread and thought it might apply to what you were working on here.

#rt-showcase .rt-container {

     width:100%;

}

#rt-showcase .rt-grid-12 {

    margin: 0 auto;

    width: 100%;

}

https://groups.google.com/forum/#!topic/gantry-framework-for-joomla-users/_zL1h_p1gBw

I had bookmarked this because I'll be setting up a site for a client and I already know they want to have a full width slider.  I was planning on using RokSprocket to do the job.  I haven't started the project yet so I haven't been able to test it out.  Please let me know how this works out for you.

regards,

Michael

gantry-framework-for-joomla-us...@googlegroups.com

To unsubscribe from this group, send email to

gantry-framework-for-joomla-users+unsubscribe@googlegroups.com

For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org

<Accueil 2013-01-04 20-04-11.png>

--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to

gantry-framework-for-joomla-us...@googlegroups.com

To unsubscribe from this group, send email to

gantry-framework-for-joomla-users+unsubscribe@googlegroups.com

For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org

--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to

gantry-framework-for-joomla-us...@googlegroups.com

To unsubscribe from this group, send email to

gantry-framework-for-joomla-users+unsubscribe@googlegroups.com

For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org

--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to

gantry-framework-for-joomla-us...@googlegroups.com

To unsubscribe from this group, send email to

gantry-framework-for-joomla-users+unsubscribe@googlegroups.com

For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org

--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to

gantry-framework-for-joomla-us...@googlegroups.com

To unsubscribe from this group, send email to

gantry-framework-for-joomla-users+unsubscribe@googlegroups.com

For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org

[Grant Preston]

Nope didn't work and no combination I could find adding more or less id's or classes worked. At one point I will fully understand what must be called. Any how if you or anyone else can figure out a better solution than what I have below to make the Leviathan template have a Full width Showcase position that would be great.

Until then this is all I have come up with that works close enough.

#rt-showcase {width: 3600px; margin-left: -1200px}

#rt-showcase .rt-grid-12 {margin-left: 1200px;}

#rt-showcase {position: relative; z-index: 0; background-image: url(../images/backgrounds/bg-showcase.jpg); background-position: 50% 0%; background-color: #8D3907;}

gantry-framework...@googlegroups.com

To unsubscribe from this group, send email to

gantry-framework-for-j...@googlegroups.com

[Birger Kvam]

On line 75 in index.php you'll find this code:

    <div id="rt-showcase">
        <div class="rt-showcase-pattern">
        
                <?php echo $gantry->displayModules('showcase','standard','standard'); ?>
                <div class="clear"></div>
        
        </div>
    </div>

remove the rt-container div and you will have full width:

    <div id="rt-showcase">
        <div class="rt-showcase-pattern">
                         <?php echo $gantry->displayModules('showcase','standard','standard'); ?>
                <div class="clear"></div>
                 </div>
    </div>

Good luck

gantry-framework-for-joomla-use...@googlegroups.com

To unsubscribe from this group, send email to
gantry-framework-for-joomla-users+unsubscribe@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org

<Accueil 2013-01-04 20-04-11.png>

--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to

gantry-framework-for-joomla-use...@googlegroups.com

To unsubscribe from this group, send email to
gantry-framework-for-joomla-users+unsubscribe@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org

--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to

gantry-framework-for-joomla-use...@googlegroups.com

To unsubscribe from this group, send email to
gantry-framework-for-joomla-users+unsubscribe@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org

--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to

gantry-framework-for-joomla-use...@googlegroups.com

To unsubscribe from this group, send email to
gantry-framework-for-joomla-users+unsubscribe@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org

--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to

gantry-framework-for-joomla-use...@googlegroups.com

To unsubscribe from this group, send email to
gantry-framework-for-joomla-users+unsubscribe@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org

--
David Goode
www.3cellhosting.com - Where personality, creativity and integrity come as standard.

Tel: 01803 392011
Mob: 07734 330029

This email message is confidential and for use by the addressee only. If the message is received by anyone other than the addressee, please return the message to the sender by replying to it and then delete the message from your computer. Internet emails are not necessarily secure. 3cellhosting does not accept responsibility for changes made to this message after it was sent.

--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to

[Birger Kvam]

Errata : on line 75 you'll find this code:

    <div id="rt-showcase">
        <div class="rt-showcase-pattern">

            <div class="rt-container">

                <?php echo $gantry->displayModules('showcase','standard','standard'); ?>
                <div class="clear"></div>
            </div>
        </div>

    </div>

[Grant Preston]

Yeah, not sure why I didn't think of that solution at the time. Guess my mind was stuck in CSS mode. Good answer. Of course I've long since moved on from that but it's a great follow up answer and one to keep in my noggin for next time.

Thanks for sharing.

--

--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to

gantry-framework...@googlegroups.com

To unsubscribe from this group, send email to

gantry-framework-for-j...@googlegroups.com

For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org
 

---

You received this message because you are subscribed to the Google Groups "Gantry Framework for Joomla Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to gantry-framework-for-j...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[pete]

Hi,

or even simpler: Rocket has included the rt-fullwidth position!

So just open index.php and move the the block "rt-fullwidth" up (eg. above rt-showcase). Of course your module needs the fullwidth position then.

---
You received this message because you are subscribed to the Google Groups "Gantry Framework for Joomla Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to gantry-framework-for-joomla-users+unsubscribe@googlegroups.com.

[Elżbieta Zawada]

What about that situation: I want to have two positions like fullwidth: one above the text with slider and one under the text with google map. How can I achieve that?

[pete]

Hi!

Well then you can simply duplicate rt-fullwidth in the index.php and rename eg. to rt-fullwidth2.

Please read: http://www.gantry-framework.org/documentation/joomla/customize/

[Tomasz Kisielewski]

Hi.

I have done it this way, this is for the one "row"

Add to template details.xml

<position>fullslideshow</position>

add to index.php in the place you want to have it displayed.

 <?php /** Begin FullwidthSlider **/ if($gantry->countModules('fullslideshow')): ?>
                <div id="rt-fullslideshow">
                        <div class="rt-container">
                                       <?php echo $gantry->displayModules('fullslideshow','standard','standard'); ?>

                                       <div class="clear"></div>
                                </div>
                        </div>

                        <?php /** End FullwidthSlider **/ endif; ?>

 

style it with less i did:

#rt-fullslideshow{
    .rt-container{
        width:100%;
        .rt-block{
            width:100%;
        margin:0;
        padding:0;
        }
        .rt-grid-12{
            width:100% !important;
        }
        
    }
}

I think thats it, check gantry documentation i am sure they have article about layouts. Good luck Tom

On Wed, Sep 18, 2013 at 12:26 PM, Elżbieta Zawada <prear...@gmail.com> wrote:

What about that situation: I want to have two positions like fullwidth: one above the text with slider and one under the text with google map. How can I achieve that?

--

--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to

gantry-framework...@googlegroups.com

To unsubscribe from this group, send email to

gantry-framework-for-j...@googlegroups.com

For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org
 
---
You received this message because you are subscribed to the Google Groups "Gantry Framework for Joomla Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to gantry-framework-for-j...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

--

[Solomon Muluneh]

Hi Michel 

Thank You. I make some changes and works fine with default gantry template

#rt-showcase .rt-container {

     width:100%;

}

#rt-showcase .rt-grid-12 {

    margin: 0 auto;

    width: 100%;

padding:0;

}

#rt-showcase .rt-block { padding-left:0; padding-right:0; margin-left:0; margin-right:0}