WordPress.org

Support

Support » Plugins and Hacks » [Resolved] Add a line between list items (CSS?)

[Resolved] Add a line between list items (CSS?)

  • Hello,

    I would like to add a horizontal line between list elemnents.
    I think CSS would be the solution…

    There is this nice solution:

    /* Flaired edges, by Tomas Theunissen */
    hr.style-seven {
        height: 30px;
        border-style: solid;
        border-color: black;
        border-width: 1px 0 0 0;
        border-radius: 20px;
    }
    hr.style-seven:before { /* Not really supposed to work, but does */
        display: block;
        content: "";
        height: 30px;
        margin-top: -31px;
        border-style: solid;
        border-color: black;
        border-width: 0 0 1px 0;
        border-radius: 20px;
    }

    My question: HOW and WHERE to put the above code, and hot to ACTIVATE it?

    (My knowledge of CSS is rather limited… sorry.)

    Thanks,

    Tamas

    http://wordpress.org/plugins/page-list/

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author webvitalii

    @webvitaly

    I think the css code above will not help you.
    Try this:

    ul.page-list li {
    border-bottom: 1px solid black;
    }

    You can add this code to your style.css file in the admin section.
    Try to visit http://site.com/wp-admin/theme-editor.php (change ‘site.com’ to your site name) and you may edit your style.css file here if you are an admin.

    Or you may add that code via ftp.

    Thanks, webvitaly!

    It is a quick help from you! I really appreciate it.

    So, I have put the code into the css file (just changed it to white, as the background is black). It looks like this now:

    /*
    Theme Name: Atahualpa
    Theme URI: http://wordpress.bytesforall.com/
    Description: Atahualpa is a very customizable and browser-safe (incl. IE6) theme: Choose between fixed or flexible width layout, with min/max width, set between 0 and 4 sidebars on a per-page basis, create custom widget areas, import and export styles (several styles included), choose colors with pickers, adjust over 200 options. Atahualpa is #1 in total downloads and maintained since 2007. Active community at forum.bytesforall.com.
    Version: 3.7.12
    Author: BytesForAll
    Author URI: http://forum.bytesforall.com/
    Tags: white, one-column, two-columns, three-columns, four-columns, fixed-width, flexible-width, custom-colors, custom-header, theme-options, left-sidebar, right-sidebar, threaded-comments, sticky-post, translation-ready
    License: GNU General Public License v2.0
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    */
    
    /* added by Tamas for page-list - START
    */
    ul.page-list li {
    border-bottom: 3px solid white;
    }
    
    /* added by Tamas - END
    */
    
    .aligncenter {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	}
    
    .alignleft {
    	float: left;
    	}
    
    .alignright {
    	float: right;
    	}
    
    .wp-caption {
    	background: #f1f1f1;
    	line-height: 18px;
    	margin-bottom: 20px;
    	padding: 4px;
    	text-align: center;
    }
    
    .wp-caption-text {
    	color: #888;
    	font-size: 12px;
    	margin: 5px;
    	}
    
    .gallery-caption {
    	color: #888;
    	font-size: 12px;
    	margin: 0 0 12px;
    	}
    
    .sticky {
    	font-weight: normal;
    }
    
    .bypostauthor {
    	font-weight: normal;
    }

    However, the list is still the same.
    See:
    http://z.grecso.com/video-list/

    Thanks a lot,

    Tamas

    Plugin Author webvitalii

    @webvitaly

    As I can see your theme style.css is not included into the code.
    This happen rarely.

    Try to add the code to “plugins/page-list/css/page-list.css” file.

    YES! Thanks. Now it works. 🙂

    Greetings,

    Tamás

    Hi, I’m having trouble implementing this on my site. I’m not sure if I’ve put the code in the wrong place in the style.css but I’ve posted it at the end of my “plugins/page-list/css/page-list.css” file.

    I’m using the Meeta theme (link – https://dl.dropboxusercontent.com/u/102198451/style.css).

    Where should I post it in my style.css?

    Thanks for making such a great plugin!

    Plugin Author webvitalii

    @webvitaly

    @dailyfootyvideos: You can put this css code at the end of the plugins/page-list/css/page-list.css and code should work. But also change the plugin’s number to 100 for example for avoiding updates and preventing losing your code.

    I’ve put it at the bottom of the plugins/page-list/css/page-list.css and unfortunately it’s still not working.

    What do you mean by changing the plugin’s number to 100? I don’t understand.

    Also, do I still need to post the code somewhere in my style.css?

    Plugin Author webvitalii

    @webvitaly

    @dailyfootyvideos: Please share link with the problem and I will try to help.

    Also answer please 2 questions:
    1) What you expected to see?
    2) What you got?

    Sure. Here is a link to one of my pages – http://www.dailyfootyvideos.com/jerseys-apparel/

    I would like to have someone like this, just a small black line to separate the sub-pages: https://dl.dropboxusercontent.com/u/102198451/Capture.jpg

    Hope this helps!

    Plugin Author webvitalii

    @webvitaly

    @dailyfootyvideos:

    Try to use this css code (add it to page-list.css):

    .page-list-ext .page-list-ext-item { border-bottom: 1px solid black; overflow: auto; }

    But you will not achieve the short line with border property, because border will have the full width. You should use background property instead:

    .page-list-ext .page-list-ext-item { background: url('path/to/short-line.png') center bottom no-repeat; overflow: auto;}

    Oh great, the first one is working! But I posted the second line of code below it and it has no effect. Am I correctly in pasting it into the page-list.css? Or should I be putting it somewhere else?

    Plugin Author webvitalii

    @webvitaly

    @dailyfootyvideos:

    Code: ‘path/to/short-line.png’ – means that you should create image with the line, upload it to your server and put ‘path/to/it’ in the code sample.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Resolved] Add a line between list items (CSS?)’ is closed to new replies.