Blog Roll Titles – CSS in Chateau Theme

• 

  lizflodstrom · Member · Jan 20, 2012 at 5:02 pm

  • Copy link
  • Add topic to favorites

  I am currently using the Chateau Theme and have tweaked the CSS to accommodate how I’d like my blog to be, but cannot seem to figure out if there is a way to adjust the CSS that will effect a widget. I have a LINKS widget set up (my blog roll) and would like for only the icons to present, not the title of the site and the image. If I remove the title of the site from the actual link information it defaults to the sites URL to be visible instead and I do not want that either. Is there any way to fix this issue in CSS altering?

  Thanks!

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

• 

  designsimply · Member · Jan 20, 2012 at 5:16 pm

  • Copy link

  You can trick the blogroll list into displaying the images by making the list items invisible and then making the images inside them visible again, like this:

  .blogroll a {
  visibility: hidden;
  }
  .blogroll a img {
  visibility: visible;
  }

  To add a little more styling like removing the bullet points and centering the images and shortening up the space below them where the text used to appear, try this:

  .sidebar-widget .blogroll li {
  list-style: none;
  }
  .blogroll a {
  visibility: hidden;
  }
  .blogroll a img {
  display: block;
  margin: 0 auto -1em;
  visibility: visible;
  }

• 

  lizflodstrom · Member · Jan 20, 2012 at 5:35 pm

  • Copy link

  That is perfect! Thanks so much!

• 

  designsimply · Member · Jan 20, 2012 at 5:57 pm

  • Copy link

  Cheers! :)