adding horizontal line (break) between widgets on sidebar
-
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)
-
Try this.
.textwidget { border-bottom: 1px solid #ddd; margin-bottom: 15px; padding-bottom: 10px; } -
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
-
-
-
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; } -
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, 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; } -
@thesacredpath ah missing letter. I was scratching my head on this one because I had it working in the inspector. Good catch.
-
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?
-
-
-
-
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; } -
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?
-
-
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; } -
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.
