Magento Color Palate for custom attribute

If you want to do the same as below with simple products, I made a simple piece of code to make it work easily and smoothly with jQuery. This is particularly useful on small projects where products don’t need to be an individual product. Inmy use case there weren’t any other product like this one and SKU wasn’t used.

Steps

1. Edit your product, go to Custom options tab and add a New Option Drop-down: http://grab.by/6qZU

Add as many color as you want and the SKU is consider as a color HEX.

1. Place at the end of your file the code below in:

app/design/frontend/default/default/template/catalog/product/view/options/type/select.phtml

1. <?php if($_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_DROP_DOWN):?>
2. <dt><label>Select your color</label></dt>
3. <ul>
4. <?php foreach ($_option->getValues() as $_value) { ?>
5. <li class="colorpick <?php echo str_replace(" ","_",$_value->getid()) ?>" style="background-color:#<?php echo $_value->getSku(); ?>;">&nbsp;</li>
6. <?php } ?>
7. </ul>
8. <script src="http://code.jquery.com/jquery-latest.min.js"></script>
9. <script type="text/javascript">
10. $(document).ready(function(){
11.     $(".colorpick").click(function() {
12.         var id = this.className.split(' ')[1];
13.         $("select[name='options[<?php echo $_option->getid() ?>]']").val(id);
14.         if($(".colorpick").hasClass('highlight')) {
15.             $(".colorpick").removeClass('highlight');
16.         }
17.         $(this).addClass('highlight');
18.     });
19.     $("select[name='options[<?php echo $_option->getid() ?>]']").change(function() {
20.         var selected_option = $("select[name='options[<?php echo $_option->getid() ?>]']").val();       
21.         if($(".colorpick").hasClass('highlight')) {
22.             $(".colorpick").removeClass('highlight');
23.         }
24.         $("."+selected_option).addClass('highlight');
25.     });
26. });
27. </script>
28. <?php endif; ?>

1. add a some CSS to stylish your color boxes:

1. .highlight { border: 2px solid #000; }
2. .colorpick { cursor:pointer; width:20px; height:20px; float:left; margin:1px; display:inline; vertical-al

How to change the welcome message

 

In order to change the default Magento welcome message you should: 

1. Enter the Magento admin panel. To do this, please type "admin" after your domain name in the browser address bar 
2. Click the "System" tab 
3. Select the "Configuration" menu item. 
4. In the "General" section please click the "Design" button and open the "Header" tab 
5. Here you can see the field where the welcome message can be changed 
6. When you are done, click the "Save Config" button to save your changes.

How to change a font style in Magento

 

In case you need to edit fonts in the Magento store you should follow the steps below: 

1. All the modifications should be done in the "/skin/frontend/blank/themexxx/css/styles.css" file 

2. Download this file to your computer and open it with your HTML editor. The .CSS file is structured in a user-friendly way, so you can locate any style quite easily. As you can see, the file is divided into sections so you can see the  kind of the store style you are changing. 

3. Let's start from the page title. In the .CSS file we need to find the "Page Heading" section. Here are the lines where we can change the page title. 

4. When you are done, save the file and upload it to your server 

5. Refresh the page to see the changes 

You can change any other text in your Magento store the same way: 

    - The box titles can be changed in the "Sidebar" section. 
    - The product price style can be found in the "Product Prices" section. 
    - The product title style is in the "Block: Reviews" section.

How to change a category menu style

 

For changing the categories menu style you should follow the steps below: 

1. Download "skin/frontend/blank/themeXXX/css/styles.css" file to your computer and open it with your HTML editor 
2. Once you are in your HTML editor, you may want to scroll down through the document to find the menu styles or use the search tool (CTRL+F). You should look for the navigation section. 
3. In this section you can change the font style of the main menu buttons 
4. When you are done, save the file and upload it to your server 
5. That's it!

How to change the admin password in Magento

 

For changing the administrator password you should: 

1. Log in to your Magento admin panel 
2. Select the "System" tab 
3. click the "My Account" menu item 
4. Here you can see the fields where you can enter your admin password 

In case you are not able to log in to your Magento admin panel at all, the admin password can be changed in the database directly. 

1. Open your database with the "phpMyAdmin" tool or any other database management tool. And open the"admin_user" table 
2. Click the edit icon 
3. With that done, type your new password in the value field 
4. Note that in the function drop-down menu you should select "MD5" 
5. Save the changes

How to change the logo in Magento

 

In order to change the logo in the Magento store please use the following instruction: 

1. Open "skin/frontend/blank/themeXXX/images" folder. The actual name of the dummy "themeXXX" folder depends on your template. 
2. You can see the "logo.gif" file right here. As we decided to replace it with our logo, we should make sure that our logo image file is in .gif format and has the same name. 
3. You can use either an ftp manager or the ftp tools provided by your hosting provider to copy the image from your computer to the server. 
4. Upload your "logo.gif" file to the server so that it replaces the default one. 
5. In case the logo does not look good you can adjust it using the "style.css" file 
6. It is located in the "skin/frontend/themeXXX/css" folder 
7. Download the file to your computer and open it with your html editor. 
8. Now we need to find the line that controls the logo div. We can use the search tool. Hold down CTRL and press the F key to display it. 
9. You can change the image dimensions: the width and height values. 
10. Save the updated file and upload it to the server 
11. That’s it. The logo has been replaced.

How to add a page in Magento

In order to add a new content page to your Magento store you should follow the steps below: 

1. Log in to your Magento admin panel by typing "admin" after your domain name in the browser address bar 
2. Select the "CMS" tab 
3. Then click the "Manage Pages" menu item. Here you can see all the pages that are already used. 
4. Click the "Add New Page" button 
5. Type your new page title 
6. Enter the page URL identifier. Note: keep it in mind as you'll need it in order to create a link to the page. 
7. Enable the page using the "Status" drop-down menu 
8. Enter the page content. Note that it should be in html format. 
9. Once you are done with this page click the "Custom Design" tab. Here you can select the page layout. 
10. You can also apply a custom Magento theme to this particular page and specify the date when the theme is active. 
11. Using the "Meta Data" tab you can insert your page description and keywords. 
12. Click "Save Page" to save the changes. 
13. Now you can see our page in the list 
14. Let's add the link to the newly created page in the footer block. Select the "CMS->Static Blocks" menu item 
15. As you can see, we have only one static block in our template. It is entitled "Footer Links". Click it. 
16. Here you can see the page where you can edit the static block content. 
17. Copy the existing line of the html code with the link. It is the page URL identifier which you were supposed to memorize while adding  the new page. Let's change it. Our identifier for the new page is "new-page". Change the page title as well 
18. Click the "Save Block" button to save the changes 
19. That's it! Now you have a new page.

How to add a category in Magento

 

All the main categories are displayed on the front end as a horizontal menu. In order to add a new one you should follow the steps below: 

1. Enter the Magento admin panel. To do this, type "admin" after your domain name in the address bar 
2. Now click the "Catalog" button in the main menu and select "Manage Categories" 
3. Here you can see all the categories used in the store. As you can see, all the categories are stored in "Default Category". Select it. 
4. Now let's actually add a new category. Click "Add Subcategory". 
5. Enter the category name 
6. Specify if you want it to be active or inactive 
        a) The active category names are black in the list and they are visible at the front end. 
        b) The inactive category names are grey in the list and invisible. You can use inactive categories in case you don't want to offer some specific goods at the moment but you’ll need them later. 
7. Enter the category description 
8. Select and upload the category image. It will appear on the front end of each category between the category name and the content. 
9. Select "Yes" or "No" from the "Is Anchor" drop-down menu. Anchored categories will display all the products associated with all child categories in that category. 
10. Using the "Category Products" tab you can assign some products to the created category 
11. Open the "Custom Design" tab. Using this tab you can assign the store design to any specific category. 
12. When you’re finished configuring your new category click the "Save Category" button. 
13. The category has been saved. 

If you want to create a new subcategory you should select the category and click the "Add Subcategory" button. It will be displayed as a drop down menu for the selected category.