The Basics

Replies to This Discussion

Permalink Reply by Catman on September 15, 2008 at 11:14am

For beginners, the best way to get started is to look for the "Themes" link under your profile photo.

Click that, and a page of theme templates will be displayed. I recommend trying out a few different ones first by making a selection, then Apply Theme, the Save. Go back to your profile page and see how it looks.

Every theme they offer has a different basic layout, and will effect what header and body background will work best. On some, the Tabs for navigating will be square tabs along the top of the page, under the top header. Others are in the same spot, but will be text links only.
A couple of the themes show the Nav Tabs as text links to the far right.

Find a theme you like by the layout it shows, then go to work from there, using the Theme Settings under the templates.

If you are unsure of results, or encounter a problem, come back here and post a question.
If you have become aware of how that works, help new folks get the results they want.

Messing with profile page designs is a lot of the fun here, but only once the tools are figured out :)

Permalink Reply by Catman on September 16, 2008 at 7:58am

Top Header Backgrounds

When you get your choice of template set, then you can change the Top Header background and Page Body background uploaded.

All templates work best if the Header is 955 pixels wide. The pages are designed with a view resolution of 1024 x 768. So, 955 fills out the width of the page table perfect.

The height of the header is dependent on the template you use. Most are 125 height, so thats a good place to start. So, 955 x 125 is a good basic header graphic size. If you make it that size, choose No Tile.
Pick a Network Name color that has good contrast to your Header. If the Header is dark, choose a light color font, and vice versa.

Permalink Reply by Catman on September 17, 2008 at 11:02am

I made a web page of some graphics when the community first got started.

http://www.tigerman.us/wildlife/graphics/

There are matched sets there, all in a wildlife theme. Note the top headers are 955 x 125, and the body backgrounds are small squares. A few people have asked why the small squares are so washed out looking. Or, the eagle one is soo dark.

Simple, the small squares when set to Tile, will fill the entire body background and be very light. This lets the user select a dark colored text that will show up nicely and be easy to read. If I had made the tiling squares be normal colors, there woul be almost no color of text that would be legible.

Dark text would be lost in the dark color areas, or if light text is chosen would be lost in the lighter areas. So, the entire square is set very light, to use dark text. The Top Header is only a bit extra light (or extra dark for the eagle set) because there is only the community title that will show.

Looking at the eagle set, the tiling squares are extra darkened, so as you can guess, a light colored text will look good on it.

Remember, when making body backgrounds, the idea is not to present a photo for people to view, but only to create an artful background while allowing the viewer to still be able to easily read the text that's on it.

If you would like to make some sets for people to use (a Top Header background, and a Body background) feel free to do so and I will post them on a web page for people to grab.

Make sure the graphic file sizes aren't enormous, or it will bog down the user's page on load-in

Permalink Reply by Catman on September 17, 2008 at 11:43am

The screenshot below was taken from my own Profile, and shows the selection of Ning Themes. I got there by clicking the Themes link under my Profile Photo on my Profile Page.

The best way to get started, is to try out different Themes, because they are laid out in different styles. The way the Tabs are set, the way the Site Title is displayed, etc. These different layouts will effect how your profile page will look if no changes are made. They will also effect the page design if you go further and use Theme Settings to customize your page. Select a Theme by clicking, then Apply, then scroll down to click Save. You can then go back to your profile page and view it, decide what you think.

Permalink Reply by Catman on September 17, 2008 at 12:17pm

