The Million Dollar Question - Who will figure it out?
-
-
- dpwebagency
- Newbie
- Posts: 15
- Thanks: 0
-
Hello Rocketeeeeers!
Here's a question that might stump you:
How can you get an image with a perfect 960 pixel width, show up flush when published in any of the Gantry module positions? If you're about to reply with a link to the Module Positions page close this post immediately and go back to eating your fallaffel.
For the person with an actual answer:
Will the flush module suffix do it? How about flushtop? Maybe basic module suffix?
Well, I'm attaching screen shots of a custom_html module published in the showcase a position with these 3 module suffixes BUT you'll see that the image does not align "flush"
The last image is the same module, published with GAVICKS module suffix "advert" in GAVICS "Party Freak" template. You'll notice that the image aligns perfectly flush with no paddings or margins.
The million dollar question is WHY?
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
So I get the million if I answer this?
It depends a bit on the template but basically you can make every module-position exactly 960px wide via css. Do you have an example?
-
-
-
- dpwebagency
- Newbie
- Posts: 15
- Thanks: 0
-
Here's a link to the installation:
dpwebagency.com/atl1
Which CSS file shall I edit? I'm using the CRYSTALLINE template.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
You cant do that last step with a mod suffix:
You have to add
#rt-showcase2 div.rt-grid-12 {margin: 0;}
to the template.css to get of the last 10px to the left and right.
You could use a page-suffix (with page-suffix-feature of gantry turned "on")
like "b-flush-showcase2" to limit this to certain pages ...
css would look like
.b-flush-showcase2 #rt-showcase2 div.rt-grid-12 {margin: 0;}
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
Another example: to set the feature position in the pure gantry template to flush without a suffix it would look like
#rt-feature div.rt-grid-12 div.rt-block,
#rt-feature div.rt-grid-12 {margin: 0;padding: 0;}
in the css (just to get the idea).
Might be a good idea to take a look at the 960gs-page to see the structure ...
-
-
-
- dpwebagency
- Newbie
- Posts: 15
- Thanks: 0
- Cool someone with an answer!
- Last Edit: 14 years 11 months ago by dpwebagency.
-
-
-
- dpwebagency
- Newbie
- Posts: 15
- Thanks: 0
-
B-Inspired,
I tried to follow one of your suggestions (as best I could) but still couldn't quite get that final step you were explaining. Looked as if the only file i needed to edit was the template.css right?
Here's the code to mine, did I do it right?
Also, is there another suffix I need to type or is the module suffix no longer necessary?
/**
* @package Crystalline Template - RocketTheme
* @version 1.5.5 May 10, 2010
* @author RocketTheme www.rockettheme.com
* @copyright Copyright (C) 2007 - 2010 RocketTheme, LLC
* @license www.rockettheme.com/legal/license.php RocketTheme Proprietary Use License
*/
/* Core Styles */
.rt-image {padding: 5px;margin-bottom: 15px;background: url(../images/typography/img-bg.png) repeat;}
/* Bullet Styles */
ul.bullet-1, ul.bullet-2, ul.bullet-3, ul.bullet-4, ul.bullet-5, ul.bullet-6, ul.bullet-7, ul.bullet-8, ul.bullet-9 {padding: 0 0 0 5px; margin: 0 0 15px;}
ul.bullet-1 li, ul.bullet-2 li, ul.bullet-3 li, ul.bullet-4 li, ul.bullet-5 li, ul.bullet-6 li, ul.bullet-7 li, ul.bullet-8 li, ul.bullet-9 li {list-style: none;padding: 0 0 0 15px;margin: 0 0 3px;background-repeat: no-repeat;background-position: 0 5px;}
ul.bullet-1 li a, ul.bullet-2 li a, ul.bullet-3 li a, ul.bullet-4 li a, ul.bullet-5 li a, ul.bullet-6 li a, ul.bullet-7 li a, ul.bullet-8 li a, ul.bullet-9 li a {font-size: 100%;line-height: 1.7;}
ul.bullet-1 li {background-image: url(../images/typography/bullet1.png);}
ul.bullet-2 li {background-image: url(../images/typography/bullet2.png);}
ul.bullet-3 li {background-image: url(../images/typography/bullet3.png);}
ul.bullet-4 li {background-image: url(../images/typography/bullet4.png);}
ul.bullet-5 li {background-image: url(../images/typography/bullet5.png);}
ul.bullet-6 li {background-image: url(../images/typography/bullet6.png);}
ul.bullet-7 li {background-image: url(../images/typography/bullet7.png);}
ul.bullet-8 li {background-image: url(../images/typography/bullet8.png);}
ul.bullet-9 li {background-image: url(../images/typography/bullet9.png);}
/* Emphasis Styles*/
em.color {font-style: italic;font-weight: bold;}
em.bold {font-size: 120%;font-weight: bold;line-height: 135%;font-style: normal;}
em.bold2 {font-size: 135%;font-weight: bold;line-height: 120%;font-style: normal;}
/* Breadcrumbs */
#breadcrumbs-home {background:url(../images/typography/breadcrumb-icon.png) no-repeat;}
/* Drop Cap */
p.dropcap {overflow: hidden;}
span.dropcap {font-size: 400%;margin: 0 5px 0 0;line-height: 100%;float: left;display: block;}
/* Notice Styles */
pre {font-style:italic;overflow: auto;padding: 10px;margin-bottom: 15px;background: #F9F1ED;border: 1px solid #DCD7D4;color: #AC3400;}
.alert, .approved, .attention, .camera, .cart, .doc, .download, .media, .note, .notice, .quote {display: block;margin: 15px 0;background-repeat: repeat-x;background-position: 0 100%;}
.typo-icon {display: block;padding: 8px 10px 0px 36px;margin: 15px 0;background: no-repeat 10px 12px;}
.approved .typo-icon {background-image: url(../images/typography/approved-icon.png);}
.alert .typo-icon {background-image: url(../images/typography/alert-icon.png);}
.attention .typo-icon {background-image: url(../images/typography/attention-icon.png);}
.camera .typo-icon {background-image: url(../images/typography/camera-icon.png);}
.cart .typo-icon {background-image: url(../images/typography/cart-icon.png);}
.doc .typo-icon {background-image: url(../images/typography/doc-icon.png);}
.download .typo-icon {background-image: url(../images/typography/download-icon.png);}
.media .typo-icon {background-image: url(../images/typography/media-icon.png);}
.note .typo-icon {background-image: url(../images/typography/note-icon.png);}
.notice .typo-icon {background-image: url(../images/typography/notice-icon.png);}
.alert {color: #D0583F;background-image: url(../images/typography/alert.png);background-color: #FFFBFB;border-bottom: 1px solid #F8C9BB;border-right: 1px solid #F8C9BB;}
.approved {color: #6CB656;background-image: url(../images/typography/approved.png);background-color: #FAFDF9;border-bottom: 1px solid #C1CEC1;border-right: 1px solid #C1CEC1;}
.attention {color: #E1B42F;background-image: url(../images/typography/attention.png);background-color: #FFFDF6;border-bottom: 1px solid #E4E4D5;border-right: 1px solid #E4E4D5;}
.camera {color: #55A0B4;background-image: url(../images/typography/camera.png);background-color: #F6FBFB;border-bottom: 1px solid #C9D5D8;border-right: 1px solid #C9D5D8;}
.cart {color: #559726;background-image: url(../images/typography/cart.png);background-color: #FCFCFC;border-bottom: 1px solid #D3D3D3;border-right: 1px solid #D3D3D3;}
.doc {color: #666666;background-image: url(../images/typography/doc.png);background-color: #FFFFFF;border-bottom: 1px solid #E5E5E5;border-right: 1px solid #E5E5E5;}
.download {color: #666666;background-image: url(../images/typography/download.png);background-color: #FCFCFC;border-bottom: 1px solid #D3D3D3;border-right: 1px solid #D3D3D3;}
.media {color: #8D79A9;background-image: url(../images/typography/media.png);background-color: #FBF9FD;border-bottom: 1px solid #DBE1E6;border-right: 1px solid #DBE1E6;}
.note {color: #B76F38;background-image: url(../images/typography/note.png);background-color: #FFFAF6;border-bottom: 1px solid #E6DAD2;border-right: 1px solid #E6DAD2;}
.notice {color: #6187B3;background-image: url(../images/typography/notice.png);background-color: #FAFCFD;border-bottom: 1px solid #C7CDDA;border-right: 1px solid #C7CDDA;}
.quote {color: #727272;background-image: url(../images/typography/quote.png);background-color: #F3F3F3;border-bottom: 1px solid #D4D4D4;border-right: 1px solid #D4D4D4;}
.quote-l {display: block;padding: 8px 10px 0px 36px;margin: 15px 0;}
.quote-r {display: block;padding: 0 10px 0 0;}
.quote-l {background: url(../images/typography/quote-l.png) no-repeat 10px 12px;}
.quote-r {background: url(../images/typography/quote-r.png) no-repeat 100% 100%;}
/* Inset Styles */
span.inset-left {float: left;margin-right: 20px;margin-bottom:20px;}
span.inset-right {float: right;margin-left: 20px;margin-bottom:20px;}
span.inset-right-title, span.inset-left-title {position: absolute;display: block;top: -12px;left: 10px;padding: 3px 8px;font-size: 100%;font-weight: bold;}
span.inset-left, span.inset-right {display: block;padding: 12px 8px 8px 8px;width: 20%;font-size: 100%;font-style: italic;margin-top: 25px;position: relative;text-align: center;}
#rt-feature div.rt-grid-12 div.rt-block,
#rt-feature div.rt-grid-12 {margin: 0;padding: 0;}
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
really depends on the template.
#rt-feature div.rt-grid-12 div.rt-block,
#rt-feature div.rt-grid-12 {margin: 0;padding: 0;}
was for the basic template and just for the FEATURE-position.
Your picture seems to be in the SHOWCASE-position (?).
If I remember right flush and basic can be used.
If you have a link to something I can tell you how to get the 960px width ...
-
-
-
- dpwebagency
- Newbie
- Posts: 15
- Thanks: 0
-
dpwebagency wrote:
Here's a link to the installation:
dpwebagency.com/atl1
Which CSS file shall I edit? I'm using the CRYSTALLINE template.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
as suggested above add
#rt-showcase2 div.rt-grid-12 {margin: 0;}
to your css.
End of template.css is a good place.
P.S.: Dont forget to clear your cache ...
-
Time to create page: 0.097 seconds