Forum Support

Shape 5
March 29, 2024, 01:19:07 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Expertise needed for simple horizontal accordion change  (Read 1088 times)
smuir
Jr. Member
**
Offline Offline

Posts: 117



« on: January 28, 2015, 01:38:55 AM »

Hi guys - great template, as always.  I would love your assistance with a little change I need to make to the horizontal accordion.  Basically, I love the look of 4 published positions in terms of their width, however I need 8 positions published.  What I mean by that is, I simply need to have positions 5, 6, 7 and 8 published below 1, 2, 3 and 4, on a new row, rather than adding them to the same row (ie. 2 rows of 4).  I have looked at default.php for the accordion, and it seems that this change should be simple enough to make if I just apply the same styling that is already there to two groups of 1-4 and 5-10, as opposed to the 1-10 that you set it up as.  I would also need to set the module counter for 8 positions to the same % widths as the module counter for 4 positions, since there will be two lines of 4 positions.

It seems I just need you guys to tell me how best to separate 1-4 and 5-10 into two unordered lists instead of one (?).

I know this borders on customisation but, novice as I am, I can see that a little snippet of code here and there should do the trick and open up a whole new dimension to this awesome accordion.

I beg your kind assistance for some help with this, as I am in love with the slider with this small change.

Thanks guys.  Kiss
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: January 28, 2015, 10:02:53 PM »

Hello,

Adding a second row is not going to be possible without custom programming. Your best bet would be to just duplicate the entire module and assign it to the row below.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
smuir
Jr. Member
**
Offline Offline

Posts: 117



« Reply #2 on: January 29, 2015, 06:25:30 AM »

Thanks Mike, appreciate the answer.  Duplicating the module is actually what I tried first and I thought it was awesome until I realised that it just shows the same ha_1-4 positions as the original, as positions can't be published out of order.  So when I tried it, it was literally just the exact same thing occurring on the page twice (two rows of the same thing).  Are you saying there is a way to publish positions ha_1-4 for the original accordion module, and then duplicate the accordion module and have positions ha_5-8 published (without publishing 1-4 a second time) within that module?  That's exactly what I'm trying to achieve.  Please let me know how to do this, even if it requires a hack.

Thanks again.  Much appreciated.
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #3 on: January 30, 2015, 01:52:23 PM »

I think you should be able to do this with some CSS modifications.  So first remove the overflow:hidden below:

Code:
.horzaccordion {
    color: #ffffff;
    overflow: hidden;
    width: 100%;
}
s5_horizontal_accordion2.css (line )

Then you would need to edit the %'s we have set.  Open up:

\modules\mod_s5_horizontal_accordion\tmpl\default.php and at the top area you'll see:

Code:
<?php if ($module_counter == '2') { ?>.horzaccordion li {width: 50%;}.horzaccordion ul:hover li {width: 30%;}.horzaccordion ul li:hover {width: 70%;}<?php ?>
<?php if ($module_counter == '3') { ?>.horzaccordion li {width: 33.2%;}.horzaccordion ul:hover li {width: 25%;}.horzaccordion ul li:hover {width: 50%;}<?php ?>
<?php if ($module_counter == '4') { ?>.horzaccordion li {width: 25%;}.horzaccordion ul:hover li {width: 20%;}.horzaccordion ul li:hover {width: 40%;}<?php ?>
<?php if ($module_counter == '5') { ?>.horzaccordion li {width: 20%;}.horzaccordion ul:hover li {width: 15%;}.horzaccordion ul li:hover {width: 40%;}<?php ?>
<?php if ($module_counter == '6') { ?>.horzaccordion li {width: 16.6%;}.horzaccordion ul:hover li {width: 13%;}.horzaccordion ul li:hover {width: 35%;}<?php ?>
<?php if ($module_counter == '7') { ?>.horzaccordion li {width: 14.2%;}.horzaccordion ul:hover li {width: 11%;}.horzaccordion ul li:hover {width: 34%;}<?php ?>
<?php if ($module_counter == '8') { ?>.horzaccordion li {width: 12.5%;}.horzaccordion ul:hover li {width: 10%;}.horzaccordion ul li:hover {width: 30%;}<?php ?>
<?php if ($module_counter == '9') { ?>.horzaccordion li {width: 11.1%;}.horzaccordion ul:hover li {width: 9%;}.horzaccordion ul li:hover {width: 28%;}<?php ?>
<?php if ($module_counter == '10') { ?>.horzaccordion li {width: 10%;}.horzaccordion ul:hover li {width:8%;}.horzaccordion ul li:hover {width: 28%;}<?php ?>

Just edit the 12.5% to say 25% or so.   I have no idea the implications of doing this edits as I didn't try but maybe it'll point you in the right direction.

Also you said:

Quote
Are you saying there is a way to publish positions ha_1-4 for the original accordion module, and then duplicate the accordion module and have positions ha_5-8 published (without publishing 1-4 a second time) within that module?  That's exactly what I'm trying to achieve

This won't work as both modules are on the same page.  You could duplicate the module.  Literally make a copy and rename all the files from mod_s5_horizontal_accordion.php to mod_s5_horizontal_accordion_second.php.  This woudl have to occur in the XML file too.  Then zip up the whole folder and install as a brand new module.  But also be sure to remove the first 4 module calls in the default.php file.  They look like:

Code:
<?php if(JModuleHelper::getModules('s5_ha_1')) { ?>
<li>
<div class="image_title">
<div class="image_inner">
<?php
$myblurb_modules = &JModuleHelper::getModules's5_ha_1' );
foreach ($myblurb_modules as $myblurb) {
$_options = array( 'style' => 'raw' );
echo JModuleHelper::renderModule$myblurb$_options );
}
?>

</div>
</div>
<a href="#">
<div class="horzaccordionimage" style="background-image:url(<?php echo $s5ha_imageurl ?>/images/<?php echo $background1?>);" ></div>
</a>
</li>
<?php ?>

This is a lot and should get you going but outside this you'd need to hire a coder.

Hope this helps ya,
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
smuir
Jr. Member
**
Offline Offline

Posts: 117



« Reply #4 on: January 30, 2015, 06:17:09 PM »

Wow - thanks Jonah for going to all that trouble.  I will try this out very soon and get back to you to let you know how it went.  Regardless, I greatly appreciate your response.  It is typical of Shape 5 though - elite support.  Thanks.
Logged
smuir
Jr. Member
**
Offline Offline

Posts: 117



« Reply #5 on: January 30, 2015, 07:05:35 PM »

Hi Jonah

The first CSS suggestion was not a winner, but your second suggestion did the trick.  I did what you suggested, and there were still problems with unwanted modules being published, so since I am a novice I just used a bit of logic to figure out what else needed to be done.  I had to delete the unwanted module counters in both the original and the second modules, as well as remove the module calls in the original for all the unwanted module positions - but only the ones that are actually published (so in my case, 5-8, not 5-10, as removing unpublished module calls still messes it up).

I can't thank you enough.  Smiley
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #6 on: January 31, 2015, 12:11:04 AM »

Glad you got it sorted out. Let us know if you have any further questions!
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.