I am looking to use some custom bullet graphics in an un-ordered list. I see that html supports a property for that, but it seems that RSD does not.
Can anyone assist me in achieving this ?
My knowledge of css and html is very very basic if I have to code something, could I please have some examples.
Thx everyone in advance.
Cheers Pete
Peter Hyde
Registered User
43 posts
Oliver Wendt
Registered User
44 posts
Hi Peter,
something like that?
http://realdesign4you.com/custom_li/
something like that?
http://realdesign4you.com/custom_li/
Only dead fish go with the flow!
I work with: RSD - RLMP - WFB - MB - WE 2.0
http://www.realdesign4you.com
I work with: RSD - RLMP - WFB - MB - WE 2.0
http://www.realdesign4you.com
Oliver Wendt
Registered User
44 posts
A quick and dirty solution with integrated options.
1. Create your bullet symbol.
2. Copy the symbol into the resource folder
3. Create a unordered list
4. Select the unordered list and set the list type to none
5. Select a list item and give them a own class. (for example, custom-li)
6. Choose for the "background image resource" - and then your bullet icon
Position „Center“ and „Left“
Give the li class a padding left (it's up to the bullet image)
now you only have to assign the other list points to this class.
1. Create your bullet symbol.
2. Copy the symbol into the resource folder
3. Create a unordered list
4. Select the unordered list and set the list type to none
5. Select a list item and give them a own class. (for example, custom-li)
6. Choose for the "background image resource" - and then your bullet icon
Position „Center“ and „Left“
Give the li class a padding left (it's up to the bullet image)
now you only have to assign the other list points to this class.
Only dead fish go with the flow!
I work with: RSD - RLMP - WFB - MB - WE 2.0
http://www.realdesign4you.com
I work with: RSD - RLMP - WFB - MB - WE 2.0
http://www.realdesign4you.com
Peter Hyde
Registered User
43 posts
Wow, thats great - works a treat!
Thx very much.
Cheers Pete
Thx very much.
Cheers Pete
Linda Menkhorst
Registered User
144 posts
Wow, it really works great. I only have to switch Y off and resize to 40% to fit it, but then when I have a bullet with text for more than one line, the bullet expands and grows. Anything I can do about this. Making the bullet smaller doesnt help, it keeps filling the row when auto is on for Y and X.
Linda Menkhorst
Registered User
144 posts
See last question.
Oliver Wendt
Registered User
44 posts
Hi Linda, what you wrote is correct.
My work around is only for a "one line text"
but here is the solution for a more line text.
http://www.realdesign4you.com/custom_li
in the setting area got to the "Head" and put in following few lines of code
<style>
li.custom-li {background-position: 0px 5px;}
</style>
the first number (0px) is the distance from left and the second (5px) is the distance from the top. With this distance (top) you have to play because it is up to your bullet image and the line high of the text.
Regards Oliver
My work around is only for a "one line text"
but here is the solution for a more line text.
http://www.realdesign4you.com/custom_li
in the setting area got to the "Head" and put in following few lines of code
<style>
li.custom-li {background-position: 0px 5px;}
</style>
the first number (0px) is the distance from left and the second (5px) is the distance from the top. With this distance (top) you have to play because it is up to your bullet image and the line high of the text.
Regards Oliver
Only dead fish go with the flow!
I work with: RSD - RLMP - WFB - MB - WE 2.0
http://www.realdesign4you.com
I work with: RSD - RLMP - WFB - MB - WE 2.0
http://www.realdesign4you.com
Linda Menkhorst
Registered User
144 posts
I am now trying to get this to work, but have still troubles.
Can I use this in my custom.css, what should it be then.
<style>
li.custom-li {background-position: 0px 5px;}
</style>
Regards, Linda
Can I use this in my custom.css, what should it be then.
<style>
li.custom-li {background-position: 0px 5px;}
</style>
Regards, Linda
Linda Menkhorst
Registered User
144 posts
Only the position should be fixed now: http://www.qtouch.nl/opleiding.html
Linda Menkhorst
Registered User
144 posts
Found it, I placed this in custom.css
li.list-item-1 {
background-position: 0px 10px;
}
li.list-item-1 {
background-position: 0px 10px;
}
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.
