Need some help with a plugin - possible CSS? issue

[Lynx]

Hi.

I'm working on a personal plugin but I've run into a snag. Some of my CSS doesn't seem to be taking. Here's what I have:

JS Component:

SPOILER: Click to show


// Locked Thread Notifier
// Plugin Created: 11-20-2021

function lock_notify() {
   var html = "<div class='container ltn'>";
   
   html += "<div class='title-bar ltn'><h2>Locked Thread Notification</h2></div>";
   html += "<div class='content ltn'><span class='ltb-warn'>WARNING!</span> You are viewing a LOCKED THREAD.  If you did not create this thread, please do NOT post a reply!<br /><br />Moderation duty replies are exempt.</div>";
   html += "</div>";
   
   if(pb.data('page') && pb.data('page').thread && pb.data('page').thread.is_locked) {
       $("#msg-ltn").html(html);
   }
}

$(document).ready(function() {
   lock_notify();
});


CSS Component:

SPOILER: Click to show


.container.ltn {
   max-height: auto;
   max-width: auto;
}

.title-bar.ltn h2 {
   color: #ffff00;
   background-color: #ff0000;
   text-align: center;
   margin-left: auto;
}

.content.ltb {
   color: #ffffff;
   background-color: #000000;
   text-align: center;
   padding-left: 20px;
}

span.ltb-warn {
   color: #ff0000;
   font-weight: bold;
}


Board Component:

SPOILER: Click to show


<div id="msg-ltn"></div>


The plugin works, but not all of my CSS declarations seem to be taking effect. I've even tried adding !important to some with no avail, so I removed that flag.

Issues:

- text-align not working in title bar (trying to get it centered)
- padding not working in content area


Live Example (guest-friendly): codesndesigns.boards.net/thread/30/on-date


If anyone needs just the HTML produced by the JS, here it is:

HTML creation from JS:

SPOILER: Click to show


<div class='container ltn'>
   <div class='title-bar ltn'><h2>Locked Thread Notification</h2></div>
   <div class='content ltn'><span class='ltb-warn'>WARNING!</span> You are viewing a LOCKED THREAD.  If you did not create this thread, please do NOT post a reply!
   <br /><br />Moderation duty replies are exempt.</div>
</div>


Note that, even though there are apostrophes in the above, an inspection of the page does show that the class names are applied.

Any help with this would be greatly appreciated!

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Nov 20, 2021 13:17:59 GMT -8 Lynx said:

Hi.

I'm working on a personal plugin but I've run into a snag. Some of my CSS doesn't seem to be taking. Here's what I have:

JS Component:

SPOILER: Click to show


// Locked Thread Notifier
// Plugin Created: 11-20-2021

function lock_notify() {
   var html = "<div class='container ltn'>";
   
   html += "<div class='title-bar ltn'><h2>Locked Thread Notification</h2></div>";
   html += "<div class='content ltn'><span class='ltb-warn'>WARNING!</span> You are viewing a LOCKED THREAD.  If you did not create this thread, please do NOT post a reply!<br /><br />Moderation duty replies are exempt.</div>";
   html += "</div>";
   
   if(pb.data('page') && pb.data('page').thread && pb.data('page').thread.is_locked) {
       $("#msg-ltn").html(html);
   }
}

$(document).ready(function() {
   lock_notify();
});


CSS Component:

SPOILER: Click to show


.container.ltn {
   max-height: auto;
   max-width: auto;
}

.title-bar.ltn h2 {
   color: #ffff00;
   background-color: #ff0000;
   text-align: center;
   margin-left: auto;
}

.content.ltb {
   color: #ffffff;
   background-color: #000000;
   text-align: center;
   padding-left: 20px;
}

span.ltb-warn {
   color: #ff0000;
   font-weight: bold;
}


Board Component:

SPOILER: Click to show


<div id="msg-ltn"></div>


The plugin works, but not all of my CSS declarations seem to be taking effect. I've even tried adding !important to some with no avail, so I removed that flag.

Issues:

- text-align not working in title bar (trying to get it centered)
- padding not working in content area


Live Example (guest-friendly): codesndesigns.boards.net/thread/30/on-date


If anyone needs just the HTML produced by the JS, here it is:

HTML creation from JS:

SPOILER: Click to show


<div class='container ltn'>
   <div class='title-bar ltn'><h2>Locked Thread Notification</h2></div>
   <div class='content ltn'><span class='ltb-warn'>WARNING!</span> You are viewing a LOCKED THREAD.  If you did not create this thread, please do NOT post a reply!
   <br /><br />Moderation duty replies are exempt.</div>
</div>


Note that, even though there are apostrophes in the above, an inspection of the page does show that the class names are applied.

Any help with this would be greatly appreciated!

.container.ltn {

  max-height: auto;

  max-width: auto;
background-color: #ff0000;

}



.title-bar.ltn h2 {

  color: #ffff00;

 

  text-align: center;

  margin-left: auto;
display:block;


}



.content.ltn {

  color: #ffffff;

  background-color: #000000;

  text-align: center;

  padding-left: 20px;

}



span.ltb-warn {

  color: #ff0000;

  font-weight: bold;

}

.content.ltb should be .content.ltn 
also display block and moving background-color up a level fixed your issues

[Lynx]

Thank you very much, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓! That worked excellently!