Lists and images


wondering if anyone can help

I’m struggling to know why I can’t position the tick in this list
password: wealthyaffiliates

any help much appreciated

Forgive the quick, but obtuse reply.

Please take a look at the example in this post and see if it helps.

In short, the check mark could be positioned to the left of the text in the default <ul> padding.

If this doesn’t do it for you, I’ll be more specific.

sorry I’m a little confused, I’ve tried putting padding on the left and - padding but nothing seems to be working.

What is the :before for? Do I need to be using that?
also for some reason there seems to be styles for widget li and I’ve classed it as .styled_list so I’m not sure what styling is working

Can you shed any light for me?

OK, this basic example is based on your code and looks like it should work:

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <title>positioning list markers</title>
2014.05.18 15:06
    <style type="text/css">
*, *:before, *:after {
ul {
li {
    outline:1px solid lime;   /* TEST Outline. To be deleted */
    border-bottom:1px dotted #efefef;
    background-position:0 1em;   /* adjust vertical position as needed */
    padding:8px 0 8px 30px;    /* adjust left padding as desired */
h3 {
    font-family:'Raleway','Open Sans',sans-serif;


    <li>testing text</li>
    <li><h3>testing text</h3></li>
    <li><h3><span>testing text</span></h3></li>
    <li><h3><span><span>testing text</span></span></h3></li>


This is a standalone working example that demonstrates how to pad the left edge of the text and put the background-image with the red-check in the top left corner of the list item box.

OK, that was too much.

Try this then:
(line 93)

.widget ul li {
    border-bottom: medium none !important;
    [color=blue]padding: 0 0 10px 30px !important;    /* change this style */[/color]
    [color=blue]background-position:0 1em;   /* ADD this style  */[/color]

[color=blue]h3 {margin:0.5em 0;}  /* ADD this style  */[/color]

Thanks @ronpat; I tries the last one. The list is much better allow the arrows need to be down a little more but it’s also changed the appearence of the box the stars are in above.

I’m a little confused, list always stump me

thanks Thanks @ronpat ; for helping me with my list issues. I think I finally may be getting them.

I was wondering if you knew how to make it so there is not so much spacing between them?

There are several factors to be considered and adjusted. These are three of them.

style.css (line 1734)

.widget ul li {
    border-bottom: 1px dotted #EFEFEF;
    display: inline-block;
    font-size: 14px;
    padding: [color=red]8px[/color] 0;  /* override this padding on your local stylesheet. */
    width: 100%;

To do that, add this to your local stylesheet to override the 8px vertical padding shown above.

[color=blue].widget ul li {padding:0;}[/color]

Change bootstrap’s margin-top for the <h3> element:

bootstrap.css (line 417)

h1, h2, h3 {
    margin-bottom: 10px;
    margin-top: [color=red]20px[/color];    /* change to 10px or thereabouts on your local stylesheet */

On your local stylesheet, override the value of the top margin applied by bootstrap to something less:

[color=blue]#styled_list h3 {margin-top:10px}[/color]  /* just a suggestion */

Adjust the position of the red-check by reducing 34px to something like 17px. The actual value will depend on the h3 {margin-top: value ;} that was changed in the previous step.

custom.css (line 59)

ul#styled_list li {
    background-image: url("");
    background-position: 0 [color=red]34px[/color];    /* change to 17px or thereabouts */
    background-repeat: no-repeat;
    border: medium none;
    padding-left: 40px;

There should not be any interactions, but always test carefully after each step. :slight_smile:
The overrides may have to be more specific to avoid affecting other pages.

that’s looking much better now. Do you think?

btw does it make a negative effect on a site when you use css to overide?

When using a theme, it is best to NOT make changes on the original theme files. Should the supplier send updates to a theme, your changes would be lost. If your changes are made to a local stylesheet, then your changes are preserved. Overrides are very common practice when working with themes. Where a theme style may apply to all selectors, such as the vertical padding applied to the list items, it can be overridden on a local stylesheet to target the list items on a specific page or in specific object (container, selector,…).