Skinning?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • USAPatriot
    Member
    • Jun 2005
    • 97

    Skinning?

    I definitely need to start slow here...so first...how do I get rid of the solid background color and replace it with an image? The first thing I discovered in changing the BG color is that the button edges all went to hell. An image, even if it's just the same color as my current BG but with texture, will break up the lousy button outlines until I get further along in the learning curve. Thx. -Rod-

    EDIT: 3.0.7
  • RagingPenguin
    Senior Member
    • Apr 2004
    • 896
    • 3.0.8

    #2
    I'm afriad there's no "easy" way to get into that. The buttons are just anti-aliased images. To fix that you're going to need a graphics program like Photoshop, or to a more limited extend Paint Shop Pro. Then either edit the ones provided in the GDK or make your own. To make a background an image:

    background: #xxxxxx url(path/to/image.ext) repeat top left;

    replace xxxxxx with your color hex code.

    Comment

    • USAPatriot
      Member
      • Jun 2005
      • 97

      #3
      So I'm adding a path right into the color field for the background in the Main CSS styling? Or do I need to be elsewhere?

      I'm not sure what you mean by "repeat top left;"

      I have Photoshop 7. -Rod-

      Comment

      • RagingPenguin
        Senior Member
        • Apr 2004
        • 896
        • 3.0.8

        #4
        Right. Look at the way the default skin handles the image background in the tcat or thead elements. Options are as follows for the background field:

        color, image-url, repeat-mode, position

        where

        color = standard hex code
        image-url = url(path/to/image.ext)
        repeat-mode = one of ( repeat | no-repeat | repeat-x | repeat-y )
        position = combination of one of ( top | center | bottom ) and one of ( left | center | right )

        For example, this would give a black page, with the image tiled once in the top middle only;

        background: #000000 url(images/misc/background.gif) no-repeat top center;

        Comment

        • USAPatriot
          Member
          • Jun 2005
          • 97

          #5
          K...that's definitely in the code itself and not in the Admin CSS menu system. You'll need to tell me where, I guess.

          Comment

          • RagingPenguin
            Senior Member
            • Apr 2004
            • 896
            • 3.0.8

            #6
            Click AdminCP -> Styles and Templates -> Style Manager -> Select 'Main CSS' from the dropdown next to the style you wish to edit. This is where you'll set these attributes.

            Comment

            • USAPatriot
              Member
              • Jun 2005
              • 97

              #7
              So it's going into the additional CSS attributes box I take it? Now it makes sense -Rod-

              Comment

              • RagingPenguin
                Senior Member
                • Apr 2004
                • 896
                • 3.0.8

                #8
                See the image below. Apply a value similar that highlighted in red to the BODY class.
                Attached Files

                Comment

                • USAPatriot
                  Member
                  • Jun 2005
                  • 97

                  #9
                  Gotcha. That's what I thought you were trying to tell me in the beginning.

                  Comment

                  widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                  Working...