adding horizontal line (break) between widgets on sidebar

  • Author
    Posts
  • #1420665

    omaradnan2
    Member

    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.

    #1420839

    mrdirby
    Member

    Try this.

    .textwidget {
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
    padding-bottom: 10px;
    }
    #1420896

    omaradnan2
    Member

    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

    #1420900

    mrdirby
    Member

    Try replacing .textwidget with .widget

    #1420913

    omaradnan2
    Member

    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:

    #1420917

    mrdirby
    Member

    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;
    }
    #1420918

    mrdirby
    Member

    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.

    #1420919

    omaradnan2
    Member

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

    #1420924

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

    mrdirby
    Member

    @thesacredpath ah missing letter. I was scratching my head on this one because I had it working in the inspector. Good catch.

    #1420931

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

    #1420963

    omaradnan2
    Member

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

    #1420964

    mrdirby
    Member

    Try removing home. Does it work?

    #1420965

    omaradnan2
    Member

    yes :) thanks

    #1420966

    omaradnan2
    Member

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

    #1420967

    mrdirby
    Member

    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;
    }
    #1420969

    omaradnan2
    Member

    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?

    #1420971

    omaradnan2
    Member

    up :)

    #1420972

    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;
    }
    #1420973

    omaradnan2
    Member

    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/

The topic ‘adding horizontal line (break) between widgets on sidebar’ is closed to new replies.