WordPress.org

1. whch
   Member
   Posted 1 year ago #

   I am trying to build a website with simple navigable pages and subpages.

   I am looking to customise the pages widget to be a bit more readable. I have looked on the forums and inserted this code into the stylesheet

   '
   #sidebar .page_item a{font-weight:bold; line-height:1.5 }
   #sidebar .page_item .page_item a{font-weight:normal; line-height:1.0}
   '

   Which helps but I would like to insert a line break or something like a line of dots ( . . . . ) above each of the parent pages. Is this possible in this location in the code?

   Thank you for your help

2. Lou Sparx
   Member
   Posted 1 year ago #

   Pages in the sidebar widget (vertical) right?

   Try:

   #sidebar .page_item a{
   font-weight:bold;
   line-height:1.5;
   border-bottom: 2px dotted red
   }

   Once we've established if this worked we will move on to styling it for you :)

3. whch
   Member
   Posted 1 year ago #

   Thanks Lou, that works if I add an equivalent ' border-bottom: none ' for the child pages.
   I've changed it to border-top which I think is where I want it.
   Is there any way of offsetting the border from the text more, say by half a line?

4. whch
   Member
   Posted 1 year ago #

   Also, i would like to insert a line break if possible so page list reads:

   parent
   -child
   -child

   parent
   -child

   parent
   -child
   -child

   I have played with 'margin-top' in the same location and it does not seem to work

5. Lou Sparx
   Member
   Posted 1 year ago #

   To offset the border (top or bottom) u can try padding:

   #sidebar .page_item a{
   font-weight:bold;
   line-height:1.5;
   padding-bottom: 8px;
   border-bottom: 2px dotted red
   }

   If this has no affect maybe the line-height is part of the problem in which case remove it to test.

   P.S. use border: 0; instead of border: none; ;)

6. whch
   Member
   Posted 1 year ago #

   Thanks again Lou, the padding works to offset the border, independent of text position, with or without line height, which is great.

   Do you have any suggestions for inserting a blank line or gap before each of the parent page listings, to make the separation between sections more readable?

7. Lou Sparx
   Member
   Posted 1 year ago #

   Cool, regarding the parent page we can use padding again but first need to establish the code representing the parent.

   Can you point me to your your site or a theme demo?

8. whch
   Member
   Posted 1 year ago #

   the site is here - in process...
   http://www.carverhaggard.com

   I have adapted a theme called white-as-milk

   I am also currently trying to insert an image into the header in place of the text title...

9. Lou Sparx
   Member
   Posted 1 year ago #

   Hi, look in stylesheet for the class children. Post here with the style it lists (margin/ borders etc..) and I'll correct it for you to give you your line breaks before the parent page :)

   I'd much prefer the look if you changed the red dotted border to 1px solid #eee as this will make the parent page look more like links and NOT headers.

   Let me know what you think.

10. whch
    Member
    Posted 1 year ago #

    Hi, thanks. I cannot find anything called children in stylesheet or any of the other obvious templates.

    All I have is the code I inserted then adapted with your help - "#sidebar .page_item a" seems to control parent formatting and "#sidebar .page_item .page_item a" the child formatting.

    I have taken your advice and changed the line to a grey but I think I prefer dotted - although I would ideally have wider spaced dots, but it doesn't look like html can do this. I'm happy to have the parent pages look a bit like headers I think.

    #sidebar {
    	padding: 1px 10px 10px 0;
    /*	width: 180px;*/
    margin-top:30px;
    	}
    
    #sidebar form {
    	margin: 0;
    	}
    
    #sidebar .page_item a{
    
    font-weight:bold;
    line-height:2.0;
    padding-top: 1px;
    border-top: 1px dotted red;
    
    }
    
    #sidebar .page_item .page_item a{
    
    font-weight:normal;
    line-height:2.0;
    padding-top: 0;
    border-top: 0;
    }

Topic Closed

This topic has been closed to new replies.