Columner theme | Index customization | Square before links

renno / 2013-02-07 16:16:34   

Dear users,
i am bit rusty in my css skills, so it is something that seems extremely easy, but i'm struggling to remember how to do it right in columner theme...

I'm tryng to make the section titles in the index to be preceded by a square (of more or less 10 to 12px solid), and when this section is active using indexpand the square runs beside the links... here is the link for the sketch:
renno.info/… (the second section portfolio is open and with mouse over tatuagens urbanas)
my site: renno.info

Some time ago in 1.0 version, i managed to do something very close to this with borders (solid) and padding or margins... but the square never got very square it become a sort of rectangle... (If I remember i put a padding-left on the itens inside the section to match the space of border plus other space, and the mouse over the with the border solid plus space)

I was wondering if it is possible to embed a perfect square with the same color of text over there, maybe an ASCII code (asciitable.com/) of square in the size of the text...

I know is just styling, but if someone could help me achieve that effect i would be very very grateful.

arsondpi / 2013-02-07 17:30:03   

This is a bit more complex than expected; I tried this and it seems to work but it may not be solving all your problems (for example the active link bullet etc.)
In the following example -which is here to give you a headstart- I'm using the gif image of your favicon as a bullet.

  1. #index ul { width: auto; }
  2. #index ul.section li {
  3.     background: url("view-source:renno.info/…;) no-repeat scroll left center transparent;
  4.     padding: 0 0 0 30px;
  5. width: 220px;
  6. }
  7. #index ul.section li.exhibit_title {
  8.     background: none;
  9.     padding: 0;
  10.     width: 220px;
  11. }

Insert the above at the end of your style.css (so certain css attributes get overridden)

renno / 2013-02-22 13:49:11   

You guys are great, thanks again for all support!
i managed to put the square before the links, and to make the square hover around.

i am wondering if it is possible to make the square in the section title to dissapear once it is clicked or to switch/change the img once it is clicked in the indexpand, to create the illusion that the square moving is the same that was on top before.

Maybe i don't need to mark the active exhibit once the menu closes everytime it loads a new one.

thanks arsondpi!

arsondpi / 2013-02-22 14:16:31   

It most likely is.
The issue here is that you need to spend some time figuring out which is the correct css selector and make it work for exactly what you want.

This thread has been closed, thank you.