Questions about Foundation theme

[Karen Sheeran]

Hi,
I have a couple of questions related to the foundation theme:
1. What size should the images for the home page slider be?
2. Is the slider on the home page editable as regarding timing, fading, etc?
3. How can I make the header larger to accommodate a wider logo?
4. Where can I change the fonts and sizes colors of the widget sidebar titles.

That’s it.

Your help would be greatly appreciated.

Karen

[Bill Robbins]

Karen,

Let me see if I can answer your questions.

1) The home page slider images are 630 pixels wide by 420 pixels tall.

---

2) You can make changes to the home page slider.

1. You’ll need to install a plugin called the Solid Code Theme Editor so you can edit the necessary file.
2. Once you have the plugin installed and activated, go to to the Appearance section and select “S C Theme Editor.”
3. In the right hand column, click the + sign by JS
4. Select custom.js from the list of files on the right
5. Look for this spot:

   
   	jQuery(document).ready(function($j) {
   		$j("#rotator .fancy.gallery, #slider").cycle({ 
   		    fx: 'fade',
   	   		timeout: 4000,
   		    speed: 1000,
   		    pause: 1,
   		    fit: 1
   		});
   	});
   

6. The 4000 sets the duration of each slide in milliseconds. The 1000 sets the transition duration also in milliseconds.
7. Change the values and then save your changes.
8. Test the site and see if you have the desired result. Change again if necessary.

---

3) You can have a logo up to 960 pixels wide if you don’t mind hiding the tagline. To do that, go to the Theme Options page and select the styling tab. Scroll down to the very bottom until you see a box for Custom CSS. Paste this into that box:

#tagline { display: none; }

Then update your changes. That will give you more width for your logo. If you need more height, you can change that too. Paste this into the same Custom CSS box:

#header { height: 180px; }

You can adjust the height in pixels to get the right fit for your logo.

---

4) Widget Titles: You change those. Let’s use the Custom CSS box again. Paste this into the box:

h4.widgettitle {
	color: #fff;
	background-color: #474747;
	font-size: 18px;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}

Here “color” refers to the actual color of the text and the background-color is the color of the box behind it. You can use the color selectors on the styling tab of the theme options page to find just the right color and then paste it into the code above.

The font-size: 18px sets the size of the font to be 18 pixels. The font-family line sets the order that the browser will look for fonts. If you’re new to web fonts, I’d really suggest a plugin called Fontific which uses Google’s web fonts.

Once your finished be sure to update your settings.

---

If you have any other questions, please feel free to ask.

Enjoy your weekend,
Bill Robbins

[Brian Davis]

Hi, I am trying to add the buttons to the home page like the home, features, staff, ect in the demo, can not figure out how to add. also hot to add text on the right side of home page.

Thank you,

[Bill Robbins]

Brian,

Good question. You can add your navigation items by going to the Appearance section and selecting “Menu.” There you can create your navigation menu with pages, categories and so on. There is a quick screencast in our video section that walks through setting those up.

The content on the right hand side of the home page is set up with widgets. You can work with them by going to the Appearance section and selecting “Widgets” this time. They work by drag and drop. Drag the widget (think small content block) into the widget area where you’d like it to appear. Most widgets then have a small set of options that you can choose from to tailor the content to your needs.

I hope that helps. If you have any other questions, let me know.

Bill

[Author]

Posts