Resource icon
Jazz up your bullet lists
- Thread starter Lisa
- Start date
Lisa
Well-known member
I don't use Xenporta, I'm afraid, so don't know.
Lisa
Well-known member
No it's just the bullet points it changes, the background is the message area.
No idea. I don't have that problem. All it changes is the look of the bullets when you bullet point a list.
Lisa
Well-known member
You need to change the colours to suit your site - change the background to something transparent.
Look for
.message .baseHtml ol li {
and change background: #ddd to background: none - see if that works.
I haven't used this code in a while and don't have it installed currently, so it's all guesswork
Look for
.message .baseHtml ol li {
and change background: #ddd to background: none - see if that works.
I haven't used this code in a while and don't have it installed currently, so it's all guesswork
Lisa
Well-known member
Because of the background colour of the bullet - like I said.
Dadparvar
Well-known member
Thanks. Nice!
This will not change lists style in content of Showcase tabs's.
If you want to do it with lists in your Showcase Tabs's content, easily add codes below to your "EXTRA.css":
I don't know how much logical or standard is my work, but the result this:
Hope you like this.
This will not change lists style in content of Showcase tabs's.
If you want to do it with lists in your Showcase Tabs's content, easily add codes below to your "EXTRA.css":
Code:
.primaryContent ol{
counter-reset: li; /* Initiate a counter */
list-style: none; /* Remove default numbering */
*list-style: decimal; /* Keep using default numbering for IE6/7 */
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.primaryContent ol ol{
margin: 0 0 0 2em; /* Add some left margin for inner lists */
}
.primaryContent .baseHtml ol li {
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #ddd;
color: #444;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
.primaryContent .baseHtml ol li hover{
background: #eee;
}
.primaryContent .baseHtml ol li:hover:before{
transform: rotate(360deg);
}
.primaryContent .baseHtml ol li:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
.primaryContent .baseHtml ul li {
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #ddd;
color: #444;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
.primaryContent .baseHtml ul li hover{
background: #eee;
}
.primaryContent .baseHtml ul li:hover:before{
transform: rotate(360deg);
}
.primaryContent .baseHtml ul li:before {
content: '*';
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}Hope you like this.
Lisa
Well-known member
Nice expansion
StonerCommunity
Member
@Lisa
Hello! Lovely work but I do have one question, as it stands the background for the bullet points go all the way to the end of the postbit. Is there a way to limit it so the background only shows for the space where text is present? Alternatively would there be a way to just limit it with a static px value.
Thanks!
Hello! Lovely work but I do have one question, as it stands the background for the bullet points go all the way to the end of the postbit. Is there a way to limit it so the background only shows for the space where text is present? Alternatively would there be a way to just limit it with a static px value.
Thanks!
