Customizing Gantry/RT Box (need no padding/margin)
-
-
- ESE
- Rocketeer
- Posts: 55
- Thanks: 0
-
Hey everyone. Been playing around with gantry and RT themes for a while on a localhost and finally got around to joining the club in hopes of getting an answer to my question,, so thanks to anyone in advance
If I don't explain clearly let me know and ill try harder :cheesy:
I placed a sliced image(from Fireworks) in Showcase A position. But i need to remove the .rt-block padding on the left and top so the picture fills the entire area. By removing the padding settings in gantry.css --> .rt-block { padding: XXX} I am able to place the picture correctly,,, however that makes the remaining boxes on the site placed wrong. (They all move around strangely hehe)
So my question is... what options do I have for making this picture completely fill the box with no padding or margins. Can I assign that module a new CSS property besides .rt-block? If so where would i do that.. or maybe there is another method.
Cheers - Last Edit: 12 years 10 months ago by ESE.
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
.rt-block prevails through the site but you can identify specific blocks by preceding classes and ids.
Without a link to your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.
Can you please post a link to the problem and we will do our best to assist you.
Thanks
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- ESE
- Rocketeer
- Posts: 55
- Thanks: 0
-
Sorry for slow response my computer decided to crash for a few days. I am developing the site locally at the moment so can't provide a link unfortunately.
I will work on getting something online if that will help more. Maybe someone could provide a theoretical answer for the time being?
The problem is still... I want my 940px image to stretch from the left side to ride side of my module with no padding or margin on the top or left side so it sits flush. Basically like a page banner i guess? However it is a sliced image from Fireworks with rollover effects.
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
OK - In my signature you can see a link for Firebug. Get it and use it to find your way around the code for your site.
The template has specific areas such as top, feature, showcase etc. All of these use .rt-block at some point.
Using the idea of an image at full width means that it will placed in an area and will be the only item. This means it will be using the div id="areaname" and class="rt-grid-12". So for the purposes of this exercise we will assume the position is top, therefore the code would look like this...
If I wanted to remove all padding from that area I would have to use the following css code so as not to cause problems to all the other .rt-block uses.<div id="rt-top"> <div class="rt-grid-12 rt-alpha rt-omega"> <div class="rt-block"> <div class="module-content">
In some instances I may need to remove margins from the grid layout so that would look like this...#rt-top .rt-grid-12 .rt-block { padding:0; }
Which gives me a top and bottom margin of 10px and left/right margin of 0px#rt-top .rt-grid-12 { margin:10px 0px; }
Hope this helps
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- PotatoGraphick
- Newbie
- Posts: 7
- Thanks: 0
-
Sorry to dredge up a post from the past, but I'm using this method so it's easier in context...
I'm in a similar situation where I need to remove the padding on a single module in position 'Utility-A'.
Based on the above information, I'm using the following CSS;
#shadowwrapper #rt-transition #rt-mainbody-surround #rt-utility .rt-container .rt-grid-8 .rt-block{ padding:0; }
But it's not working.
This is a link to the site: http://new.timwhetstone.com.au/Joomla3/
It's for the slideshow on the top left of the main area.
Perhaps I'm putting the CSS in the wrong place?
Any help would be greatly appreciated.
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
PotatoGraphick wrote:Sorry to dredge up a post from the past, but I'm using this method so it's easier in context...Easiest method would be to open up the module and in the module suffix field add nomarginall nopaddingall making sure there is a space between each suffix.
I'm in a similar situation where I need to remove the padding on a single module in position 'Utility-A'.
Based on the above information, I'm using the following CSS;
#shadowwrapper #rt-transition #rt-mainbody-surround #rt-utility .rt-container .rt-grid-8 .rt-block{ padding:0; }
But it's not working.
This is a link to the site: http://new.timwhetstone.com.au/Joomla3/
It's for the slideshow on the top left of the main area.
Perhaps I'm putting the CSS in the wrong place?
Any help would be greatly appreciated.
Hope this helps
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- PotatoGraphick
- Newbie
- Posts: 7
- Thanks: 0
-
David,
You are a god among men, let nobody tell you otherwise.
I cannot believe the solution was that simple.
Thank you so much for your help good sir, you rock!
Cheers,
Pat.
-
-
-
- Steve Wyant
- Newbie
- Posts: 1
- Thanks: 0
-
Is there a list of these helper classes? I've seen them used in template demos but can't find them listed in the documentation.
Thanks,
Steve
-
Time to create page: 0.076 seconds