Jump to content

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


ramf

Recommended Posts

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:

image.thumb.png.4b9b9bf4adf5814b2745a7a4b38eff0c.png

 

It will be like this:

image.thumb.png.7c365b68866a5f4bd7f42bbf14a40398.png

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

 

Link to comment
Share on other sites

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....

SZwuYSQ.png

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

Edited by brian!
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:

image.png.c18a63cdb171737571a3c04f05df1aaf.png 

And I want it to be like that:

image.png.749b943e4d8b0fff666052accc0f09f5.png

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 by ramf
Link to comment
Share on other sites

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"

image.png.0dca352fce461c4b3e800b3816c67d59.png  image.png.43257825510fd6ddc2c861a5f33c48ee.pngimage.png.e6de1609a0da8f011311c6048aab55e1.png

 

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated