Jump to content

help with moving things around on the Product page...

wearCA
 Share

Recommended Posts

wearCA Newbie

wearCA

Posted
Posted

hi all

i am trying to move some things around on my product page and change a color.. any tips/help is appreciated..

 

here is an image showing what i am trying to do..

 

1 - move the "variations/attributes" drop down (size in this case) to the left, so it is aligned on the right of the product image...right now it is justified all the way to the right of the box, i want it to be plush on the image.

 

2 - move the price, old price, and "on sale" graphic the same way..

 

3 - change the color of the "More info" block from yellow to grey...

 

thanks

post-721011-0-82989500-1383383167_thumb.jpg

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

hello, in the future, please follow forum rules (1 topic = 1 question), it's not a problem right now, but i will be greateful if you will follow these steps in the futre :)

 

3

to change color you will need to change image defined in styles:
 

.idTabs .selected {
color: #000;
background: url(../img/bg_li_idTabs.png) repeat-x 0 0;
}

global.css line 629

 

1+2

you will need to add text-align:left; param to all elements you want to move to the left.

for example, for price:

.our_price_display {
	padding-bottom:10px;
	font-weight:700;
	font-size:24px;
	line-height:18px;
	color:#9b0000;
	text-align:left;
}
Link to comment
Share on other sites
wearCA Newbie

wearCA

Posted
  • Author
Posted

thank you vekia and i apologize for the multi-questions in one post.

so i  was able to get this far...

 

but still am stumped on where to put the right command for the Quantity box, the attribute drop down alignment, and the On sale image...

 

this is what my product.css looks like..

and the picture is where am at now.

thanks again..

 

"/* product desc */

/* primary_block ***************************************************************************** */
#primary_block {
margin-top:15px;
}
 
/* pb-right-column ***************************************************************************** */
#pb-right-column {
float:left;
width:266px;
}
 
#pb-right-column #image-block {
position:relative;
}
 
#pb-right-column #image-block img {
border:0px solid #cdcdcd;
}
 
#pb-right-column #image-block #view_full_size {
display:block;
cursor:pointer;
}
 
#pb-right-column #image-block #view_full_size .span_link {
position:absolute;
bottom:10px;
left:32%;
display:block;
padding:0 12px 0 30px;
line-height:20px;
color:#fff;
text-shadow:0 1px 0 #000;
text-align:center;
text-transform:uppercase;
background-image:url(../img/icon/zoom.png);
background-repeat:no-repeat;
background-position:10px 2px;
background-color:#000;
background-color:rgba(0,0,0,0.5);
border-radius:12px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
}
 
#pb-right-column #image-block #view_full_size .span_link img {
position:relative;
top:3px;
left:-3px;
border:none;
padding-right:2px;
}
 
/* miniatures */
#pb-right-column #views_block {
margin-top:10px;
width:266px;
}
 
#thumbs_list {
float:left;
overflow:hidden;
margin-left:4px;
width:216px;
}
 
#thumbs_list ul#thumbs_list_frame {
list-style-type:none;
padding-left:0;
}
 
#thumbs_list li {
float:left;
height:60px;
width:72px;
cursor:pointer;
}
 
#thumbs_list li img {
margin:0 6px;
border:1px solid #cdcdcd;
}
 
span.view_scroll_spacer {
float:left;
height:16px;
width:21px;
}
 
#view_scroll_left,#view_scroll_right {
float:left;
margin-top:20px;
padding:0 4px;
height:18px;
width:9px;
text-indent:-3000px;
background:url(../img/thumbs_left.gif) no-repeat center center transparent;
}
 
#view_scroll_right {
margin-left:4px;
background-image:url(../img/thumbs_right.gif);
}
 
.resetimg {
padding:10px 0 0;
}
 
/* link list */
#usefull_link_block {
list-style-type:none;
margin-top:20px;
}
 
#usefull_link_block li {
padding:2px 0;
}
 
#usefull_link_block li.print {
padding-left:20px;
background:url(../img/icon/print.gif) no-repeat 0 0;
}
 
#usefull_link_block li.sendtofriend {
padding-left:20px;
background:url(../img/icon/send_friend.gif) no-repeat 0 0;
}
 
#usefull_link_block li#left_share_fb {
padding-left:20px;
background:url(../img/icon/picto_fb.png) no-repeat 0 0;
}
 
