How to remove the lines between list items? « Support Forum | Kriesi.at

Support Forum » Twicet

How to remove the lines between list items?

14 posts from 5 voices

Started 2 years ago by dhyams
Latest reply from Devin
This topic is closed
This topic is not a support question

Tags:

dhyams
Member

I have a lot of lists on my web site, and twicet puts what looks like an <h r> between each bullet item. Is there a way to get rid of the line?

For example, this page shows the lines:

http://www.kriesi.at/demos/twicet/about/philosophy/

Posted 2 years ago #
Dude
Dude
Hey,
that's a feature not a bug :)

To remove the borders just delete following code from style1/2/3/4/5.css (depending on the skin you're using):
```
.entry ul, .entry ol{

	border-top:1px solid #ddd;
	}

.entry li{
	border-bottom:1px solid #ddd;
	}
```
Posted 2 years ago #
dhyams
Member

Yep, I know it's just a preference. Thanks for the guidance...I don't know why I didn't see that...that was exactly the file I expected to find it in, but just didn't see it. Blind spot I suppose ;)

Posted 2 years ago #
Dude
Dude

Glad that I could help you :)

Posted 2 years ago #
mbersano
Member

I use the Avisio theme. I've followed these instructions, and indeed it did remove the lines between the each bullet list entry. Now, however, the bullets and progressive indention do not appear in lists that I create in the Wordpress editor. (They appear in the editor, but do not appear on the displayed page. (See: http://inspireproject2.org/?page_id=354) How can I fix this so that I can add normal multi-level, bulleted text in the body of my pages/posts?

Posted 1 year ago #
Devin
Moderator
Hi mbersano,

If you deleted those classes completely from your css you will need to re-add them. You can also re-download the theme from themeforest and re-upload just the .css file you originally edited.

What you can do then, is add the following to your Quick CSS or custom.css:
```
.entry ul, .entry ol{

	border-top: 0;
	}

.entry li{
	border-bottom:0;
	}
```
Posted 1 year ago #
mbersano
Member

Hi Devin. Sorry for the delay in response, but I've been out of commission because of a surgery. I tried what you suggested. First of all, if I upload the original style.css file that I got from Themeforest, not only do I not see the lines and/or bullets, but I immediately lose my "Avisio Options" tab in Wordpress. Have tried that many times, and get the same result. Second, I tried to just to add what I deleted just at the bottom of my current style.css:

.entry ul, .entry ol{

border-top:1px solid #ddd;
}

.entry li{
border-bottom:1px solid #ddd;
}

...and that seems to bring the lines back in-between bulleted entries. It does not bring back the actual bullets, however. If I add the text you suggested:

.entry ul, .entry ol{

border-top: 0;
}

.entry li{
border-bottom:0;
}

...to the same style.css (at the end), nothing happens. If I create a custom.css file containing the text you gave, then upload that into the same directory with style.css, nothing happens. (By default there is no custom.css or quick.css file with the theme, at least that I can find.) So, I'm not sure what to do next. I would really like the nested bullet points without the lines, but will take them even WITH the lines if I can get them. At present, no matter what I do I can't get bullets to appear.

Posted 1 year ago #

Mya

Hi mbersano,

By default, the bullet is actually an image so you'll need to add this to your CSS.

.entry ul li {
    background: url("../images/skin1/bullet_list.png") no-repeat scroll 0 12px transparent;
}

I'm going to list the entire code here that way you can just paste over what you already have.

.entry ul, .entry ol {
    border-top: 1px solid #D6D6D6;
    color: #555555;
}
.entry ul li {
    background: url("../images/skin1/bullet_list.png") no-repeat scroll 0 12px transparent;
    border-bottom: 1px solid #D6D6D6;
}
.entry ol li {
    border-bottom: 1px solid #D6D6D6;
}

Remember though to change the border-bottom from 1px to 0 if you don't want a border.

Regards,
Mya

Posted 1 year ago #

mbersano
Member

Hi Mya. Thanks so much for your help. I've pasted what you posted above into the bottom of style.css. As you said, changing the code from 1px to 0px gets rid of the borders, changing it back to 1px puts them back in. So I can see that the code is working and having an effect. Still, however, no bullets appear and no nesting. See http://inspireproject2.org/?page_id=354. These lines:
Effective pastor performances
Cultivating competencies of pastor and staff
Best practices of pastoral leadership
...represent 3 different levels of nesting (indentation), so there should be 3 different bullets and 3 different indent levels. But nothing. Any idea what is going on? I'm a bit baffled.

