21 {{ upvoteCount | shortNum }}
21 {{ upvoteCount | shortNum }}

Bulleted List CSS - Help Please...

by npaige
18 replies
  • WEB DESIGN
    • |
Hi folks,

On the resource page of my site, I have a bulleted list. The designer originally put this together for me and I am trying to wrap myself around how to edit it.

Questions:
- Do I edit in the text field of that particular page, in the Custom CSS area in theme options, or in the editor itself?

- I would like some space between each item in the list. Right now they are smack dab up against each other w/ no breathing room.

- This is secondary but I have seen more unique objects other than the bullets... such as colored checkmarks or small images...

Here is what a section of the list looks like now. I did put in time researching before asking for help here but didn't find anything straight forward enough...

Thank you!

_____________

<ul>
<li>Your Local Farmer's Market - Buy local. Buy organic. Get to know the farmers in your area. Tip: shop at market closing time to get the best deals. Ask for bulk discounts.</li>
<li>Your Local Wholesale Produce Supplier - Many cities and towns have wholesale suppliers. You can do a Google search to find suppliers in your area. Purchase cases of organic fruits and vegetables for wholesale prices.</li>
<li><strong><a href="The Raw Food World " target="_blank">Raw Food World</a></strong> - Matt and Angela Monarch showcase the best of the best of everything raw-food and raw-lifestyle related. Each month they have "at-cost" specials. Food, books, juicers... Excellent customer service.</li>
</ul>
#bulleted #css #list
  • Profile picture of the author brunski
    is this a wordpress theme that uses css?

    see the following links: CSS list-style-image property and

    html - CSS: Control space between bullet and <li> - Stack Overflow

    do those links answer your question?
    {{ DiscussionBoard.errors[8751242].message }}
    • Profile picture of the author npaige
      it is wordpress. i will take a look. thanks


      Originally Posted by brunski View Post

      is this a wordpress theme that uses css?

      see the following links: CSS list-style-image property and

      html - CSS: Control space between bullet and <li> - Stack Overflow

      do those links answer your question?
      {{ DiscussionBoard.errors[8752150].message }}
    • Profile picture of the author npaige
      no, it does not answer my questions.


      Originally Posted by brunski View Post

      is this a wordpress theme that uses css?

      see the following links: CSS list-style-image property and

      html - CSS: Control space between bullet and <li> - Stack Overflow

      do those links answer your question?
      {{ DiscussionBoard.errors[8752153].message }}
      • Profile picture of the author brunski
        hmm ok i will still look for an answer this week, safe to assume the theme uses styles.css file?
        {{ DiscussionBoard.errors[8752205].message }}
        • Profile picture of the author npaige
          i do appreciate your time. i really have google'd it a bunch of times so let me not put you through that . i need someone to explain it and show it rather than pointing out a site w/ many options.


          i also need to know where to do the edit... as in my original question.


          thanks!


          Originally Posted by brunski View Post

          hmm ok i will still look for an answer this week, safe to assume the theme uses styles.css file?
          {{ DiscussionBoard.errors[8752230].message }}
          • Profile picture of the author brunski
            you would usually edit the style.css file of theme or if there is a custom css inside the theme itself you would add your changes there. if you are just editing one or two items then you would change it on the page you want the changes in.

            Does that help/
            {{ DiscussionBoard.errors[8752308].message }}
            • Profile picture of the author npaige
              yes, thanks!

              Originally Posted by brunski View Post

              you would usually edit the style.css file of theme or if there is a custom css inside the theme itself you would add your changes there. if you are just editing one or two items then you would change it on the page you want the changes in.

              Does that help/
              {{ DiscussionBoard.errors[8752597].message }}
              • Profile picture of the author brunski
                if it doesn't let me know.
                {{ DiscussionBoard.errors[8752644].message }}
  • Profile picture of the author Daniel Fonda
    Originally Posted by npaige View Post

    Hi folks,

    On the resource page of my site, I have a bulleted list. The designer originally put this together for me and I am trying to wrap myself around how to edit it.

    Questions:
    - Do I edit in the text field of that particular page, in the Custom CSS area in theme options, or in the editor itself?

    - I would like some space between each item in the list. Right now they are smack dab up against each other w/ no breathing room.

    - This is secondary but I have seen more unique objects other than the bullets... such as colored checkmarks or small images...

    Here is what a section of the list looks like now. I did put in time researching before asking for help here but didn't find anything straight forward enough...

    Thank you!

    _____________

    <ul>
    <li>Your Local Farmer's Market - Buy local. Buy organic. Get to know the farmers in your area. Tip: shop at market closing time to get the best deals. Ask for bulk discounts.</li>
    <li>Your Local Wholesale Produce Supplier - Many cities and towns have wholesale suppliers. You can do a Google search to find suppliers in your area. Purchase cases of organic fruits and vegetables for wholesale prices.</li>
    <li><strong><a href="The Raw Food World " target="_blank">Raw Food World</a></strong> - Matt and Angela Monarch showcase the best of the best of everything raw-food and raw-lifestyle related. Each month they have "at-cost" specials. Food, books, juicers... Excellent customer service.</li>
    </ul>
    Basically you want to use a class for your <li> items (so it would look something along the lines of <li class="yourstyle">List Item 1</li>

    Or an even simpler way would be to wrap the <li> items within <ul> </ul> tags and use a class for the <ul> tag (that would look something along the lines of):

    <ul class="yourstyle">
    <li>Item 1</li>
    <li>Item 2</li>
    </ul>

    Then you simply open your css file and code in the next code:

    .yourstyle li {margin-bottom: 10px;}

    That should fix your spacing issues.

    If you want to change your bullet images of your list items, you can just add something like this:
    ul
    {
    list-style-image:url('img.png');
    }

    If you need more help, just drop me a line via PM and I'll see what I can do for ya.

    Cheers
    Signature
    {{ DiscussionBoard.errors[8756051].message }}
  • Profile picture of the author Mr Bill
    Depending on how much of a space you want you could try pressing shift+enter at the end of each bullet point. That will create a new line under the bullet point without creating a new bullet point. This double spaces the gap between bullet points though so it might be a bit large. Other than that, the code Daniel posted above is the correct way to do it.
    {{ DiscussionBoard.errors[8756854].message }}
    • Profile picture of the author npaige
      i wish it was that simple, mr bill i tried that about 10 times. upon updating it reverted back to no space between bullets.


      n


      Originally Posted by Mr Bill View Post

      Depending on how much of a space you want you could try pressing shift+enter at the end of each bullet point. That will create a new line under the bullet point without creating a new bullet point. This double spaces the gap between bullet points though so it might be a bit large. Other than that, the code Daniel posted above is the correct way to do it.
      {{ DiscussionBoard.errors[8756986].message }}
  • Profile picture of the author Mr Bill
    Ok, try this. Do the shift enter and then go into the code (text) and see how it did it. Copy it, make it work and then before switching back to visual save it. It might save your changes before it does it's reversion.
    {{ DiscussionBoard.errors[8756995].message }}
  • Profile picture of the author Istvan Horvath
    WP will NOT let anybody to add multiple "empty" lines just by hitting Enter or even Shift+Enter while writing/editing an entry. It is set to delete the empty lines...

    The only way to increase the space between lines or list items, in this case, is to learn some basic CSS and alter the default appearance of your list - along the code given by Daniel: use class(es) in the HTML and define those classes in the CSS.
    Signature

    {{ DiscussionBoard.errors[8757390].message }}
  • Profile picture of the author Mr Bill
    lol... you always bring out the best in me Istvan.

    After some searching and testing (i was SURE shift enter worked...[redface]) I found 2 solutions. One is a hack and the other is more sensible.

    1) The Quick "Life-Hack"/Workaround:
    Pressing shift + enter does start a new line in wordpress as usual but if you don't put something there on the new line wordpress will delete it when you switch views or save because it presumes we made a mistake (bless it's little socks) and will take measures to save us from ourselves.

    Adding a space (after pressing shift+enter) will not help but adding a character will. I added a full stop/period (.) but you don't want a visible dot or character to show in your copy just because you wanted a little extra space under a bullet point so simply colour it white (or the same colour as the background of the page/site) and it becomes "invisible" and creates the needed space under the bullet point.

    1) Press shift + Enter to create a new line for that bullet point
    2) Type any character onto that line
    3) Change the colour of that character so it's the same colour as the background of the page making it invisible and creating your space under bullet point.

    Presuming it's a white page (#ffffff) the actual code (in wordpress*) for that looks like this;

    Code:
    <ul>
<li>Item 1
<span style="color: #ffffff;">.</span>
<span style="color: #ffffff;">.</span></li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
    2) Inline CSS
    Simple inline css solution that is just like Daniel's above but you can do it in the page (or post) code and can apply it to each bullet point individually according to how much space you want. I like the easy fine tune element of doing it this way.

    Ok, when you create a list then look at the text version to see the code it will look something like this for a normal unordered (without numbered bullets) list...

    Code:
    <ul>
<li>Item</li>
<li>item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
    To add some extra space just add this code into any <li> tag like this...

    Code:
    <li style="padding-bottom: 20px;">
    Adjust as needed, for example;

    Code:
    <ul>
<li>Item</li>
<li>item</li>
<li style="padding-bottom: 20px;">>Item</li>
<li style="padding-bottom: 10px;">Item</li>
<li>Item</li>
</ul>
    Try it and come back to report.

    * the new line is a markup directive only understood in wordpress. In normal html simply starting a new line would not create a new line without the <br> command.
    {{ DiscussionBoard.errors[8757434].message }}
    • Profile picture of the author npaige
      thanks mr. bill...... i appreciate your research!


      in the 2nd example... is this correct?


      before the list you are stating the code like this:
      Code:
      <li style="padding-bottom: 20px;">

      and then in the actual list you are using so it knows what to do... and would look like this:


      Code:
      <ul>