/* pb-left-column ****************************************************************************** */
#pb-left-column {
float:left;
margin-left:14px;
width:255px;
}
 
#pb-left-column h1 {
padding-bottom:5px;
font-size:18px;
}
 
#pb-left-column #short_description_block {
color:#666;
}
 
#pb-left-column #short_description_block .buttons_bottom_block {
display:none;
}
 
/* form */
#pb-left-column #buy_block {
margin-top:10px;
}
 
#buy_block p {
padding-bottom:10px;
}
 
#pb-left-column #buy_block label {
display:inline-block;
width:125px;
font-weight:700;
font-size:12px;
text-align:right;
}
 
.ie7 #pb-left-column #buy_block label {margin-right:5px;float:left}
 
/* color_picker */
#pb-left-column #color_picker p {
padding-bottom:5px;
font-weight:700;
}
 
#attributes fieldset {
padding-bottom:10px;
}
 
#attributes fieldset label {
vertical-align:top;
float:left;
}
 
#attributes .attribute_list {
display:inline-block;
float:left;
}
 
.ie7 #attributes .attribute_list {
display:inline;
zoom:1;
float:left;
}
 
#attributes .attribute_list ul{
list-style:none;
float:left;
}
 
#attributes .attribute_list ul li{
clear:both
}
 
#attributes .attribute_list input.attribute_radio{float: left;margin-left: 3px;}
#attributes .attribute_list span{float: left;margin-bottom: 5px;margin-left: 3px;}
 
.ie7 #attributes .attribute_list span{margin-top:1px}
 
#attributes .attribute_list #color_to_pick_list {
list-style-type:none;
width:125px;
}
 
#attributes .attribute_list #color_to_pick_list li {
float:left;
margin:0 8px 8px 0;
padding:1px;
border:1px solid #ccc;
clear:none
}
 
#attributes .attribute_list #color_to_pick_list li.selected {
border:1px solid #000;
}
 
#attributes .attribute_list #color_to_pick_list a.color_pick {
display:block;
height:20px;
width:20px;
}
 
.product_attributes {
padding:10px 0 0;
border-top:1px solid #ccc;
float:left;
text-align:left;
}
 
/* attributes */
#attributes select {
width:120px;
border:1px solid #cdcdcd;
 
 
}
 
/* quantity_wanted */
#quantity_wanted_p input {
width:50px;
border:1px solid #cdcdcd;
float: inherit;
 
 
 
 
}
 
/* availability_statut */
#availability_statut {
margin: 10px 0 0 0;
min-width: 255px;
}
 
#availability_statut span#availability_label, 
#availability_date_label {
display:inline-block;
width:125px;
font-weight:700;
font-size:12px;
text-align:right;
}
 
#availability_statut #availability_value {
background-color:green;
color:#ffffff;
text-shadow:none;
padding:0 10px;
text-transform: uppercase;
font-size:10px;
font-weight: bold;
display:inline-block;
}
 
#availability_statut #availability_value.warning_inline {
background-color:#9B0000;
}
 
/* prices */
.content_prices {
margin-top:10px;
padding-top:10px;
border-top:1px solid #ccc;
text-align:right;
}
 
#buy_block p.price {
padding:0;
}
 
.discount {
display:none;
}
 
#buy_block p#old_price {
padding-bottom:15px;
font-size:14px;
text-decoration:line-through;
text-align:left;
 
}
 
.our_price_display {
padding-bottom: 10px;
padding-right: 5px;
font-weight: 700;
font-size: 24px;
line-height: 18px;
color: #CC0000;
text-align:left;
 
}
 
#reduction_percent,#reduction_amount {
display:block;
float:right;
margin-left:10px;
padding:0 0 0 10px;
font-weight:700;
font-size:12px;
color:#fff;
background:url(../img/bg_reduction.png) no-repeat 0 0 transparent;
}
 
#reduction_percent span,#reduction_amount span {
display:block;
padding:1px 5px 1px 0;
background:url(../img/bg_reduction.png) no-repeat 100% 0 transparent;
}
 
/* online_only */
#buy_block p.online_only {
font-weight:700;
font-size:11px;
color:#900;
text-align:left;
text-transform:uppercase;
}
 
/* add_to_cart */
.content_prices #add_to_cart {
position:relative;
float:left;
padding:0;
 
}
 
