WordPress.org

Ready to get started?Download WordPress

Forums

subcategory subcategories css (9 posts)

  1. paperlion
    Member
    Posted 9 years ago #

    Really happy with the subcats feature. Was surprised to see them coming up in miniscule type though, then surprised again when I couldn't determine where the css code controlling them was coming from.

    Is anyone familiar with this?
    thanks.

  2. Mark (podz)
    Support Maven
    Posted 9 years ago #

    It's all in the CSS.

    Look in the #menu section, and play with any % values that you have there.
    The fontsize is generally a % of your browser font size, and the default mingus css is 80% of that. menu subcats wil be a % of that second figure, so it gets small fast.
    Change for fixed sizes if you wish, but that may impact on people using other resolutions....

  3. paperlion
    Member
    Posted 9 years ago #

    Podz thanks.

    Would be best to get in and tinker with the percentage value on the subs then. Are they hard to get to?

    On medium text in IE6, these are way smaller than the regular categories which seem just about right.

    If a css class could be added, then a change of color or other style could substitute for size that's almost as large as the regular categories.

    Not sure if you meant the #menu section itself which only has a % on the height in my wp-layout.css, or all the menu classes collectively which have the following %s (non-% values omitted):

    #menu {
    .. height:100%;
    #menu input {
    .. font: 60% Tahoma, Arial, Serif;
    #menu ul li {
    .. font: 140% Tahoma, Arial, Serif;
    menu ul ul li {
    .. font: 60% Tahoma, Arial, Serif;

  4. Lorelle
    Member
    Posted 9 years ago #

    Tinker with the percentages to make them the size you want. 60% of 100% is almost half the size of what your default is.

    So I recommend that you start with your default font size which is usually listed in the body tag

    body {...font-family: Tahoma, Arial, Serif; font-size: 1em......}

    Or something similiar that sets the base font. Using 1em is pretty normal and preferred. Using less than 1em as the base (like 0.85em) is okay but really....Honestly, with probably more than 50% of all viewers of websites wearing glasses or over 40 and needing glasses, we beg you to set something reasonable for your default font. For a lot of us, you squinting at 60% is what we do at a lot of bloggers' 100%. Start reasonable and then % from there - and stay reasonable.

  5. paperlion
    Member
    Posted 9 years ago #

    Thanks Lorelle.

    That's not exactly what I was after though.
    I don't understand which of these settings are the ones controlling the sub-categories, i.e. where the percentage amount is actually determined for the subs relative to the main categories.

    Seems these percentages from the css refer to the main categories as relative to the body text. The ratios from general to sub- categories is really what I would like to adjust - at least for starters.

    thanks.

  6. Lorelle
    Member
    Posted 9 years ago #

    From what I understand, the #menu ul and li's are the controls for the category lists, as well as the rest of the links found in the sidebar. They are in their own division called MENU and their fonts are the ones listed above. By changing those values, you change the size. Did you try it? You should have seen a change.

    What is confusing is the ul ul li or li li li selectors all in a line. These are nested lists. The example you gave of the different menus (above), get smaller in relationship to the one above it.

    Nested lists are a pta and can get really complicated, especially how WordPress uses them, since the information is pulled in from php and not visible as you are messing with the code.

    One of the tricks I do to figure out which section is associated with which DIV is to put a colored border on each one like this:

    #content {border: solid 1px red}
    #header {border:solid 1px blue}
    #menu {border:solid 1px green}

    This helps me figure out which section is which and then I also add color: red on the class codes one at a time so I can see which one is which. When I figure out which is which, I just change it back.

    Maybe this might help you.

  7. paperlion
    Member
    Posted 9 years ago #

    Yes, this did it.
    Lorelle, thanks for your help.

    Creating my own doublly nested lists in the index page menu area didn't seem to change the fonts to the same formatting as the sub-categories though - added email contacts there that followed the other larger tag classes, but the addresses themselves ran into the text area, had to kludge this and reduce font size for them with the font tag. Just when I thought I understood it - humbled again.

  8. Lorelle
    Member
    Posted 9 years ago #

    I get caught all the time with long web page addresses that screw up my formatting since they don't "line break" nicely. I have to always remember how many characters my sidebar column width is to keep from putting long words or links in there.

    Glad the border color trick helped. I live by it.

  9. moshu
    Member
    Posted 9 years ago #

    Here is the explanation for the tiny fonts in nested lists - and how to fix them
    http://www.maxdesign.com.au/presentation/relative/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.