0
Welcome Guest! Login
0 items Join Now

How to apply template buttons to Roksprocket buttons

  • How to apply template buttons to Roksprocket buttons

    Posted 5 years 8 months ago
    • Hi,

      Lumiere template contains different buttons available with special classes ('btn' and related). Also Roksprocket has its own buttons for article continuations rendered with 'readon' class (probably customized in this template). Is there a way to make readon buttons look like general non-colored template button (Plain 'btn')?

      Some of the solution would be to copy 'btn' class styles into my own customized version of 'readon' class, but by inspecting them, they're not compact and live in a code-generated boostrap.css file so the job is not easy.

      Thanks
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: How to apply template buttons to Roksprocket buttons

    Posted 5 years 8 months ago
    • Just restyle the appropriate classes that are already present to look aas you wish in custom CSS.

      When developing web sites it is useful to learn to use either, the Inspector in Firefox, Chrome Developer Tools in Chrome, or one of the other browser developer tools, they will save you hours on things like this and they're very easy to use.


      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.
  • Re: How to apply template buttons to Roksprocket buttons

    Posted 5 years 8 months ago
    • MrT wrote:
      Just restyle the appropriate classes that are already present to look aas you wish in custom CSS.
      This kind of solution will require a huge rework if I switch the site to another RT template. Most RT templates lists the same button classes in the typography section, so they tell me "we're here to stay, use us". So I would like to have time-effective solution when I apply default button ('btn' class) to "read more" buttons of Roksprocket module and get the same default button if I switch to another RT template. Is this too much to ask? :)
    • Last Edit: 5 years 8 months ago by sputnikdesign. Reason: spell corrections
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: How to apply template buttons to Roksprocket buttons

    Posted 5 years 8 months ago
    • I don't agree with your approach at all and I don't think it's a huge amount of work either.

      If you want to change roksprocket to use a different class then you are then going to have to create a roksprocket override for every conceivable roksprocket layout/theme combination (or at least the ones you are using) and then alter the roksprocket html to remove the existing button classes and add the btn classes that you want. Then, you are going to have to override all the roksprocket css for all those different layouts to use the new classes instead...

      ... that sounds like a whole lot more work to me... but of course it's your choice.

      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.
  • Re: How to apply template buttons to Roksprocket buttons

    Posted 5 years 8 months ago
    • MrT wrote:
      I don't agree with your approach at all and I don't think it's a huge amount of work either.
      Ok, probably I wasn't clear about my intensions. The buttons section in the Typography explains that one needs a very simple action to make any a-link a button. Not only this action makes magically a very nice button instead of a link, the button will look always accordingly to the corresponding RT design. So <a> => <a class="btn"> looks like a small action for me. But Roksprocket generates "read more" buttons internally in the php so I have no direct access to the <a> links rendering at least if I don't want to spoil everything with a new update. So I'm looking to a similary small change for styling not just to my hand-made links, but also this code-generated buttons. I'd tell I want too much if it were a module from another vendor, but they're both RT so I expected something easier than creating absolutely new copy of css style. And I'm talking new copy since the style of the default buton is a mix of master_????.css and bootstrap.css files, both compiled so I even can't rely on property inheritance firmly
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: How to apply template buttons to Roksprocket buttons

    Posted 5 years 8 months ago
    • No it doesn't - roksprocket itself contains many different pieces of html code that it uses for all the different possible layout/themes. In addition to that some templates (the Gantry 4 ones predominantly) have roksprocket overrides to override the default behaviour of the roksprocket plugin to provided additional styling compatible with the template in which they reside.

      The roksprocket layout/theme html can be found in /components/com_roksprocket/layouts (but you should never ever change them here as any update to roksprocket would overwrite them). Template overrides for the roksprocket layouts can be found in /templates/TEMPLATENAME/roksprocket (again if this exists already then this will be overwritten again by template updates too, but since you can't have an override of an override you have no choice in this). If you create an override (where one did not exist in the template) then this will be safe from template updates.

      So, you do have access to the "a" links if you alter the existing override (if one exists) or create an override (if one doesn't exist).

      So, my strong advice is that you style the roksprocket readmore buttons using custom CSS (most roksprocket layout/themes use the same class for the button). I advise this because:

      1. It's a simple change.
      2. It won't be overwritten by template updates.
      3. It's wholly transferable between templates without modification.
      4. You only need custom CSS to change what you want and absolutely no more... there is no need to copy anything else.

      If you 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 tell me what button you are trying to change and what you are trying to make it look like.

      Finally I would add that you can hide the existing roksprocket readmore button and just put your own button into the description field of your roksprocket item (or the article). Then you could use whatever classes you wanted to.

      Regards, Mark.
    • The following users have thanked you: sputnikdesign

    • 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.046 seconds