<li>Item</li>
<li>item</li>
<li style="padding-bottom: 20px;">>Item</li>
<li style="padding-bottom: 10px;">Item</li>
<li>Item</li>
</ul>

      but why are you restating those two lines of code when you have already stated the code above the list?


      n


      Originally Posted by Mr Bill View Post

      lol... you always bring out the best in me Istvan.

      After some searching and testing (i was SURE shift enter worked...[redface]) I found 2 solutions. One is a hack and the other is more sensible.

      1) The "Life-Hack"/Workaround:
      Presshift shift + enter does start a new line in wordpress as usual but if you don't put something there on the new line wordpress will delete it presuming it's a mistake and saving us from ourselves. Adding a space will not help but adding a character will. I added a period (.) but you don't want a visible period or character to show so simply colour it white (or the same colour as the background of the page/site) and it becomes "invisible" and creates the needed space under the bullet point.


      2) Inline CSS
      Simple inline css solution that is just like Daniel's above but you can do it in the page (or post) code and can apply it to each bullet point individually according to how much space you want. I like the easy fine tune element of doing it this way.

      Ok, when you create a list then look at the text version to see the code it will look something like this for a normal unordered (without numbered bullets) list...

      Code:
      <ul>
<li>Item</li>
<li>item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
      To add some extra space just add this code into any <li> tag like this...

      Code:
      <li style="padding-bottom: 20px;">
      Adjust as needed, for example;

      Code:
      <ul>
<li>Item</li>
<li>item</li>
<li style="padding-bottom: 20px;">>Item</li>
<li style="padding-bottom: 10px;">Item</li>
<li>Item</li>
</ul>
      Try it and come back to report.
      {{ DiscussionBoard.errors[8757464].message }}
      • Profile picture of the author Mr Bill
        Originally Posted by npaige View Post

        thanks mr. bill...... i appreciate your research!


        in the 2nd example... is this correct?


        before the list you are stating the code like this:
        Code:
        <li style="padding-bottom: 20px;">
        and then in the actual list you are using so it knows what to do... and would look like this:


        Code:
        <ul>
<li>Item</li>
<li>item</li>
<li style="padding-bottom: 20px;">>Item</li>
<li style="padding-bottom: 10px;">Item</li>
<li>Item</li>
</ul>
        but why are you restating those two lines of code when you have already stated the code above the list?


        n
        Excellent question!

        The inline css code is added to each item only. <li> means list item.

        That first code you quoted was actually a list item (bullet point) and is not for "defining what's going to occur in the list below". Daniel's solution is more like that.

        This solution is a quick piece of code you can put into any bullet point every time you want a little extra space beneath it. It only defines a point not a whole list.
        {{ DiscussionBoard.errors[8757478].message }}
        • Profile picture of the author npaige
          got it. so w/ your suggestion if i have a list of 5 items and want space between each of them, i would insert that code between each item, correct?


          Originally Posted by Mr Bill View Post

          Excellent question!

          The inline css code is added to each item only. That first code you quoted was actually a list item (bullet point) and is not for "defining what's going to occur in the list below". Daniel's solution is more like that.

          This solution is a quick piece of code you can put into any bullet point every time you want a little extra space beneath it. It only defines a point not a whole list.
          {{ DiscussionBoard.errors[8757482].message }}
  • Profile picture of the author Mr Bill
    You could, but I wouldn't.

    I'd say my solution is more casual but Daniel's solution is better for all items in a list but requires more in depth coding of the css file. Mine's more of a quicker solution for one or two bullet points. To do that for all bullet points would be too much unnecessary code.
    {{ DiscussionBoard.errors[8757539].message }}

Trending Topics