SOLVED RokSprocket Strips - Move navigation to sides
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 14
- Another Old Hack!
-
I have got a RokSprocket Strips working fine on a development site. However, the client prefers for the navigation arrows to be on the sides, ie: Previous/Prior arrow on the left and Next arrow on the right with the strips content in-between.
There is no location option in the module. How can I achieve this result? - Last Edit: 5 years 9 months ago by Luke Douglas.
- Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
With Custom CSS.
I notice you don't have any current subscription to Rockettheme. Although roksprocket is free, support is not and does require a subscription.
But if you do need more help, Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you. Please do a screenshot of your problem and annotate to make it clear.
Regards, Mark. - 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.
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 14
- Another Old Hack!
-
Mark,
The URL is here: https://www.headlandalabama.org/newdesign/index.php
It is working fine including the navigation. The client simply desired that the arrows be on the left and right. From what I got off other posts, this is probably going to require custom edits. I have found the "components\com_roksprocket\layouts\strips" and since I am using the default, the template should be here "components\com_roksprocket\layouts\strips\themes\default". I've looked at the 'index.php' file and can see this is where the code is located to make any custom changes. So do I simply copy "components\com_roksprocket\layouts\strips\themes\default" folder to the "templates/g5_hydrogen/roksprocket" folder and make my changes there? - Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
It would seem that you managed to do it?
Regards, Mark. - 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.
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 14
- Another Old Hack!
-
Mark,
Yes. kind of. I did some more research and discovered that to customize RokSprocket, you put the component url needed inside a 'roksprocket' folder in the template primary folder.
For those who might want the same functionality, here are the changes:
Copy the specific folder depending on the theme. I was using the 'default' template so I copied the "components/com_roksprocket/layouts/strips/themes/default" folder to the "templates\TEMPLATENAME\roksprocket\layouts\strips\themes\default".
The file to edit was "index.php".
The original code is as follows:
<div class="sprocket-strips" data-strips="<?php echo $parameters->get('module_id'); ?>"> <div class="sprocket-strips-overlay"><div class="css-loader-wrapper"><div class="css-loader"></div></div></div> <ul class="sprocket-strips-container cols-<?php echo $parameters->get('strips_items_per_row'); ?>" data-strips-items> <?php $index = 0; foreach ($items as $item){ echo $layout->getThemeContext()->load('item.php', array('item'=> $item,'parameters'=>$parameters,'index'=>$index)); $index++; } ?> </ul> <div class="sprocket-strips-nav"> <div class="sprocket-strips-pagination<?php echo !$parameters->get('strips_show_pagination') || $pages <= 1 ? '-hidden' : '';?>"> <ul> <?php for ($i = 1, $l = $pages;$i <= $pages;$i++): ?> <?php $class = ($i == 1) ? ' class="active"' : ''; ?> <li<?php echo $class; ?> data-strips-page="<?php echo $i; ?>"><span><?php echo $i; ?></span></li> <?php endfor; ?> </ul> </div> <?php if ($parameters->get('strips_show_arrows')!='hide' && $pages > 1) : ?> <div class="sprocket-strips-arrows"> <span class="arrow next" data-strips-next><span>›</span></span> <span class="arrow prev" data-strips-previous><span>‹</span></span> </div> <?php endif; ?> </div> </div>
The changed file is as follows:
<div class="sprocket-strips" data-strips="<?php echo $parameters->get('module_id'); ?>"> <div class="sprocket-strips-overlay"><div class="css-loader-wrapper"><div class="css-loader"></div></div></div> <?php if ($parameters->get('strips_show_arrows')!='hide' && $pages > 1) : ?> <div class="sprocket-strips-arrows"> <span class="arrow prev" data-strips-previous><span>‹</span></span> </div> <?php endif; ?> <div class="sprocket-strips-outer-container"> <ul class="sprocket-strips-container cols-<?php echo $parameters->get('strips_items_per_row'); ?>" data-strips-items> <?php $index = 0; foreach ($items as $item){ echo $layout->getThemeContext()->load('item.php', array('item'=> $item,'parameters'=>$parameters,'index'=>$index)); $index++; } ?> </ul> </div> <?php if ($parameters->get('strips_show_arrows')!='hide' && $pages > 1) : ?> <div class="sprocket-strips-arrows"> <span class="arrow next" data-strips-next><span>›</span></span> </div> <?php endif; ?> <div class="sprocket-strips-nav"> <div class="sprocket-strips-pagination<?php echo !$parameters->get('strips_show_pagination') || $pages <= 1 ? '-hidden' : '';?>"> <ul> <?php for ($i = 1, $l = $pages;$i <= $pages;$i++): ?> <?php $class = ($i == 1) ? ' class="active"' : ''; ?> <li<?php echo $class; ?> data-strips-page="<?php echo $i; ?>"><span><?php echo $i; ?></span></li> <?php endfor; ?> </ul> </div> </div> </div>
Basically, what I did was to put a DIV container around the <UL> tag which is where all the magic happens for the strips and assign the class "sprocket-strips-outer-container" to that DIV.
I copied the "sprocket-strips-overlay" DIV above the UL container and below the UL container as well as removed it from the "sprocket-strips-nav" DIV which is where it was originally below the strips. Then I removed the 'next' code from the first "sprocket-strips-overlay" DIV and removed the 'previous' code from the last "sprocket-strips-overlay" DIV.
Next I added some CSS as follows for the "g-home' body class and "showcase-b" particle position where the RokSprocket Strips module was inserted.
.g-home .showcase-b { .sprocket-strips-item {min-height:300px;height:300px;} .sprocket-strips-arrows, .sprocket-strips-outer-container { display: table-cell; vertical-align: middle; } .arrow {width:25px;} .sprocket-strips-arrows .arrow {display: block;width: 38px;height:38px;line-height: 28px;border-radius: 2em;opacity:1.0;cursor: pointer;float: right;margin-left: 5px;text-align: center;font-size: 3.5em;padding-bottom:2px;} .sprocket-strips-arrows .arrow { background: #ffffff; color: #142d53; box-shadow: 1px 1px 1px rgba(255,255,255,0.5); } .sprocket-strips-item .readon {display:none;} .sprocket-strips-item h4.sprocket-strips-title { font-weight:700; margin-bottom:0; padding-top:85%; } .sprocket-strips-content {z-index: 2;padding: 0px 15px;height:300px;} #g-showcase a { background-color:transparent; color: #ffffff !important; text-shadow:1px 1px 1px #000000 !important; opacity:1; } #g-showcase a:hover, h4:hover, .sprocket-strips-title:hover {text-shadow:1px 1px 1px #ffffff !important;text-decoration:underline;} #g-showcase h1, #g-showcase h2, #g-showcase h3, #g-showcase h4, #g-showcase h5, #g-showcase h6, #g-showcase strong { color: #ffffff; } }
This effectively got the effect I was 'generally' looking for which you can view 'right now' at https://headlandalabama.org/newdesign/ . If this link doesn't load, then we have probably gone live so just remove the "newdesign/".
I did have one hickup that I got when I tried to move the Prev arrow circle so that it overlapped the left strip. I tried every type of z-index but it would not display above the strips. The Next arrow circle did overlap. It was a style I had seen on another site and wanted to replicate but, alas, I couldn't get it to work.
I'm not nearly as smart as some people think I am. LOL
I hope this helps others who might have wanted this functionality. - Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Thanks for sharing!
Regards, Mark. - 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.
-
Time to create page: 0.038 seconds