CSS style by wp_list_pages()

  • timbodrumbo

    (@timbodrumbo)


    19 years, 2 months ago

    having problems with styling the list of pages, I reviewed the source code and found that the CSS style that is generated has a blank in the name–as follows:

    <li class=”page_item current_page_item”>

    (space is after item)

    regardless of how I may have coded the page, is this an error or a weired Css cascade thing?

    is there another way to list these things so i can style as desired. (newbie)

    help. 🙂

    …tim

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    19 years, 2 months ago

    That’s a CSS thing. One element can belong to multiple classes.

    Example:
    <style>
    .a { font-weight: bold; }
    .b { color: blue; }
    </style>
    <p class="a">This text is bold.</p>
    <p class="b">This text is blue.</p>
    <p class="a b">This text is both bold and blue.</p>

    Elements with multiple classes inherit the attributes of both of those classes.

    In your specific case, all the LI’s there will have “page-item”, but probably only the currently selected one will have “current-page-item”. So you want to put style for all of them into .page-item, but maybe you want a different background color on the .current-page-item, to make it stand out or something like that.

    giovannimcosta

    (@giovannimcosta)

    19 years, 1 month ago

    what should I do to retire the bullets in sidebar links in the Default Theme…

    I make the both classes….
    but the bullets still appears…

    Thanks for everyone that helps me… 🙂

    cacycleworks

    (@cacycleworks)

    18 years, 4 months ago

    hi,

    i made a <div class=sidebar> wrapper around my sidebar and then used the follow css style to define sidebar:

    .sidebar  {
	list-style-type:none;
}

.sidebar p {
	margin-top:10px;
	margin-bottom:10px;
	border-bottom: solid 1px gray;
}
.sidebar ul {
	margin:-5px;
	list-style-type:none;
}
.sidebar li {
	list-style-type:none;
}

    But now i’m trying to override the page_item style without much luck… 😛

    moshu

    (@moshu)

    18 years, 4 months ago

    What do you want to “override”? The “page_item” is NOT a style, there is nothing to override. It is a class assigned to list items in that list generated by the template tag. You can define it in your CSS file as you want.

    cacycleworks

    (@cacycleworks)

    18 years, 4 months ago

    Hi! Sorry, I didn’t notice your reply. Didn’t realize I wouldn’t be notified so now I’ve tried the Join button at the bottom of the page. ??

    I ended up using this css to make the categories in the sidebar appear without any li or ul formatting:

    /*	Misery in trying to align the Pages output to other sidebar goodies...
	.sidebar > li .pagenav > ul > li .page_item page-item-2 > a  */
.sidebar .pagenav  { margin: 0px; list-style: inside; list-style-type: none; padding: 0px; list-style-position: inside }
.sidebar .pagenav h2 { margin: 0px 0px .1em 0; padding: 0px; }
.sidebar .pagenav li { margin: 0px; padding: 0px; }
.sidebar .pagenav ul { margin: 0px; padding: 0px; }
.sidebar .pagenav ul li { margin: -.3em 0px 0px 0px; padding: 0px; }
/*	IE 6 list hack :: FF doesn't see this...
	http://jake.cfwebtools.com/index.cfm/2007/5/1/CSS-Browser-Hacks */
* html .sidebar .pagenav h2 { margin: 0px 0px .1em -1em; padding: 0px; }
/*	IE 7 list hack  :: FF doesn't see this...
	http://jake.cfwebtools.com/index.cfm/2007/5/1/CSS-Browser-Hacks */
*:first-child+html .sidebar .pagenav h2 { margin: 0px 0px .1em -1em; padding: 0px; }

    The page_item and page_nav css were amazingly difficult to sort out from my site-wide css included page but the above did what I want.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘CSS style by wp_list_pages()’ is closed to new replies.