bulleted list custom CSS

[smile]

Hello,

I created bulled list with simple 4 items.
I then copied CSS code from Dreamwever to custom code in WYSIWYG web builder.

However the copied custom css code does not override.

This my css:

.style1
{
text-decoration: none;
background-color: transparent;
list-style-image: url('images/arrow-readon.gif');
padding-bottom: 2px;
padding-top: 2px;
}


Why do I get the lines added?

text-decoration: none;
background-color: transparent;

[crispy68]

So... you are copying code from Dreamweaver into WB and wondering why Dreamweaver added those 2 lines of code? I assume you know what each line of the code does correct?

[smile]

It's the other way round. I copied working code I use for bulleted list in dreamweaver and it does not work in wysiwygwebbuilder. The two lines are added by wysiwygwebbuilder

[crispy68]

Its the other way round. I copied working code I use for bulleted list in dreamweaver and it does not work in wysiwygwebbuilder

Isn't that what I said?

It's hard to say without seeing what you've actually done. Are you sure the class is correct? Are you sure your code is placed after the generated WB code to override what wb generates? I assume the bullet html code is added via a html box? Need more info.

Those 2 lines shouldn't affect anything as far as I can tell. I would say there is an issue somewhere else.

[smile]

You initially said that : "why Dreamweaver added those 2 lines of code?"

That is not correct, the lines were added by wysiwygwebbuilder.

Yes the code is correct it' used to style a bulleted list too. It adds image.
I know the bulleted list in wysiwygwebbuilder has this option too, but I wanted to use CSS instead.

I added the style using style manager, then applied in the property inspector. So that should work right?
The test page is empty page with only bulleted list from the component toolbox added to the page.

[crispy68]

Hard to say. Would be easier to help if you provided a demo project so we can see your setup.

[BaconFries]

I know the bulleted list in wysiwygwebbuilder has this option too, but I wanted to use CSS instead

And what do you think the bulleted list uses?

I added the style using style manager, then applied in the property inspector. So that should work right?

Not necessarily if your code is invalid or not configured correctly for WWB then it won't work.

The test page is empty page with only bulleted list from the component toolbox added to the page

.
I would look at the code/html/css of the page looking for any class/id and apply it to your "custom" code so that it works correctly.
Note any code external even from Dreamweaver will work in WWB aslong you know how to configure correctly which is really assumed you understand how to. So without seeing what you have done is difficult help you.

[smile]

Project file
https://www.upload.ee/files/15871406/bu ... t.wbs.html

[Pablo]

I added the style using style manager, then applied in the property inspector. So that should work right?

When adding custom code then it is assumed that you know what you are doing. You cannot just do something and expect it to work. It needs to make sense for the browser.

If you add a style to an object then it will be applied to the div container of that object.
So, what you have done is add padding and a transparent background to the div of the object.
And you have a set 'list-style-image' to an non-existent image. Also, the 'list-style-image' does not have any meaning in the context of the bulleted list, because it's a list of divs

Please note that I cannot teach you how to write valid code. That is beyond the scope of the support I can give you.
But if you add valid code then it will work like in any other editor, because the code will be added "AS IS"

[smile]

thank you for reply.
I will not argue what is valid code, you are the developer here.
But this code works with dreamweaver on my PC, works on server.

"So, what you have done is add padding and a transparent background to the div of the object."
That is code from wysiwygwebbuilder if I remove it will be added back. I wonder why?

The image is not nonexistent, it is in folder images in my project.
If I add this style as background the image is shown no problem.

It's just the image is not working with bulleted list. I assume my code is wrong for wysiwygwebbuilder. Can anyone share code shippet that would work

My code is :


This my css:

.style1
{
list-style-image: url('images/arrow-readon.gif');
padding-bottom: 2px;
padding-top: 2px;
}


These lines are added by wysiwygwebbuilder and cant be removed why? If it's customs code it should not add anything.

text-decoration: none;
background-color: transparent;

[smile]

If I add code like background it works.

"background-color: #CCE5FF;"

However standard CSS code for type or image does not work.
https://www.w3schools.com/css/css_list.asp

list-style-type:
list-style-image:

So seems not my code is wrong it background is applied but the wysiwygwebbuilder does not accept changing properties with CSS that can be set inside the Bulleted list -> properties -> General tab

[Pablo]

The reason why it does not work, is because the code is not valid in the context you are trying to use it.
list-style-type and list-style-image cannot be used on divs.

These lines are added by wysiwygwebbuilder and cant be removed why? If it's customs code it should not add anything.

If you want to define custom styles then you can add them via Page HTML instead. The style manager is not meant for adding custom code.

[smile]

The style manager is not meant for adding custom code.

So the provided style manager in wysiwygwebbuilder is not to be used with custom code styles? It can be used with styles done with adjusting the properties in the style manager itself?

Then why there are no bulleted list properties?
Why you simply did not clone proven design of style manager from dreamweaver to remove learning curve for users coming from it to wysiwygwebbuilder? Why invent the wheel?

[smile]

If you want to define custom styles then you can add them via Page HTML instead.

That limits the scope of single page. Style manager but not to be used with custom code, not standard proven design, not site wide. Why?

[Pablo]

I think you are missing the point.
The style manager can be used for custom CSS.
However, you cannot make up you own HTML/CSS rules. The CSS you use needs to be valid for the object you are applying it to.

DreamWeaver is an HTML editor, WYSIWYG Web Builder is not an HTML editor. These are two different type of tools.

[smile]

Well, so what is the proper code I need to add to Style manager to style bulleted list, add image instead of standard decorations? Anyone knows?

[Pablo]

Again please note that I cannot teach you how to write HTML.
But, why don't you use the built-in image option (custom image) of the object?

If that is not good enough then you will need to create a 'bullet' class and set the background image for that class.
See also the structure of the HTML:

Code: Select all

<div class="row">
   <div class="bullet">&bull;</div>
   <div class="item item0"><p>Item 1</p></div>
</div>
<div class="row">
   <div class="bullet">&bull;</div>
   <div class="item item1"><p>Item 2</p></div>
</div>
<div class="row" style="clear:both">
   <div class="bullet" style="height:18px;">&bull;</div>
   <div class="item item2"><p>Item 3</p></div>
</div>
<div class="row">
   <div class="bullet">&bull;</div>
   <div class="item item3"><p>Item 4</p></div>
</div>

[smile]

Hello,

Again please note that I cannot teach you how to write HTML.
But, why don't you use the built-in image option (custom image) of the object?

Because I have multiple bulleted lists in website, and want to have single place to change image for all of them.
This should be available in the Style manager, like you can change background color, border color etc. There is the place to select custom image or the default styles (disc, squore, number etc.). New feature for future version.

You did not post any valid style sheet code ?

[Pablo]

Because you can only define one set of rules in the Style Manager this is not going to work for the bullet list. The bulleted list in WWB is not a single element.

This should be available in the Style manager, like you can change background color, border color etc.

Unlike in Dream Weaver, a bulleted list in WWB is not a numbered or unordered list element. This gives you more control over the layout, but it also makes it also impossible to use a single style, because a WWB bulleted lisy made up out of multiple nested HTML elements.

You did not post any valid style sheet code ?

Writing custom code, it outside the scope of the support I can give you.
The reason why I posted the HTML, it that if you look at this code, then I think it should be clear why your code does not work. Your code it is not valid in this context.