Need Borders / Shadow Behind Page/Post

Hi @Shop43,

2. To put borders around primary and secondary separately, use following code in Appearance=> Customize => Theme Options=> Custom CSS Styles box:

/* For Main block */
#primary {
    border: 2px solid #000000;
    border-top: none; /* Remove this if you want it in the top as well */
    border-radius: 5px;
}

/* For Sidebar */
#secondary {
    border: 2px solid #000000;
    border-top: none; /* Remove this if you want it in the top as well */
    border-radius: 5px;
}

3. For this, use following code in Appearance=> Customize => Theme Options=> Custom CSS Styles box:

.widget img {
    display: block;
    margin: 0 auto;
}

5. For social icons, I have provided you CSS Code: http://pastebin.com/cr16a4AT. Just add it in Appearance=> Customize => Theme Options=> Custom CSS Styles box and it will have the effect you desire.

NOTE: You have made a mistake in your Custom CSS code. You are missing a } at the end. The Codes I provided will not work unless you fix it.

Hi @Shop43,

1. Oh, you meant separately for each post, well I thought separately for main and primary sidebar :D. For that use following Code:

#primary article {
    border-top: 2px solid #000000; /* Remove this line if you do not want border top */
    border-right: 2px solid #000000; /* Remove this line if you do not want border right */
    border-bottom: 2px solid #000000; /* Remove this line if you do not want border bottom */
    border-left: 2px solid #000000; /* Remove this line if you do not want border left */
    border-radius: 5px;
}

Just remove the lines that you do not want and that side’s border will be removed.

For Sidebar, The Search and Social media icon have bottom border. Do you want to just add just the left and right borders to them, or completely enclose them with a different border removing the previous border. Can you explain this a bit, I am confused.

6. For that use following CSS Code:

#sidebar-header-top .widget.widget_widget_catchbox_adwidget {
    margin: 5px;
}

Just increase or decrease the size of 5px and the margin will increase/decrease.

Regards,
Pratik

Hi @Shop43,

A. For shadow effect, use following CSS code and remove the previous codes(otherwise both border and shadow will appear).

#content {
    overflow: visible;
}

/* For primary main box shadow in each article */
#primary article {
    box-shadow: 10px 10px 5px #888888;
}

/* For secondary sidebar box shadow in widget */
#secondary .widget {
    border: none; /* Remove border. Remove this line if you want border-bottom */
    box-shadow: 10px 10px 5px #888888;
}

I do not think you will want this but if you do, the following code will add border around all widgets in #secondary sidebar:

#secondary .widget {
    border-color: #c2c2c2;
    border-radius: 5px;
    border-style: solid;
    border-width: 2px;
}

B. It looks like you have edited CSS and set the width to be 86% for header top sidebar. A few things to note here:
1. Never edit core theme files like style.css. You will lose all edits when you update the theme.
2. If you want customization, consider using child theme and adding your custom codes there. Details for child theme is here: http://catchthemes.com/blog/create-child-theme-wordpress/
3. Because of the width defined, It is not possible to add a border as border on left in way to the left of the div outside. However, we will be able to add border to image. For that use following code:

#sidebar-header-top .widget.widget_widget_catchbox_adwidget {
    border-color: #c2c2c2;
    border-radius: 5px;
    border-style: solid;
    border-width: 2px;
}

Again, if you want box shadow here too instead of border, use following code instead:

#sidebar-header-top .widget.widget_widget_catchbox_adwidget {
    box-shadow: 10px 10px 5px #888888;
}

Let me know if I explained everything properly. Please let me know if I missed anything or misunderstood anything.

Regards,
Pratik

Hi @Shop43,

If those are the changes, just add them is custom css box and it will not be lost on updates.

Proper way to obtain this effect would be to change the CSS Line 80 width back to 100% and use following CSS code in Custom CSS box:

#sidebar-header-top .widget.widget_widget_catchbox_adwidget a img {
    border-color: #000000;
    border-radius: 5px;
    border-style: solid;
    border-width: 2px;
}
.sidebar-top .widget {
    float: none;
}

Please remove following code that I previously provided.

#sidebar-header-top .widget.widget_widget_catchbox_adwidget {
    border-color: #c2c2c2;
    border-radius: 5px;
    border-style: solid;
    border-width: 2px;
}

For line 74 and 83, just add following code in Custom CSS box:

.site {
	width: 1080px;
}
#primary {
	width: 620px;
}

So now, you will not need to create a child theme or edit the core theme files.

Regards,
Pratik

Hi @Shop43,

Thank you for the appreciation.

Regards,
Pratik