add a horizontal line

  • Resolved FrankEck

    (@frankeck)


    8 years, 9 months ago

    Hi,

    first of all, thanks for that plugin 🙂

    Currently the widget looks like:

    On-Location-Workshop »Eisenbahnmuseum Dieringhausen«
    2 Aufrufe | 0 Kommentare
    simply red
    2 Aufrufe | 0 Kommentare
    dark lights
    1 Aufruf | 0 Kommentare
    Making of zu »Closer«
    1 Aufruf | 0 Kommentare
    Making of zu »tilting chair«
    1 Aufruf | 0 Kommentare

    I want to improove the list like that:

    On-Location-Workshop »Eisenbahnmuseum Dieringhausen«
    2 Aufrufe | 0 Kommentare
    <hr />
    simply red
    2 Aufrufe | 0 Kommentare
    <hr />
    dark lights
    1 Aufruf | 0 Kommentare
    <hr />
    Making of zu »Closer«
    1 Aufruf | 0 Kommentare
    <hr />
    Making of zu »tilting chair«
    1 Aufruf | 0 Kommentare

    But, how? 🙂

    Thanks for helping!

    https://wordpress.org/plugins/wordpress-popular-posts/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Hector Cabrera

    (@hcabrera)

    8 years, 9 months ago

    Hi Frank!

    Try the following:

    1. Go to Widgets > WordPress Popular Posts and enable the Custom HTML markup option.
    2. Add your <hr /> tag right after the {stats} content tag.
    3. Hit the Save button to, you know, save 😛
    Thread Starter FrankEck

    (@frankeck)

    8 years, 9 months ago

    Yes, it works and I’ve tryed it before. But this create a “space line” after the <hr /> tag. My html-code is:

    <li>{thumb} {title} <br> {stats} <hr /></li>

    …and it’s creates a line after the last item in the list. My thought was a “smarter” solution, for example the widget “Letzte Beiträge / Last Posts” on my Blog (www.eckgolds-fotoecke.de)

    … and thanks for the quick answer!!!

    Plugin Author Hector Cabrera

    (@hcabrera)

    8 years, 9 months ago

    Unfortunately, I’m not near a PC right now so I can’t take a look at it. I’ll make sure to stop by as soon as I can 🙂

    Plugin Author Hector Cabrera

    (@hcabrera)

    8 years, 9 months ago

    I’m back!

    Alright, try the following:

    1. Remove the <hr/> tag from your custom HTML code since we won’t be needing it anymore.
    2. Go to Plugins > Editor and select WordPress Popular Posts from the dropdown.
    3. Click on wordpress-popular-posts/style/wpp.css to edit WPP’s stylesheet.
    4. Find: 
      .wpp-list li { /* LI - post container */
	/*display:inline-block;*/ /* <-- uncommenting this line is recommended when using post thumbnails */
	float:none;
	clear:left;
}

      and change it to:

      .wpp-list li { /* LI - post container */
	/*display:inline-block;*/ /* <-- uncommenting this line is recommended when using post thumbnails */
	float:none;
	clear:left;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

      That creates the line for all LI elements.

    5. Let’s remove the line for the first element. Add this to the stylesheet: 
      .wpp-list li:first-child {
	border: none;
}
    6. Hit the Update file button to save changes.
    7. Copy the wpp.css stylesheet into your theme’s directory. This way you can upgrade WPP without losing these changes safely. Otherwise, next time you update the plugin everything will be undone by WordPress.

    Give it a shot and let me know how it goes, alright?

    Thread Starter FrankEck

    (@frankeck)

    8 years, 9 months ago

    Great!!! I’ve played around with the code and now it fits to my Theme 🙂

    .wpp-list li { /* LI - post container */
		/*display:inline-block;*/ /* <-- uncommenting this line is recommended when using post thumbnails */
		float:none;
		clear:left;
		border-top: 1px solid;
		border-color: LightGrey;
		padding-top: 7px;
		padding-bottom: 7px;
	}

    Thanks a lot! Great Support!!!

    Plugin Author Hector Cabrera

    (@hcabrera)

    8 years, 9 months ago

    Don’t mention it 🙂

    Enjoy the plugin!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘add a horizontal line’ is closed to new replies.