text.html Style

Ask the community
, ,
1

Hi,

I’m trying change the style of additionalInfoSections in wixStore.
But the style does not change.
It looks like it does not affect the at all on the

    tag.

    let ArrayAdditionaInfo = []
        ArrayAdditionaInfo = item.additionalInfoSections
        console.log(ArrayAdditionaInfo)
        ArrayAdditionaInfo.forEach((element) => {
 if (element.title === "מפרט") {
                $w('#tecInfo').html = "<span style='font-size: 0.5em'>" + element.description + "</span>";
            console.log(element)


    Best,
    Yair

    2

    Hey
    In Wix Stores there are styles applied to the Additional Sections. You need to replace those styles in the html rendered by Wix Store.

    What I did when a client needed this was to take the styles from the Wix Stores and modified them and stored that in variables like below. I have this on the Product Page Page Code.

    // Styles
let tableStyle = '<table style="-webkit-border-horizontal-spacing:0px;-webkit-border-vertical-spacing:0px;border-bottom-color:rgb(128,128,128);border-collapse:collapse;border-left-color:rgb(128,128,128);border-right-color:rgb(128,128,128);border-top-color:rgb(128,128,128);box-sizing:border-box;color:rgb(47,46,46);display:table;font-family:lato-light,lato,sans-serif;font-size:16px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-weight:normal;height:100%;line-height:24px;list-style-image:none;list-style-position:outside;list-style-type:none;overflow-wrap:break-word;table-layout:fixed;text-align:left;white-space:normal;width:355px;word-break:break-word;word-wrap:break-word;">';
let tdStyle = '<td style="overflow:hidden;-webkit-border-horizontal-spacing:0px;-webkit-border-vertical-spacing:0px;border-bottom-color:rgb(160,160,159);border-bottom-style:solid;border-bottom-width:1px;border-collapse:collapse;border-left-color:rgb(160,160,159);border-left-style:solid;border-left-width:1px;border-right-color:rgb(160,160,159);border-right-style:solid;border-right-width:1px;border-top-color:rgb(160,160,159);border-top-style:solid;border-top-width:1px;box-sizing:border-box;color:rgb(47,46,46);display:table-cell;font-family:lato-light,lato,sans-serif;font-size:16px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-weight:normal;height:25px;line-height:24px;list-style-image:none;list-style-position:outside;list-style-type:none;overflow-wrap:break-word;padding-bottom:10px;padding-left:10px;padding-right:10px;padding-top:10px;text-align:left;vertical-align:middle;white-space:normal;width:118px;word-break:break-word;word-wrap:break-word;">';
let trStyle = '<tr style="-webkit-border-horizontal-spacing:0px;-webkit-border-vertical-spacing:0px;border-bottom-color:rgb(128,128,128);border-collapse:collapse;border-left-color:rgb(128,128,128);border-right-color:rgb(128,128,128);border-top-color:rgb(128,128,128);box-sizing:border-box;color:rgb(47,46,46);display:table-row;font-family:lato-light,lato,sans-serif;font-size:16px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-weight:normal;height:25px;line-height:24px;list-style-image:none;list-style-position:outside;list-style-type:none;overflow-wrap:break-word;text-align:left;vertical-align:middle;white-space:normal;width:354px;word-break:break-word;word-wrap:break-word;">';
let theadStyle = '<thead style="-webkit-border-horizontal-spacing:0px;-webkit-border-vertical-spacing:0px;border-bottom-color:rgb(128,128,128);border-collapse:collapse;border-left-color:rgb(128,128,128);border-right-color:rgb(128,128,128);border-top-color:rgb(128,128,128);box-sizing:border-box;color:rgb(47,46,46);display:table-header-group;font-family:lato-light,lato,sans-serif;font-size:16px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-weight:normal;height:25px;line-height:24px;list-style-image:none;list-style-position:outside;list-style-type:none;overflow-wrap:break-word;text-align:left;vertical-align:middle;white-space:normal;width:354px;word-break:break-word;word-wrap:break-word;">';
let thStyle = '<th style="-webkit-border-horizontal-spacing:0px;-webkit-border-vertical-spacing:0px;border-bottom-color:rgb(160,160,159);border-bottom-style:solid;border-bottom-width:1px;border-collapse:collapse;border-left-color:rgb(160,160,159);border-left-style:solid;border-left-width:1px;border-right-color:rgb(160,160,159);border-right-style:solid;border-right-width:1px;border-top-color:rgb(160,160,159);border-top-style:solid;border-top-width:1px;box-sizing:border-box;color:rgb(47,46,46);display:table-cell;font-family:lato-light,lato,sans-serif;font-size:16px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-weight:bold;height:25px;line-height:24px;list-style-image:none;list-style-position:outside;list-style-type:none;overflow-wrap:break-word;padding-bottom:10px;padding-left:10px;padding-right:10px;padding-top:10px;text-align:left;vertical-align:middle;white-space:normal;width:118px;word-break:break-word;word-wrap:break-word;">';
let tbodyStyle = '<tbody style="-webkit-border-horizontal-spacing:0px;-webkit-border-vertical-spacing:0px;border-bottom-color:rgb(128,128,128);border-collapse:collapse;border-left-color:rgb(128,128,128);border-right-color:rgb(128,128,128);border-top-color:rgb(128,128,128);box-sizing:border-box;color:rgb(47,46,46);display:table-row-group;font-family:lato-light,lato,sans-serif;font-size:16px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-weight:normal;height:360px;line-height:24px;list-style-image:none;list-style-position:outside;list-style-type:none;overflow-wrap:break-word;text-align:left;vertical-align:middle;white-space:normal;width:354px;word-break:break-word;word-wrap:break-word;">';

let pStyle = '<p style="box-sizing:border-box;color:rgb(47,46,46);display:block;font-family:lato-light,lato,sans-serif;font-size:18px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-weight:normal;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;overflow-wrap:break-word;text-align:left;white-space:normal;width:100%;word-break:break-word;word-wrap:break-word;">'; 

let ulStyle = '<ul style="box-sizing:border-box;color:rgb(47,46,46);display:block;font-family:lato-light,lato,sans-serif;font-size:16px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-weight:normal;height:216px;line-height:24px;list-style-image:none;list-style-position:outside;list-style-type:circle;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;overflow-wrap:break-word;text-align:left;white-space:normal;width:355px;word-break:break-word;word-wrap:break-word;">';
let liStyle = '<li style="box-sizing:border-box;color:rgb(47,46,46);display:list-item;font-family:lato-light,lato,sans-serif;font-size:16px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-weight:normal;height:48px;line-height:24px;list-style-image:none;list-style-position:outside;list-style-type:circle;overflow-wrap:break-word;text-align:left;white-space:normal;width:315px;word-break:break-word;word-wrap:break-word;">';

    Then when I render the sections as you also do I did the below trick to make it work. I have no idea if this is bad or not but it works.

    let newDescription = element.description.replaceAll("<table>",tableStyle).replaceAll("<td>",tdStyle).replaceAll("<th>",thStyle).replaceAll("<tr>",trStyle).replaceAll("<thead>",theadStyle).replaceAll("<tbody>",tbodyStyle).replaceAll("<ul>",ulStyle).replaceAll("<li>",liStyle)

    Then just

    $w('#tecInfo').html = newDescription;

    Hope it helps!

    3

    Thanks, I will Try it…

    4

    @andreas-kviby
    how to set replaceAll to function?

    775×35 1.66 KB

    5

    @avigados Sorry, you will need at that in your page code.

    String.prototype.replaceAll = function(search, replacement) {
 var target = this;
 return target.replace(new RegExp(search, 'g'), replacement);
};
    6

    @andreas-kviby Thanks, but it’s not effect on the