Tara ([info]ainabarad) wrote in [info]component_help,
@ 2008-05-12 11:47:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
Entry tags:/topic-component: links, /topic-tutorial: custom entries, /topic-tutorial: multi-level tags, status: closed

Metadata CSS? Removing Extra Space on Specific Components? LinksList CSS?
I've been working on making me a new layout (and actually thought I wouldn't need to ask for help! LOL). Anyway...

1) Is there a way to customize the font size and line height of the metadata with CSS? I've tried many different things, including this code (see below), but nothing is working as well as expected.

.entryMetadata {
font-size: 8px;
line-height: 10px;
}

2) Is there a way to fix the empty padding-ish space on specific extra components (specifically my random quote component - I think it only shows up in Firefox)?

See the extra/empty space above and below the quote? How can I get rid of that?


3) Lastly, Is there anyway to spcifically adjust/customize the appearance of the linklist via CSS (hover and such) without effecting other portions of the layout as well? I assumed not, but thought I should ask just in case.

Theme Layer: #11569073


(Post a new comment)


[info]uniquewonders
2008-05-14 01:39 pm UTC (link)
#1

Would you try

.entryMetadata table td {
font-size: 8px;
line-height: 10px;
}

?

(Reply to this) (Thread)

[info]ainabarad
2008-05-14 02:49 pm UTC (link)
It works! Thanks! :)

(Reply to this) (Parent)

[info]uniquewonders
2008-05-14 01:57 pm UTC (link)
#2
Scroll down to
"""<span class="randomquote"><p align="justify">$quotes[$randquote]</p></span>""";
and replace it with 
"""<div class="quote">$quotes[$randquote]</div>""";
then style the class in your CSS:

.quote {
text-align: justify;
}

Edited at 2008-05-14 02:06 pm UTC

(Reply to this) (Thread)

[info]ainabarad
2008-05-14 02:54 pm UTC (link)
OMG! THIS IS AWESOME! Thank you sooooo much!!! That space had been driving me nuts for years!!!! :D

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2008-05-14 02:57 pm UTC (link)
LOL. I don't know which one caused this actually. p or span. I think it's p but I'm not sure. When in doubt, use div. :)

(Reply to this) (Parent)(Thread)

[info]ainabarad
2008-05-14 06:35 pm UTC (link)
I'm extremely sorry to bother you again. This should be the last time...

I hate IE. I used the trick you taught me with the div to fix the extra space (in Firefox) on all of the components except the tag box. I can't figure out how to fix it - but I've been trying like mad LOL - because it looks like the code doesn't use span or p, just div so I don't know why it's there in the first place.

Aside from that, stupid IE is driving me nuts. I didn't change any of the tag code, but since you had me add the correct doctype code to the layer, the tags box now has a horizontal scrollbar in IE (which I just noticed it's there on both layouts in IE - I just had never noticed it before because I never use IE). The horizontal tags box scrollbar isn't on my layout in Firefox. Is there some way to remove it in IE?

Edit: The line effecting the horizontal scrollbar is:
ul.tagList {width: 99%;}
Is there a way to specify 99% in Firefox or 90% in IE depending on what browser the viewer is using? Oh, how I can't stand IE! :)

Edited at 2008-05-14 07:31 pm UTC

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2008-05-14 10:54 pm UTC (link)
#1 ul.tagList {width: 99%; margin-top: 0px !important;}

#2 I don't think it is. If I set it to 100% I still have a scrollbar in IE. On the contrary, it's set to 80% in component_help and the sidebar stretches to accommodate the width of the tags component. I'm trying to find what's the problem.

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2008-05-14 11:38 pm UTC (link)
Keep margin-top and delete the width. That's what's making the scrollbar appear - I guess that's what you meant :). It doesn't make any scrollbar appear in FF so I don't know why it's here. Maybe it used to be an issue, I dunno.

(Reply to this) (Parent)(Thread)

