HTML Nugget on Page link color and Chalkboard template

PerfectCr · Post by **PerfectCr** » Fri Jan 06, 2006 9:28 pm

Quick Question. I wanted to use the HTML Nugget on Page plugin to put some footer text (with links) on my page. The problem however is that the background color used in Chalkboard theme is the same as the link color. I tried to override this with <body link="#xxxxx"> but when I saved the text, that particular peice of the HTM text disappeared. The result is that the link text is not visible on the bottom of the page because the link is the same color as the background text. How can I override the default background text JUST FOR the HTML nugget? Thanks!

judebert · Post by **judebert** » Fri Jan 06, 2006 11:04 pm

I assume you're looking for the default background color.

Just enclose the whole thing in a div with inline style applied, like so:

Code: Select all

<div style="background-color: #FF0000">
  The rest of the HTML
</div>

PerfectCr · Post by **PerfectCr** » Sat Jan 07, 2006 12:00 am

Well that was one way to do it. I wanted the same background color. I am saying, the blue background is the same color as "link text". Since link text is controled by the style.css file, there is no way to override it, even in the HTML nugget area.

I took your suggession, but now look at it

Click the link my sig and goto the bottom. Is that what you meant? If so, how do I shorten it to match the lengh of the Chalkboard entries area. I know it is 700 pixel ( from looking at the css file), but I do not know how to shrink the highlighted area. Thanks!

PerfectCr · Post by **PerfectCr** » Sat Jan 07, 2006 12:14 am

Better yet, is there another way to do this, like embedding it onto the theme itself?

judebert · Post by **judebert** » Sat Jan 07, 2006 2:50 am

As Larry Wall (creator of Perl) says, "There's More Than One Way To Do It".

You could add all the styles you want to the previous declaration. For instance, looking at your CSS with the FireFox EditCSS extension, I see that your #mainpane is 700px wide. I also see the background color for an entry is #222. Finally, I see the border is 1px solid #FFFFFF. Putting them all together, we could style your div with this inline style:

Code: Select all

<div style="background-color: #222; width: 700px; border: 1px solid #FFFFFF">
  HTML stuff
</div>

Which should make it look like the rest of the page. If you want to border individual sides, use border-left, border-right, border-top, and/or border-bottom instead of just border.

Of course, you could also modify your theme. You'd want to give your div an ID (just add id="footNugget" to the div), and then add whatever styles you want (probably the same ones we've got there) to <serendipity_dir>/templates/chalkboard/style.css as #footNugget{<style>;<style>;}.

Finally, you could remove all that styling, leaving just the <div> and </div>, and configure the HTML nugget to go at "bottom of content". I think it'll go in the gray area, with transparent background.

Good luck!
Judebert

PerfectCr · Post by **PerfectCr** » Sat Jan 07, 2006 3:02 am

Thanks man, let me mess with it and see what I come up with. Thank you again for the help!

PerfectCr · Post by **PerfectCr** » Sat Jan 07, 2006 3:21 am

Ok I did the HTML option because I am not too good with the .css files. Here is what I came up with, and if you wouldn't mind click my www link and just take a look at the very bottom

Code: Select all

<center><div style="border-left: 1px solid rgb(255, 255, 255); border-right: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); background-color: rgb(34, 34, 34); width: 698px; height: 14px;"><font size="1" face="verdana,arial,helvetica,sans-serif"><a target="_blank" href="http://creativecommons.org/licenses/by-nc-nd/2.5/">Legal</a> | Site powered by <a target="_blank" href="http://www.s9y.org/">Serendipity 0.9.1</a> | Copyright 2006 <a href="http://perfectcr.com/">PerfectCr.com</a></font></div></center>

What do you think?

judebert · Post by **judebert** » Sat Jan 07, 2006 4:01 am

Looks good. You might want to consider going for a black background, to match the header.

You shouldn't have to specify a height.

And finally, now that you're doing some CSS (the style attribute), you may as well go whole hog. IE has a 1px gap between the footer and the content. You can fix this by adding a -1px margin to your div. However, FireFox and other browsers will then take a pixel off the bottom of your content (like you really care; still, if we wanna be picky...).

Luckily, besides rendering things a little differently, IE also understands CSS a little differently. For instance, when properties are duplicated, usually the last property is most important. We can use !important to override this behavior. But IE doesn't understand it properly. We can take advantage of this, thusly:

