Pictures Pro - Support - Photo Cart CSS Tips

SUPPORT CENTER

Photo Cart CSS Tips

PHOTO CART

Support forum & community

WEBSITE:D

Support forum & community

CHAT

General photography chat

PHOTO CART MANUAL

PHOTO CART FAQ

WEBSITE:D MANUAL

These are codes you can add to the Additional CSS section when editing your theme.

Change the display image & Product display widths

1) Increase the width of your pages in your theme (customize section). For example 1024px
2) Use the code below to change the width of the area that display the image and price list
#viewImage width default is: 60%
#viewProducts width default is: 38%;

You can adjust the percentages to give more room for the image to display and less for for products to display.

Be sure the total of the widths is 98%. You don't want 100% because it will drop one below the other.

#viewImage { 
	width: 70%;
}
#viewProducts {
	width: 28%;
}

Move the price list to the left and display image to the right

#viewImage { 
	float: right;
}
#viewProducts {
	float: left;
}

Set a fixed size for thumbnail containers.

Adjust the sizes to your liking (Changing the 200px)

#photoGallery .thumbContainer { 
	width: 200px !important;
	height: 200px !important;
}

Fixed category container size

This will set a size for the containers listing the categories. You can ommit the height part.

#listCategories .thumbContainer {
	width: 200px !important;
	height: 200px !important;
}

Change the background when enlarged images, login window, redeem print credit, etc... are displayed

background-color is the actual color
filter:alpha & opacity is how much opacity
filter:alpha(opacity=100) is completly solid
opacity:1;is completely solid
Both filter:alpha & opacity must be used for diffrent browsers.

#shadepage  {
	background-color:#FFFFFF;
	filter:alpha(opacity=80);
	opacity:0.8;
}

Rounded submit buttons

input.submit, .submitSmall, .createAccountLoginPage  { 
	-moz-border-radius: 6px;
	border-radius: 6px;
}

Rounded input fields and textareas

Note this won't display in Internet Explorer 8 and earlier versions.

textarea, input, select { 
	-moz-border-radius: 4px;
	border-radius: 4px;
}

Rounded corners on gallery / thumbnail containers

You can adjust the amount of roundedness by adjusting the pixel value.
Note this won't display in Internet Explorer 8 and earlier versions.

#listCategories .thumbContainer, #listGalleries .thumbContainer, #listGalleries .thumbContainerFloating,
#listGalleries .thumbContainerFixedOuter, #photoGallery .thumbContainer {
	-moz-border-radius: 6px;
	border-radius: 6px;
}

Rounded corners on product groups (labels)

You can adjust the amount of roundedness by adjusting the pixel value.
Note this won't display in Internet Explorer 8 and earlier versions.

#productList .closed, #productList .hover {
	-moz-border-radius: 6px;
	border-radius: 6px;

}

#productList .open {
	-moz-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;

}

Hide Expiration date on view gallery / image pages

#galExpire { 
	display: none;
}

Hide expiration date over thumbnail when using * Gallery listing style: Standard thumbnail with title above - FLOATING

.expiration{
	display: none;
}

Hide gallery title on gallery list page until the mouse is over it when using floating galleries

#listGalleries .galleryTitleFloat { 
	overflow: hidden; 
}

Center image title over image

#photoTitle { 
	text-align: center;
}

Center image caption

#imageText {
	text-align: center;
}

Move paging menu to the left side.

This is the previous page 1 2 3 next when viewing pages of galleries and thumbnails

#pageMenu {
	float: left;
}

Add a border around the entire page content

Change the color (#000000) to the color you want to use.

#main_container {
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
	border-bottom: solid 1px #000000;
}

#headerContainer {
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
	border-top: solid 1px #000000;
}
#topMainMenuContainer{
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
}

Adding a shadow around the pages

You may want to play with the settings to make it to your liking. Search "CSS box-shadow" for more info on this effect.
Note this won't display in Internet Explorer 8 and earlier versions.

#main_container,#header {
	-moz-box-shadow: 0px 5px 20px #000000;
	-webkit-box-shadow: 0px 5px 20px #000000;
	-goog-ms-box-shadow: 0px 5px 20px #000000;
	box-shadow: 0px 5px 20px #000000;
}

Adding a shadow to gallery / thumbnail containers

