adding horizontal line (break) between widgets on sidebar

• 

  omaradnan2 · Member · Sep 4, 2013 at 2:34 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  mrdirby · Member · Sep 4, 2013 at 6:23 pm

  • Copy link

  Try this.

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

• 

  omaradnan2 · Member · Sep 5, 2013 at 1:20 pm

  • Copy link

  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

• 

  mrdirby · Member · Sep 5, 2013 at 2:02 pm

  • Copy link

  Try replacing .textwidget with .widget

• 

  omaradnan2 · Member · Sep 5, 2013 at 7:43 pm

  • Copy link

  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:

  

• 

  mrdirby · Member · Sep 5, 2013 at 8:37 pm

  • Copy link

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

• 

  mrdirby · Member · Sep 5, 2013 at 8:45 pm

  • Copy link

  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.

• 

  omaradnan2 · Member · Sep 5, 2013 at 9:51 pm

  • Copy link

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

• 

  thesacredpath · Member · Sep 6, 2013 at 3:36 am

  • Copy link

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

• 

  mrdirby · Member · Sep 6, 2013 at 3:07 pm

  • Copy link

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

• 

  thesacredpath · Member · Sep 6, 2013 at 3:37 pm

  • Copy link

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

• 

  omaradnan2 · Member · Oct 2, 2013 at 12:26 am

  • Copy link

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

• 

  mrdirby · Member · Oct 2, 2013 at 1:52 pm

  • Copy link

  Try removing home. Does it work?

• 

  omaradnan2 · Member · Oct 2, 2013 at 3:23 pm

  • Copy link

  yes :) thanks

• 

  omaradnan2 · Member · Oct 2, 2013 at 3:24 pm

  • Copy link

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

• 

  mrdirby · Member · Oct 2, 2013 at 4:59 pm

  • Copy link

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

• 

  omaradnan2 · Member · Oct 5, 2013 at 4:27 pm

  • Copy link

  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?

• 

  omaradnan2 · Member · Oct 6, 2013 at 10:05 pm

  • Copy link

  up :)

• 

  designsimply · Member · Oct 9, 2013 at 5:45 pm

  • Copy link

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

• 

  omaradnan2 · Member · Oct 10, 2013 at 3:03 pm

  • Copy link

  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/