• Resolved xoxoxo

    (@xoxoxo)


    hello everybody. if got some question about designing pagenumbers instead for next page / last page buttons. im a pretty rookie in coding, so maybe somebody could help me out with it.

    so, i want the pagenumbers shown on my webblog vertical, not horizontal like the most plugins i found. i tried this one
    and selected the “classic – design” but i dont know howto code it in the “vertical way”. here is the css for the pagenumber:

    #wp_page_numbers ul, #wp_page_numbers li, #wp_page_numbers a {
        background: white;
        padding: 0;
        margin: 0;
        border: none;
        text-decoration: none;
        font-weight: normal;
        font-style: normal;
        list-style: none;
        text-transform: none;
        text-indent: 0px;
        font-variant: normal;
        text-align: left;
        line-height: 12px;
        letter-spacing: 0px;
        word-spacing: 0px;
        font-size: 11px;
        font-family: Arial;
    }
    
    #wp_page_numbers {
        margin-top: 10px;
        width: 100%;
        background: white;
        margin-bottom: 10px;
    }
    #wp_page_numbers ul {
        width: 100%;
    }
    #wp_page_numbers li {
        float: left;
        display: block;
        margin-bottom: 2px;
    }
    
    #wp_page_numbers a {
        padding: 3px;
        padding-left: 5px;
        padding-right: 5px;
        margin-left: 2px;
        margin-right: 2px;
        display: block;
        color: #333;
        border: 1px solid #bfbfbf;
    }
    
    #wp_page_numbers li a:hover {
        border-color: #BA0000;
    }
    
    #wp_page_numbers li.space {
        padding: 6px;
        padding-left: 2px;
        padding-right: 2px;
    }
    
    #wp_page_numbers li.first_last_page {
        font-style: italic;
    }
    
    #wp_page_numbers li.active_page a {
        border-color: #0075b8;
    }
    #wp_page_numbers li.active_page a:hover  {
        color: black; /* IE fix */
        text-decoration: underline;
        border-color: #BA0000;
    }
    
    #wp_page_numbers li.page_info {
        float: left;
        display: block;
        padding: 3px;
        padding-left: 5px;
        padding-right: 5px;
        margin-right: 2px;
        color: #666;
        font-size: 11px;
        border: 1px solid #bfbfbf;
    }

    but maybe there is an other solution, im open to anything 🙂
    Ps. sorry for my bad english :/

Viewing 2 replies - 1 through 2 (of 2 total)
  • You ought to able to play with the width attributes here– #wp_page_numbers– and here– #wp_page_numbers ul– setting them to just larger than your numbers. You should get a vertical display. It would be easier if I had a site to look at though.

    Thread Starter xoxoxo

    (@xoxoxo)

    yeah thank you apljdi – it works perfect!!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘vertical navigation with pagenumbers’ is closed to new replies.