Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #3489

    I would like to restyle the list in the display theme, but only ones that appear in the content area of posts and pages, not the lists in the sidebar.

    example page of normal Display theme list in content:

    http://webtransit.mobi/atlanta-e-commerce-more

    I am wanting to remove the bottom border on each LI (i guess that line is a border…) and the boss is wanting me to replace the custom bullet image with a standard html bullet indicator like the one below:

    • item one
    • item two

      • item a

    • item 3
    • Meaning he would like the bullet to be just like if I took a plain html document with no css and created a list in it and viewed it in a browser.

      I made two new classes and applied them to two lists in a post:

      http://webtransit.mobi/services

      .TxsList	ul	{
      border:none;
      }

      .TxsList li {
      border:none;
      }

      But this isn’t very effective for two reasons:

      1- Because it still leaves a line above each list

      2- I can’t really expect the boss and other writers to apply a custom class to every new list we create in every new post (we will if we have to but . . . )

    I’m having a little trouble navigating the style.css and finding where to change this. Can you point me in the right direction.

    #42499

    Hey,

    All the changes you’re looking to make are in the CSS. Using a tool such as FireBug will help you find the CSS which controls various elements.

    Just to get you going in the right direction; using FireBug, I right-clicked on the top li and selected Inspect Element which brings up the FireBug box and highlights the HTML on the left and shows the CSS controlling it on the right: http://cl.ly/2a0f3x2O272m1e3c2I0g.

    I then removed the CSS declarations on the top right of the FireBig box, you can see that this has removed the elements’ style: http://cl.ly/2l2n2T3h2N3E1s3O2S3f

    So you can see that the code controlling the styling is in /css/style1.css on line 85 – you’ll need to make the change here using your editor to remove the styling as FireBug doesn’t save anything.

    Hope this sets you in the right direction.

    James

    #42500

    Thanks for the pointer however in :

    #sidebar .box a, #main #sidebar .box .recentcomments, ul li{
    background:transparent url(../images/skin1/bullet_orange.png) no-repeat scroll 0px 10px;
    border-bottom:1px solid #d6d6d6;
    }

    The #content div is the one I want to change, and it isn’t mentioned here, nor can I find it anywhere. In addition, when I remove #main from the above I see no change in the lists styles, no matter where the list is…

    hmmmm…

    Anyway, I’ve found a fix:

    I deleted the style starting on line 77 and then added:

    ‘#content li {

    border:none;

    background:transparent url(../images/skin1/bullet_black.png) no-repeat scroll 0px 10px;

    }`

    on line #113

    but now the boss is saying he’s like the default html version of a list, so that’s my next challenge.

    Thanks for your help. I’m calling this on e closed!

    #42501

    Glad that you found a solution.

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘List styling’ is closed to new replies.