How Can I translated the HTML5 code...

User 131545 Photo


Registered User
687 posts

Dear support, developers
I have this code in html5. My question is how can build this as visual design in Site Designer v4.0?
I have first an div container, then an div row and then two div columns col-md-6
<code>
<div class="col-md-6">
<ul class="no-bullets">
<li>
<span class="ability-title">Dutch (Mother tongue)</span>
<span class="ability-score">
<span class="glyphicon glyphicon-star filled"></span>
<span class="glyphicon glyphicon-star filled"></span>
<span class="glyphicon glyphicon-star filled"></span>
<span class="glyphicon glyphicon-star filled"></span>
<span class="glyphicon glyphicon-star filled"></span>
</span>
</li>
</ul>
</div>
</code>

<pre>
This is the HTML dom tree
Row div.row
Column div.col-md-6
List ul.non-bullets
List Item li
- span.ability-title /* Example CSS3 Skill */
span.ability-score /* Star rating */
- Glyphicon span.glyphicon.glyphicon-star
</pre>

I hope that someone help me with an example how I can do this in SD4
With Kind regards

Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 122279 Photo


Senior Advisor
14,447 posts

I thought you had gone over to hand-coding? So you are using SD4 after all?

Which framework?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts

I seem to remember that you're preferring BS, so I made this little file. See if you can use it.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 131545 Photo


Registered User
687 posts

Inger,

Thanks for the example with the stars

I try to align that group container with stars to the right side of the column, but it doesn't work. Nothing changes when I set the flex properties to "right". You can also give an example by replacing the ratings with a percent bar with% on. I work with css framework bootstrap 4.3.1. I hope that CC support add the span element its then easier for develop websites from the code.

Kind regards
Stephane

Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 122279 Photo


Senior Advisor
14,447 posts

Try 'Justify: space between' on the container 'list-item-container-1'
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 131545 Photo


Registered User
687 posts

Inger,

How can I add an bootstrap progressbar instead of the star rating?
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 122279 Photo


Senior Advisor
14,447 posts

Stefke, I'm on holiday at a place with a very bad internet connection. I may perhaps be able to show you tomorrow. Maybe someone else will help in the meantime.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 379556 Photo


Registered User
1,533 posts

Stefke

1. Instructions for creating the bootstrap progress bar are here.
2. To show that it can easily be done fully in SD4, I attach a copy of the .rsd file that Inger provided modified in the middle line to include the progress bar instead of the stars. I have no experience of using Bootstrat, but simply followed the instructions referred to above.
3. One of the posts above suggested that SD4 needed to have the <span> element added. The text element in SD4 is the <span> element.

I do not propose to provide any further posts regarding this thread, as the instructions in the link above seem clear.

Frank
Attachments:
User 131545 Photo


Registered User
687 posts

Frank,

Can you please the progressbar responsive for all the screen because on small screen that view wrong result
Thanks

Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 122279 Photo


Senior Advisor
14,447 posts

Frank's adaption of the file I made is responsive. The problem with the wrong view is, because we don't know what sort of 'view' you want. Your instruction was a row with two columns. But what are those columns for? I had initially, with the stars, popped everything into one column, without knowing if that was what you wanted.
Now I have used one column for each %-age, not knowing if I've managed this time to hit the nail on the head or not.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.