Apostrophe widget styles overriding my website's styles.

[Nik Martin]

apos-widget.apos-html

I have a few content divs on my site that have text-align:center. If I put an html widget singleton inside that div, then apos-widget.apos-html styles sets text-align: left does this mean I also have to put the container div inside the html widget? I don't really want the content editors to be able to edit (or break) the containers, but without it, the inner divs that Apostrophe inserts breaks my css. Example:

<div class="content-box box-default animated fadeInUp animation-delay-14">
   <span class="icon-ar icon-ar-circle icon-ar-inverse"><i class="fa fa-rocket"></i></span>
   <h4 class="content-box-title">Fast</h4>
   <p>NitroPCR is fast. A native application running on your mobile device connected to our secure PCR Cloud.</p>
</div>

and div.content-box has style:

.content-box {
  display: block;
  text-align: center;
  overflow: hidden;
  padding: 15px;
  margin-bottom: 5px
}
.content-box.box-default {
  background-color: #f6f6f6;
  border: solid 1px #e5e5e5
}
.content-box.box-default:hover {
  background-color: #f3f3f3
}

But afterwords, I get this:

<div class="content-box box-default animated fadeInUp animation-delay-10">
        <div class="apos-singleton apos-singleton-html" data-slug="/:contentBox1" data-type="html" data-options="{&quot;itemType&quot;:{&quot;widget&quot;:true,&quot;label&quot;:&quot;HTML&quot;,&quot;icon&quot;:&quot;icon-code&quot;,&quot;css&quot;:&quot;html&quot;}}">
  <div class="apos-normal-view"><div class="apos-content">
     
        <div class="apos-item apos-widget apos-html apos-full apos-middle   " data="{&quot;itemType&quot;:{&quot;widget&quot;:true,&quot;label&quot;:&quot;HTML&quot;,&quot;icon&quot;:&quot;icon-code&quot;,&quot;css&quot;:&quot;html&quot;},&quot;widget&quot;:true,&quot;position&quot;:&quot;middle&quot;,&quot;size&quot;:&quot;full&quot;,&quot;type&quot;:&quot;html&quot;,&quot;id&quot;:&quot;w74365247147507933&quot;,&quot;code&quot;:&quot;<span class=\&quot;icon-ar icon-ar-circle icon-ar-inverse\&quot;><i class=\&quot;fa fa-institution\&quot;></i></span>\n<h4 class=\&quot;content-box-title\&quot;>Compliant</h4>\nNitroPCR is HIPAA and NEMSIS Compliant. This ensures that your PCRs will be accepted by your state and allows for proper, thorough billing.\n        &quot;}" data-id="w74365247147507933" data-type="html" data-position="middle" data-size="full">
<div data-raw-html="">

<span class="icon-ar icon-ar-circle icon-ar-inverse"><i class="fa fa-institution"></i></span>
<h4 class="content-box-title">Compliant</h4>
NitroPCR is HIPAA and NEMSIS Compliant. This ensures that your PCRs will be accepted by your state and allows for proper, thorough billing.
       
   
</div>
</div>


     
    </div>
  </div>
</div>


        </div>
     

Which has overridden many of my content-box styles

[Tom Boutell]

You could just disable those styles for that widget by setting them to "inherit !important;".

In 0.6 the vestiges of our own floating mechanism are going away and won't hassle you here.

**Do not send PHI or information considered HIPAA sensitive to this email address. Email is NOT a secure method of transferring PHI**

--
You received this message because you are subscribed to the Google Groups "apostrophenow" group.
To unsubscribe from this group and stop receiving emails from it, send an email to apostropheno...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

THOMAS BOUTELL, DEV & OPS

P'UNK AVENUE | (215) 755-1330  |  punkave.com