[aaustin69]

Hi, as a follow up question to this older post:

Is there a way to create a border color for the icon circle/container? I can see that the Color Customizer has a place to add the icon container background color. I would like to make the circle background color white (which I can do in the Color Customizer), but then also add a color border around the circle. So basically it would be a blue circle border with white background, and then the icon in the middle.

I have attached an image that I created as an example. I had to create this by hand, so it would be much easier if there is some code I can use to do this.

Thanks.

Attachments:

You must be logged in to view attached files.

[aaustin69]

I figured it out. I thought I was suppose to put a comma between class names (mb0,bb0), but I found through another post that just a space between class names is how it works (mb0 bb0).

That did the trick.

Thanks, Alan

[aaustin69]

Not sure if this helps, but I am using the following custom CSS for the Testimonials Slider.

.alt-bg.wpb_testimonial_slider_widget {padding-top:20px;}
.alt-bg.wpb_testimonial_slider_widget {padding-bottom:0px;}
.alt-bg.wpb_testimonial_slider_widget {color: #ffffff; }

I figured the spacing issue has to do with the bottom border, and not the Testimonials Slider, but I really don’t know.

Any help would be appreciated.

Thanks again, Alan

[aaustin69]

Hi Kyle, that doesn’t seem to work.

I was using mb0 in the extra class field in order to eliminate the majority of the space, but when I replace it with bb0 it creates even more space (see attached screen shot).

Also, I tried using both as: mb0,bb0. But that still creates the same result with too much extra space.

Alan

Attachments:

You must be logged in to view attached files.

[aaustin69]

Hi Kyle,

By link, are you referring to the actual webpage? If so, it is my homepage at: http://marketgrouprealty.com

You can also see the same thing on this page: http://marketgrouprealty.com/about/

If you meant something else, please let me know.

Thanks,

Alan

[aaustin69]

And I just realized that by moving the custom css, this fixed the lower border line issue but put the navigation circle back to blue again.

I am going to have to play around with the positions of different css code. Never had to do this before.

Alan

[aaustin69]

Ok, so this is strange. I just started having another similar issue with the color of the lower border line on the header. I have been using the custom CSS below to make the lower border color a very light grey, but the color started showing blue (which I am guessing is from my theme color).

#header-section, #mini-header {
border-bottom-color: #e5e5e5;
}

I was able to resolve the issue by moving the custom css code into a different position. In other words, when I moved custom css below some other custom css, or even above certain css code, the issue was fixed. But for some reason it no longer works in the position it was in (which was right above some Nav search button custom css).

I have never had an issue with custom css only working based on the position it is in. Is this something new?

Alan

[aaustin69]

Ok very strange. After saving the custom css several times (no changes, just re-saving), it now went back to the light grey color. So I guess I am good, although I have no idea why all of this happened.

[aaustin69]

I decided to go with the boxed content for that page, but I would still like to know if there is a solution for the circles, as I would like to use the swift chart for another page.

Thanks,

Alan

[aaustin69]

Hi, please disregard. I was able to figure out the CSS code.

Alan

[aaustin69]

Thanks Mohammad.

[aaustin69]

Hi Mohammad, that worked but I noticed that it also changes the widget title of the text blocks that do not use an icon. Is there a way to separate so it only changes the color on the ones with an icon, or is it all or none?

Thanks, Alan

[aaustin69]

Thanks Rui,

I was able to change the icon colors by using the code in the custom css.

Regarding my second question – is there a way to change the color of the widget title as well, just for the text blocks where I am using the icons? So for example, the home page is the only place I am using icons within the text blocks, so I was hoping I could change the color of the widget title text as well.

Alan

[aaustin69]

Perfect, thanks Kyle.

[aaustin69]

Perfect, thanks Mohammad.