Merged title & target content background – full width

  • Resolved cadproadmin

    (@cadproadmin)


    9 years, 7 months ago

    Hey guys,

    Great plugin! If it all works out, I expect to be buying the pro version. Anyway I’ve been struggling to figure out how to get the background look I’m after. I’m hoping you can point me in the right direction? I want the expanded content & title background to look like this:

    My wildest accordion fueled desires

    I would like to achieve the background outlined in red. With a way to control the margin to the images above when expanded.

    BTW, your accordion was the only free one I’ve tried so far that correctly pushed the table down below the right justified image.

    This is what I’ve been able to achieve by myself so far. But the table I’m expanding seems to be having an effect on the background, I can’t get rid of that damn horizontal line!

    Table with annoying line

    the website is autodeskcam.co.nz

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Baden

    (@baden03)

    Ahoi!
    Your annoying little line can be eradicated by removing:
    border-top: 1px solid #ddd;
    from the css:

    table th, table td {
  padding: 8px;
  line-height: 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

    found in your themes (compressed) css file;

    For an easier, less-pain full work around, try adding the following to the custom css section under: Dashboard > Settings > Collapse-O-Matic > Custom CSS:

    table th, table td {
  border-top: none !important;
}

    Please let us know if that resolves the issue for you.

    Thread Starter cadproadmin

    (@cadproadmin)

    Cool, thanks for that… but how about my My wildest accordion fueled desires? ??

    That was the main point, based on my review comments… I should have kept it a simple request, sorry.

    Plugin Author Baden

    (@baden03)

    This can be done with css. it should be able to accomplish this purely with the shortcode, however you will get a bit more control using either the roll-your-own method or our super awesome collapse-commander add-on.

    In a nutshell:

    • the trigger will have to be a div, with a class that has specific height, width, padding, background, border and z-index defined
    • the close status will need to have the bottom border removed
    • the target will need to also have a custom class that has it’s border, background, top-margin and z-index defined so that the top of the trigger bleeds over just the border

    If you are not yet a css jedi master, you could also simply purchase our collapse-pro-matic plugin and we would be happy to get an example set up for you on your site.

    Hope this helps point you in the right direction.

    Thread Starter cadproadmin

    (@cadproadmin)

    A very fair response. Thanks for the pointers. I will definitely be using this as an exercise to nail CSS. If I fail then I will be more than happy to stump up the minor fee. It’s more of a passing interest, rather than a requirement, otherwise I’d stump up right now. Again thank you for a great free plugin!

    Plugin Author Baden

    (@baden03)

    Let us know if you get stuck, we are here to help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Merged title & target content background – full width’ is closed to new replies.