You can adjust the color of the shadow by changing the color value (#c4c4c4). Search "CSS box-shadow" for more info on this effect.
Note this won't display in Internet Explorer 8 and earlier versions.

#listCategories .thumbContainer, #listGalleries .thumbContainer, #listGalleries .thumbContainerFloating,
#listGalleries .thumbContainerFixedOuter, #photoGallery .thumbContainer {
	-moz-box-shadow: 1px 1px 5px #c4c4c4;
	-webkit-box-shadow: 1px 1px 5px #c4c4c4;
	-goog-ms-box-shadow: 1px 1px 5px #c4c4c4;
	box-shadow: 1px 1px 5px #c4c4c4;
}

Adding text shadow to text in the main menu

Note this won't display in Internet Explorer 8 and earlier versions.

#topMainMenu{ 
	text-shadow:1px 1px 1px #121212; 
}

Have just your header background span 100% across page but the header in a fixed width

This works when using a fixed width on your pages. Replace the 1024px with the width you have set for your pages.

#headerContainer{ 
	width: 100%;
}
#header{ 
	width: 1024px;
	margin: auto;
}

Have just your main menu background span 100% across page but the menu links in a fixed width

This works when using a fixed width on your pages. Replace the 1024px with the width you have set for your pages.

#topMainMenuContainer { 
	width: 100%;
}
#topMainMenu{ 
	width: 1024px;
	margin: auto;
}

Center category titles

Important: IF you category titles go on to 2 lines, this will mess up the row.

#listCategories .categoryTitle {
	text-align: center;
	float: none;
	display: block;
}

Using category titles only (no thumbnails) and category names 1 per line

If you do not have preview images for your categories and only using the Category name, you can make them go one per line with the following code. If you want the category titles centered in the middle of the page, change text-align: center;

#listCategories .categoryTitle {
	float: none;
	text-align: left;
}

Using category titles only (no thumbnails) and categories centered on the page

If you do not have preview images for your categories and only using the Category name, you can use the following code to make them center across the page

Note: You may have to experiment the width in #listCategories (650px) and the width in the .categoryTitle (200px) to acheive what you want,

#listCategories { 
width: 650px;
margin: auto;
text-align: center;
}

.categoryTitle {
width: 200px;
margin: auto;
float: none;
}

Hide category titles and using thumbnails

This will not display the category titles over the thumbnails. If you do this you will probably want to use fixed size containers as described higher up on this page.

.categoryTitle {
	display: none;
}

Remove background & border from the Shopping cart / checkout links area

#cart_info { 
	background-color: transparent;
	border: 0px;
}

Transparent background for the header

#header,#headerContainer {
	background-color: transparent;
}

Transparent background the main content area of the pages

#pageContentContainer,#main_container {
	background-color: transparent;
}

To change the color and background of the Next / Previous links above the zoom (click to enlarge image) image

In the example below, #000000 is the TEXT color and #FFFFFF is the Background / Border color behind the text.

#zoomNav #pageMenu {
	color: #000000; 
}
 #zoomNav #imageNavigationContainer #imageNavigation .selectPage {
	border: 1px solid #FFFFFF;
	background-color: #FFFFFF;
	color: #000000;
}
 #zoomNav #imageNavigationContainer #imageNavigation  .unavailable {
	color: #FFFFFF;
	border: 1px solid #FFFFFF;
}

To create a solid background behind the links above the zoom (click to enlarge image) image.

These settings need to match what you have in your Customize section in the admin for your theme -> DIsplay Image Section so it will match up. #FFFFFF will be the border color in that section in this example.

#zoomNav {
	background-color: #FFFFFF;
	border: 15px solid #FFFFFF;
	padding: 1px;
}

Add more spacing to the shopping cart / checkout links at the top of the page

#cartTotalDiv a { 
	margin-left: 20px;
}

Center login screen on home page

If you have your Photo Cart set to require customers to login (Settings > Basic Settings) and want to only show a login screen in the center of the page.

#leftHomePageRequireLogin { 
	display: none;
}
#rightHomePageRequireLogin { 
	width: 400px;
	margin: auto;
	float: none;
}

Move the Shopping Cart / Checkout area at the top of the page down

You will probably want to adjust how much to move down (the 50px part).

#menu_top_container {
	margin-top: 50px;
}

Add more padding to the main content area of the pages.

You can adjust the 20px to the amount your want.

#pageContentContainer{ 
	padding: 20px;
}

Change the blue close button

This isn't CSS. This is actually a graphic. The icons is called "close.png" and located in the pcicons folder inside your Photo Cart folder.

If you want to replace it you will need to have or create your own close.png graphic and upload it to your pcicons folder overwriting the existing one.

This will need to be a png file and 16 pixels by 16 pixels.