Editing the CSS of the Twenty Twelve theme to match my website

Hey guys --

I'm using the Twenty Twelve theme ( http://riptide.wearabl.com/ ), but I would like create a seamless bridge between my store and site ( http://christopherrice.co ) ... can achieve this by editing the CSS of the Twenty Twelve theme?

Anyone have any material I can read or watch to further my knowledge in this respect?

Much appreciated.

Christopher

  • Joshua

    I think what you are asking for is the information that comes in the Themeing_MarketPress.txt file that downloads with MarketPress. You can view this by clicking the link found in the Presentation > General Settings > Store Style. This gives all the information about customizing the CSS for MarketPress for each function.

    There are two methods to create custom designs for MarketPress stores:

    Basic Styles:

    Basic styles are comprised of a css file and an optional images folder that is loaded
    and applied on store pages. To create a basic style:

    1. Create a css file in the /wp-content/marketpress-styles/ directory with your custom styles. It
    may be easiest to copy our default.css theme and modify it.
    2. Make sure to add the custom theme header with your theme's name at the top of the css file:
    /*
    MarketPress Style: CUSTOMNAME
    */
    Including this header will cause your custom theme to show in the dropdown on the
    Store Settings -> Presentation page so it may be selected.
    3. You can also optionally create a subdirectory for your css images in the /wp-content/marketpress-styles/ folder and
    link to images within it with relative urls like "image-folder/my-image.jpg".

    Advanced Themes:

    MarketPress uses custom post types to display it's products. This means that you can use
    the same WP theme templating system you are familiar with. We simply provide a customized
    subset of template functions so you don't have to worry about dealing with post meta. Template
    functions are fully documented and can be found in the /marketpress/marketpress-includes/template-functions.php file.

    E.g. to create a custom product page:

    1. Make a copy of the page.php template file in your theme directory and rename it mp_product.php

    2. mp_product.php must use the mp_* functions instead of the_content(), see template-functions.php for a list of functions relevant to products.

    MarketPress searches your current theme folder for template files specific to store pages. If
    a template file does not exist it loads the theme's page template instead. Just like WP, the
    plugin will search for templates in order of priority from top to bottom. Here are possible
    file names for store templates in order:

    Single Product Page
    mp_product-PRODUCTNAME.php
    mp_product-PRODUCTID.php
    mp_product.php

    Store Page
    mp_store.php

    Cart/Checkout Page
    mp_cart.php

    Order Status Page
    mp_orderstatus.php

    Product List Page
    mp_productlist.php

    Product Category List Page
    mp_category-CATEGORYSLUG.php
    mp_category-CATEGORYID.php
    mp_category.php
    mp_taxonomy.php
    mp_productlist.php

    Product Tag List Page
    mp_tag-TAGSLUG.php
    mp_tag-TAGID.php
    mp_tag.php
    mp_taxonomy.php
    mp_productlist.php

    There is a little more information in the file itself if you need it. I hope this helps!

    Cheers!

  • PC

    Hello Christopher,

    Thanks for your post.

    Thanks Joshua for chiming in on this one :slight_smile:

    Chris, I would like to add just a couple of lines to the great suggestion posted by Joshua above.

    Along with themeing MarketPress, you can also edit Twenty Twelve CSS to match it with the looks of your main site.

    However, the best way to do it will be using a plugin to add custom CSS to or you can use a child theme.

    You can use a plugin like : http://wordpress.org/extend/plugins/imporved-simpler-css/ to add custom CSS.

    Best place to start learning CSS tricks is : http://css-tricks.com/
    Your best buddy in identifying the right elements to edit CSS is : http://getfirebug.com/
    How to use Firebug is : http://templatic.com/theme-support/tips-n-tutorials/how-to-use-firebug/

    I hope that helps. Please feel free to ask if you have more questions on the same.

    Cheers
    PC

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.