Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 31, 2014 at 6:25 am #245283
    DStoeckl

    Hi,

    I want to make a double line in the same line of the title with vertical align middle, when the toggle is active,
    and a single line when the toggle is closed
    as
    – Toogle 1 ==========================================
    lorem ipsum sit dolor et, ……

    + Toogle 1 ———————————————————————————-

    Is that possible? – with few steps, or have I do a complete change of code. I use a child theme.

    I tried to insert the following code in the firebug:
    <p data-fake-id=”#toggle-id-1″ class=”toggler activeTitle” itemprop=”headline”>Privatumzug<span class=”toggle_icon”> <span class=”vert_icon”></span><span class=”hor_icon”></span></span>
    <div class=”title-sep-container”> <div class=”title-sep”> </div> </div>
    </p>
    I put the code <div class="title-sep-container"> <div class="title-sep"> </div> </div> inside the p-tag, but
    when I closed the editing-modus of firebug, the container was put outside the p-tag.

    The CSS:
    In dependence of active/nonactive toggler the title-sep includes border-top and border-bottom or only border-top.

    .toggler .title-sep-container {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    position: relative;
    height: 1px;
    }

    .toggler.activeTitle .title-sep-container {
    height: 6px;
    }

    .toggler .title-sep {
    display:block;
    border-top: 1px solid #e0dede;
    border-bottom: none;
    width: 100%;
    position: relative;
    height: 1px;
    }

    .toggler.activeTitle .title-sep{
    border-bottom: 1px solid #e0dede;
    height: 6px;
    }

    Thank you very much,
    Daniela

    March 31, 2014 at 5:24 pm #245533
    Ismael

    Hi DStoeckl!

    Thank you for the information!

    Unfortunately, I’m not entirely certain of what you’re trying to accomplish. If you don’t mind adding more information, that would be great. A screenshot of the layout will surely help. You can add another element right after the toggle title using the before and after pseudo selectors. Please try this on Quick CSS or cusotm.css:

    .main_color .toggler.activeTitle:before {
content: '';
display: block;
width: 85%;
height: 2px;
background: red;
position: absolute;
top: 19px;
left: 10%;
}

    The code will add a two pixel high red block beside the toggler title. I hope that helps a bit.

    Best regards,
    Ismael

    March 31, 2014 at 10:06 pm #245749
    DStoeckl

    Hi Ismael,
    thank very very much for your support. I like the enfold-theme, because it has a clear design und is very performance and it has high usability.

    I want to do something like this
    https://dl.dropboxusercontent.com/u/17609530/accordion.png

    the active Toggler gets two horizontal lines right of the toggler title, the unactive only one line.
    I tried your code above, but it didn’t function. It will have no influence if ::before is a part of the css-code.
    I also used ::after instead of before – it’s the same. In both situation the code is inactive and not active.
    But I don’t know why. I tried some code-changes in firebug, but nothing gave the correct result.

    Best regards,
    Daniela

    April 1, 2014 at 2:37 pm #246029
    DStoeckl

    Hi Ismael,

    in connection with a different problem, I found out, that the plugin, which I use for custom css, doesn’t work with content:' ';
    correctly. I found out, that there I have to activate a checkbox so that `content: ” “; is possible.

    Now your code works. I adapted it in the following way:

    .main_color .toggler:after {
    content: ” “;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #e0dede;
    position: absolute;
    top: 22px;
    margin: 0px 0px 0px 20px;
    }

    .main_color .toggler.activeTitle:after {
    content: ” “;
    width: 100%;
    height: 4px;
    border-top: 1px solid #e0dede;
    border-bottom: 1px solid #e0dede;
    position: absolute;
    top: 22px;
    margin: 0px 0px 0px 20px;
    }

    Thank you very much for your important hints.
    Daniela

    April 1, 2014 at 5:10 pm #246151
    Ismael

    Hey!

    Great! Glad it is working now. If you have any questions, let us know. :)

    Regards,
    Ismael

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Toggler with border left, in the same line as the title of the toggle’ is closed to new replies.