Aarfie custom web development and maintenance services are discontinued – read more

Looking for our new Big Cartel themes – visit Aarcade

 
 

AARFIE SUPPORT

How do I change my Big Cartel Sexy theme to a 4 column layout?

If you purchased or upgraded your Big Cartel theme after 29th November 2011, please refer to Aarcade Support instead of the following article.

close message

Please note that this article has been created to help address a popular question amongst Big Cartel users. Aarfie does not provide support for the use of the information in this article. If you have questions regarding Big Cartel or Big Cartel’s default themes, please visit Big Cartel Help.

To widen the layout of Big Cartel’s Sexy theme and create 4 column product pages, copy all of the code below and paste it into your custom style area in your Big Cartel admin. To locate your custom style area, refer to the support article Where do I add custom style coding in my Big Cartel theme controls?

View or download code as text file.

/*============================================================
Style Name: Widen Sexy
Style URI: http://aarfiesupport.com/how-do-i-change-my-big-cartel-sexy-theme-to-a-4-column-layout/
Description: Custom CSS to widen Big Cartel's Sexy theme
Author: Aarfie
Version: 1.0
Author URI: http://aarfiesx.com/
============================================================*/

/*============================================================
Increase width of main content containers
============================================================*/

#wrap {
width: 917px;
}

#main {
width: 734px;
}

#main-content {
width: 714px;
}

* html #main-content {
width: 734px;
width: 714px;
}

/* - - - - - - Product Page */

body.product #main-content {
width: 684px;
padding: 20px 25px;
}

#product-details {
width: 369px;
}

/* - - - - - - Cart Page */

#cart-content {
width: 714px;
}

/* - - - - - - Custom Page */

body.custom #main-content {
width: 684px;
}

/*============================================================
Increase cart item column width, to push overall cart table
width out to fill page
============================================================*/

#col-item {
width: 514px;
}

/*============================================================
Change default products area background image to show
three vertical white borders between product columns
============================================================*/

#products {
background-image: url(http://c179151.r51.cf1.rackcdn.com/bkg-products-four-col.gif);
}

/*============================================================
Clear padding and margin values for product containers on
products pages - include up to 300 in case Big Cartel change
product-per-page allowance
============================================================*/

#product-1, #product-4, #product-7, #product-10, #product-13, #product-16, #product-19, #product-22, #product-25, #product-28,
#product-31, #product-34, #product-37, #product-40, #product-43, #product-46, #product-49, #product-52, #product-55, #product-58,
#product-61, #product-64, #product-67, #product-70, #product-73, #product-76, #product-79, #product-82, #product-85, #product-88,
#product-91, #product-94, #product-97, #product-100, #product-103, #product-106, #product-109, #product-112, #product-115, #product-118,
#product-121, #product-124, #product-127, #product-130, #product-133, #product-136, #product-139, #product-142, #product-145, #product-148,
#product-151, #product-154, #product-157, #product-160, #product-163, #product-166, #product-169, #product-172, #product-175, #product-178,
#product-181, #product-184, #product-187, #product-190, #product-193, #product-196, #product-199, #product-202, #product-205, #product-208,
#product-211, #product-214, #product-217, #product-220, #product-223, #product-226, #product-229, #product-232, #product-235, #product-238,
#product-241, #product-244, #product-247, #product-250, #product-253, #product-256, #product-259, #product-262, #product-265, #product-268,
#product-271, #product-274, #product-277, #product-280, #product-283, #product-286, #product-289, #product-292, #product-295, #product-298 {
padding-right: 0;
}

#product-2, #product-5, #product-8, #product-11, #product-14, #product-17, #product-20, #product-23, #product-26, #product-29,
#product-32, #product-35, #product-38, #product-41, #product-44, #product-47, #product-50, #product-53, #product-56, #product-59,
#product-62, #product-65, #product-68, #product-71, #product-74, #product-77, #product-80, #product-83, #product-86, #product-89,
#product-92, #product-95, #product-98, #product-101, #product-104, #product-107, #product-110, #product-113, #product-116, #product-119,
#product-122, #product-125, #product-128, #product-131, #product-134, #product-137, #product-140, #product-143, #product-146, #product-149,
#product-152, #product-155, #product-158, #product-161, #product-164, #product-167, #product-170, #product-173, #product-176, #product-179,
#product-182, #product-185, #product-188, #product-191, #product-194, #product-197, #product-200, #product-203, #product-206, #product-209,
#product-212, #product-215, #product-218, #product-221, #product-224, #product-227, #product-230, #product-233, #product-236, #product-239,
#product-242, #product-245, #product-248, #product-251, #product-254, #product-257, #product-260, #product-263, #product-266, #product-269,
#product-272, #product-275, #product-278, #product-281, #product-284, #product-287, #product-290, #product-293, #product-296, #product-299 {
margin-left: 0;
}

