Styling Category Links

• 

  brightfox01 · Member · Dec 7, 2011 at 11:13 pm

  • Copy link
  • Add topic to favorites

  Hi Guys,

  Our blog is using the “Funki” Premium wordpress theme. I want to change the layout and styling of the Categories links (which appear under the post title). Currently, they are displayed in a single line. I want to style them in a similar fashion to the links in “Skeptical” theme.

  Which is the best way to do this? I am not sure how to add javascript for this theme as i cannot find the theme files anywhere. I tried the suggestions in wordpress help but those url’s are not working.

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

• 

  designsimply · Member · Dec 7, 2011 at 11:15 pm

  • Copy link

  WordPress.com does not allow you to add Javascript. See http://en.support.wordpress.com/code/#javascript

  This forum is for WordPress.com blogs. You may be talking about a WordPress.org blog which has it’s own forums over at http://wordpress.org/support/

  See http://support.wordpress.com/com-vs-org/ to learn about the differences.

• 

  designsimply · Member · Dec 7, 2011 at 11:16 pm

  • Copy link

  If you’re talking about a WordPress.com blog, could you let us know the blog URL?

• 

  brightfox01 · Member · Dec 7, 2011 at 11:29 pm

  • Copy link

  Sorry, i thought it posts the blog url automatically.
  http://blog.brightfox.com.au/

• 

  designsimply · Member · Dec 8, 2011 at 6:11 pm

  • Copy link

  Thanks. I just wanted to make sure the URL was right. The question about Javascript threw me—you don’t need Javascript to format the tags though! :)

  I checked out http://blog.brightfox.com.au/ and I see you’ve gotten the tags formatted more like the ones in the Skeptical theme. Nice work!

  To make the arrow look a little smoother/better, find the .post-date::after rule in your custom CSS an make all of the numbers in it match, i.e. set them all to 18px instead of just some of them like you have now. Example:

  .post-date::after {
  border-bottom: 18px solid transparent;
  border-left: 18px solid #333!important;
  border-top: 18px solid transparent;
  content: " ";
  height: 0;
  position: absolute;
  right: -18px;
  top: 0;
  width: 0;
  }

  Have any other questions?