0

Sorry for the lame title..

I bought a template off template montser and I am trying to change some text on the header. The text is stored as a png image. I opened the psd file in photoshop and changed the text to what I wanted. Put the layer in a new file and saved as PNG. In the psd, the text appears exactly as I want in relation to the website. When I use the png I saved, it is much smaller

Photoshop file: Screenshot of Photoshop file

Result (I know background color is off): Webpage

Template before tampering with it: Template

Anybody know whats going on or how to make this the correct size?

EDIT : I now know that CSS is limiting the size of my image. The problem is, I'm a nooob on CSS.

My index file is:

<div class="container_12">
    <div class="wrapper">
        <div class="grid_12">
            <h1 class="fleft"><a href="index.aspx"><img src="images/cbjlogo.png" alt=""></a></h1>

And the corresponding CSS:

.container_12{ position: relative; width: 960px; margin: 0 auto; padding: 0; }
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12
{ float: left; display: inline; margin-left: 10px; margin-right: 10px; }

.wrapper{overflow:hidden;position:relative;}

.container_12 .grid_12          { width: 940px; }

.fleft{float:left}

.header h1 a img{ max-width:100%; height:auto;}

I'm not exactly sure which of these is causing the size constraints..can anyone help? I believe it has something to do with the container or grid

Improve this question

1 Answer 1

Reset to default
1

When you modified the image in photoshop, did you change the image size at all? A lot of the templates use a fixed size for the specific image they come with, if that image has been modified at all, it will appear smaller/larger, and possibly mess up some of the other elements on the page.

In other words, the image that came with the template should be the exact same dimensions as the new image that you have created.

Improve this answer
7
  • That worked. I need the image to be much wider than the original though. Do you know where they would normally put these size constraints, or how to change them?
    – CSharpDev
    Commented Jul 31, 2012 at 16:27
  • They would be in the default index file, and possibly the default css file. Look at the code in the index file, find where the image is tagged, and then see what it's size constraints are. You should be able to modify it there, if not, see what container the image is in (div/span etc) and what id that is, like logo or something. Then find that ID in the css file, and modify the image size there.
    – Ryan
    Commented Jul 31, 2012 at 16:30
  • Well, in the CSS< there is a max-width: 100% and height: auto which I think should mean any size would go there. Thats what i've been messing with and I cant figure it out
    – CSharpDev
    Commented Jul 31, 2012 at 16:33
  • Then I would say look at the index file itself, there should be an image tag: <img src="some-source" alt="something" width="100px" height="200px" />
    – Ryan
    Commented Jul 31, 2012 at 16:35
  • Please see my edit to the question
    – CSharpDev
    Commented Jul 31, 2012 at 16:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.