0
Welcome Guest! Login
0 items Join Now

ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down. Read our Farewell Blog Post for more details.

RokNewsPager: a solution for expanding on title click

Last Post
Search Topic

  • RokNewsPager: a solution for expanding on title click

    Posted 13 years 4 months ago
    • Hi,

      It seems that because my sub has ran out, i can't answer to my own topic and provide other people with an answer to my / their problem, so please forgive me for posting here, and feel free to move this topic in the RokNewsPager sub-forum (actually, please do 8) ).

      This post is an answer for one of the most frustrating issues with RokNewsPager: being able to expand your news by clicking on the title (unfortunately, not the title bar, yet), and not only by clicking on the "+" picture (wich is counter-intuitive, by the way).

      First of all, a little check up on my configuration:
      - Joomla v1.5
      - RokNewsPager v1.8 for Joomla 1.5
      - Rt_nebulae_j15 v1.5.2
      - Gantry v3.1.13
      - Apache 2.2.19 / PHP 5.3.5 (through Zend Server Community Edition)

      Let's talk about the solution itself, but before that, a little word about all this:
      I spent a few hours trying to understand how the whole module worked. I don't guarantee it will work on your website, I can't be responsible for what this fix can do to your site, and I sure will provide you with a proof that it works on mine, if asked by PM. I will not have the same configuration as you do, so please think a little before applying the following instructions, to adapt them to your template / Joomla version / whatever.
      I also know there should be better solutions, but I just don't want to touch anything since it works fine right now. If you have any idea at all, feel free to post. Keep in mind that all this is what you would call a hack, and not an official feature at all.
      [Remember to back-up everything from your website before altering anything in the code, and always keep in mind that having a dedicated Joomla for development is always a good thing, on a separated database of course.)

      First of all, you need to remove the links from the title of the RokNewsPager module. Nothing complicated, I did post a fix for that a few months ago here .

      Then, you need to understand how the whole thing works:
      Open "joomla/templates/[your_template]/html/mod_roknewspager/accordion.php". (you should still be inside it since you removed the links)
      Line 32 to 34 (wich looks like something like that:)
      <h3 class="roknewspager-h3">
       <a class="roknewspager-title"><?php echo $title ?></a><span class="roknewspager-toggle"></span>
</h3>
      Now, you have to understand: the "roknewspager-toggle" span has a CSS attribute that defines its background, and RokNewsPager expands your news when this span is clicked.
      Now, all we want is to remove the background image, move the span and make it wider, and place our title inside it. And that, is easy to do. Just cut the PHP part inside the "<a>" tag and paste it inside the "<span>".
      Line 32 to 34 from accordion.php shoud look like that now:
      <h3 class="roknewspager-h3">
        <a class="roknewspager-title"></a><span class="roknewspager-toggle"><?php echo $title ?></span>
</h3>
      Now, refresh your website and ..... it doesn't work (and pretty much made everything go south). :mrgreen:

      Yeah, we only moved the title. We need to edit a few more things before we're good to go.

      Now you have to modify a few lines from the "extensions CSS files" of your template (Please note that I use Nebulae, wich allows you to choose between 8 styling presets, so each preset has an extension-related CSS file).
      So, what I did is: I replaced the span original background by a fully transparent PNG of the exact same width and height as the H3 block (410*20 for me). (I'm pretty sure you could do without a background at all btw).
      So, to replace the background (or remove it), open "joomla/templates/[your_template]/css/extensions-styleX.css" (this is for Nebulae actually, other would be "joomla/templates/[your_template]/css/extensions.css").
      Look for ".roknewspager-toggle" (for me, line 73). You should have a line looking like that:
      .roknewspager-toggle {background-image: url(../images/style6/[something].png);}
      Just edit the line with the URL of your new transparent PNG. It should now look like this:
      .roknewspager-toggle {background-image: url(../images/style6/bg_trans.png);

      Now, to the second CSS file: joomla/templates/[your_template]/css/extensions.css (if you have only 1 style on your template, you should already be looking at it).
      Look for the line regarding the roknewspager-toggle class. For me, it's from line 223 to 227:
      .roknewspager-toggle {width: 16px;height: 16px;right: 10px;top: 9px;position: absolute;cursor: pointer;background-position: -126px 0;background-repeat: no-repeat;}
.roknewspager-toggle:hover {background-position: -126px -23px;}
.roknewspager-toggle:active {background-position: -126px -46px;top: 10px;}
.roknewspager-toggle-active, .roknewspager-toggle-active:hover, .roknewspager-toggle-active:active {background-position: -126px 0;opacity: 0;cursor: inherit;top: 9px;}
.roknewspager-toggle-active, .roknewspager-toggle {transition: opacity 0.2s linear;}
      What you need to do is:
      - Comment out the second and third lines (they just indicate the CSS where to look for the "+" image inside the original background file)
      - Comment out the 4th line or update it according to what you want to do: this line defines what the Span looks like when the news is active.
      - Leave the last line as it is
      - Edit the first line as shown here BUT REMEMBER TO ADAPT IT TO YOUR TEMPLATE AND YOUR WEBSITE:
      .roknewspager-toggle {width: 410px;height: 20px;position: relative;z-index: 0;top: 0px; left: 0px; right: 0px; bottom: 0px;cursor: pointer;background-repeat: repeat;}
      A few of theses attributes look useless in our case, but I prefer to keep then so I don't break anything since it works. (I know, you already read that somewhere).
      You can add a line like this to remove the "hand" cursor on the active news' title : ".roknewspager-toggle{cursor: inherit;}"
      So, for now, your 223 to 227 lines should be like that:
      .roknewspager-toggle {width: 410px;height: 20px;position: relative;z-index: 0;top: 0px; left: 0px; right: 0px; bottom: 0px;cursor: pointer;background-repeat: repeat;}/**/
/*.roknewspager-toggle:hover {background-position: -126px -23px;}*/
/*.roknewspager-toggle:active {background-position: -126px -46px;top: 10px;}*/
/*.roknewspager-toggle-active, .roknewspager-toggle-active:hover, .roknewspager-toggle-active:active {background-position: -126px 0;opacity: 0;cursor: inherit;top: 9px;}*/
.roknewspager-toggle-active {cursor: inherit;}
.roknewspager-toggle-active, .roknewspager-toggle {transition: opacity 0.2s linear;}


      Well, here you are, now it should be working. Just reload your website and see for yourself. Just one last thing, the display could have been altered (will have been actually) since we edited some CSS line. Just try out a few things and you should be able to get your styling back.

      I hope this helps. As i said, feel free to PM me for an URL to my website where this fix is in place and working. And at least if it doesn't work on your website, it could lead you to a proper solution.

      Greetings,
      Actibase
    #748505

Time to create page: 0.050 seconds