Is there a better way to change buttons float direction without using javascript?

[ramf]

Hi,

I'm newbie and I'm trying to modify a  CSS file so it will work with the new twenty-one template.

One of the things I want to do is to change the direction of the  buttons in the card-headers so instead of like this:

 

It will be like this:

The only way I found to do it is by changing the  class of the div  for each one of them  from "float-right" to  "float-left".

I tried doing it with javascript - something like  that:

document.querySelectorAll("div .card-header h3.card-title.m-0 .float-right")[0].classList.add("float-left");
document.querySelectorAll("div .card-header h3.card-title.m-0 .float-right")[0].classList.remove("float-right");

Is this the best way to achieve my goal?

with the above scenario I have to add the code for each one of the  card-headers . I tried doing it with this function:
 

var cardHeaderLength = document.querySelectorAll("div .card-header h3.card-title.m-0 .float-right").length;
var cardHeader =document.querySelectorAll("div .card-header h3.card-title.m-0 .float-right");

for (var i = 0; i < cardHeaderLength; i++) {
 cardHeader[i].classList.add("float-left");
 cardHeader[i].classList.remove("float-right");
};

So my questions are: is there a better way to change the float direction without javascript or something like that?

Regards,
Ram

 

[brian!]

57 minutes ago, ramf said:

So my questions are: is there a better way to change the float direction without javascript or something like that?

another way might be to modify the two templates that are used to output the sidebars (includes/sidebar.tpl) and panels (clientareahome.tpl) - both of those templates contain the code that floats the chevrons/buttons to the right... so change those two references to float-left, possibly play with their margins in a custom.css file and....

you can do it using a child theme of 21 if that's easier.

Edited March 19, 2021 by brian!

[ramf]

2 hours ago, brian! said:

another way might be to modify the two templates that are used to output the sidebars (includes/sidebar.tpl) and panels (clientareahome.tpl)

Hi @brian!

Thanks!

In your experience modifying the  HTML via the tpl files is better then using javascript?

Regarding the child theme - if I'll modify those files and add them in as a  child theme (and the only difference between the original files to my files is the different class is some of the lines) - what will happen when WHMCS update the template? I know that my template will be used and saved, but any other changed done  by WHMCS will be updated as well?

And one last newbie question - in the child theme files - should I keep the whole file with all the code, or just the part I'm changing? 

I'm newbie in coding and I'm trying to change the direction rom LTR to RTL for the client side and also the admin side, I'm using a premade CSS file that I have from older versions - but it's not working well with the new version 8 (especially in the admin side side bar and search menu that's acting very strange  with my RTL CSS file)  - So please be patient with my questions and lack of knowledge . 

Thanks!

[brian!]

41 minutes ago, ramf said:

In your experience modifying the  HTML via the tpl files is better then using javascript?

personally, i'd view modifying classes via JS as close to being a last resort (unless you don't have access to the source - e.g the code is in an encrypted file) - now if you're saying the above js works, and you don't want to mess with the templates, then I don't have a problem with that either.

to me, it just seems simpler to go to the 2 templates that are ultimately being used to float right and change them - especially when it's only two very minor tweaks.

49 minutes ago, ramf said:

Regarding the child theme - if I'll modify those files and add them in as a  child theme (and the only difference between the original files to my files is the different class is some of the lines) - what will happen when WHMCS update the template? I know that my template will be used and saved, but any other changed done  by WHMCS will be updated as well?

WHMCS will update the 21 theme and not touch your child theme (hopefully! - take a backup of it just in case before updating).

the way I tested it above was to:

1. create a blank child theme and have 21 as its parent.
2. create /includes/sidebar.tpl in child theme folder- copy the code from that template in 21, paste into child theme equivalent template, change float-right to float-left
3. create clientareahome.tpl in child theme folder - copy the code from that template in 21, paste into child theme equivalent template, change float-right to float-left
   I think one file has 1 reference to a float-right, the other has two - you'll be able to figure out in the one that has two which one to tweak.
4. possible tweaks in custom.css - I think I added a 10px to margin-right on the float-left class, but you can play with that... also, you'd have to check if float-0left is used elsewhere, if so, then you just add an id to the class in the template so that it only affects sidebars/panels or use inline CSS styling instead.

there were no other templates in the child theme - only those two templates (plus /css and the theme.yaml file).

59 minutes ago, ramf said:

And one last newbie question - in the child theme files - should I keep the whole file with all the code, or just the part I'm changing? 

you keep all the code.

when the time comes to update WHMCS, then if you check the release notes, it will include a link that will highlight the code changes in the code between the new version and the last maintenance release... the only two files you need to worry about would be sidebar and clientareahome... assuming there aren't any more v8.1 maintenance releases, and so the v8.2  beta circus is soon to begin, I wouldn't expect wholesale changes to either file (unless WHMCS have radical visual changes in mind - unlikely!).

the highlight will show which line has been replaced and what the new line is - then it will be a case of updating both child template files with those changes.... but as I say, i'd be surprised if there were ever a lot of changes to either file... and if there are, they would likely occur with the first major release and not any maintenance releases that follow.

[ramf]

@brian! - Thanks!

[ramf]

Hi again,

I'm uncertain if I should open a new topic or continue here. 

Any way - I'm trying to change  the "Order Summary" section.

This is the current view:

 

And I want it to be like that:

As you can see  some of the text is floating left instead on right. 
I know (as the wonderful @brian! mentioned before) that I can change it directly via the relevant tpl / html files - and just change the float-left class to float-right - but I want to try to do it again with javascript without changing the source code.  

I tried using this javascript code:

var summaryTotalsLength = document.querySelectorAll("span.pull-left.float-left").length;
var summaryTotals = document.querySelectorAll("span.pull-left.float-left");

for (var i = 0; i < summaryTotalsLength; i++) {
 summaryTotals[i].classList.add("float-right");
 summaryTotals[i].classList.remove("float-left");
};

But it's not working. 

When I manually adding the code directly to the console - it's working without a problem.

This is the manual code I'm using in the chrome console:

document.querySelectorAll("span.pull-left.float-left")[0].classList.add("float-right");
document.querySelectorAll("span.pull-left.float-left")[1].classList.add("float-right");
document.querySelectorAll("span.pull-left.float-left")[2].classList.add("float-right");

When I'm using this code everything is floating to the right side.

Maybe it's related to the fact that the "Order Summary" section is dynamic and updating any time I'm configuring the desired options  before continuing  to checkout.

So I guess I can manually change the tpl files and add them as a child theme - but If I want the javascript to work - what am I doing wrong? 

Thanks!

Ram

Edited March 20, 2021 by ramf

[ramf]

And while we at it - one more question if I may...

In the admin side menus - I can't find a way to set the submenu direction so it will be opened on the right of the menu. 
Now when I'm hovering on a menu that have a submenu - the submenu is opened on top of the menu instead of on the side. 

So when I go to clients -> Products/Services - the new menu is opened on top of the client menu instead of the the side like it should be.

And also the text inside the menu is LTR / text-align to the left instead of the right"

  

 

I tried several changes in my CSS file - but coulded find a way to align the text to the right and have the sub menu to be opened on the side (after aligning the  text is should be opened to the left of the menu).

Thanks so much for any help.

Regards,

Ram