Joomla Templates Club 406,261 posts

[qrmmaster Friend qrmmasterJoin date: August 2008Posts: 9Downloads:0Uploads:0]

#134272

Here is the problem: When inserting left-aligned images into an article (using class=”caption”), the bullets in simple a unordered lists disappear. Here is an example: http://msep.engr.wisc.edu/index.php/resources/international-students.

Any ideas? Thanks.

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#274831

Here you go:

You need to modify template.css (line 101)

From this:


ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}

To this:


ul {
list-style-image:none;
list-style-position:inside;
list-style-type:inherit;
}


That will do it.

Have fun!
John.

[qrmmaster Friend qrmmasterJoin date: August 2008Posts: 9Downloads:0Uploads:0]

#275036

Thanks for the tip. Your suggestion makes the bullet visible. However, if you want to use the custom bullet provided with the template, you have to use this:

ul {
list-style-image:none;
list-style-position:inside;
list-style-type:inherit;
}

ul li {
list-style-image: url(../images/bullet.gif);
line-height: 160%;
padding-left: 30px;
}

Unfortunately, this interferes with other list styles (checked, stars) so that a separate class would be necessary. Is there a better solution?

Also, I could not replicate the li indent (visible here: http://msep.engr.wisc.edu/index.php/resources/living-in-madison) to the lists next to an image (http://msep.engr.wisc.edu/index.php/resources/uw-campus-resources).

Thanks for the help.

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#275040

Well the main issue with the “Campus Resources” page is that you are wrapping your lists around the image…which rarely looks correct…especially when the length of the list exceeds the length of the image.

Were you to “right align” the image then your lists would look perfect…though they would appear on the left of your image instead of the right.

You could do that or do like you did in “Living in Madison” and drop the list below the image.

Outside of that you’re going to be forced into creating a separate class specifically for that page…which is doable, but a little bit of work. If you do decide to create a new class for that page then the coding would be:


ul {
list-style-image:none;
list-style-position:inside;
list-style-type:inherit;
margin-left:27em;
}

Great looking site, by the way.

John.

[Author]

Posts