fbpx

Missed the Birthday Party? Still You Can Enjoy the PartyView Deal

Welcome, Guest
Username: Password: Remember me

TOPIC: Raw HTML & Custom CSS Works Only In Preview Mode

Raw HTML & Custom CSS Works Only In Preview Mode 6 months 2 weeks ago #19627

  • dankix
  • dankix's Avatar
  • Offline
  • New Member
  • Posts: 1
  • Karma: 0
Hello,

Been playing with JD Builder and building a site. I must say great job on the product. I have been able too design a site far better than I have been able to in other platforms so kudos. Having said that, I have an HTML & CSS problem:

I created a raw HTML and put a bootstrap button (btn-secondary) albeit tried a reagular HTML button but made no difference. Anyway, I modified the button in the CSS field too match my site and place it where I want. In preview mode, it looks perfect and ready too deploy. But when viewed in the browser as an anonymous user, the btn-secondary is the generic Bootstrap button. JD is not reading my CSS when rendering my site.

The HTML is:
<!-- Button trigger modal -->
<button type="button" class="btn btn-secondary animated jackInTheBox delay-2s" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Here is the CSS:
.btn-secondary
{
  background-color: #DFC062;
  font-family: lato;
  padding: 15px;
  margin-left: 182px;
  margin-top: -77px;
  border: #DFC062;
  line-height: 1.2;
  border-radius: 50px;
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  
  transition: all .5s ease;
  transform: scale(1);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-primary:active, .btn-secondary.active, .open > .dropdown-toggle.btn-secondary {
    background: #FFA005;
    color: white;
    transition: all .5s ease;
    transform: scale(1.5);
}

Again, on the admin preview side, everything looks perfect. But when rendering the page as an anonymous user coming from the web, the button has no style. I have tried !important .. I have tried "self" from your documentation but nothing worked.
I have attached a screen shot of the preview and a screenshot of the "anonymous user". And, in case anyone is wondering, I did not forget too press save! :silly:

Running latest version of Joomla, 1.4 JD Builder and the latest of Astroid. Just started this site.

Thank you in advance for any assistance.
Attachments:
The administrator has disabled public write access.

Raw HTML & Custom CSS Works Only In Preview Mode 6 months 2 weeks ago #19632

  • nishtha
  • nishtha's Avatar
  • Offline
  • Moderator
  • Posts: 1001
  • Thank you received: 102
  • Karma: 12
Hi,

As per the CSS you have written its all correct but in order to make your code working on both live preview & frontend you need not add any space or press enter for a new line in the code.
For eg. background-color:#DFC062;font-family:lato and so on.

We are aware that's its little strange to write the code like this, but we are working on improving it with the coming updates.
Let us know if this worked!

Thanks,
Nishtha
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
Last Edit: 6 months 2 weeks ago by nishtha.
The administrator has disabled public write access.

Raw HTML & Custom CSS Works Only In Preview Mode 5 months 2 weeks ago #20394

  • hitesh99raj
  • hitesh99raj's Avatar
  • Offline
  • Administrator
  • Posts: 35
  • Thank you received: 15
  • Karma: 4
Hi Dan,
Sorry for delay, This bug is fixed in code and will update in our next release which is coming in next few days. Thanks for your valuable review, Again thanks for using JD Builder.

Regards,
Hitesh
The administrator has disabled public write access.
Moderators: chandandeep
Time to create page: 0.308 seconds