WordPress.org

Ready to get started?Download WordPress

Forums

Is there a map of the WP sections or themes? (9 posts)

  1. ckronengold
    Member
    Posted 9 years ago #

    I'm realizing that I'm more of a newbie than I had thought when it comes to the layouts in WP, themes, CSS, etc.

    Is there a map somewhere that shows which parts of the page each of the theme files edits?

  2. dkuehne
    Member
    Posted 9 years ago #

    I presume you want to edit certain sections of a design or theme?

    If you are familiar with basic web design terms, this is easy. A page is basically broken down into major sections, e.g., header, footer, content. The content area can be further broken down into more columns like a navigation or side bar and the main content. Doing this makes it easier to edit a header, footer or navigation that is global to the whole site--thus a change to one include (like the footer), changes the footer on every page of the site. Just sketch out your major sections and decide what you want. Every design will differ, so a "map" or "sketch" will be unique to that design.

    This top-down view of design is not unique to WP or themes. This is just good design, especially when using includes and CSS. With CSS, the designer has the power to "target" certain areas with contextual selectors and therefore doesn't have to write a class for every Tom, Dick and Harry (no offense to those in this class). Just target the unique id of the "navigation" div or table and those style declarations will "hit" only that area.

    Read some good books on CSS from Eric Meyer or Jeffrey Zeldman and perhaps a good web design book (hand coding not WYSIWYG). Hope this helps.

  3. "Is there a map somewhere that shows which parts of the page each of the theme files edits?"

    Yes, http://codex.wordpress.org/Using_Themes#Theme_Files

    Other theme resources: http://codex.wordpress.org/Blog_Design_and_Layout

  4. ckronengold
    Member
    Posted 9 years ago #

    Correct, but there's lots of references to each section in the theme editor.

    For instance, if I want to put an image in the header instead of using the kubrick template, I know I need to replace the background-color = with a background-image = url(Imagelocation/image.gif)

    But i'm not sure in which template to make the edit. Do I do it in the index.php page? or in the Style sheet editor in the Admin? I've tried a bunch, and I can't get it to change.

    At first, i thought I was adding the image to the section of the CSS that just dealt with the colors and text, so I made the changes down in the 'structure' section of the style sheet, but it still didn't do anything.

    Or do I do everything having to do with the header in the actual Header theme editor?

    I'm just confused as to where to make the edits.

  5. ckronengold
    Member
    Posted 9 years ago #

    some silly mistakes. first, it wouldn't accept the path I was assigning to the image. not sure why, since it was still in a subfolder of the wordpress folder, just not in the content/themes folder.

    and it seemed to not like the .gif file I uploaded. Can WP not handle gifs???

  6. Was the gif uploaded as binary? Also, use absolute paths for the images, do not use relative paths.

  7. ckronengold
    Member
    Posted 9 years ago #

    still not 100% sure what I did wrong, but images are working fine. they weren't the cause of my alignment problem.

    no matter what template i choose, my sidebar is still wreaking havok with my main content. they can't seem to sit side-by-side.

    any help is most appreciated, but i'm exhaused at this point and going to call it quits for the night.

  8. dkuehne
    Member
    Posted 9 years ago #

    I think we'd have to have a look at your markup/css to determine what is going on. But you say it happens on all themes or all templates for Kubrick?

    The Kubrick author put all CSS image references in the "header.php" file (presumably for backward compatiblity). I'd just move them into the CSS file if you're using 1.5. If you tried to reference the #header id (placing a background) in the CSS file, you'd just be overidden by the inline style in the header.php. If you want to change these in photoshop, the author has the psd file available for download but it includes the old Kubrick templates. Not sure if the photoshop file is exactly the same.

  9. Could we get a screenshot of what's happening?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.