User Tools

Site Tools


alysum:wholesitechanges

Easy modifications - whole site changes

Here you can see easy css modifications for Alysum theme Prestashop


Header logo block change size

Make header block bigger

#pattern #header { height: 189px}

Increase the default value 189

Make logo block smaller

#pattern #header_logo { top: 58px}

Reduce the default value 58

Change background of the black top bar

The default color is black #000

body { background: #000;}
#pattern #header_user #shopping_cart { background: #000;} 

Just change the value #000 to whatever you need.

Change red hover color in the top bar

#pattern li.pk_wishlist:hover, #pattern li.pk_favorites:hover, #pattern li.pk_watchlist:hover {background: #e17365}
#pattern #pk_customlinks li .indent {background-color: #e17365}
#pattern #shopping_cart:hover, #pattern #shopping_cart.hover {background: #e17365}
#pattern #cart_block .block_content {background:#e17365}

Just change the color value to whatever you need.

Change font style and font color in the top bar

#pattern #pk_customlinks ul li a, #pattern #header_user ul li, #pattern #header_user ul li a, #pattern #shopping_cart span {
color: #999;
font-family: Georgia;
}

Just change the color and font style to whatever you need.

Change font color when hover in the top bar

#pattern #pk_customlinks li:hover a {
color: #FFF !important;
}

Just change the color value to whatever you need.


Change Map zoom

Footer, file \themes\alysum\footer.tpl change as you need

zoom: 7

Contact US page, file \themes\alysum\contact-form.tpl change as you need

zoom: 9
#pattern #footer { background: #0b0b0b}  

Change the site background (white by default) and disable the pattern

#white_bg { background: #f9f9f9 !important }
#white_bg #pattern { background: none }

Buttons - change background color

Change color with the Theme Settings

The easiest way to change the buttons color is Theme Settings feature “Buttons color”
BO > Modules > Theme Settings, configure

Remove the pattern and change the color with the css

input.button_mini, input.button_small, input.button, input.button_large, input.button_mini_disabled, input.button_small_disabled, input.button_disabled, input.button_large_disabled, input.exclusive_mini, input.exclusive_small, input.exclusive, input.exclusive_large, input.exclusive_mini_disabled, input.exclusive_small_disabled, input.exclusive_disabled, input.exclusive_large_disabled, a.button_mini, a.button_small, a.button, a.button_large, a.exclusive_mini, a.exclusive_small, a.exclusive, a.exclusive_large, span.button_mini, span.button_small, span.button, span.button_large, span.exclusive_mini, span.exclusive_small, span.exclusive, span.exclusive_large, span.exclusive_large_disabled, .cart_navigation .button, .cart_navigation .button_large, .cart_voucher .submit input.button { 
    background-image: none !important;  background-color: #666 !important;}

input.button_mini:hover, input.button_small:hover, input.button:hover, input.button_large:hover, input.button_mini_disabled:hover, input.button_small_disabled:hover, input.button_disabled:hover, input.button_large_disabled:hover, input.exclusive_mini:hover, input.exclusive_small:hover, input.exclusive:hover, input.exclusive_large:hover, input.exclusive_mini_disabled:hover, input.exclusive_small_disabled:hover, input.exclusive_disabled:hover, input.exclusive_large_disabled:hover, a.button_mini:hover, a.button_small:hover, a.button:hover, a.button_large:hover, a.exclusive_mini:hover, a.exclusive_small:hover, a.exclusive:hover, a.exclusive_large:hover, span.button_mini:hover, span.button_small:hover, span.button:hover, span.button_large:hover, span.exclusive_mini:hover, span.exclusive_small:hover, span.exclusive:hover, span.exclusive_large:hover, span.exclusive_large_disabled:hover, .cart_navigation .button:hover, .cart_navigation .button_large:hover, .cart_voucher .submit input.button:hover, #idTab4 ul li .ajax_add_to_cart_button:hover { 
    background-image: none !important; background-color: #e1423c !important;
}

If you want to change the background color just change the values #666 and #e1423c (for active) to yours

Change color and font for the price

Just change the vaules #C5988B, Verdana and 12px to yours

On the category page

#pattern #product_list li .price {
    color: #C5988B;
    font-family: Verdana;
    font-size: 12px;
}

On the product page

#pattern .our_price_display {
    color: #C5988B;
    font-family: Verdana;
    font-size: 12px;
}

On the home page

#pattern #productsCarousel div.price span {
    color: #C5988B;
    font-family: Verdana;
    font-size: 12px;
} /* Product Carousel */


#pattern .productInfo .reduction {
    color: #e24c44;
    font-family: Verdana;
    font-size: 12px;
} /* Promo section in promo minic slider */
alysum/wholesitechanges.txt · Last modified: 2016/06/30 23:17 by Alex Support