Show us your sites!

[cursor]

Whoa ... Pixelart. I know exactly what the problem is, and it can be corrected ... and substantially simplified. Let me explain in my next post.

[esanabri]

My son baseball season finished today and a parent of one of the players took amazing set of pics of all the kids!

I had to do something to showcase them so I did this in 20 min! love Xara!!!

http://esanabri.com/rangers9u/

Ernesto

[cursor]

Pixelart. Again, very nice StudioLXVI design.

However, there are a number of issues with your website that I'll mention.

First, the functional navigation is being constructed incorrectly.

• An examination of your four main menu items, 1) Design Portfolio, 2) In The Studio, 3) Our Favorite People, and 4) Contact & Rate Info, shows that there is base text on the MouseOff layer that is stimulating MouseOver on mouse-over. AND, the companion text on the MouseOver layer is ALSO attempting to popup ... itself.
  By the way, you have a redundant set of red text (four items) on the MouseOver layer (one set directly overlaps the other).
• Your numbered profile buttons have been constructed similarly, but uniquely wrong. Let me explain, using your button [1] as an example.
  • Your static/white group is on layer portpg1off, and on mouse-over, it calls MouseOver as a popup layer. It also sports a link to a web page called portpg1.
  • Your rollover/red group is on layer portpg1over, and does nothing on mouse-over.
  • Instead, a functional (and substantially simpler) solution would involve,
    • Place all of your static/white groups on the MouseOff layer. Assign a unique page-link (using the Link tab, at Web Properties) to each. On the Mouse-over tab, do NOT reference any popup layer.
    • Place all of your rollover/red groups on the MouseOver layer. No link assignment is needed.
    • Building your navigation after this fashion will eliminated most of your 43 layers. (And, it will function properly.)

Second, unless you really want to, there is no reason (that I can see) why all of the elements common to all pages cannot be placed on the bottom/MouseOff layer (which, by the way, should be dragged to the bottom of your layers in the Layer Gallery ... as should the MouseOver layer). This would include all elements on the following layers:

• content outlines
• Copyright info
• Header
• bullet spacers

It would simplify things a bit.

Similar layer grouping can be done with each set (per page) of the following layers:

• portpg text
• red bullets
• website image
• Design Port Pg text

Just put them all on the same layer, perhaps called UniquePageContent, for example.

[Pixelart]

Cursor, thank you, thank you, thank you!! I knew this seemed more involved than it should be, but didn't know what to do, as right out of the gate things started not working the way the tutorial said they should. And yes, the number of layers were driving me nuts, but thought that's the way it had to be.

I am printing out your instructions and will be spending whatever time it takes to get this and reconfiguring my web file. I sincerely appreciate the time you spent to figure this out for me. Thanks for the compliment on the site design. I'm a little left of center, and wanted to show you can have a little fun but still do good work. (I hope the good work is conveyed anyway.)

Again, thank you and will hopefully learn a lot more here in the next bit.


Pixelart

[pauland]

My son baseball season finished today and a parent of one of the players took amazing set of pics of all the kids!

I had to do something to showcase them so I did this in 20 min! love Xara!!!

http://esanabri.com/rangers9u/

Ernesto

Great pictures, great mini website!

Nice to see that "rounders" is popular in America.. ;-)

[cursor]

I've got something for you, Pixelart, that should give you a great headstart. I'll polish it up and have it posted within the next half hour. (It's a fully functional mini-StudioLXVI .web file ... with some neat design ideas that I'm sure you'll want to implement.)

[cursor]

I created the attached portfolio treatment from scratch, copying your design elements, then pasting them "in place" (addressing my layer structure) on my new document. Note that this seemed necessary since I never could get your navigation system working, even when stripped down to bare bones. There seems to be something about the evolution of design that has poisoned the water.

Also note that for each element had to do a copy/paste-in-place ... that is, I could not grab multiple items across various (of your) layers, then paste in place into the new document. The reason why is that doing so would bring the layer structure with it ... and the rollover navigation effects would then cease to work. I'm suggesting that you may want to start from scratch, and do as I did (with what constitutes four of your pages, all combined into one ... using popup layers).

I'll attach the .web file to this post, then follow up with a full explanation of the structure and technique.

[cursor]

I have say, that was a fun little project and a great learning experience!

Now, here's what I did:

• Set up the layer structure:
  • One base/static layer for all constant layout elements, including 1) masthead graphic, 2) thin lined border, and 3) copyright text. Now, by simply locking this layer, none of your base layout elements will be accidently selected/moved/deleted.
  • MouseOff :: Holds all your static/white navigation items. This layer also houses the main body of text that is initially displayed when a user arrives at your portfolio web page.
  • MouseOver :: Holds all your rollover/red navigation items.
  • Portfolio popup layers :: Each popup layer serves to hold all elements pertinent to a particular profiled website design. This includes the porfolio text, thumbnail/collage, website link, red bullets, colored porfolio text & overlay [numbered] button. Should you choose to adopt this technique, you'll need to create another popup layer for each of your other portfolios (I only addressed 1 through 3).
