Rounded Corners for Coloured Box Content

[Rui Guerreiro – SUPPORT]

Hi,

I added the code provided by Kyle and it works fine.
Probably it’s a cache issue, try to clear the browser cache.

https://www.dropbox.com/s/4hxrwhr4jtqub8i/rounded_corners.png?dl=0

-Rui

[George]

Thanks RUI,

What about the black shadow on the bottom corners?

[Rui Guerreiro – SUPPORT]

That’s the bottom-border-color that you can change in the css code that you have in you custom css option.

.spb_box_content .box-content-wrap .sf-table {
  background: none repeat scroll 0 0 #f5f5f5;
  border-radius: 10px;
  border-bottom-color:#f5f5f5;
}

-Rui

[George]

Hi Rui,

Thank you.

How can I target another box on that same page? Or make those rules apply to all boxes on a particular page?

George

[George]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this css code for a specific page:-

/* i used .page-id-10 to a specific page class and 10 is here page id.*/
.page-id-10 .spb_box_content .box-content-wrap .sf-table {
  background: none repeat scroll 0 0 #f5f5f5;
  border-radius: 10px;
  border-bottom-color:#f5f5f5;
box-shadow: 1px 1px 1px #ddd;
}

CSS code for a specific element, you need to insert a extra class to a particular element. Assume that you have inserted extra class named myextraclass so code would be :-

.spb_box_content .box-content-wrap .myextraclass  .sf-table {
  background: none repeat scroll 0 0 #f5f5f5;
  border-radius: 10px;
  border-bottom-color:#f5f5f5;
 box-shadow: 1px 1px 1px #ddd;
}

Hope that should help to you.
Thanks
Mohammad

[George]

Hi Mohammed,

I want to target a specific box, are you saying i should put ‘myextraclass’ in the box options and simply use the css code:

.spb_box_content .box-content-wrap .myextraclass .sf-table {
background: none repeat scroll 0 0 #f5f5f5;
border-radius: 10px;
border-bottom-color:#f5f5f5;
box-shadow: 1px 1px 1px #ddd;
}

Is there anything else I need to do, becuase this doesn’t work.

[George]

Hi Mohammed,

I think this works perfectly:

.spb_box_content .box-content-wrap {
  background: none repeat scroll 0 0 #f5f5f5;
  border-radius: 10px;
  border-bottom-color:#f5f5f5;
  box-shadow: 1px 1px 1px #ddd;
}

However I cannot get it to target the particular boxed content sections on my page (https://events.com.au/australian-open-2015-packages/)

The 3 boxed content sections at the bottom of the page under ‘What Next’ is what i’m trying to change, the code works but then the rest of the sections including some text sections across my whole site change and break.

Thanks,

George

[Mohammad – SUPPORT]

Hi,
Please provide me wordpress admin login detail to inspect and resolve the issue easily.
Thanks
Mohammad

[George]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please try to use this custom css code:-
/* myextraclass is the extra class*/
.spb_box_content .box-content-wrap.myextraclass {
background: none repeat scroll 0 0 #f5f5f5;
border-radius: 10px;
border-bottom-color:#f5f5f5;
box-shadow: 1px 1px 1px #ddd;
}

Please insert extra class for element with this text Make a Booking.

Thanks
Mohammad

[George]

Hi Mohammed,

It just doesn’t work, I’ve inserted the extra class ‘myextraclass’ and there’s no change at all.

Something must be wrong with the css coding.

George.

[George]

The code works when .myextraclass and/or .page-id-16605 is removed.

But when either are in there, to target a specific post or element inside a post it doesn’t work.

[Mohammad – SUPPORT]

Hi,
May i have specific page url to check?
Thanks
Mohammad

[George]

This reply has been marked as private.