Below are the Theme Settings. These settings are used to customize your page. You don't have to choose a different Theme to get started with these Theme Settings. You can go right from our Network Default page and start making changes. 1. This Tab displays what you see in the screen shot here. 2. This sets the font style of the Header Title at the top of the page and tab fonts. 3. This sets the font style of all of the text that will appear on your page. 4. This sets the color of the text in the Header Network Name and such. If you have created a dark colored header, use a light colored text, and vice versa. 5. This sets the header color. If you want a blank top header (bleh) just set any color, and the Uploader to None. Most will prefer to have a graphic in this space. Use the Upload Tool to add your design to the Top Header. Again, 955 pixels wide is a perfect fit. 125 high fits most Themes (and for sure the default theme). If you pick a Theme that has a different height, you will want to make your Header Graphic that height. Then set to No Tile. It will lay in perfect. On my page, I created a Header that matches my Body Background and added my nickname and a couple other graphics. 6. This sets it to Tile or not. If you have created a proper top Header graphic, set to Don't Repeat Image. If you have a graphic you want to repeat across it, set to Repeat Horizontally to fill out the 955 pixel space. 7. This is where you choose a color for the top space and bottom space of your profile page. Make it match your color scheme, but contrast with the text color you have chosen. 8. This is another color picker, plus an Uploader. You can choose to make a solid color (and choose None in the Uploader), or upload some graphics. It wont show much, because the spaces on the sides are narrow. If you choose to use a solid color, it looks best to use the same color chosen in #7. On my page, I added my tigers square, and set to Tile. 9. Thats to select to Tile or not, for a graphic, if you used one in step 8. 10. This is a BIGGY. This chooses the text color for all text on your page. Make sure it contrasts with the background image or color you choose. Dark Background, Light Text. Light Backgound, Dark text. If you have used a background with lots of both dark and light, a text color will be very hard to find that will show nicely on all page areas. 11. This chooses the color of the hyper-links (links to other pages) and can be the same color as text, but works better if "slightly" different, to make your links obvious. 12. This chooses the text color on the Sub-Headers. Those are the divider bars that split up the different sections of your page. If you use a color for the Subheader backgrounds, make sure you pick a contrasting text color for them to show nicely. If you choose to make the subheader background (bar) invisible, make certain the subheader text contrasts with the body background. 13. Subheader Background. The divider bars mentioned above. Make them a solid color, or invisible to allow the Body Back ground to show through. As you see in the screenshot, I chose to use Invisible. 14. Body Background. Much has already been mentioned about this. Use the Uploader, or make it a solid color. Use squares to Tile over the entire page, or use a single pic 955 pixels wide (try to keep the file size under 100k so you won't make your page lag badly). If you choose to use a single photo, make sure it's consistently dark, or light (or have your text in a solid table, some themes do that). You can choose to let it show once, then have a solid color below, or make it repeat vertically (up and down). That function is right below the Uploader. Continued to Next Post (it doesn't allow for a post this big)

Permalink Reply by Catman on September 17, 2008 at 12:31pm

Continued from previous post,,,,

15. Save! If you don't save and change to another page, all of you selections will be lost. :(
Save when you are ready to go look at your page!!!

16. Advanced Tab.
If you are proficient in CSS coding, have at it here. If you have gone to a site that offers Pre-made Themes, this is the place you will paste the code they offer. Since they created the Theme, you won't need to know code, they have done it all for you.

As a side note..
If you are making changes in Settings, and your Save isn't showing them right, go to Advanced Tab and delete all the code there. You are getting a code conflict from the Advanced, and it's over-riding your theme selections.

Permalink Reply by Catman on December 30, 2008 at 9:22am

This is the place to start, for people just starting out!

Permalink Reply by paulinel on August 16, 2009 at 12:54am

when I find the right background I will try again thanks for this group lol

Catman said:

This is the place to start, for people just starting out!

Permalink Reply by Catman on August 22, 2009 at 9:00pm

Google - web page backgrounds
:)

paulinel said:

when I find the right background I will try again thanks for this group lol

Catman said:

This is the place to start, for people just starting out!

Permalink Reply by paulinel on August 28, 2009 at 5:54am

I am just starting out no clue what to do

Catman said:

Google - web page backgrounds
:)

paulinel said:

when I find the right background I will try again thanks for this group lol

Catman said:

This is the place to start, for people just starting out!

Permalink Reply by Catman on September 9, 2009 at 10:13am

http://www.backgroundcity.com/

Look at Themes..

Choose a theme, then pick a link of that theme. Click anywhere there isn't text, right click Save Background

Permalink Reply by mike on November 16, 2009 at 7:23am

thank you much Catman,I get confused easy..lol Hopefully these tips will help me,they are very helpful :)

• ‹ Previous
• 1
• 2
• Next ›
• Page