Popsyclunk website screen print

Website for Popsyclunk

Sally Mitchell already had a WordPress website but she wanted a new look, as her existing site wasn’t showing off her lovely, handpainted, personalised, wooden gifts to their best advantage.

I used the Circumference Lite theme from Styled Themes and used the built in customiser to choose a colour scheme that reflected Popsyclunk’s bright painted colours.

I added some more decorative touches to match the feel of Sally’s handpainted gift range, including rounded corners, blocks of colour around the menu items, a seamless wooden background from Pixeden and a yellow polka dot header.

 

Popsyclunk screen print details

 

I repeated the pale blue colour blocks around the dates in the blog posts and added a post separator similar to the outlines that Sally paints on some of her pieces.

 

Popsyclunk handpainted gifts blog design

 

Here’s a screen print of the new home page and you can visit the Popsyclunk website here: www.popsyclunk.co.uk

 

Popsyclunk website screen print

3 thoughts on “Website for Popsyclunk

  1. Hi,

    First off, great website you have. I’m trying to add rounded corners to the Circumference Lite theme as you did with the popsyclunk site. I know what code I need to insert and have done so successfully with the footer wrapper.

    My problem is that I can’t seem to find the correct area / wrapper in the CSS to change the very top border (green area in your site). Can you please tell me what element I need to change to get the rounded corners?

    Your help would be greatly appreciated! Thanks.

    –Paul

  2. These are the lines of code I’ve added to make the corners round on various bits. Hopefully it’s one of these:

    #cir-wrapper-boxed-medium , img {
    border: none !important;
    box-shadow: none;
    -webkit-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
    }

    #cir-banner img { -webkit-border-radius: 0px;
    border-radius: 0px; }

    #cir-ann-social-wrapper {
    -webkit-border-radius: 20px 20px 0px 0px;
    border-radius: 20px 20px 0px 0px;
    }

    #cir-footer-wrapper { -webkit-border-radius: 0px 0px 20px 20px;
    border-radius: 0px 0px 20px 20px;
    }

Leave a Comment