Div within a div in WYSIWYG Edit+ (Viper)

(Steve Brown) #1

Hi,

 

am interested in how our decentralised editors (who will be using Edit+) would recreate this code (from Twitters bootstrap CSS) using the WYSIWYG editor:

 

Some content here

<div class="span4">

   <div class="well">

      Look i'm in a well!

   </div>

</div>

Some content here

 

(It seems that bootstrap doesnt like the combination of these two classes into one div (ie <div class="span4 well">) due to width/padding issues.)

 

It's simple using the code interface but not sure how to do it in WYSIWYG.  I know it wouldnt be too tough if the span4 div was created using a content_div asset but I am looking for a solution that doesnt require the creation of too many div containers.

 

Is it possible or are div containers the only easy-ish way of achieving this code.

 

Thanks,

 

Steve.

EES Build 1738+

Squiz Matrix v4.10.2

 

 

 

(Bart Banda) #2

If you are using Edit+, there is a toolbar option called "Formats" (highlighted in this picture: http://manuals.matrix.squizsuite.net/__images/ees-plus/editing-a-standard-page/viper-content-screen.png). You can enter some text in, multiple paragraphs or whatever, select all of that text and content, and click on this format tool and select DIV. It will then wrap all the selected content in a div tag. 

 

You can then double click within that content to bring up the little inline editing toolbar, and then select the DIV, and then give it a class using the tool on that toolbar (http://manuals.matrix.squizsuite.net/__images/ees-plus/viper/inline-editing.png). 

 

Other than that, you could always write some simple JS that adds the inner DIV on page load based on the "span4 well" class you give on the main div.

 

Hope that helps.