One of the easiest ways to encourage customers to return to your site is by updating your homepage content regularly with fresh imagery and new products. But let’s say you want to be able to control where the new product list shows up on the homepage and how many items you display at a time. Through the admin panel, you can work with a frontend app to manage the new products list. Frontend apps are small programs that can dynamically place content and functionality on various pages or types of pages within your Magento Go store. Just watch this step-by-step tutorial to learn all about customizing your list now.
For more tips, check out our entire list of video tutorials under the support tab at magentocommerce.com/go.
Alyssa joined Magento in 2011 as an Online Marketing Manager. She became passionate about Magento when researching new platform solutions at her previous job. When Alyssa is not working, she enjoys playing tennis, dancing and enjoying the Southern California sunshine with family and friends.
Whether you’re an HTML pro or have never used it in your life, Magento Go makes it easy to have an attractive looking homepage in a matter of minutes. Watch our newest video tutorial now to see just how effortless it can be. With preview options and an easy to navigate WYSIWYG (what-you-see-is-what-you-get) editor, you can create a homepage that best showcases your brand quickly and confidently.
For more tips, check out our entire list of video tutorials under the support tab at go.magento.com.
Alyssa joined Magento in 2011 as an Online Marketing Manager. She became passionate about Magento when researching new platform solutions at her previous job. When Alyssa is not working, she enjoys playing tennis, dancing and enjoying the Southern California sunshine with family and friends.
Magento Go stores are driven by a powerful templating system that allows you to fully control the look and feel of your online store. To make it easy for you to make the changes you want, Magento Go provides a set of easy-to-use design editors that help you set up and customize much of your store right from the Admin Panel, without editing any code. But for sophisticated web designers, you can also add custom CSS and JavaScript files to control your store’s formatting directly to achieve exactly the look you want.
Our Design Guide provides an introduction to the methods available for you to customize the appearance of your Magento Go store.
Designing web pages can feel daunting if you’re not familiar with html, css and JavaScript but there are are number of changes that are easy to make. Luckily today’s most popular browsers provide web development tools to help make these changes easilly. These tools assist you tweaking and making changes directly in the browser’s window, allowing you to view your changes in real-time.
Today, we are going to walk through some simple CSS examples using Firefox and a popular extension called Firebug. Google Chrome and Microsoft Internet Explorer have similar capabilities found under their Developer Tools menus.
Firebug is a web development tool that integrates with Firefox putting a wealth of web development tools at your fingertips. It is a great tool for inspecting HTML, tweaking CSS, debugging JavaScript and more in real-time.
In the article, we’ll focus on tweaking CSS with Firebug.
There are several ways you can install Firebug. The easiest and quickest one is directly from addons.mozilla.org.
Fire-up your Firefox browser and navigate to addons.mozilla.org. Click [Add to Firefox] button to install this extension in your Firefox browser. When prompted to download the extension, click [Allow]. You might be prompted to restart your browser. Click the restart button.
CSS Overview
CSS stands for Castading Style Sheets. CSS styles basically define the placement and look of HTML elements. Using CSS saves a lot of work when working with HTML pages. To make a layout or style change on a site, all you have to do is edit the respective CSS file. It’s that simple.
CSS syntax has two main parts; a selector and declaration. Selectors can have multiple declarations which consist of properties and values. Similarly, you can apply declarations to multiple selectors.
Following image shows a breakdown of a CSS Syntax.
Selector - A selector is simply an HTML element that you want to style. Any HTML element is a possible CSS selector. There are two types of selectors: a Class and an ID. A Class selector is used to specify the style of a group of HTML elements. A Class selector is assigned by adding a period before the its name. (e.g. .myselector). An ID selector is similar to a Class selector with the exception that it is only used to specify the style of a single HTML element. It is best to use one ID selector per web page due to its inherent limitations. An ID selector is assigned by adding the “#” before its name. (e.g. #myselector).
Declaration - A declaration in a selector consists of a property and its value.
Property - Properties are assigned to a selector in order to manipulate its style. Examples of properties include color (color of a font), font (type of font), line-height (height of spacing between sentences in a text), etc.
Value - A declaration value assigns the changed required to its property. For example, the value of the color property could be black.
Inspecting HTML and CSS
It’s easy to inspect the underlying HTML or CSS elements of a web page. Understanding what CSS is controlling elements on the page makes it easy to make changes to the page appearance.
Navigate to your Magento Go store and load the page that you want to inspect. Click the Firebug icon in the lower right hand corner of your browser. You can also open Firebug by going to Tools > Firebug > Open Firebug.
The best option though is by pointing your mouse icon over an element on the page, right clicking with your mouse and selecting Inspect Element. This option will open the Firebug panel and highlight the HTML/CSS code for the element you selected as shown below.
Side Style Panel
Inside this tab you can view the CSS styles that are currently assigned to the selected elements. In order to edit a CSS tag or its properties, just click on the item once. The editing field will be enabled.
Let’s follow with few examples of how simple it is to edit CSS with Firebug and apply the changes to your Magento Go store.
Example 1: Changing Color of a Font
In this example, we’ll change the default color of the categories from gray to red for our store that is based on the Electronics default theme.
Hover your mouse over one of the categories and right-click your mouse. Select Inspect Element. The HTML entry will now be highlighted with related CSS selectors on right side of panel.
In order to change the color of these categories, we need to find the font color propery which is simply color for CSS. In this theme, the color property is in #nav a.level-top selector. If you mouse over the hex code in Firebug, you will see a preview of the color.
Click on the value of color property and change it to #FF0000 which is the red color in hex code. Changing the color in Firebug will update the CSS being used to display the page temporarily. This allows you to preview what the changes will look like. CSS generally uses hex color codes and there are many resources online to finding them. You can search under html color names, hex color code or similar terms.
If you are happy with your changes and would like to apply them to your theme, make a note of the entry and add it in your Custom.css field. For our example, we need to copy the following:
#nav a.level-top {
color: #FF0000;
}
The changes you add to the Custom.css will override the base CSS setting for the theme. For more information on apply your changes to your theme, follow the instructions in the following article: Customizing the Look and Feel of Your Theme Using the CSS Editor.
Example 2: Moving a Block
In this example, we will move one of the footer blocks to the right of another block.
Hover your mouse over one of the About Us link and right-click your mouse. Select Inspect Element. The HTML entry will now be highlighted with related CSS selectors on right side of panel.
In order to move this block to the right of the block that includes Site Map, Search Terms, etc. links, we first need to select the main Unordered list selector. Unordered list items are usually marked with bullet points, different types of points, or even with no points, unlike an Ordered list items, which are marked with numbers or letters. In our example, that would be <ul>. See attached image below.
The corresponding selector is part of the footer selector as shown above. The CSS code that sets this section therefore is .footer ul, .footer ul.links as seen on style panel on the right. We need to “float” the block to the “right” side of the Site Map section. Click on the value of float property and type left. Hit Enter on your keyboard. This section should now be on right side.
If you are happy with your changes and would like to apply them to your theme, make a note of the entry and add it in your Custom.css field. For our example, we need to copy the following:
With Firebug, you can also add new css properties. Continuing from our second example, let’s increase the line height between the links.
As before, hover your mouse over one of the About Us link and right-click your mouse. Select Inspect Element. The HTML entry will now be highlighted with related CSS selectors on right side of panel.
Select the last property in the .footer ul, .footer ul.links which is the margin in our example. Hit the Tab key on your keyword until a new line is created below this tag. Type line-height and hit the Tab key again to enter its value. Type 24px and hit Enter. The height of the links in these section should have increased. px is a measurement value. Each single px is a dot on your screen. Other popular measurement values used are percentage represented with “%” (e.g. 120%) or “em” (e.g. 2em) which is a representative of inherited value. For example, if the font size is 12px, therefor 2em is equivalent to 24px. As you look more into these and other elements, they start making more sense.
Since we are working with same selector as above, you only need to copy and add the new property.
line-height: 24px;
The final css change that needs to apply therefore is the following:
There are many other tweaks you can do with Firebug and apply the changes to your theme. Firebug’s capabilities are not limited to HTML and CSS as described above. You can read more about Firebug at the site’s official documentation page.
There are countless css tutorials on the internet, several stand out. Here are some recommendations for further reads.
Good luck and looking forward seeing beautifully designed Magento Go stores.
Mosses (aka monocat) has been using Magento CE since 2008. He joined the Magento family on 2010. He loves to play with latest Web tech tools. When he’s not thinking “Magento”, he’s enjoying his family, reading, attending Tech events and blogging.