Code: Select all

style="<blah blah blah>; margin-top: 0px !important; margin-top: -1px; <blah blah blah>"

IE will see the !important, but ignore it, and decide the top margin is -1px. Standards-compliant browsers will see the !important, ignore the later, less-important -1px, and decide the top margin is 0px. Convenient, eh?

Boy, the CSS police are gonna get me. Both inline styles and IE hacks are strongly discouraged these days. And here I am teaching the newbie how to do both.

Good Luck!
Judebert

PerfectCr · Post by **PerfectCr** » Sat Jan 07, 2006 4:33 am

Thank you again! I just applied your suggestions.

The only reason I put a "height" in there was because I wanted a little space underneath the text, and it was there previously.

judebert · Post by **judebert** » Sat Jan 07, 2006 4:44 pm

No problem! I enjoy helping out.

You should google "CSS box model" sometime.

Basically, you can imagine every item on your page surrounded by a box. Outside the box, there's a "margin" on every side; then there's a "border" on every edge; then there's "padding" on the inside, between the edges and the content; finally, there's the content.

Instead of setting the height, which won't change when someone enlarges their text to see better, you could add padding to your box. Since all you're looking for is top and bottom padding, you could use "padding: 5px auto;" where the first value is top-and-bottom, and the second is left-and-right.

PerfectCr · Post by **PerfectCr** » Sat Jan 07, 2006 5:10 pm

Thanks again, I tried using the padding feature, but every time I click "save" from the plugin the "padding" text is removed from my HTML. I don't know why

Here is what I enter with new padding language:

Code: Select all

<center><div style="padding: 5px auto; margin-top: 0px !important; margin-top: -1px;"><div style="background-color: #000000; width: 698px; border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; border-top: 0px solid #FFFFFF><font color="#ffffff"><font size="1" face="verdana,arial,helvetica,sans-serif"><a href="http://creativecommons.org/licenses/by-nc-nd/2.5/" target="_blank">Legal</a> | Site Powered by <a href="http://www.s9y.org/" target="_blank">Serendipity 0.9.1</a> | Copyright 2006 <a href="http://perfectcr.com/">PerfectCr.com</a></font></div></div></font></center>

I click save from the plugin page, and here is what remains:

Code: Select all

<center><div style="margin-top: 0px ! important;"><div style="border-left: 1px solid rgb(255, 255, 255); border-right: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); background-color: rgb(0, 0, 0); width: 698px;"><font size="1" face="verdana,arial,helvetica,sans-serif"><a target="_blank" href="http://creativecommons.org/licenses/by-nc-nd/2.5/">Legal</a> | Site Powered by <a target="_blank" href="http://www.s9y.org/">Serendipity 0.9.1</a> | Copyright 2006 <a href="http://perfectcr.com/">PerfectCr.com</a></font></div></div></center>

Padding is simply removed

I am using the WYSIWIG editor, could that be the problem?

Post by **garvinhicking** » Sat Jan 07, 2006 6:49 pm

Yes, the WYSIWYG editor heavily messes with customized HTML/CSS. That's not overcomeable, because it's how WYSIWYG works: Either you do it manual, or you don't - but if you use WYSIWYG, the internal mechanism will always rewrite your HTML/CSS so that the automatism can deal with it.

Regards,
Garvin

PerfectCr · Post by **PerfectCr** » Sat Jan 07, 2006 7:32 pm

So what do I do? Temporarily disables the WYSIWIG editor to get the HTML I want, then turn it back on?

Post by **garvinhicking** » Sat Jan 07, 2006 7:36 pm

Hi!

I'm afraid that yes, you need to temporarily disable the WYSIWYG editor to edit that entry posting. :-/

The only other solution that would work is to create your own acronym plugin, but I guess that is a bit too hard for anyone not skilled in PHP

Bestregards,
Garvin

PerfectCr · Post by **PerfectCr** » Sat Jan 07, 2006 7:53 pm

Ok well I did that, and the "padding" command remained, but even putting 50px (or any value there) had no effect. I am trying to put some space around the top and bottom so the text stays in the middle, the "height 14px" seems to do this. I like the idea of "padding" but it does not seem to work.