Author Topic: Elastic Footer & 1.4 Language  (Read 10683 times)

Offline HighlyFavored

  • Jr. Member
  • **
  • Posts: 21
Elastic Footer & 1.4 Language
« on: November 19, 2019, 11:36:54 AM »
Somehow in editing the Elastic colors via (styles.css), the mobile circle compose button became transparent with a white border.  See the attachment.  How can I fix that?  :)

Also, the mobile compose button covers the next / last messages buttons (> >>).  How can I make the mobile compose button a bit higher?  :)

And, in  En_US, some of the labels aren't there, such as (Enable Emoticons). I want to change that to say (Enable Animated Emoticons).  I added ($labels['enableemoticons'] = 'Enable Animated Emoticons';), but that didn't do anything.  :)

Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,845
Re: Elastic Footer & 1.4 Language
« Reply #1 on: November 19, 2019, 03:33:40 PM »
Quote
Somehow in editing the Elastic colors via (styles.css), the mobile circle compose button became transparent with a white border.  See the attachment.  How can I fix that?
From the Elastic skin readme: Skin color palette changes and other css modifications can be done via _styles.less and _variables.less files. Where you can overwrite all variables and add custom styles.

To change colors then you should the color you want to change in the styles/colors.less file that is part of the Elastic skin and then add that var with the new value to skins/_variables.less and then recompile the the CSS.

Quote
Also, the mobile compose button covers the next / last messages buttons (> >>).  How can I make the mobile compose button a bit higher?

This is a known issue and it will be fixed in Roundcube 1.4.1, see https://github.com/roundcube/roundcubemail/issues/7038

Quote
And, in  En_US, some of the labels aren't there, such as (Enable Emoticons). I want to change that to say (Enable Animated Emoticons).  I added ($labels['enableemoticons'] = 'Enable Animated Emoticons', but that didn't do anything.

I guess you are using the emoticons plugin. You should change the text in that plugin (plugins/emoticons/localization/en_US.inc) rather than the core.
Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and more…

Offline HighlyFavored

  • Jr. Member
  • **
  • Posts: 21
Re: Elastic Footer & 1.4 Language
« Reply #2 on: November 19, 2019, 05:35:30 PM »
I edited the Display Emoticons line using my phone.  I'll look at the .less files later.  :)

Should 1.4.1 be out real soon?  Is 1.5 going to have a admin panel?  :)

Offline HighlyFavored

  • Jr. Member
  • **
  • Posts: 21
Re: Elastic Footer & 1.4 Language
« Reply #3 on: November 20, 2019, 05:46:01 PM »
I fixed my mistake that caused the mobile compose button to have a transparent background, and I was able to change a bunch of the colors in (styles.css).  :)

When the mobile compose button is relocated a bit higher, what file is that change going to be in?  :)

Offline HighlyFavored

  • Jr. Member
  • **
  • Posts: 21
Re: Elastic Footer & 1.4 Language
« Reply #4 on: November 22, 2019, 02:01:04 AM »
Please also answer my last 2 posts.  Thanks!  :)

In the Mailbox View - New Messages area, extra stuff is showing that appears to be from when I was using the (melanie2_larry_mobile) skin.  How can I remove that?  In config plugins list, nothing to do with (melanie2_larry_mobile) is in there.  :)

Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,845
Re: Elastic Footer & 1.4 Language
« Reply #5 on: November 23, 2019, 04:12:14 AM »
Quote
Should 1.4.1 be out real soon?

It was released yesterday

Quote
Is 1.5 going to have a admin panel?

No idea, doubt it

Quote
I fixed my mistake that caused the mobile compose button to have a transparent background, and I was able to change a bunch of the colors in (styles.css).

Again, editing the core files is not the best idea. For Elastic you can use the _styles.less and _variables.less file to customise things as well as extend it just like any other skin.

Quote
When the mobile compose button is relocated a bit higher, what file is that change going to be in?

This is been fixed in 1.4.1

Quote
In the Mailbox View - New Messages area, extra stuff is showing that appears to be from when I was using the (melanie2_larry_mobile) skin.  How can I remove that?  In config plugins list, nothing to do with (melanie2_larry_mobile) is in there.

No idea, have you tried will all plugins disabled?
Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and more…

Offline HighlyFavored

  • Jr. Member
  • **
  • Posts: 21
Re: Elastic Footer & 1.4 Language
« Reply #6 on: November 23, 2019, 04:59:14 AM »
$config['plugins'] = array('emoticons', 'newmail_notifier'); are the only plugins that are turned on.  :)

When the mobile compose button is relocated a bit higher, what file is that change going to be in?  Not what version.  Is that going to be in (styles.css)?  :)

So, I need to find out where all of the color codes are in (styles.css) and change them in (_styles.less)?  That could take over a week!  Once I have all the color changes, I won't need to do that again?  :)
« Last Edit: November 23, 2019, 05:15:02 AM by HighlyFavored »

