[Shop43]

1. How can I get my pages and post to have a shadow behind them like my home page http://diabeteshut.com/ If this is not possible how do I put a border around the page. I’m using a separate program for the home page, I’m trying to get this theme to look similar to the home page.

2. How can I put borders around the content and widget areas
3. Center widget images and ads
4. Get my header image to fill the width of the page 100%
5. Show Social Icons full color (Remove hover)

[Shop43]

Negate #4 figured that out.

[Pratik]

Hi @Shop43,

1. The effect is from a plugin that you have installed called Thrive Visual Editor. You will need to ask for support from that plugin as it falls outside our theme support scope.

2. The content and widget area in home page has been generated from the plugin above so it will be difficult to provide support for it. For Other Pages, you can use following CSS code in Appearance=> Customize => Theme Options=> Custom CSS Styles box:
`
#primary, #secondary {
border: 1px solid #000000;
}
‘
For more border options, please view following links:
* http://www.w3schools.com/css/css_border.asp
* http://www.w3schools.com/css/css3_borders.asp

3. I cannot understand what you exactly want. Can you explain this a bit more?

4. Great you solved it yourself.

5. Add the code here in Appearance=> Customize => Theme Options=> Custom CSS Styles box.

Regards,
Pratik

[Shop43]

Pratik Thanks

1. DONE (I’m working on the main sections shadow code.)

2. I want to put borders around the #primary and #secondary in Catch Box Pro individually not all together. Similar to how I put bottom borders on my secondary, I want the border to complete the bottom – top- left and right sides.

3. Take a look at the 160×600 banner on the right bottom of my site (Diabetes Breakthrough) and you will notice it is sitting to the left, I want to center these images and ad banners in all my widget settings without centering the text settings. Can this be done and how?

4. DONE

5. I just want to see the Social Icons in full color without hovering over them, I didn’t get the answer from your last posting! How do I make this happen?

Super thanks

[Shop43]

5. (continued) I’d like to see the Social Icons show on my site just like they show on this forums site with no hovering over code (Top right Social Profiles).

Thanks again Pratik

[Pratik]

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.

[Shop43]

Pratik WOW YOUR GOOD!

1. DONE

2. I don’t think I explained this properly, sorry let me try again… If you look at my sites Guest Post ( http://diabeteshut.com/guestpost/ ) you will notice the primary categories are completely separate from each other, I want to put borders around each category itself without touching each other.

If you look at the secondary widget area you will notice the search widget box is completely separate from the social media icon box, I want to put separate borders around the secondary widget area without them touching each other.

3. DONE
4. DONE
5. DONE (Sorry I didn’t understand how to use it the first time, Lol)

6. This is new, Can you send me a CSS code to add margins/padding to my Header Top Sidebar Widget Area (Its for the ad banner at the top of my theme page).

Where almost there Super, Super thanks!

[Pratik]

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

[Shop43]

Pratik your the best!

A. I would like to put a border around the sidebar widgets just like the primary article, Pratik is there a way to put a shadow-box instead of a solid border?

B. I would like to put a solid border around the sidebar header top.

Super thanks Pratik

[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

[Shop43]

Pratik Everything looks GREAT!

CSS Line 80: The reason I edited the header to 86% is when I selected remove right sidebar search from customizer the header would not center. I tried to change the 86% to auto and that would not center either. Is there a correct way to center that header image?

CSS Line 74: I changed the width to 1080
CSS Line 83: I changed the width to 620

I will eventually build a child theme but can I just add the codes in CSS if I update the theme?

Do you possibly have those three codes?

Thanks

[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

[Shop43]

“The Amazing Pratik”

Hey buddy thanks for all the help (and CSS Lessons lol), Everything is working great. I’m going to leave out:
.site {
width: 1080px;
}
#primary {
width: 620px;
}

I just changed it in the core theme for now, I will build a child theme eventually and use it in the CSS Editor instead of the Core CSS so I won’t lose it when upgrading. It has trouble properly showing a good responsive view in devices smaller than 7″

This ticket can be closed as superbly complete!!!

Pratik your the best, thanks

[Pratik]

Hi @Shop43,

Thank you for the appreciation.

Regards,
Pratik

[Author]

Posts