JoomlaJunkie - Joomla Template Provider Bringing color to the Joomla community

Hello,

the styling for the unordered lists in this template appear to be doing something odd, but I don't know css very well, so it may not be odd.

I'm using wysiwyg pro 3 as the editor, and when I create unordered lists in an article, if the list item is more than one line long, the bullet image is in between the first and second line on the left.

It looks pretty bad in my opinion. I'm used to seeing the bullets line up with the first line of text.

Here's a page where this is happening:
http://jillbeckeronline.com/services

How can I change the css so that the bullet will be on the same level as the first line in a list item, rather than having it drop down and be in the middle?

Is it a change in the "list-style-position:"?

I'm having a second issue with unordered list styling:

In some articles, I have a list item and then a short paragraph of text below it that is related to the list item. I need the paragraph to be justified/lined up with the first letter of the text in the list item above it.

I tried using the indent button wysiwyg pro, but this interacts with the stylesheet in a way that creates a blockquote tag for the indented text.

I contacted wysiwyg pro support about this and they said:

"If your site stylesheet won’t allow this using the INDENT button… then you can create a new style in your stylesheet that allows exactly what you want, and then add it to your wysiwygPro Styles dropdown in your wysiwygPro settings."

Here's a link to the page where this is happening:
http://jillbeckeronline.com/is-this-you

How would I create a style that does what I'm trying to do, and where would I add it in the template_css.css file?

I know, I know, I need to learn css, but I have to get a few more sites done that have deadlines coming up before I can spend some time learning.

Thanks much for your help

forest

To solve the first question, edit customize.css (located in "/templates/jj_absolute_redux/css/", and find "div#content ul li"

Change this line: background:
transparent url(../images/content/bullet-1.png) no-repeat scroll 5px 50%;

to:
transparent url(../images/content/bullet-1.png) no-repeat scroll 0 0.2em

That will move the bullets as desired!

To solve the second problem I have not used your editor, but to create a style, edit template_css.css, and at the very bottom add:

.insetbutton { padding-left:36px; }

Then I presume you can add it to the style of the editor, but I have never used that editor.

However, if I were going to do it, I would edit the HTML of the page, by clicking a button such as HTML in you editor, and putting <div class="insetbutton">...</div> around each of the paragraphs. If you do that, then each paragraph will have 35px padding on the left, which should move it into the position you wanted. Note that the 36px can be used afterwards to move the paragraphs further right if needs be.

Thanks a bunch, Leckenby!

np, happy to help =)