Updating Gantry tutorial for adding module positions J1.7
-
-
- Tim Watson
- Sr. Rocketeer
- Posts: 149
- Thanks: 0
-
Tim Watson wrote:
I really, really appreciate your taking the time to explain this. I'll get started...Is this part required even if I'm using the current controls for "showcase / bottom" in the template manager? Or is this only required if creating separate new controls?
Thank you
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:
Line number On/Off | Expand/Contract | Select all
/* Showcase - LIGHT */
#rt-showcase {box-shadow: inset 0 -1px 5px #000;}
Would become:
Line number On/Off | Expand/Contract | Select all
/* Showcase - LIGHT */
#EXAMPLE, #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.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
- Well, it depends. If all you're trying to do is connect your position to the backend controls, then you don't need to - start with that and see where it ends up. There may be additional styling in the CSS that isn't controlled from the backend that you wish to use. In that case, you'll need to track it down. Not everything comes from the backend in a lot of cases, it's usually just font and background colors. Anything not controlled by the backend will be in the CSS. Hope that helps.
- The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Tim Watson
- Sr. Rocketeer
- Posts: 149
- Thanks: 0
-
I don't expect you to read through all of this, but can you take a quick glance at what I've done here in the styledeclaration?
// 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"; $css .= '#rt-showcase .readon span, #rt-showcase .readon .button, #rt-bottom .readon span, #rt-bottom .readon .button {background-color:'.$showcaseColor->darken('10%').';}'."\n"; $css .= '#rt-showcase, #rt-bottom {background-color:'.$gantry->get('showcasepanel-backgroundcolor').';}'."\n"; $css .= '#rt-showcase .box1 .module-surround, #rt-showcase .box4 .module-surround, #rt-bottom .box1 .module-surround, #rt-bottom .box4 .module-surround, #rt-bottom .bottom-accentoverlay-dark .box1 a, #rt-bottom .bottom-accentoverlay-dark .box4 .title span, #rt-bottom .bottom-accentoverlay-dark .box4 a, #rt-bottom .bottom-accentoverlay-dark .box1 .title span {background-color:'.$gantry->get('showcasepanel-accentcolor').';}'."\n"; $css .= '#rt-showcase .title, #rt-bottom .title, #rt-showcase .paneltitle, #rt-showcase .panelsubtitle, #rt-bottom .paneltitle, #rt-bottom .panelsubtitle {text-shadow: -1px 1px 0 '.$gantry->get('showcasepanel-backgroundcolor').', -3px 3px 0 rgba(0,0,0,0.2);}'."\n"; $css .= '#rt-showcase a, #rt-bottom a {color:'.$gantry->get('showcasepanel-accentcolor').';}'."\n"; $css .= '#rt-showcase.showcasepanel-overlay-light a:hover, #rt-bottom.showcasepanel-overlay-light a:hover {color:'.$showcaseColor->darken('10%').';}'."\n"; $css .= '#rt-showcase.showcasepanel-overlay-dark a:hover, #rt-bottom.showcasepanel-overlay-dark a:hover {color:'.$showcaseColor->lighten('10%').';}'."\n"; $css .= '#rt-showcase .box1 a, #rt-showcase .box1 .title span, #rt-showcase .box4 a, #rt-showcase .box4 .title span, #rt-bottom .box1 a, #rt-bottom .box1 .title span, #rt-bottom .box4 a, #rt-bottom .box4 .title span {color:'.$showcaseColor->lighten('15%').';}'."\n"; $css .= '#rt-showcase .box4 .title, #rt-showcase .box1 .title, #rt-bottom .box4 .title, #rt-bottom .box1 .title {text-shadow: -1px 1px 0 '.$gantry->get('showcasepanel-accentcolor').', -3px 3px 0 rgba(0,0,0,0.15);}'."\n"; // Tims new positon called "example" copied from Showcase/Bottom Colors...just find and replaced rt-showcase with example $showcaseColor = new Color($gantry->get('showcasepanel-accentcolor')); $showcaseBgColor = new Color($gantry->get('showcasepanel-backgroundcolor')); $css .= '#example h1 span, #example .module-title .title span, #rt-bottom h1 span, #rt-bottom .module-title .title span {color:'.$gantry->get('showcasepanel-accentcolor').';}'."\n"; $css .= '#example .readon span, #example .readon .button, #rt-bottom .readon span, #rt-bottom .readon .button {background-color:'.$showcaseColor->darken('10%').';}'."\n"; $css .= '#example, #rt-bottom {background-color:'.$gantry->get('showcasepanel-backgroundcolor').';}'."\n"; $css .= '#example .box1 .module-surround, #example .box4 .module-surround, #rt-bottom .box1 .module-surround, #rt-bottom .box4 .module-surround, #rt-bottom .bottom-accentoverlay-dark .box1 a, #rt-bottom .bottom-accentoverlay-dark .box4 .title span, #rt-bottom .bottom-accentoverlay-dark .box4 a, #rt-bottom .bottom-accentoverlay-dark .box1 .title span {background-color:'.$gantry->get('showcasepanel-accentcolor').';}'."\n"; $css .= '#example .title, #rt-bottom .title, #example .paneltitle, #example .panelsubtitle, #rt-bottom .paneltitle, #rt-bottom .panelsubtitle {text-shadow: -1px 1px 0 '.$gantry->get('showcasepanel-backgroundcolor').', -3px 3px 0 rgba(0,0,0,0.2);}'."\n"; $css .= '#example a, #rt-bottom a {color:'.$gantry->get('showcasepanel-accentcolor').';}'."\n"; $css .= '#example.showcasepanel-overlay-light a:hover, #rt-bottom.showcasepanel-overlay-light a:hover {color:'.$showcaseColor->darken('10%').';}'."\n"; $css .= '#example.showcasepanel-overlay-dark a:hover, #rt-bottom.showcasepanel-overlay-dark a:hover {color:'.$showcaseColor->lighten('10%').';}'."\n"; $css .= '#example .box1 a, #example .box1 .title span, #example .box4 a, #example .box4 .title span, #rt-bottom .box1 a, #rt-bottom .box1 .title span, #rt-bottom .box4 a, #rt-bottom .box4 .title span {color:'.$showcaseColor->lighten('15%').';}'."\n"; $css .= '#example .box4 .title, #example .box1 .title, #rt-bottom .box4 .title, #rt-bottom .box1 .title {text-shadow: -1px 1px 0 '.$gantry->get('showcasepanel-accentcolor').', -3px 3px 0 rgba(0,0,0,0.15);}'."\n";
Basically I just copied it and used find/replace to update the name "rt-showcase" with "example"
Is this the approach I should be taking, keeping in mind I do want to link up to the backend controls?
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
That seems to be right from what I can tell, you're getting all the selectors in there and putting the code in correctly, so just as long as your index.php file HTML uses <div id="example"> it should work.
The approach is correct, the easiest way in Gantry is to copy what's there and modify it to suit your needs. Gantry does all the hard work behind the scenes, but as with most codes and apps, it can only do what it's told to do, it's just up to you tell it what you want - so use what is already there to your advantage. If something isn't working, check for typos, look in the web inspector, double check your work. It's usually something simple. - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Tim Watson
- Sr. Rocketeer
- Posts: 149
- Thanks: 0
-
At this link,
logochairs.com/j25cms/index.php/product-...canvas-chair-item-12
The top module with leather background is the original showcase row.
The module row directly below is my new "example" position. Turns out my example row is actually referred to as "rt-exampleposition" so I updated the previous code section in styledeclarations.php
Something seems wrong, but I haven't started editing css files...does anything jump out at you that could be wrong right off the bat?
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
I see the issue, basically your index.php file code isn't right. Your rt-container div goes inside the position, you have it outside so it doesn't allow the outer div background to expand across the screen.
As I said, copy what's there already and modify that. The showcase position code in the index.php is this:Copy all of that, paste it directly below, and change showcase to exampleposition in the appropriate places. Keep in mind, some of the color chooser calls, like:<?php /** Begin Showcase **/ if ($gantry->countModules('showcase')) : ?> <div id="rt-showcase" <?php echo $gantry->displayClassesByTag('rt-showcaseblock'); ?>><div id="rt-showcase2" <?php echo $gantry->displayClassesByTag('rt-showcasepattern'); ?>><div id="rt-showcase3" class="showcasepanel-accentoverlay-<?php echo $gantry->get('showcasepanel-accentoverlay'); ?>"> <div class="rt-container"> <?php echo $gantry->displayModules('showcase','standard','standard'); ?> <div class="clear"></div> </div> </div></div></div> <?php /** End Showcase **/ endif; ?>You want to leave alone, as those are pulling from the styledeclaration - if you change it here, you have to change it there also. Basically, just change the div ids, the countModules and displayModules and you should be good.<?php echo $gantry->get('showcasepanel-accentoverlay'); ?>"> - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Tim Watson
- Sr. Rocketeer
- Posts: 149
- Thanks: 0
-
Thank you so much for the help. Worked great.
The only small thing that isn't behaving the same way is the space between the navigation area and the new "exampleposition" row. With "showcase" row, the modules load lower than the bottom point on the logo module. As you can see here:
www.logochairs.com/j25cms/index.php/prod...canvas-chair-item-12
the module is loading up under the logo. Do you know how I can fix this?
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, try adding this CSS to your template.css file:
#rt-exampleposition .rt-container{padding-top: 25px;} - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Tim Watson
- Sr. Rocketeer
- Posts: 149
- Thanks: 0
- Perfect - this is starting to look much better. I appreciate all of your help.
-
Time to create page: 0.057 seconds