how can i customize my category list

• 

  stephanieharari · Member · Apr 15, 2014 at 5:33 pm

  • Copy link
  • Add topic to favorites

  I want to customize my sidebar category list. How can I do that ? I don’t want the plain list, instead I want to create a rectangular box around each category name

  The blog I need help with is: (visible only to logged in users)

• 

  gracejiyoung · Member · Apr 17, 2014 at 11:30 pm

  • Copy link

  Hi there!

  You can do this if you edit CSS. I’m not quite sure how you want the boxes, but this is what I could come up with. Please go to Appearance > Customize > CSS and add this:

  #categories-3 ul {
  	list-style: none;
  }
  
  #categories-3 ul li.cat-item{
  	 border-top: 1px solid black;
  	border-right: 1px solid black;
  	border-left: 1px solid black;
  }
  
  #categories-3 ul li.cat-item-1124{
  	 border-bottom: 1px solid black;
  }

  Let me know if you have any questions with this!

• 

  stephanieharari · Member · Apr 18, 2014 at 6:30 am

  • Copy link

  hi gracjiyoung,
  thank-you for your answer. I understand that I can format my category list as I want. I am new to CSS… Is there a link i could go to to understand how to write the CSS for the style I want.
  I would like an :
  Oval dark grey dotted line (that looks like a sewing line) under each category,
  With no bullets on the side,
  and increase the space between each category.
  Thank-you very much for your help
  stephanie

• 

  gracejiyoung · Member · Apr 18, 2014 at 4:28 pm

  • Copy link

  Hi Stephanie,

  Here’s a great simple guide to CSS borders:

  http://www.w3schools.com/css/css_border.asp

  Navigate the site for more tutorials on CSS.

  As for your request, I’m a bit confused with one thing:

  Oval dark grey dotted line

  I’m not sure if you’re looking for an oval or a line. But, if it’s a line this can be done by adding this to your CSS:

  #categories-3 ul {
  	list-style: none;
  }
  
  #categories-3 ul li {
  	padding: 5px;
  }
  
  #categories-3 ul li.cat-item{
  	border-bottom: 1px dashed #606060;
  }

  You can change the padding number to whatever you want to create more/less space between the categories.

  Feel free to reach out if you have any questions!

• 

  stephanieharari · Member · Apr 19, 2014 at 8:26 am

  • Copy link

  hi gracejoung,
  thanks for the link and your help. I got organised ! I am am stating to understand that there is a large possiblilities once i start getting a hold of the css coding…
  have a great day

• 

  stephanieharari · Member · Apr 19, 2014 at 8:55 am

  • Copy link

  Hi, I have a new question. I understood that to organise the categories into the order I wanted I had to create a custom menu and create a custom menu widget in my side bar. I did all of the following steps. But when the widget was put in the side bar I lost the design with the dotted line I created with the categories widget. How do I transfer the CSS specifications to my new custom menu widget.
  Thanks
  stephanie