Results 1 to 9 of 9
  1. #1
    Join Date
    Jul 2008
    Posts
    10
    Plugin Contributions
    0

    Default Template cut and dice

    Hi All

    Perhaps this has been answered ad-nausium but perhaps i am searching like a fool. However here goes - if you can direct me to the explicit requirement covered in a post I will be MOST appreciative.

    Ok let me say i am quite comfortable editing CSS files and changing the look. A i am also adept at creating an image and then slicing and dicing into parts.

    HOWEVER with all that said is there a layout diagram of the different parts i.e. box headers, menu bar at the top and bottom etc etc and how they are named by default and where in the CSS files these "objects" or "areas" are related so that if i slice up a template image i ALREADY know how to change the header image for example BUT some boxes have a coloured title bar or an image(d) title bar etc etc etc.

    So basically once i know what colour scheme i want to go with and i have a primary image in PSD or whatever I want to be able to edit the CSS in the correct places to be able to add sliced pieces in the correct places so that the site will, eventually, have an image that "flows" from the header, over the boxes and body, onto the footer. - i hope that makes sense.

    Also, i see some sites have 3 columns but "side" columns are both on the left or right. I assume this is a layout setting?

    Thanks in advance.

    Sean

  2. #2
    Join Date
    Feb 2005
    Location
    Lansing, Michigan USA
    Posts
    20,024
    Plugin Contributions
    3

    Default Re: Template cut and dice

    Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

    Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

    Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

    (If you're using Firefox 4, you'll need to remap the keybord shortcut for the editor - FF has taken over Ctrl-Shift-E for something else.)

    Some prefer Firebug, which does much the same thing.

  3. #3
    Join Date
    Feb 2005
    Location
    Lansing, Michigan USA
    Posts
    20,024
    Plugin Contributions
    3

    Default Re: Template cut and dice

    To place both columns on one side, you need to move the elements in includes/templates/template_default/common/tpl_main_page.php and save it to your custom template folder.

  4. #4
    Join Date
    Jul 2008
    Posts
    10
    Plugin Contributions
    0

    Default Re: Template cut and dice

    Hey stevesh

    MANY Thanks for your feedback. When i get a gap later I will get that FF add-in because i primarily use FF anyway.

    That will be a blast if i can actually see changes effect what i do and i can then record these for an edit later.

    I'll let you know how it goes :)

  5. #5
    Join Date
    Dec 2005
    Posts
    1,059
    Plugin Contributions
    2

    Default Re: Template cut and dice

    [FONT=Arial]Country Kitty Crafts[/FONT][FONT=Arial]
    [/FONT] [FONT=Garamond]
    [/FONT]

  6. #6
    Join Date
    Jul 2008
    Posts
    10
    Plugin Contributions
    0

    Default Re: Template cut and dice

    This is awesome. Thanks shooters. This is so appreciated.

  7. #7
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Template cut and dice

    A note about "slicing and dicing"... If you are under the impression that you have to put all parts of the background design into the final element that is in that area, that is a holdover from antiquated table layout and usually not necessary. Any design element that does not belong to a dynamic element (one that may or may not be present on a page, or may move on the page) can be left as part of the overall background image. The larger image size is offset by fewer image files to load, and fewer tricky pixel tweaks to get elements to line up.

    Sidebox heading backgrounds obviously have to belong to their boxes, but most design elements that do not move can just be allowed to show through by making the backgrounds of the overlying elements transparent.

  8. #8
    Join Date
    Jul 2008
    Posts
    10
    Plugin Contributions
    0

    Default Re: Template cut and dice

    Hey Zenner

    Thanks for that. I was, earlier, trying to figure the best design where I could file the sidebox image because the sizing is not always fixed. I believe it gets better lol.

    Thanks again for all help!!

  9. #9
    Join Date
    Jul 2008
    Posts
    10
    Plugin Contributions
    0

    help question Re: Template cut and dice

    Sorry - not "Zenner" was reading my fanned title haha meant thanks gjh42

 

 

Similar Threads

  1. Multiple Special/Discounted Prices and cut-off dates
    By rarpsl in forum Setting Up Specials and SaleMaker
    Replies: 0
    Last Post: 27 Feb 2011, 04:30 AM
  2. cut and paste error - how do I clean up from MS Word?
    By marykaiser in forum General Questions
    Replies: 3
    Last Post: 15 Feb 2010, 03:03 PM
  3. Header Cut Off and Repeating
    By Ideasign in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 29 Jun 2007, 08:26 PM
  4. Trying to measure twice and cut once.
    By stevens157 in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 14 Dec 2006, 03:51 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR