extending HTML Nugget sidebar

Creating and modifying plugins.
Post Reply
Imajica
Regular
Posts: 59
Joined: Mon Dec 05, 2016 5:26 pm
Location: Racine
Contact:

extending HTML Nugget sidebar

Post by Imajica »

Evening Folks...

I have a few HTML nuggets that I am using for a static menu and I want to add a background image
Here is the code I am trying to use

Code: Select all

<style>
ul { 
	list-style-type: none; 
    margin: 0; 
    padding: 20; 
    overflow: hidden; 
    background-image: url("http://www.myfavoritepinups.com/img/img12.gif"); 
    background-repeat: repeat-y; }
</style>

<ul style="list-style-type:none">
    <li><a href="https://www.facebook.com/myfavoritepinups/" target="_blank"><img src="http://www.myfavoritepinups.com/img/facebook.gif" style="width:82px" /></a></li>
    <li><a href="http://twitter.com/#!/MyFavePinups" target="_blank"><img src="http://www.myfavoritepinups.com/img/logo_wordmark.png" style="width:82px" /></a></li>
    <li><a href="http://www.myfavoritepinups.com/feeds/index.rss2"><img src="http://www.myfavoritepinups.com/img/rss.png" /></a></li>
    <li><a href="http://www.myfavoritepinups.com/pages/friends.html"><img src="http://www.myfavoritepinups.com/img/friends.png" /></a></li>
    <li><a href="http://www.myfavoritepinups.com/pages/contactform.html"><img src="http://www.myfavoritepinups.com/img/contact.png" /></a></li>
</ul>
the <style> portion is being ignored

any idea why or is there a way around it?

John
Last edited by Imajica on Fri Apr 07, 2017 1:08 am, edited 1 time in total.
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: extending HTLM Nugget sidebar

Post by yellowled »

Imajica wrote:any idea why or is there a way around it?
Depending on how you use the HTML nugget (CK Editor?), it might just be stripped. Also, this is a way to unspecific selector anyway – with that CSS, you would target any ul on your site, and I assume you only want to target the one in the HTML nugget, right? <style> elements are not local to the HTML nugget or something. Also, using inline <style> elements is a relic from the past, we don't really do that anymore.

So, where to put CSS now? Well, s9y has a nifty solution for that. You can create a file called user.css in your theme's directory, i.e. /templates/YOUR_THEME/user.css, and it will be automagically included in your site. And since you created it, it's not part of the s9y core and thus safe in case of an update.

As I said, using ul in your inline styles would usually target all ul elements on your site, so you'll (probably) want to be more specific and limit those to the HTML nugget or all HTML nuggets. To target all ul elements in HTML nuggets, you could use

Code: Select all

.serendipity_plugin_html_nugget ul {
    /* Here be dragons */
}
But you might just want to target that one particular ul in that one particular nugget. Well, since you control the markup of said ul, you can just give that ul a specific thingy that we call a class.

Code: Select all

<ul class="my-nugget-list">
    <li><a href="https://www.facebook.com/myfavoritepinups/" target="_blank"><img src="http://www.myfavoritepinups.com/img/facebook.gif" class="my-nugget-image" /></a></li>
    <li><a href="http://twitter.com/#!/MyFavePinups" target="_blank"><img src="http://www.myfavoritepinups.com/img/logo_wordmark.png" class="my-nugget-image" /></a></li>
    <li><a href="http://www.myfavoritepinups.com/feeds/index.rss2"><img src="http://www.myfavoritepinups.com/img/rss.png" /></a></li>
    <li><a href="http://www.myfavoritepinups.com/pages/friends.html"><img src="http://www.myfavoritepinups.com/img/friends.png" /></a></li>
    <li><a href="http://www.myfavoritepinups.com/pages/contactform.html"><img src="http://www.myfavoritepinups.com/img/contact.png" /></a></li>
</ul>
Note that I have already omitted the inline styles you used here and instead assigned classes. Now, you can put all your CSS in the user.css (also, remove the <style> element from your HTML nugget):

Code: Select all

.my-nugget-list { 
    list-style: none; 
    margin: 0; 
    padding: 20px; 
    overflow: hidden; 
    background-image: url("http://www.myfavoritepinups.com/img/img12.gif"); 
    background-repeat: repeat-y;
}

.my-nugget-image {
    width: 82px;
}
Also note that I added a unit (px) to the padding there – I'm not sure if you meant px, but the padding value needs to have a unit (px, em, rem or %). That might also be why your CSS was not applied.

If you wanted to address just one element in your whole site, you can also assign it an id, which must be a site-wide unique identifier, i.e.

Code: Select all

<ul id="my-ul" class="my-nugget-list">
…
</ul>
YL
Imajica
Regular
Posts: 59
Joined: Mon Dec 05, 2016 5:26 pm
Location: Racine
Contact:

Re: extending HTML Nugget sidebar

Post by Imajica »

well isn't that just NIFTY!

I do find that if I use the html view to put just code in and switch back to visual the

Code: Select all

<ul class="my-nugget-list">
code disappears but if I hit save in HTML mode before switching back to visual it sticks

I'm using the FULL option for Toolbar for WYSIWYG editor

Thank you again for the lead yellowled
I'm still getting used to putting things in user.css

John
Imajica
Regular
Posts: 59
Joined: Mon Dec 05, 2016 5:26 pm
Location: Racine
Contact:

Re: extending HTML Nugget sidebar

Post by Imajica »

Hey yellowled

I just wanted to say thank you again... that little tip and reminder about user.css allowed me to finish up my layout

I'd really like to buy you a coffee

John
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Re: extending HTLM Nugget sidebar

Post by Don Chambers »

yellowled wrote:

Code: Select all

.serendipity_plugin_html_nugget ul {
    /* Here be dragons */
}
Nominated to the quote hall of fame!!!! "here be dragons" :mrgreen: :mrgreen: :mrgreen:
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: extending HTML Nugget sidebar

Post by yellowled »

Imajica wrote:I just wanted to say thank you again... that little tip and reminder about user.css allowed me to finish up my layout
Well, that's what we're all here for. You're welcome. :)

YL
Post Reply