Offline HighlyFavored

  • Jr. Member
  • **
  • Posts: 21
Re: Elastic Footer & 1.4 Language
« Reply #7 on: November 23, 2019, 05:16:39 AM »
I tested adding the below to (_styles.less), and say no changes.  :)

#layout>div>.header{border-bottom:1px solid #000FFF;color:#FFF000;background-color:#CCC}

Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,845
Re: Elastic Footer & 1.4 Language
« Reply #8 on: November 23, 2019, 11:59:56 AM »
Quote
$config['plugins'] = array('emoticons', 'newmail_notifier'); are the only plugins that are turned on.
Perhaps its not from a plugin then. Its your installation only you know the answers. If you are really stuck have you tried searching the code for the text "keep this checked" or variations of it?

Quote
When the mobile compose button is relocated a bit higher, what file is that change going to be in?  Not what version.  Is that going to be in (styles.css)?

I already gave you this info, I gave you the link to the GitHub issue about it and that has the commit. Here is the link to the exact commit https://github.com/roundcube/roundcubemail/commit/8ca4bf8a3a75de3c7de1658688d42b3c0764ff60

Quote
So, I need to find out where all of the color codes are in (styles.css) and change them in (_styles.less)?

No. There is a Less file in the Elastic skin, styles/colors.less and in there you will find all the color variables for the Elastic skin. Once you have found the var you want to change you copy that var into _variables.less and assign the color you want, compile the css and the color is changed.

Quote
Once I have all the color changes, I won't need to do that again?

Yes, that's the idea things in _styles.less and _variables.less should survive upgrades, so when you upgrade you recompile the CSS and all your customisations are back.
Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and more…

Offline HighlyFavored

  • Jr. Member
  • **
  • Posts: 21
Re: Elastic Footer & 1.4 Language
« Reply #9 on: November 23, 2019, 12:48:24 PM »
I plan to do a new 1 4.1 install when cPanel releases it,  and I'll keep copies of my language changes, and my custom config.  That should remove the stuff that shouldn't be in my current r c.

I'll catch on to editing the _***.less files.  :)

Offline HighlyFavored

  • Jr. Member
  • **
  • Posts: 21
Re: Elastic Footer & 1.4 Language
« Reply #10 on: November 25, 2019, 05:22:54 PM »
The extra lines in the preferences area are coming from the (newmail_notifier) plugin.  I reworded that part.  :)

I still need to learn how to compile LESS to CSS.  Soon I can focus on that. :)
« Last Edit: November 26, 2019, 12:16:46 AM by HighlyFavored »

Offline HighlyFavored

  • Jr. Member
  • **
  • Posts: 21
Re: Elastic Footer & 1.4 Language
« Reply #11 on: November 25, 2019, 09:24:24 PM »
When I figure out how to compile LESS to CSS, what address should the CSS file have (???.css)?  :)

Offline HighlyFavored

  • Jr. Member
  • **
  • Posts: 21
Re: Elastic Footer & 1.4 Language
« Reply #12 on: November 25, 2019, 11:34:44 PM »
I found 2 online LESS to CSS tools.  I'm doing the obvious, but nothing happens.  I even Tested it with a whole (.less) section , just in case one line Isn't enough, but still nothing happens.  :)

Enter Less Here: > @color-main: #4169E1; > Compile Less > Results (Blank).

Offline HighlyFavored

  • Jr. Member
  • **
  • Posts: 21
Re: Elastic Footer & 1.4 Language
« Reply #13 on: November 25, 2019, 11:43:30 PM »
"Yes, that's the idea things in _styles.less and _variables.less should survive upgrades, so when you upgrade you recompile the CSS and all your customisations are back."

Why does the custom css get overwritten with upgrades, causing the need to recompile every time?  :)

Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,845
Re: Elastic Footer & 1.4 Language
« Reply #14 on: November 27, 2019, 03:00:15 AM »
Quote
Enter Less Here: > @color-main: #4169E1; > Compile Less > Results (Blank).
That doesn't sound right. Details of how to compile the CSS can be found in the Elastic readme file:
Quote
All styles are written using LESS syntax. Thus it needs to be compiled
using the `lessc` (>= 1.5.0) command line tool. This comes with the `nodejs-less`
RPM package which depends on nodejs.
```
    $ lessc -x styles/styles.less > styles/styles.css
    $ lessc -x styles/print.less > styles/print.css
    $ lessc -x styles/embed.less > styles/embed.css
```
(the -x option minifies the CSS code)
running those lessc commands will recompile the Elastic CSS, including any customizations you have put in _styles.less and _variables.less.

Quote
Why does the custom css get overwritten with upgrades, causing the need to recompile every time?
There is no other way, changes in the Less files can alter the whole CSS.
Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and more…