[info]ainabarad
2008-05-15 12:39 am UTC (link)
Woo hoo! Okay, that worked, but there's still a horizontal scrollbar in IE. Any way to get rid of it?

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2008-05-15 09:40 am UTC (link)
Hmm.

Removing ul.tagList ul {width: 100%;} works for me. You?

(Reply to this) (Parent)(Thread)

[info]ainabarad
2008-05-15 01:19 pm UTC (link)
Thank you! Thank you! Thank you! :)

Edit: One last question about Metadata CSS... Is there a way to get the box's padding to be 2px? I've tried many things, but none worked.

Edited at 2008-05-15 02:02 pm UTC

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2008-05-15 02:51 pm UTC (link)
*frowns* The code you have works for me. Could you tell what the problem is exactly?

(Reply to this) (Parent)(Thread)

[info]ainabarad
2008-05-15 03:13 pm UTC (link)
I'm so sorry! I must've just not been changing it enough to notice! Again, I'm so sorry. I can be such a ditz sometimes.

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2008-05-15 03:21 pm UTC (link)
No problem! Working on your code too long will do that to anyone. :)

(Reply to this) (Parent)

[info]uniquewonders
2008-05-14 02:29 pm UTC (link)
#3 You're right. There isn't. One of the major flaws of Component is its lack of CSS. It just wasn't really the way things were done at the time it was created.

However, here's the code that print the links list. You can add a custom class in the table tag and it should allow you to customize it easily::
function print_links(Page p) {

    print_comp_header($*links_text);

        """
            <table cellspacing="0" cellpadding="0" border="0" width="100%">
                <tr>
                    <td width="100%">
        """;

        $p->print_linklist();

        """
                    </td>
                </tr><tr>
                    <td><img src="$*PALIMGROOT/component/clear.gif" width="1" height="2" alt="" border="0" /></td>
                </tr>
            </table>
        """;

        print_comp_footer();
}


Edited at 2008-05-14 02:31 pm UTC

(Reply to this) (Thread)

[info]ainabarad
2008-05-14 03:38 pm UTC (link)
Thank you 1,000 times! It works great!

I feel weird saying this because I know CSS is much easier, but I'm kind of glad Component doesn't use as much CSS. I had big problems with the Flexible Squares layout not working correctly with CSS. Something in the theme layer was overriding the CSS and no one was really helping me figure out why it was doing it so I decided to give up on that for now and stick with Component (which is groovy with me because I prefer Component anyway, call me weird LOL).

I'm almost completely done with this new layer and ready to actually use it. Yay!!! I just noticed one last oddity: for some reason the hover effects for the active calendar days and blockquote work in FF, but not IE. So I checked the rounded layout (the one I'm still currently using) and those same hover effects work in both browsers. I don't understand what's different because the CSS code looks the same in both theme layers to me as far as those sections go. Any ideas? #11569073

I'm still working on finding out what's causing it myself, with no luck so far.

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2008-05-14 05:02 pm UTC (link)
Reason #1 I want to rewrite the Shrinking and Centering tutorial: there is no doctype declaration in the function. Bad, bad coding.

Replace <html> with
    <!DOCTYPE html
         PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">



Edited at 2008-05-14 05:03 pm UTC

(Reply to this) (Parent)(Thread)

[info]ainabarad
2008-05-14 05:26 pm UTC (link)
Wow. Yeah. That worked like a charm, but my tags list, links list, entry text, etc. were instantly centered! Then I discovered this line in Shrinking and Centering and changed "center" to "left":
"""<body style="text-align:center;">""";
Yet another reason to add to the list I suppose. :)

Thank you so much, sweetie! You are brilliant and I really appreciate all the help!!!! Thank you soooooo much again!!! :D

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2008-05-14 05:31 pm UTC (link)
Thanks for catching this. I'll have to pay attention to it when I rewrite the tutorial.

Thank you for the compliment. You're welcome. :)

(Reply to this) (Parent)

Create an Account
Forgot your login or password?
Login w/ OpenID
English • Español • Deutsch • Русский…