.content_prices #add_to_cart .exclusive,.content_prices #add_to_cart .exclusive_disabled {
height: 26px;
    padding: 5px 7px 5px 15px;
}
 
@media screen and (-webkit-min-device-pixel-ratio:0) { /*hack Chrome and Safari */
 
    .content_prices #add_to_cart .exclusive,.content_prices #add_to_cart .exclusive_disabled {
padding:6px 7px 4px 15px;
}
 
}
 
.ie9 .content_prices #add_to_cart .exclusive, .ie9 .content_prices #add_to_cart .exclusive_disabled,
.ie8 .content_prices #add_to_cart .exclusive, .ie8 .content_prices #add_to_cart .exclusive_disabled,
.ie7 .content_prices #add_to_cart .exclusive, .ie7 .content_prices #add_to_cart .exclusive_disabled {
padding:8px 7px 4px 15px;
line-height:12px;
}
 
:first-child+html .content_prices #add_to_cart .exclusive {
padding:4px 3px 4px 11px;
}
 
.content_prices #add_to_cart span {
z-index:10;
display:block;
position:absolute;
top:0;
left:-12px;
height:26px;
width:26px;
background:url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent;
}
 
/* */
.buttons_bottom_block {
clear:both;
padding-top:20px;
}
 
.buttons_bottom_block #wishlist_button {
font-weight:700;
}
 
/* SEND TO FRIEND (pop-in) ##################################################################### */
#send_friend_form {
}
 
#send_friend_form h2 {
padding:8px 11px;
font-size:12px;
color:#fff;
text-shadow:0 1px 0 #000;
text-transform:uppercase;
background:#383838;
}
 
#send_friend_form .product {
margin:20px 10px;
}
 
#send_friend_form .product img {
float:left;
margin:0 10px 0 0;
border:1px solid #ccc;
}
 
#send_friend_form .product .product_desc {
float:left;
width:380px;
}
 
#send_friend_form .product .product_desc p {
padding:0 10px 0 0;
color:#333;
}
 
#send_friend_form .product .product_desc p.product_name {
font-size:12px;
color:#000;
}
 
#send_friend_form .send_friend_form_content {
margin:0 10px 20px;
}
 
#send_friend_form .form_container {
padding:10px 15px;
border:1px solid #ccc;
background:#eee;
}
 
#send_friend_form .form_container p.intro_form {
padding-bottom:14px;
font-weight:700;
font-size:13px;
color:#333;
}
 
#send_friend_form .form_container p.txt_required {
padding-bottom:0;
color:/* SEND TO FRIEND (pop-in) ##################################################################### */
#666;
}
 
#send_friend_form .form_container .text {
padding-bottom:10px;
}
 
#send_friend_form .form_container .text label {
display:inline-block;
padding:6px 15px;
width:180px;
/* 210 */
font-size:12px;
text-align:right;
}
 
#send_friend_form .form_container .text input {
padding:0 5px;
height:22px;
width:260px;
border:1px solid #ccc;
font-size:12px;
color:#666;
}
 
#send_friend_form .submit {
margin-top:20px;
padding-bottom:0;
text-align:right;
}
 
/* PACK ##################################################################### */
#blockpack {
margin-top:20px;
padding-top:20px;
border-top:1px dotted #999;
}
 
/* PERSONNALISATION ##################################################################### */
.customization_block {
}
 
.customization_block p.infoCustomizable {
margin:10px 0 20px;
padding:0 0 0 20px;
background:url(../img/icon/infos.gif) no-repeat 0 0 transparent;
}
 
ul#uploadable_files,ul#text_fields {
list-style-type:none;
}
 
.customizableProductsFile,.customizableProductsText {
margin-bottom:20px;
padding-bottom:10px;
border-bottom:1px dotted #ccc;
}
 
.customizationUploadLine {
padding-bottom:10px;
}
.customizationUploadBrowse img + a {
position: relative;
top: -51px;
}
.customizationUploadLine label {
display:inline-block;
width:150px;
vertical-align:top;
}
 
.customizationUploadLine textarea {
height:50px;
width:300px;
border:1px solid #ccc;
}
 
#customizedDatas {
float:right;
}
 
.accessories_block div ul li a {
display:inline-block;
}
 
.accessories_block div ul li .s_title_block a, .accessories_block div ul li .s_title_block span  {
font-weight:bold;
}
"
 

post-721011-0-75562400-1383417843_thumb.jpg

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...