Carolyn's Paintings

starryeyez024's picture

November 14, 2011

Carolyn Kinnison is a local artist from Howell, MI, who specializes in mixed media art and illustration. She needed a website she could easily manage, to both sell and display her many works of art.   Drupal Gardens allows her to add images to photo galleries and update the site with upcoming shows. Users can actually purchase artwork directly from the site via a simple e-commerce tool called Cashie.

  Read the Case Study    

Status: Resolved


Susan MacPhee November 15, 2011

That site is one of the best I've ever seen in Gardens. I'm really impressed. How in the world did you get the navigation items random positions like that? Nice work.


starryeyez024 November 16, 2011

Thanks Susan!! I used absolute positioning and CSS Combinators to arrange the menu items:

#block-system-main-menu li ~ li ~ li {

position: absolute;

top: 50px;

left: 272px;

I also wrote a blog post on who I added a transparent .png overlay to the slideshow. I checked out your site, looks like you are cranking out the DG sites, good work!

Susan MacPhee November 17, 2011

Thank you so much Kendall. I'll look over the tutorials. The first one I need to re read. I still don't get how each nav had a different location. Or do they all have 50px and 272px on them.

Thanks for the CSS challege! I can always use one. I'm a hack when it comes to CSS.

Best, Susan

starryeyez024 November 17, 2011

It is a bit of a challege, but with combinators you can style elements that are in a sequence using the "preceded by" rules, like if you want any element that is preceded by A to have a style, you can use:


with that logic, I can style the first menu item with:

#block-system-main-menu li

the second menu item with:

#block-system-main-menu li~li

the third menu item with:

#block-system-main-menu li~li~li

and so on. Tricky, eh?

Susan MacPhee November 18, 2011

That is super cool! Thanks for sharing the information. I'll post back if I try it. I'd like to attempt to use different images on each nav item like I attempted here with less ninja skills as you :)

starryeyez024 November 18, 2011

No problem :)

Just fyi, you have a bit of a font issue on that site. The good dog font is not rendering quite right on my Macbook, here's a screenshot:

Maybe you have a broken link to your font API, or maybe its a gardens issue? Just letting you know!

starryeyez024 November 18, 2011

Perhaps its a false alarm.. I have a font on my system called "Good Dog Bones" which looks like those heiroglyphics. Then I have a regular "good dog" font which is what I assume you were going for. 

I think this may actually be a big picture issue we've unearthed. Hey Drupal Gardens admins, you may want to check out a way to bulletproof the extra fonts that are included in Drupal Gardens :)

starryeyez024 November 21, 2011

What I meant to link to was a way to prevent local fonts from loading.. I think the bulletproof smiley method does that:

TheWebSprite January 19, 2012

I agree with Susan, that's the prettiest thing I've seen. Mind you I'm fairly new to the garden. But well done, and I would love to read the blog post, I'll have a look for it. Thanks

Susan MacPhee January 24, 2012

Hi, I wanted to follow up on this post. DG added a way to style menu items separately. Kendall, will this make your life much easier?

TheWebSprite January 24, 2012

I found that really helpful Susan thank you. I noticed it the other day and had a brief look but your reminder was timely. :)

starryeyez024 January 24, 2012

Ah, they added menu classes! Nice!

The only problem with using classes instead of combinators is if you need to rearrange items in a menu like mine. If I moved the first menu item into the last spot within the menu iterface, it wouldn't actually move it at all because the CSS would be targeting that particular menu item, say "Products" with absolute positioning. 

Whereas with my method you can still rearrange items in the drupal menu system, because the first menu item always has particular X&Y coordinates, but not "Products." Make sense?

Of course my scenario is more of a fringe case, and overall this is really good news. :)

Susan MacPhee January 24, 2012

Yea! Better navs. Thanks Kendall for your advice.

This topic has been closed to further comments.