WordPress.org

Ready to get started?Download WordPress

Forums

Page-list
[resolved] Add a line between list items (CSS?) (13 posts)

  1. koostamas
    Member
    Posted 10 months ago #

    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/

  2. webvitaly
    Member
    Plugin Author

    Posted 10 months ago #

    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.

  3. koostamas
    Member
    Posted 10 months ago #

    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

  4. webvitaly
    Member
    Plugin Author

    Posted 10 months ago #

    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.

  5. koostamas
    Member
    Posted 10 months ago #

    YES! Thanks. Now it works. :)

    Greetings,

    Tamás

  6. dailyfootyvideos
    Member
    Posted 6 months ago #

    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!

  7. webvitaly
    Member
    Plugin Author

    Posted 6 months ago #

    @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.

  8. dailyfootyvideos
    Member
    Posted 6 months ago #

    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?

  9. webvitaly
    Member
    Plugin Author

    Posted 6 months ago #

    @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?

  10. dailyfootyvideos
    Member
    Posted 6 months ago #

    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!

  11. webvitaly
    Member
    Plugin Author

    Posted 6 months ago #

    @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;}

  12. dailyfootyvideos
    Member
    Posted 6 months ago #

    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?

  13. webvitaly
    Member
    Plugin Author

    Posted 6 months ago #

    @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.

Reply

You must log in to post.

About this Plugin

About this Topic