WordPress.org

Ready to get started?Download WordPress

Forums

Adding Space Between Lines in a "Recent Posts" widget (14 posts)

  1. Lance007
    Member
    Posted 4 years ago #

    Hi,

    Please look at my site at http://www.lancesview.com
    On the right sidebar I have a standard text widget for Recent Posts that I took from WordPress default widgets.

    (1) How do I space out the links to the recent posts in the widget so that there is a clear separation between all of them. Right now they seem to run together.

    (2) Is there a way to alternate the text or background color of each post in the "recent post" widget on the right sidebar to distinguish the posts even further?

    I already tried to add the following code to my style.css sheet and to areas of the Atahualpa template that have options for adding code such as:
    "Body style, Text & Links"
    "Style and Configure Sidebars" -> "Right Sidebar style"
    "Style Widgets" -> "Widget content Box"

    #right #recent-posts-3 ul li { margin-bottom:10px; }

    NOthing has worked so far.

    Does anyone have any other suggestions?

    Thanks

    Lance

  2. Edward Caissie
    Theme Review Admin
    Posted 4 years ago #

    This part of your CSS (around line 59) controls the overall spacing between the posts:

    div.widget ul li {
      border-left:5px solid #115588;
      display:block;
      margin:5px 0 2px 3px;
      padding:0 0 0 5px;
    }

    You could look at editing the above (change the third value in the margin line) or adding something like this:

    div#recent-posts-3 div.widget ul li {
    margin-bottom: 10px;
    }
  3. s_ha_dum
    Member
    Posted 4 years ago #

    Where did you add that CSS? I don't see it anywhere. It does look right though.

    Looks like your theme injects the CSS directly into the head of the page. That means its going to overwrite anything you might put in a stylesheet-- assuming the theme isn't reading style.css and then injecting it, which may be the case. Try putting your CSS immediately before the </head> in your theme files-- usually header.php.

    Question 2: Not the way the widget is written right now. Its not providing any way to distinguish between the different li's. Does this...

    On the right sidebar I have a standard text widget for Recent Posts that I took from WordPress default widgets.

    ... mean that you've edited the default widget and created a new one? If so, it isn't hard to include code that will let you alternate formats.

  4. Edward Caissie
    Theme Review Admin
    Posted 4 years ago #

    @apljdi - I was editing with FireBug, missed that it was not pointing directly to the more commonly used style.css

    Now to the problem at hand ...

    This appears to be the Atahualpa theme and from looking at the multitude and myriad options and convolutions (j/k nr) ... it appears you can take that little snippet of CSS posted above and ...

    1. Go to the theme options page
    2. Near the bottom click on "Add HTML/CSS inserts"
    3. Go to the bottom of that option page for "CSS Inserts"
    4. Add: div#recent-posts-3 div.widget ul li {margin-bottom: 10px;}
    5. Click on the HUGE Save Changes button

    Have at it and good luck, perhaps the author can give an easier method.

  5. s_ha_dum
    Member
    Posted 4 years ago #

    @apljdi - I was editing with FireBug, missed that it was not pointing directly to the more commonly used style.css

    Actually, I was responding to Lance007. We were posting at the same time. I didn't see your post until after mine went up. Oh well, its the nature of the beast.

    Nice fix though.

  6. Edward Caissie
    Theme Review Admin
    Posted 4 years ago #

    We were posting at the same time. I didn't see your post until after mine went up

    @apljdi - LoL, that happens to me a lot, too :)

    Just a thought (for the forum devs / mods) ... wouldn't it be nice if you saw a flag or something on the screen if a post was made before you clicked on the final submit button. Then you have a chance to decide how best to continue before actually "posting" your reply. (SMF powered forums offer it, as an example.)

  7. s_ha_dum
    Member
    Posted 4 years ago #

    Yeah, a flag would be nice. I'd also like posts in the 'my profile' list to be ordered so that recent responses are at the top, not scattered throughout and I'd like the HTML buttons on the 'edit comment' screen... since we are making a list :)

  8. Edward Caissie
    Theme Review Admin
    Posted 4 years ago #

    I'll second all of those :)

  9. Lance007
    Member
    Posted 4 years ago #

    Hey guys,

    Thanks a lot for your help. I am going to try this and will let you know if it works. Sorry for the late response.
    If you can, check back in a couple days.

    Thanks

    Lance

  10. Edward Caissie
    Theme Review Admin
    Posted 4 years ago #

    I'll try to keep an eye on this thread ... feel free to contact me directly if I miss your next update.

  11. Lance007
    Member
    Posted 4 years ago #

    Hi,

    apljdi - I did not modify the default "recent posts" widget - just using it as is.

    cais - Thanks but your suggestion copied below did not do anything:

    it appears you can take that little snippet of CSS posted above and ...
    
       1. Go to the theme options page
       2. Near the bottom click on "Add HTML/CSS inserts"
       3. Go to the bottom of that option page for "CSS Inserts"
       4. Add: div#recent-posts-3 div.widget ul li {margin-bottom: 10px;}
       5. Click on the HUGE Save Changes button
  12. Edward Caissie
    Theme Review Admin
    Posted 4 years ago #

    I could come up with some none too friendly terms for themes with too, too many options ... *hehe*

    Follow the same instructions but for line 4 try this:

    div#recent-posts-3.widget.widget_recent_entries ul li{margin-bottom: 50px;}

    Adjust the 50px to what height you want but use it as a firm test number to start with. The '#recent-post-3' is not absolutely necessary but it is good form to include for specificity sake.

    I installed and tested this, my recent post block was #recent-posts-2, but the style should hold.

    PS: Note the lack of spacing, it is important.

  13. Lance007
    Member
    Posted 4 years ago #

    Hi Cais,

    I just copied and pasted that line in and it did not do anything. Nothing changed as far as I can see.

    Any other suggestions?

    Lance

  14. Edward Caissie
    Theme Review Admin
    Posted 4 years ago #

    You can try it without the '#recent-posts-3' part ...

    div.widget.widget_recent_entries ul li{margin-bottom: 50px;}

    ... again, this is from my test install so there may be other differences to review still.

    PS: I'll see about looking at this again later ... you can also look at your source code for the page and see what might be missing

Topic Closed

This topic has been closed to new replies.

About this Topic