Need help? Check out our Support site, then


adding horizontal line (break) between widgets on sidebar

  1. Hi guys

    Is there a way to add horizontal line between the widgets that appear on the sidebar (http://cfatutor.me/) .. for example, I want a line (of specific color) that separates between the countdown and the daily trivia .. is it possible? there is already a line that appears on the right sidebar between the most recent posts widgets .. I want something similar to that on the left

    Omar

    The blog I need help with is cfatutor.me.

  2. Try this.

    .textwidget {
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
    padding-bottom: 10px;
    }
  3. it worked but only for the first widget - so right now, it is just showing a horizontal line between the countdown and the CFA daily trivia widgets - nothing is showing for the remaining widgets

  4. Try replacing .textwidget with .widget

  5. it did work except that right now on the side bar I have two horizontal lines between most recent posts (because there was initially one between them)

    look at picture below - screenshot to see it:

    http://cfatutor.files.wordpress.com/2013/09/problem.png

  6. OK I see how it added twice. Lets try this to target the first sidebar.

    .column-narrow:first-child .widget {
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
    padding-bottom: 10px;
    }
  7. I take that back try this instead.

    .column.column-narrow .widget {
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
    padding-bottom: 10px;
    }
    
    .column.column-narrow.colum-last .widget {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    }

    This will work as long as your right column is for posts.

  8. There is still the same problem :) it didnt get solved

  9. thesacredpath
    Staff

    @omaradnan2, I've made a couple changes to @mrdirby's code. One of the things was a missing "n" in .column-last. Give this a try and see what you think.

    .home .column-narrow .widget {
        border-bottom: 1px solid #CCCCCC;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
    .home .column-last .widget {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
  10. @thesacredpath ah missing letter. I was scratching my head on this one because I had it working in the inspector. Good catch.

  11. thesacredpath
    Staff

    Not a problem @mrdirby. The inspector can sometimes fail, at least that is my experience, so it has happened to me too.

  12. @mrdirby @thesacredpath

    I totally forgot about this post as I left on break for a while - thanks a lot .. it does work now (www.cfatutor.me) but quick question .. what if i would like to have the same line break on other pages on the website .. In all other pages there is only the left sidebar .. should i just removed the '.home' from the code?

  13. Try removing home. Does it work?

  14. yes :) thanks

  15. just one tiny detail .. could i change the line color from grey to something else?

  16. Awesome.

    Yes to change the color update the color code in bottom-border line. Change #CCCCCC to the color you want. Here is a good resource to get the correct code. http://www.colorpicker.com/

    .column-narrow .widget {
        border-bottom: 1px solid #CCCCCC;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
  17. So now when I changed the color .. it did change all to the left side bar (the ones that don't have the academica featured post gallery widget) - you can still see grey line to the cademica featured post gallery widget (the widget that shows most recent posts)

    Is there anyway to remove the line from those widgets all together and just show the maroon line for all widgets or that's impossible?

  18. up :)

  19. The following example will change the border color below which it posts in the right sidebar and the very last border at the bottom of the homepage:

    .home.page .posts .page,
    .posts .post,
    .posts .page {
    	border-color: #c00;
    }
  20. Brilliant designsimply - Thank you

    Do you have any idea though why two lines are now showing on the left side bar at the end of it - only in pages though not in home? Look at this for example: http://cfatutor.me/about-blogger/

  21. Yes. The last widget on the left displays posts inside a widget and there are CSS rules in place to add a border below both posts AND widgets. So, the second to last border is for the last post in the widget and the last one is for the widget itself.

    You could write an exception in the CSS like this to get rid of one of the lines:

    .widget:last-of-type {
    	border-bottom: none;
    }
  22. Perfect

Topic Closed

This topic has been closed to new replies.

About this Topic