ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Flexform
• July 18, 2013 at 4:32 pm #12031
  michelleoswell

  Member

  Post count: 14

  Hi, I’m working on some custom css for a tabbed section, and created a class called .roundedbox that I’ve applied to the tab section. Much of the css I’ve written is working, but I’m trying to change the background color on the tabs-panel, but it is always overridden by the another css. Could you help me figure out what I need to change to override the standard style in this case?

  The class to change, as far as I can tell, is .wpb_tabs .ui-tabs .ui-tabs-panel. The background color appears to be coming directly from the bg color of the whole page. I would think that if I add my class to it in the stylesheet (and add !important) it would make my custom class the one used, but it isn’t. Even if I just try changing the style of .wpb_tabs .ui-tabs .ui-tabs-panel without adding my custom class it won’t change the bg color.

  The site is hidden behind firewall at the moment so I can’t show it to you live – you’ll have to rely on the screenshot.

  Here’s the custom css I’ve tried:
  .roundedbox .wpb_tabs .ui-tabs .ui-tabs-panel {
border-style: solid !important;
border-width: 1px !important;
background-color: #A19589 !important;
}

  July 19, 2013 at 3:25 pm #12147
  thewoosh

  Member

  Post count: 27

  Hi Michell
  This looks like a similar problem to one I am having…
  If I add custom css to modify a class (using !important), it works only in Chrome and Safari and not in Firefox or IE. Have you tried viewing your page in different browsers? I would be interested to know if you find the same thing…
  I have found that if I use custom CSS to modify an HTML element (ie ‘H1’ or ‘p’) it works OK, it is only when I attempt to modify a class that the problem arises.

  July 22, 2013 at 2:17 pm #12433
  michelleoswell

  Member

  Post count: 14

  Hi thewoosh,

  It works for me sometimes, and other times it doesn’t. In this case, I just tried adding my custom css to the div above the one I thought I should be modifying, and it seems to have worked.

  July 22, 2013 at 2:23 pm #12436
  thewoosh

  Member

  Post count: 27

  I found that I can change html tags (like h1), but if I try to change a class, it doesn’t work (except in webkit browsers like Chrome & safari). Does your experience match this?
  Cheers,
  Andy

  July 22, 2013 at 2:29 pm #12438
  michelleoswell

  Member

  Post count: 14

  No, I can change classes. For example, in my tabbed section I was able to take the class .row, add my custom class .roundedbox, and change the background-color thusly:

  .roundedbox .row {
background-color: #AAA095;
}

  Elsewhere in the tabbed section, this was successful:
  
.roundedbox .ui-corner-bottom {
border: 1px none;
border-radius: 0 5px 5px 5px !important;
}

  July 22, 2013 at 4:02 pm #12489
  Cosmin – SUPPORT

  Member

  Post count: 3851

  Hi Michelle,

  If you’re going to add classes and customize the theme with your own CSS, I strongly suggest you learn CSS first.

  What you have in there specifies that .roundedbox is a parent for .wpb_tabs, which is not correct. Classes are being added, custom CSS is being output to your site – you just need to understand how to target the elements correctly.

  Regards,
  ————————————————————————————————————

  Cosmin – Support

• Back to forum

  Posted in: Flexform