Posted 1 year ago #
Mya
Hi mbersano,

I took a look at your source code and what I find is the following:
```
.entry ul li {
    background: none repeat scroll 0 0 transparent;
}
.entry ul li {
    list-style-type: none;
    padding: 3px 0 3px 10px;
}
.entry li {
    border-bottom: 1px solid #DDDDDD;
}
```
With the code above the background image is set to none. I noticed you were using W3 Total Cache. It's possible the plugin has cached your old CSS file.

As far as the nested indents you'll need to add the following code to your CSS. You can change the margins and list-styl-types to suit your needs.
```
.entry ul ul, .entry ul ul ul {
   margin-left:10px;
}
.entry ul ul li {
   list-style-type:disc;
}
.entry ul ul ul li {
  list-style-type:circle;
}
```
Regards,
Mya
Posted 1 year ago #
mbersano
Member

Thank you, Mya. First of all, I deactivated W3 Total Cache, just to be sure it wasn't interfering. Then I added the code you last posted. It did put in bullets, but ONLY after the 2nd indentation. (Nothing showed from the first two.)

So, then I started doing some investigative work:

1. I finally was able to replace my edited style.css with the current version from Themeforest (without getting an error). It is version 1.21. When I did, no lines, no bullets. I tried adding your code, and got what I described above (bullets after the 2nd indent). I then took your code out.
2. I then changed the SKIN, from Avisio - Default to Avisio - Minimal, on a whim. Voila. Lines and bullets, though no NESTED bullets. (All Show up at one level.) I added back in your code, and bullets nest correctly.
3. I switched the SKIN back to Avisio - Default, and lines and bullets go back to the behavior described in #1.
4. I switch to my edited style.css, and same thing. Works with your code as expected under the Avisio - Minimal skin, but not under Avisio - Default skin.

The only issue is that every time you increase an indentation level, it seems to double the line right above the the newly indented entry: see http://inspireproject2.org/?page_id=354. Any ideas what's causing this?

So, in the long run, there seems to be something wrong with the Avisio - Default skin directly, or its interplay with style.css. I would rather use the Default skin, as it adds shading that makes the page more interesting in my opinion, but I can live with the trade-off for now. If you have any ideas what's going on here, though, I'd be very grateful to hear them. Thanks for your assistance and patience!

Posted 1 year ago #
Mya
Hi mbersano,

Interesting. I'll see if the team has any ideas as to what's going on with the default skin.

As far as the double borders, that's caused by a top border being applied to the UL itself. So you'll need to compensate by adding this to your CSS:
```
.entry ul ul, .entry ol ol, .entry ul ul ul, .entry ol ol ol {
    border-top: 0;
}
```
Regards,
Mya
Posted 1 year ago #
mbersano
Member

Thanks, Mya. That did the trick on the doubled line. Now the Skin is the only issue.

So to recap, I've appended the following to the bottom of my edited style.css (which, by the way, is also version 1.21):

.entry ul ul, .entry ul ul ul {
margin-left:10px;
}
.entry ul ul li {
list-style-type:disc;
}
.entry ul ul ul li {
list-style-type:circle;
}
.entry ul ul, .entry ol ol, .entry ul ul ul, .entry ol ol ol {
border-top: 0;
}

Works just fine with skin Avisio - Minimal. When I switch back to Avisio - Default, however, lines and bullets disappear, though the nesting itself stays in place. Same behavior whether I'm using the unedited style.css version 1.21 directly from ThemeForest, or my edited style.css version 1.21.

Posted 1 year ago #
Devin
Moderator

Hi mbersano,

I'm concerned this is getting a bit of a mess to follow and that its mostly about Avisio but on a support item in the Twicet forum.

I'm going to lock this thread for now, and would appreciate if you could create a new support request in the Avisio forum re-stating what you are looking to achieve now.

Thank you and I'm sorry for the brief inconvenience of having to ask one more time :)

Regards,

Devin

Posted 1 year ago #