Please add the ability to create a custom global CSS file. The JavaScript workaround is really unnecessary and cumbersome when the solution to many of these things could be one simple line of CSS.
14 Likes
Still waiting for this, I just want to edit a text field to go from LTR to RTL, can’t seem to find out how and it’s driving me nuts!
What is the Javascript workaround you discovered? Even if it’s cumbersome, I’d love to use a workaround that at least works in some capacity! I can’t seem to figure out any other methods presently on my own.
1 Like
Yes even if it’s basics CSS for text inside Wix apps. eg adding customization to google calendar app’s text.
I don’t know if this will help. Depends on what you needed CSS for. I have a multilingual website where I just wanted to set fonts, font-sizes, font-colors, letter-spacing, line-spacing and font-weight across the entire website (across multiple languages). Also, I was limited by 6 font styles (H1 ~ 6), so this is how I overcame it, though it is “very” cumbersome.
Step 1 : Create a public .js file
Step 2 : In the public .js file create some global variables and functions you can can call on any page :
///////////////////////
//My CSS code - START//
export let CSS = {
//font basic parameters
fontfamily: {},
fontweight: {
normal: "font-weight:350;",
thin: "font-weight:100;",
light: "font-weight:250;",
medium: "font-weight:400;",
bold: "font-weight:600;"
},
color: {
white: "color:white;",
black: "color:black;",
darkGray: "color:#545454;",
lightGray: "color:#7F7F7F;",
darkBlue: "color:#244571;",
lightBlue: "color:#008AFC;",
},
sizes: {},
px : "px", //incase want to change size unit
lineHeight,
letterSpacing,
align: {
center: "text-align:center",
justify: "text-align:justify",
left: "text-align:left",
right: "text-align:right"
},
//font styles
dark_40: "",
black_40: "",
white_40: "",
light_40: "",
darkBlue_40: "",
lightBlue_40: "",
dark_35: "",
black_35: "",
white_35: "",
white_30: "",
white_25: "",
black_25: "",
light_25: "",
dark_25: "",
white_20: "",
dark_20: "",
light_20: "",
white_18: "",
light_18: "",
dark_18: "",
black_18: "",
dark_16: "",
black_16: "",
light_16: "",
darkBlue_16: "",
lightBlue_16: "",
white_14: "",
dark_14: "",
light_14: "",
black_14: "",
white_12: "",
dark_12: "",
light_12: "",
black_12: "",
};
export async function initializeCSS() {
switch (wixWindow.multilingual.currentLanguage) {
case "en": //If English
CSS.lineHeight = 1.2;
CSS.letterSpacing = "0em";
CSS.fontfamily = "Helvetica, Arial, sans-serif;";
CSS.sizes = {
size40: 40,
size35: 32,
size30: 27,
size25: 27,
size20: 22,
size18: 19,
size16: 17,
size14: 14,
size12: 12,
};
break;
case "ja": //If Japanese
CSS.lineHeight = 1.5;
CSS.letterSpacing = "0.1em";
CSS.fontfamily = "ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, Helvetica Neue, Helvetica, Arial, sans-serif;";
CSS.sizes = {
size40: 38,
size35: 30,
size30: 25,
size25: 25,
size20: 20,
size18: 17,
size16: 16,
size14: 13,
size12: 11,
};
break;
case "ko": //If Korean
CSS.lineHeight = 1.5;
CSS.letterSpacing = "0em";
CSS.fontfamily = "Apple SD Gothic Neo, NanumBarunGothic, 맑은 고딕, Malgun Gothic, 굴림, Gulim, 돋움, Dotum, Helvetica Neue, Helvetica, Arial, sans-serif;";
CSS.sizes = {
size40: 30,
size35: 28,
size30: 25,
size25: 25,
size20: 22,
size18: 17,
size16: 15,
size14: 12,
size12: 11,
};
break;
case "zh": //If Chinese
CSS.lineHeight = 1.5;
CSS.letterSpacing = "0.1em";
CSS.fontfamily = "Tahoma, Helvetica, Arial, Microsoft Yahei,微软雅黑, STXihei, 华文细黑, sans-serif;";
CSS.sizes = {
size40: 42,
size35: 35,
size30: 27,
size25: 27,
size20: 25,
size18: 19,
size16: 17,
size14: 15,
size12: 13,
};
break;
}
CSS.dark_40 = `${CSS.color.darkGray}font-size:${CSS.sizes.size40}${px};${CSS.fontweight.light}`;
CSS.black_40 = `${CSS.color.black}font-size:${CSS.sizes.size40}${px};${CSS.fontweight.light}`;
CSS.white_40 = `${CSS.color.white}font-size:${CSS.sizes.size40}${px};${CSS.fontweight.light}`;
CSS.light_40 = `${CSS.color.lightGray}font-size:${CSS.sizes.size40}${px};${CSS.fontweight.light}`;
CSS.darkBlue_40 = `${CSS.color.darkBlue}font-size:${CSS.sizes.size40}${px};${CSS.fontweight.light}`;
CSS.lightBlue_40 = `${CSS.color.lightBlue}font-size:${CSS.sizes.size40}${px};${CSS.fontweight.light}`;
CSS.dark_35 = `${CSS.color.darkGray}font-size:${CSS.sizes.size35}${px};${CSS.fontweight.normal}`;
CSS.black_35 = `${CSS.color.black}font-size:${CSS.sizes.size35}${px};${CSS.fontweight.medium}`;
CSS.white_35 = `${CSS.color.white}font-size:${CSS.sizes.size35}${px};${CSS.fontweight.normal}`;
CSS.white_30 = `${CSS.color.white}font-size:${CSS.sizes.size30}${px};${CSS.fontweight.normal}`;
CSS.white_25 = `${CSS.color.white}font-size:${CSS.sizes.size25}${px};${CSS.fontweight.normal}`;
CSS.black_25 = `${CSS.color.black}font-size:${CSS.sizes.size25}${px};${CSS.fontweight.normal}`;
CSS.light_25 = `${CSS.color.lightGray}font-size:${CSS.sizes.size25}${px};${CSS.fontweight.normal}`;
CSS.dark_25 = `${CSS.color.darkGray}font-size:${CSS.sizes.size25}${px};${CSS.fontweight.normal}`;
CSS.white_20 = `${CSS.color.white}font-size:${CSS.sizes.size20}${px};${CSS.fontweight.normal}`;
CSS.dark_20 = `${CSS.color.darkGray}font-size:${CSS.sizes.size20}${px};${CSS.fontweight.medium}`;
CSS.light_20 = `${CSS.color.lightGray}font-size:${CSS.sizes.size20}${px};${CSS.fontweight.normal}`;
CSS.white_18 = `${CSS.color.white}font-size:${CSS.sizes.size18}${px};${CSS.fontweight.normal}`;
CSS.light_18 = `${CSS.color.lightGray}font-size:${CSS.sizes.size18}${px};${CSS.fontweight.normal}`;
CSS.dark_18 = `${CSS.color.darkGray}font-size:${CSS.sizes.size18}${px};${CSS.fontweight.normal}`;
CSS.black_18 = `${CSS.color.darkGray}font-size:${CSS.sizes.size18}${px};${CSS.fontweight.medium}`;
CSS.dark_16 = `${CSS.color.darkGray}font-size:${CSS.sizes.size16}${px};${CSS.fontweight.normal}`;
CSS.black_16 = `${CSS.color.darkGray}font-size:${CSS.sizes.size16}${px};${CSS.fontweight.medium}`;
CSS.light_16 = `${CSS.color.lightGray}font-size:${CSS.sizes.size16}${px};${CSS.fontweight.normal}`;
CSS.darkBlue_16 = `${CSS.color.darkBlue}font-size:${CSS.sizes.size16}${px};${CSS.fontweight.light}`;
CSS.lightBlue_16 = `${CSS.color.lightBlue}font-size:${CSS.sizes.size16}${px};${CSS.fontweight.light}`;
CSS.white_14 = `${CSS.color.white}font-size:${CSS.sizes.size14}${px};${CSS.fontweight.normal}`;
CSS.dark_14 = `${CSS.color.darkGray}font-size:${CSS.sizes.size14}${px};${CSS.fontweight.normal}`;
CSS.light_14 = `${CSS.color.lightGray}font-size:${CSS.sizes.size14}${px};${CSS.fontweight.light}`;
CSS.black_14 = `${CSS.color.black}font-size:${CSS.sizes.size14}${px};${CSS.fontweight.normal}`;
CSS.white_12 = `${CSS.color.white}font-size:${CSS.sizes.size12}${px};${CSS.fontweight.normal}`;
CSS.dark_12 = `${CSS.color.darkGray}font-size:${CSS.sizes.size12}${px};${CSS.fontweight.normal}`;
CSS.light_12 = `${CSS.color.lightGray}font-size:${CSS.sizes.size12}${px};${CSS.fontweight.normal}`;
CSS.black_12 = `${CSS.color.black}font-size:${CSS.sizes.size12}${px};${CSS.fontweight.normal}`;
}
export async function formatHTML(textObject, textContent, fontStyle, fontAlignment) {
textObject.html = `<div style="${fontStyle};font-family:${fontfamily};line-height:${CSS.lineHeight};letter-spacing:${CSS.letterSpacing};${alignment}"> ${textContent}</div>`;
}
What I did above was create a series of global variables and object arrays to store settings (just like you would in CSS). Most of the setting are written in html and stored as strings.
Because my purpose was to modify settings depending on language, I have an initalizeCSS() function which checks website language, and adjusts the font-family, font-size, etc… accordingly. And, within the same function I have a long list of variables, each of which represent font-styles. Here’s I concatenate different CSS settings I need, again using standard HTML format.
Finally I have a function formatHTML() where I can send any text object, along with the text content (it can be content that was already in the textbox or one you are getting from a database/dataset - as in my case), and replace the original HTML with the custom HTML.
Step 3: Import global CSS variables & functions on any page and use them.
//to call CSS variables
import { CSS } from 'public/css-file.js';
//initialize CSS function which adjusts settings based on language
import { initializeCSS } from 'public/css-file.js';
//Utility function to update HTML of any text object
import { formatHTML } from 'public/css-file.js';
$w.onReady(async function () {
await initializeCSS();
// Examples 1 : Updating pre-existing text in a textbox with new font style
formatHTML($w('#textbox1'), $w('#textbox1').text, CSS.dark_25, CSS.align.center);
//Example 2 : Setting different font color based on some condition, for a repeated textBox
$w(`#repeater${number}`).forEachItem(($item, itemData,i) => {
If (condition === "a"){
formatHTML($item('#textbox2'), $item('#textbox2').text, CSS.lightBlue_16, CSS.align.justify);
}
else if (condition === "b")
{
formatHTML($item('#textbox2'), $item('#textbox2').text, CSS.darkBlue_16, CSS.align.justify);
}
});
});
Above is how you can import the public JS file on the page you want to use it, initialize the CSS variables (according to the language, in my case), then start applying styles on each object you need.
I did it for nearly all content on my site, including textboxes, repeaters, dropdownlists etc…
The only drawbacks are :
-
It takes time
-
While it works perfectly in desktop mode, in mobile mode the font-size setting doesn’t work, but others settings do. (It seems Wix overrides font-size in mobile mode , so the only you can set that is manually from the mobile editor. )
P.S : This is my first time doing CSS (sort of) and Javascript, so any suggestions for improvement/optimization are welcome…
1 Like
Hi, I also can’t add a css file? I want to know a simple way of the javascript workaround with classes, ids, font changes, and color changes