Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 17, 2018 at 12:59 pm #928453
    hartgen

    Dear all,

    I’m translating a Joomla-Website to WordPress using Enfold.

    In the Joomla Version some sentences in a big paragraph stand out because of boxes that are around them.

    Please have a look at the yellow boxes in the following text: Boxes

    Is there something similar in Enfold I can use to make some sentences stand out? It must not have the same look. The goal of this boxes is to emphasize key sequences of the whole text.

    Any help would be very welcome.

    Best regards
    Jorg

    March 17, 2018 at 3:09 pm #928487
    Mike

    Hey Jörg,
    You could use a tag such as emphasize

    <em>...</em>

    or a div class

    <div class="boxed">...</div>

    and custom css to create the box.
    since there are so many types of boxes, can you find one you do like, so we can assist with the css?

    Best regards,
    Mike

    March 17, 2018 at 3:48 pm #928501
    hartgen

    Hi Mike,
    thanks for your answer.

    I had a look around and found an effect I want to use: “Pure CSS folded-corner effect”.

    You can see the effect here: Folded Corner effect (pure CSS)

    CSS-Code is:

    .note {
  position: relative;
  width: 30%;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: #97C02F;
  overflow: hidden;
}

.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #fff #fff #658E15 #658E15;
  background: #658E15;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  /* Firefox 3.0 damage limitation */
  display: block; width: 0;
}

.note.rounded {
  -moz-border-radius: 5px 0 5px 5px;
  border-radius: 5px 0 5px 5px;
}

.note.rounded:before {
  border-width: 8px;
  border-color: #fff #fff transparent transparent;
  -moz-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
}

    But how can I add this to Enfold?

    Best regards
    Jorg

    March 17, 2018 at 5:53 pm #928520
    Mike

    Hi,
    To add this effect to Enfold, please add the code in the General Styling > Quick CSS field.
    Then add a div class around the text you want in the box, for this example we will assume you are adding this effect to text in a plain post, so we go to the editor, using the “text” tab and add:

    <div class="note rounded"> your text here </div>

    2018-03-17_113728
    results:
    2018-03-17_113931
    I would recommend changing the second line in the first rule from “width: 30%;” to “width: 80%;” so it will have better width:
    2018-03-17_114558
    To add this effect to a text block element on a page using the advanced layout builder, go to the text block in the editor and look for the “Custom Css Class” option at the bottom, and add “note rounded”
    2018-03-17_114925
    results:
    2018-03-17_115113
    Or if you just want a section of text inside the text block to be effected, use the first technique.

    Best regards,
    Mike

    March 17, 2018 at 6:44 pm #928532
    hartgen

    Hi Mike,

    I added the CSS-code to Quick-CSS field.

    I want to use the advanced layout builder to add the CSS.

    But there is no “Custom CSS claa” entry below the font size in my text block.

    Do you have an idea why?

    Best regards
    Jorg

    March 17, 2018 at 6:51 pm #928534
    Mike

    Hi,
    Please go to Enfold Theme Options > Layour Builder > Show element options for developers and ensure the box is checked.

    Best regards,
    Mike

    March 17, 2018 at 7:14 pm #928538
    hartgen

    That’s it. Thanks a lot and have a nice weekend!
    Jorg from Germany

    March 17, 2018 at 7:27 pm #928542
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    and the video tutorials here
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Layout: Box around Text’ is closed to new replies.