• Imported your design elements (one by one) into the new .web file, making some position adjustments to ensure integer pixel alignments.
• I recreated your numbered buttons, making them whole pixels in size and then aligned them to whole pixel positions. The text elements, by the way, are center aligned, then centered on the rounded corner rectangles. This makes it easy to change a number from 7 to 17, for example, and still have correct positioning.
• I soft-grouped your numeric button elements (MouseOff and MouseOver groups). Doing so makes it easy to edit the text, and have it automatically modify the text string value on the complementary layer.
  By the way, the best way to create buttons, is to create all elements for one button first, ensuring that you have proper function, then duplicate as required. So ...
  
  • Create the MouseOff graphic.
  • Add a center-justified text string
  • Center these two elements based on selection bounds.
  • Group them (Ctrl+G)
  • Clone the group (Ctrl+K)
  • Click the MouseOver entry in the Layer Gallery, then mouse-click the Move button (at the top of the Layer Gallery),
  • Modify the MouseOver group's elements for the desired rollover effect. Hint: Use Ctrl+click to access internal group elements, without having to ungroup.
  • If you want a distinctly decorated number button to indicate the current portfolio ID, then create another clone, and Move it to the proper Portfolio## popup layer.
  • Soft-group the MouseOff and MouseOver groups.
  • Temporarily define a target (necessary to test your initial button function) » Web Properties > Link (tab) > Web address [ # ]. Be sure to click the Apply button.
  • Preview the page and verify the button's rollover function function.
  • Duplicate the proven button as many times as you need, and position as desired.
  • Marquee a box about all buttons, And set Web Properties > Link (tab) [b] to the top option, "Do nothing". Click the apply button. This will group erase the temporary link that was used for testing the button's rollover function.
  • One by one, click select each button (you'll see "2 groups (Soft Group) on 2 layers" on the status bar). Define a new link to connect with the appropriate popup layer, Web Properties > Link (tab) > Popup layer [ PortfolioXX ]. Click the Apply button.
  • Edit each button's text. Remember that if your button elements are properly soft-grouped, then changing the text on one layer, other text elements will change as well.
• I added background rectangles to your four main links (same black fill color as your background), 1) Design Portfolio, 2) In The Studio, 3) Our Favorite People, and 4) Contact & Rate Info. The rectangles were then grouped with their respective text elements. I did this on both the MouseOff and the MouseOver layers. The pair of groups that define each button were soft-grouped, and a link was added. In this case, since I didn't have all the pages made, I simply added a temporary link, so that the buttons would show their rollover affect.

Using the idea of multiple, overlaying popups reduces the number of pages (cutting maintenance and potential errors), and makes for fast and snappy page loads. When at the Portfolio, for example, the StaticLayout and navigation buttons don't reload with each user menu choice.

Buena suerte.

[slavelle]

Cursor - I can only imagine that documenting that took as long as creating it did!

I looked and saw one thing missing, and that is a black box object at the back of each of the portfolio layers - the text from the mouseoff layer is showing through.

[Pixelart]

Cursor - WOW! You really are amazing! I just came up for air, and have completely redone everything, per your first set of instructions. Am attaching the web file for you to see. Everything is working GREAT NOW! Thanks a bizillion! I just saw your last post, and will go thru that one also. Initially a little confused, but maybe with fresh eyeballs tomorrow will be more clear. I "think" I have everything working fine, based on your first instructions, tested it in IE7 and Firefox and everything appeared to be great. Condensing the layers made a HUGE difference for me. The only issue I had is I cannot put the MouseOff and MouseOver layers at the bottom of all the layers, the links will not work. And I read at some point in the past, in a Xara help that those layers had to be at the top. I had to leave them at the top, will not work for me at the bottom of all the other layers.

I'm kind of crispy fried right now, but will look at your last post tomorrow. Again, thank you for taking so much of your time to help a new person, I am learning so much through your help.

Pixelart (Jeanne)