WebSite X5Help Center

18 ANSWERS - 3 USEFUL
Henrik Hansen
Henrik Hansen
User

Hello Tiffany

To add this into X5, use the "HTML and Widgets" object.

Now, to get it running right, I would recommend using the 3-party CSS file, that comes with the download.

You should rename the "style.css" to "bar.css" or something to not overwrite any X5 generated css files.

If you want the bars to be on more than one page, simply insert the links in Step 1 - General settings --> Expert (This page is placed in the right top cornor)

The link should look like this:

<link rel="stylesheet" type="text/css" href="bar.css" /> (If you have called your css file this)

After this, simply upload the bar.css file to your domain.

Henrik

Read more
Posted on the from Henrik Hansen
Henrik Hansen
Henrik Hansen
User

Btw. this is what you should insert in the "HTML and Widgets" object:

100% Fill, Aqua Gradient This is the text above the bar
<div class="barBg"> This is the tag for "Bar"
    <div class="bar hundred aquaGradient"> this line sets how much of the bar that's filled.
        <div class="barFill"></div>
    </div>
</div>

To change the percentage of the filled bar, use e.g. ninety or seventy instead of hundred. 

Regards,

Henrik

Read more
Posted on the from Henrik Hansen
Tiffany R.
Tiffany R.
User
Author

Thanks Henrik Hansen .

Can you capture step by step way of telling me ? Thank you!

Because it seems did not succeed .

About add jquery script , how to add? i have script .

Read more
Posted on the from Tiffany R.
Henrik Hansen
Henrik Hansen
User

Hi Tiffany

Could you please explain what you want to achieve with the bars? It's hard to give you a stepwise tutorial if I don't know what you want them for Wink 

Read more
Posted on the from Henrik Hansen
Henrik Hansen
Henrik Hansen
User

In this case you should link to the .js file in the expert tab in Website X5.

The link should look like this, if you upload the script to the root:

<scripttype="text/javascript" src="jquery.carouFredSel-6.0.4-packed"></script>

There are also some work to do in the index.html file, while there are a lot of CSS you can customize.

To get it working, I would suggest taking all the css codes and putting them in a seperate css file, and name it something like "swipe.css" (Dosen't matter)

Then link to that in the header also.

Then you should use the "HTML and Widgets" object to call the function, with this:

<div id="wrapper">
            <div id="pager"></div>
            <div id="tabs">
                <div id="blue"> # The id is for the browser to know what picture we should look at when clicking.
                    <img src="img/blue_muffin.png" alt="blue_muffin" width="148" height="185" /> # this should be changed to your picture, and the values should be set
                    <h3>Your headline goes here</h3>
                    <p>Your text goes here</p>
                </div>
                <div id="pink">
                    <img src="img/light_pink_muffin.png" alt="light_pink_muffin" width="151" height="245"/> # you link to the next picture here
                  

 <h3>Sesame snaps</h3>
                    <p>Sesame snaps tootsie roll donut. Sweet roll candy canes chocolate bar wafer sweet roll gummies topping gummi bears. Pudding cheesecake cookie. Muffin sweet roll tart tart muffin. Pastry pudding marshmallow cupcake cake toffee toffee bonbon topping. Apple pie cupcake caramels. Icing chocolate bar lemon drops caramels bonbon bear claw.</p>
                </div>
              

 <div id="white">
                    <img src="img/white_muffin.png" alt="white_muffin" width="144" height="153"/>
                    <h3>Apple pie jelly</h3>
                    <p>Apple pie jelly gingerbread gummies topping. Gingerbread jelly marshmallow oat cake wafer lollipop. Cupcake chocolate cake apple pie. Caramels lollipop croissant bear claw brownie carrot cake wafer halvah lollipop. Candy canes tootsie roll jelly-o. Liquorice sugar plum sweet icing tiramisu.</p>
                </div>
            </div>
        </div>

Read more
Posted on the from Henrik Hansen
Tiffany R.
Tiffany R.
User
Author

Thanks , I will try .  you have add success ? (Demo)

Read more
Posted on the from Tiffany R.
Tiffany R.
Tiffany R.
User
Author

great , Thank you !! Cool

Read more
Posted on the from Tiffany R.
Tiffany R.
Tiffany R.
User
Author

So that's limited to the size of your page , you mean? 

Read more
Posted on the from Tiffany R.
Henrik Hansen
Henrik Hansen
User

The Width of the page is set by Website X5 - This I have not found a way to overwrite.

Read more
Posted on the from Henrik Hansen
Tiffany R.
Tiffany R.
User
Author

Hi Henrik , Do you have email or skype , i will send script for you

can help me check ?  thanks!

Tiffany

Read more
Posted on the from Tiffany R.
Henrik Hansen
Henrik Hansen
User

Hello Tiffany

Add *** on skype.

Henrik

Read more
Posted on the from Henrik Hansen
Henrik Hansen
Henrik Hansen
User

master @ webwawes.dk

Read more
Posted on the from Henrik Hansen