#product-3, #product-6, #product-9, #product-12, #product-15, #product-18, #product-21, #product-24, #product-27, #product-30,
#product-33, #product-36, #product-39, #product-42, #product-45, #product-48, #product-51, #product-54, #product-57, #product-60,
#product-63, #product-66, #product-69, #product-72, #product-75, #product-78, #product-81, #product-84, #product-87, #product-90,
#product-93, #product-96, #product-99, #product-102, #product-105, #product-108, #product-111, #product-114, #product-117, #product-120,
#product-123, #product-126, #product-129, #product-132, #product-135, #product-138, #product-141, #product-144, #product-147, #product-150,
#product-153, #product-156, #product-159, #product-162, #product-165, #product-168, #product-171, #product-174, #product-177, #product-180,
#product-183, #product-186, #product-189, #product-192, #product-195, #product-198, #product-201, #product-204, #product-207, #product-210,
#product-213, #product-216, #product-219, #product-222, #product-225, #product-228, #product-231, #product-234, #product-237, #product-240,
#product-243, #product-246, #product-249, #product-252, #product-255, #product-258, #product-261, #product-264, #product-267, #product-270,
#product-273, #product-276, #product-279, #product-282, #product-285, #product-288, #product-291, #product-294, #product-297 {
margin-left: 0;
}

/*============================================================
Set new padding and margin values for product containers on
products pages - include up to 300 in case Big Cartel change
product-per-page allowance
============================================================*/

#product-1, #product-5, #product-9, #product-13, #product-17, #product-21, #product-25, #product-29, #product-33, #product-37,
#product-41, #product-45, #product-49, #product-53, #product-57, #product-61, #product-65, #product-69, #product-73, #product-77,
#product-81, #product-85, #product-89, #product-93, #product-97, #product-101, #product-105, #product-109, #product-113, #product-117,
#product-121, #product-125, #product-129, #product-133, #product-137, #product-141, #product-145, #product-149, #product-153, #product-157,
#product-161, #product-165, #product-169, #product-173, #product-177, #product-181, #product-185, #product-189, #product-193, #product-197,
#product-201, #product-205, #product-209, #product-213, #product-217, #product-221, #product-225, #product-229, #product-233, #product-237,
#product-241, #product-245, #product-249, #product-253, #product-257, #product-261, #product-265, #product-269, #product-273, #product-277,
#product-281, #product-285, #product-289, #product-293, #product-297 {
padding-right:531px;
}

#product-2, #product-6, #product-10, #product-14, #product-18, #product-22, #product-26, #product-30, #product-34, #product-38,
#product-42, #product-46, #product-50, #product-54, #product-58, #product-62, #product-66, #product-70, #product-74, #product-78,
#product-82, #product-86, #product-90, #product-94, #product-98, #product-102, #product-106, #product-110, #product-114, #product-118,
#product-122, #product-126, #product-130, #product-134, #product-138, #product-142, #product-146, #product-150, #product-154, #product-158,
#product-162, #product-166, #product-170, #product-174, #product-178, #product-182, #product-186, #product-190, #product-194, #product-198,
#product-202, #product-206, #product-210, #product-214, #product-218, #product-222, #product-226, #product-230, #product-234, #product-238,
#product-242, #product-246, #product-250, #product-254, #product-258, #product-262, #product-266, #product-270, #product-274, #product-278,
#product-282, #product-286, #product-290, #product-294, #product-298 {
margin-left: -529px;
}

#product-3, #product-7, #product-11, #product-15, #product-19, #product-23, #product-27, #product-31, #product-35, #product-39,
#product-43, #product-47, #product-51, #product-55, #product-59, #product-63, #product-67, #product-71, #product-75, #product-79,
#product-83, #product-87, #product-91, #product-95, #product-99, #product-103, #product-107, #product-111, #product-115, #product-119,
#product-123, #product-127, #product-131, #product-135, #product-139, #product-143, #product-147, #product-151, #product-155, #product-159,
#product-163, #product-167, #product-171, #product-175, #product-179, #product-183, #product-187, #product-191, #product-195, #product-199,
#product-203, #product-207, #product-211, #product-215, #product-219, #product-223, #product-227, #product-231, #product-235, #product-239,
#product-243, #product-247, #product-251, #product-255, #product-259, #product-263, #product-267, #product-271, #product-275, #product-279,
#product-283, #product-287, #product-291, #product-295, #product-299 {
margin-left: -352px;
}

#product-4, #product-8, #product-12, #product-16, #product-20, #product-24, #product-28, #product-32, #product-36, #product-40,
#product-44, #product-48, #product-52, #product-56, #product-60, #product-64, #product-68, #product-72, #product-76, #product-80,
#product-84, #product-88, #product-92, #product-96, #product-100, #product-104, #product-108, #product-112, #product-116, #product-120,
#product-124, #product-128, #product-132, #product-136, #product-140, #product-144, #product-148, #product-152, #product-156, #product-160,
#product-164, #product-168, #product-172, #product-176, #product-180, #product-184, #product-188, #product-192, #product-196, #product-200,
#product-204, #product-208, #product-212, #product-216, #product-220, #product-224, #product-228, #product-232, #product-236, #product-240,
#product-244, #product-248, #product-252, #product-256, #product-260, #product-264, #product-268, #product-272, #product-276, #product-280,
#product-284, #product-288, #product-292, #product-296 {
margin-left: -175px;
}

Last Modified: 30th May, 2011

Other ‘Big Cartel’ Articles...

Big Cartel support articles generally relate to Aarfie-developed Big Cartel themes purchased from the shop or created for a custom project.