help needed to customize my website

[celina1982]

hello there :-) I need some help to customization of my website layout. Hope someone can help me :-)

 

 

1) is it possible to change the size/resize the pictures in the productpages? they look like this:

 

but I want them to be like this; http://alysum.promok...evening-dresses

 

2) I have tried to change the font and colour of the prices, but It only changed in the homepage(displayhome)? what can I do?

 

3) How to add links to the header? I want to add my "contact" link...

 

4) how to add a " size guide" to my dresses and shoes to the website?

 

thanx :-))

 

regards

Edited April 10, 2013 by celina1982 (see edit history)

[Muad'Dib]

Hello Celina,

 

 

1) is it possible to change the size/resize the pictures in the productpages? they look like this: http://almodas.dk/in...roller=category

but I want them to be like this; http://alysum.promok...evening-dresses

 

Yes it is possible.

(if I would be mean I would leave it like this because you have not asked how to change it, just if that was possible lol Sorry -> [] Do not worry I am rather nice )

To change your pictures sizes:

BO -> Preferences -> Images.

From here you need to mess with the default values a bit to fit your needs.

 

2) I have tried to change the font and colour of the prices, but It only changed in the homepage(displayhome)? what can I do?

 

First you need identify the element (any) you want to change using developers tools like firebugs or such (right click on item you want to check -> Inspect Element).

Once you have identified what you want to change, you can make some live try by changing things directly on the fly (that wont be saved just for you to see how it changes).

Then you only have to replicate the changes made to the good .css depending on what you want to change. Likely being global.css.

 

/!\ : Note that it is prefered to override default .css with your theme .css instead of changing the 'core' ones

 

3) How to add links to the header? I want to add my "contact" link...

 

You need to hook the module(s) which deals with links of your liking into the 'Header of pages' hook (there are a few free modules which allow you to make a block with a few multilingual custom link).

To do so you will have to transplant the module(s) there.

Note the modules might not be compatible with 'Header of pages' hook and might require some alteration of its source files.

 

 

4) how to add a " size guide" to my dresses and shoes to the website?

 

What do you mean exactly 'add' a size guide?

My first thought would be to make a new CMS with pictures and text and then add links where you want them to be? Is that what you wanted to do?

To make a new CMS:

BO > Preferences > Pages > add new.

 

 

thanx :-))

 

You are much welcome.

 

Not sure if I fully answered your questions, but that should help you a little at the very least.

 

Good luck!

 

Cheers!

[celina1982]

thank you MuadDib , but I Don't know what I did wrong :-( the website look wrong now, plz someone tell me what I did wrong !! :-(

 

www.almodas.dk

 

I tried to right click on items and inspect elements, then I changed the width and height, but changed it back again.

 

#product_list a.product_img_link .mask_category {

position:absolute;

top:0;

left:0;

width:125px;

height:125px;

background:url(../img/mask_category.png) no-repeat;

 

then in generic style I changed the font but changed it back..

 

generic style

************************************************************************************************ */

