I don't use Xenporta, I'm afraid, so don't know.Works great but would it be possible to also make it work on Xenporta RecentNews section somehow?
No it's just the bullet points it changes, the background is the message area.Can you customize the background? With short words, that is to empty!
No idea. I don't have that problem. All it changes is the look of the bullets when you bullet point a list.This one overlaps adsense block, How can I fix it?
Without using z-index because it's not good looking.
Thanks !
Because of the background colour of the bullet - like I said.The problem on that screenshot is, It overlaps the adsense block.
.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;
}
Nice expansionThanks. 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: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; }
View attachment 123202
Hope you like this.
We use essential cookies to make this site work, and optional cookies to enhance your experience.