Board index Plugins extending HTML Nugget sidebar

Creating and modifying plugins.
Imajica
Regular
 
Posts: 50
Joined: Mon Dec 05, 2016 6:26 pm

Postby Imajica » Thu Apr 06, 2017 4:46 am

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.

User avatar
yellowled
Regular
 
Posts: 6747
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany

Postby yellowled » Thu Apr 06, 2017 8:22 am

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: 50
Joined: Mon Dec 05, 2016 6:26 pm

Postby Imajica » Fri Apr 07, 2017 1:18 am

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: 50
Joined: Mon Dec 05, 2016 6:26 pm

Postby Imajica » Fri Apr 07, 2017 4:27 am

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

User avatar
Don Chambers
Regular
 
Posts: 3565
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA

Postby Don Chambers » Fri Apr 07, 2017 5:25 am

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:

User avatar
yellowled
Regular
 
Posts: 6747
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany

Postby yellowled » Fri Apr 07, 2017 9:22 am

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



Return to Plugins

Who is online

Users browsing this forum: No registered users and 1 guest