body{

font:normal 12px Arial, Verdana, sans-serif;

color:#969696;

background:#f9f9f9

 

and now the website looks strange with wrong columns hmm

Edited December 19, 2012 by celina1982 (see edit history)

[yaniv14]

one thing i noticed is that your #header is outside your #page, did you modified the header.tpl?

[celina1982]

No i did not touch The header.tpl, only global.CSS and product.list CSS...:-( for me it looks like everything is moved to the left column hmmm

Edited December 19, 2012 by celina1982 (see edit history)

[yaniv14]

It look like you are missing the presta grid css.

you have no width setup at all.

[celina1982]

hmmmmm so strange, I did not modify anything in the grid_css, only clicking in the developer tools, then changed the font in product-list css and global.css...

 

is there any solution?

[yaniv14]

of course there is a solution, i am just not sure that you had it right before you make the changes....

Do you want your site look similar to http://alysum.promokit.eu/en/ ?

[celina1982]

no not exactly like the alysum.. I had 6 featured products in the centre column ( 3 pictures in one line), under the feautred products I have this novo slider with the special products and then the newsletter and social block.. so in the homepage there was only one center column.

 

in the other pages, I had a right column with a special block, and the catalog ( layered navigation).

 

My theme is : http://addons.presta...emo/FO4274.html

But I get some modules from the alysum.theme ( the newsletter/social block) and the novo slider with special blocks.

 

 

the other pages should look like this: http://addons.prestashop.com/demo/FO4274.html

I had a right column with a special block and catalog

 

even the top menu is changed, there should be 7 categories in one row, and font is changed.. dont know whyyy !!! :-(

Edited December 19, 2012 by celina1982 (see edit history)

[yaniv14]

try to add to your themes/albedo/css this file: grid_prestashop.css

right click and save as

Edited December 19, 2012 by yaniv14 (see edit history)

[celina1982]

there is already a grid_prestashop.css file, should I add a new one??

[yaniv14]

no,

can you post your "config/defines_uri.inc.php" content

[celina1982]

<?php

/*

* 2007-2012 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Open Software License (OSL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.org/licenses/osl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <[email protected]>

* @copyright 2007-2012 PrestaShop SA

* @version Release: $Revision: 17889 $

* @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*/

 

/* Theme URLs */

define('_PS_THEME_DIR_', _PS_ROOT_DIR_.'/themes/'._THEME_NAME_.'/');

define('_THEMES_DIR_', __PS_BASE_URI__.'themes/');

define('_THEME_DIR_', _THEMES_DIR_._THEME_NAME_.'/');

define('_THEME_IMG_DIR_', _THEME_DIR_.'img/');

define('_THEME_CSS_DIR_', _THEME_DIR_.'css/');

define('_THEME_JS_DIR_', _THEME_DIR_.'js/');

define('_PS_THEME_OVERRIDE_DIR_', _PS_THEME_DIR_.'override/');

 

/* For mobile devices */

if (file_exists(_PS_THEME_DIR_.'mobile/'))

{

define('_PS_THEME_MOBILE_DIR_', _PS_THEME_DIR_.'mobile/');

define('_THEME_MOBILE_DIR_', _THEMES_DIR_._THEME_NAME_.'/mobile/');

define('_PS_THEME_MOBILE_OVERRIDE_DIR_', _PS_THEME_MOBILE_DIR_.'override/');

}

else

{

define('_PS_THEME_MOBILE_DIR_', _PS_ROOT_DIR_.'/themes/default/mobile/');

define('_THEME_MOBILE_DIR_', __PS_BASE_URI__.'themes/default/mobile/');

}

define('_THEME_MOBILE_IMG_DIR_', _THEME_MOBILE_DIR_.'img/');

define('_THEME_MOBILE_CSS_DIR_', _THEME_MOBILE_DIR_.'css/');

define('_THEME_MOBILE_JS_DIR_', _THEME_MOBILE_DIR_.'js/');

 

/* For touch pad devices */

define('_PS_THEME_TOUCHPAD_DIR_', _PS_THEME_DIR_.'touchpad/');

define('_THEME_TOUCHPAD_DIR_', _THEMES_DIR_._THEME_NAME_.'/touchpad/');

define('_THEME_TOUCHPAD_CSS_DIR_', _THEME_MOBILE_DIR_.'css/');

define('_THEME_TOUCHPAD_JS_DIR_', _THEME_MOBILE_DIR_.'js/');

 

/* Image URLs */

define('_PS_IMG_', __PS_BASE_URI__.'img/');

define('_PS_ADMIN_IMG_', _PS_IMG_.'admin/');

define('_PS_TMP_IMG_', _PS_IMG_.'tmp/');

define('_THEME_CAT_DIR_', _PS_IMG_.'c/');

define('_THEME_PROD_DIR_', _PS_IMG_.'p/');

define('_THEME_MANU_DIR_', _PS_IMG_.'m/');

define('_THEME_SCENE_DIR_', _PS_IMG_.'scenes/');

define('_THEME_SCENE_THUMB_DIR_', _PS_IMG_.'scenes/thumbs');

define('_THEME_SUP_DIR_', _PS_IMG_.'su/');

define('_THEME_SHIP_DIR_', _PS_IMG_.'s/');

define('_THEME_STORE_DIR_', _PS_IMG_.'st/');

define('_THEME_LANG_DIR_', _PS_IMG_.'l/');

define('_THEME_COL_DIR_', _PS_IMG_.'co/');

define('_THEME_GENDERS_DIR_', _PS_IMG_.'genders/');

define('_SUPP_DIR_', _PS_IMG_.'su/');

define('_PS_PROD_IMG_', 'img/p/');

 

/* Other URLs */

define('_PS_JS_DIR_', __PS_BASE_URI__.'js/');

define('_PS_CSS_DIR_', __PS_BASE_URI__.'css/');

define('_THEME_PROD_PIC_DIR_', __PS_BASE_URI__.'upload/');

define('_MAIL_DIR_', __PS_BASE_URI__.'mails/');

define('_MODULE_DIR_', __PS_BASE_URI__.'modules/');

Edited December 19, 2012 by celina1982 (see edit history)

[yaniv14]

for now just add the content of the grid_prestashop.css I send you to your global.css (don't delete anything in your global.css)

but mark it for future references, like:

 

/***** Beginning of Grid_Prestashop.css

 

Put all the content

 

End of Grid_Prestashop.css ***********/

[celina1982]

Have you send mé a content of the grid _prestashop?:-/

[yaniv14]

@font-face {

font-family:'LeagueGothicRegular';

src: url('../font/league_gothic-webfont.eot');

src: url('../font/league_gothic-webfont.eot?#iefix') format('eot'),

url('../font/league_gothic-webfont.woff') format('woff'),

url('../font/league_gothic-webfont.ttf') format('truetype'),

url('../font/league_gothic-webfont.svg#') format('svg');

font-weight: normal;

font-style: normal;

}

 

a, #footer li, #featured-products_block_center .ajax_block_product .mask_home, #special_block_right .mask_home, input, .sf-menu li li:hover, #reset_cookie {

-webkit-transition: all 0.2s ease-in-out;

-moz-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

 

 

 

 

 

 

 

/* Containers

----------------------------------------------------------------------------------------------------*/

.container_9 {

margin:0 auto;

width: 960px;

}

 

 

/* Grid >> Global

----------------------------------------------------------------------------------------------------*/

.grid_1,

.grid_2,

.grid_3,

.grid_4,

.grid_5,

.grid_6,

.grid_7,

.grid_8,

.grid_9 {

display:inline;

float: left;

margin-right:20px;

padding-right:20px;

}

 

 

/* Grid >> Children (Alpha ~ First, Omega ~ Last)

----------------------------------------------------------------------------------------------------*/

.alpha {margin-left: 0;}

.omega {margin-right:0; padding:0;}

 

 

/* Grid >> 9 Columns

----------------------------------------------------------------------------------------------------*/

.container_9 .grid_1 {width:91px;}

.container_9 .grid_2 {width:282px;}

.container_9 .grid_3 {width:313px;}

.container_9 .grid_4 {width:424px;}

.container_9 .grid_5 {width:580px !important;}

.container_9 .grid_6 {width:646px;}

.container_9 .grid_7 {width:757px;}

.container_9 .grid_8 {width:868px;}

.container_9 .grid_9 {width:902px;}

 

 

/* Prefix Extra Space >> 9 Columns

----------------------------------------------------------------------------------------------------*/

.container_9 .prefix_1 {padding-left:111px;}

.container_9 .prefix_2 {padding-left:222px;}

.container_9 .prefix_3 {padding-left:333px;}

.container_9 .prefix_4 {padding-left:444px;}

.container_9 .prefix_5 {padding-left:555px;}

.container_9 .prefix_6 {padding-left:666px;}

.container_9 .prefix_7 {padding-left:777px;}

.container_9 .prefix_8 {padding-left:888px;}

 

 

/* Suffix Extra Space >> 9 Columns

----------------------------------------------------------------------------------------------------*/

.container_9 .suffix_1 {padding-right:111px;}

.container_9 .suffix_2 {padding-right:222px;}

.container_9 .suffix_3 {padding-right:333px;}

.container_9 .suffix_4 {padding-right:444px;}

.container_9 .suffix_5 {padding-right:555px;}

.container_9 .suffix_6 {padding-right:666px;}

.container_9 .suffix_7 {padding-right:777px;}

.container_9 .suffix_8 {padding-right:888px;}

 

 

/* Push Space >> 9 Columns

----------------------------------------------------------------------------------------------------*/

.container_9 .push_1 {left:111px;}

.container_9 .push_2 {left:222px;}

.container_9 .push_3 {left:333px;}

.container_9 .push_4 {left:444px;}

.container_9 .push_5 {left:555px;}

.container_9 .push_6 {left:666px;}

.container_9 .push_7 {left:777px;}

.container_9 .push_8 {left:888px;}

 

 

/* Pull Space >> 9 Columns

----------------------------------------------------------------------------------------------------*/

.container_9 .pull_1 {left:-111px;}

.container_9 .pull_2 {left:-222px;}

.container_9 .pull_3 {left:-333px;}

.container_9 .pull_4 {left:-444px;}

.container_9 .pull_5 {left:-555px;}

.container_9 .pull_6 {left:-666px;}

.container_9 .pull_7 {left:-777px;}

.container_9 .pull_8 {left:-888px;}

 

 

/* Clear Floated Elements

----------------------------------------------------------------------------------------------------*/

 

/* http://sonspring.com/journal/clearing-floats */

.clear {

clear: both;

}

 

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack

 

.clearfix:after {

clear: both;

content: ' ';

display: block;

font-size: 0;

line-height: 0;

visibility: hidden;

width: 0;

height: 0;

}

 

.clearfix { display: inline-block;

}

 

* html .clearfix {

height: 1%;

}

 

.clearfix {

display: block;

}

*/

.tweet li .tweet_text a {display:inline !important;}

#footer #social_block,

#footer #block_contact_infos,

#footer #twitter_block_left {

float:left !important;

clear:none !important;

}

#footer .block {

width:185px;

margin:0 72px 0 0;

float:left;

}

#footer li a:hover {background-position: 3px center}

#footer_content {padding-bottom:140px !important;}

#product_comments_block_extra a {background:none !important;}

#pb-left-column {

margin-left: 21px !important;

width: 293px !important;

}

.star {

width:15px !important;

height:15px !important;

}

.comments_note span {line-height: 24px; padding-right:10px;}

#short_description_content, #short_description_content p {line-height: 16px}

#quantity_wanted_p input {padding:4px;}

.ac_results {width:180px;}

#pb-left-column #buy_block {margin:0 !important;}

.breadcrumb img {top: 6px !important;}

[yaniv14]

add also this to your global.css

 

#footer .facebook_block {

margin:0 !important;

}

[celina1982]

well it looks better now :-) thank you but the font of the categories on the top menu etc is too big.

 

what was the reason to all this mess? i will never try customize again !!

[yaniv14]

try "themes/albedo/css/modules/blocktopmenu/css/superfish-modified.css" change:

line 75: margin-right: 18px;

line 79: font-size: 22px;

[celina1982]

Thank you for your help :0 you made my my Day:-)