Want to change the look of some buttons

[Steffen]

Hello,

I want to change the look of the buttons in the commentform and under the searchfield. I like to have a flat look and other colours. Where can I do this?



And I want align the fields in the commentform. (red line)



I dont find anything about this in the styles.css. Must I define an new class to do this?

Many greetings

Steffen

[judebert]

While CSS may be able to do this, you probably want to make changes to the HTML structure. Check out your commentform.tpl. It's got HTML and Smarty commands. The Smarty is mostly self-explanatory, and can be copied in chunks wherever you want it to go.

[Don Chambers]

Depending on the template you are using, you might be able to do this exclusively with css. The buttons are inputs..... ideally, they will have their own class so you can apply background properties that will only apply to the buttons, and no other forms of input (like a text field). Same goes for the comment form - if the descriptive text before the field, plus the field itself, have a class that can be styled, aligning them and setting their width will be no big deal. Can you provide a URL to your site, plus a URL to the site using buttons you like?

[Steffen]

The template I currently modify is the Nightwatch-Theme.
I only want to do some slight changes. And one of them is the commentform.

For the Buttons on the commentform, currently i have no images. They should look like the buttons on the copyblogger theme for word..... aeh.... I forgot the name.....


Many greetings

Steffen

[Don Chambers]

Fortunately, that template has a commentform.tpl file. The button is relatively easy. On line 37 of that file is this:

Code: Select all

 <input type="submit" name="serendipity[submit]" value="{$CONST.SUBMIT_COMMENT}" /> <input type="submit" name="serendipity[preview]" value="{$CONST.PREVIEW}" />

We need to give those buttons a class, so lets call that class "comment_button" (or whatever you like). So, line 37 would be edited to look like this:

Code: Select all

<input class="comment_button" type="submit" name="serendipity[submit]" value="{$CONST.SUBMIT_COMMENT}" /> <input class="comment_button" type="submit" name="serendipity[preview]" value="{$CONST.PREVIEW}" />

Now that we have the class, we can give it some style that is approximately the same as what you provided as an example. In the file style.css, we need to add some code, which I placed right after line #144 for input and text area styles:

Code: Select all

input.comment_button {
    background:#efefef;
    border: .2em double #CCCCCC;
    cursor:pointer;
    font-size:1em;
    font-weight:bold;
    line-height:1em;
    padding:0.5em;
}

I didn't use a background image like your example, but I could have... anyway, that should get you close to the appearance you wanted for the button.

Now, for the rest of the form.... to get better alignment, I need to change the html structure. There is more than one way to do this, but I tried what I am about to show you, and it worked OK in firefox. I did not try it in any other browsers though, and it might need tweaking.

The code we will change is lines 5-13:

Code: Select all

<p><label for="serendipity_commentform_name">{$CONST.NAME}  </label><input type="text" id="serendipity_commentform_name" name="serendipity[name]" value="{$commentform_name}" size="30" /></p>
          
          <p><label for="serendipity_commentform_email">{$CONST.EMAIL}  </label><input type="text" id="serendipity_commentform_email" name="serendipity[email]" value="{$commentform_email}" /></p>
          
          <p><label for="serendipity_commentform_url">{$CONST.HOMEPAGE}   </label><input type="text" id="serendipity_commentform_url" name="serendipity[url]" value="{$commentform_url}" /></p>
          
          <p><label for="serendipity_replyTo">{$CONST.IN_REPLY_TO}   </label>{$commentform_replyTo}</p>
          
          <p><label for="serendipity_commentform_comment">{$CONST.COMMENT}</label> </p>

.... which is replaced by this:

Code: Select all

<dl>
    <dt><label for="serendipity_commentform_name">{$CONST.NAME}  </label></dt>
    <dd><input type="text" id="serendipity_commentform_name" name="serendipity[name]" value="{$commentform_name}" size="30" /></dd>

    <dt><label for="serendipity_commentform_email">{$CONST.EMAIL}  </label></dt>
    <dd><input type="text" id="serendipity_commentform_email" name="serendipity[email]" value="{$commentform_email}" /></dd>

    <dt><label for="serendipity_commentform_url">{$CONST.HOMEPAGE}   </label></dt>
    <dd><input type="text" id="serendipity_commentform_url" name="serendipity[url]" value="{$commentform_url}" /></dd>

    <dt><label for="serendipity_replyTo">{$CONST.IN_REPLY_TO}   </label></dt>
    <dd>{$commentform_replyTo}</dd>
</dl>

      <label for="serendipity_commentform_comment">{$CONST.COMMENT}</label>

And, somewhere in style.css, perhaps around line 460 or at the very end of the file, we can add this:

Code: Select all

.serendipityCommentForm dl {
    width: 100%;
}

.serendipityCommentForm dt {
    float: left;
    margin: 0 0 5px 0;
}

.serendipityCommentForm dd {
    margin:0 0 5px 30%;
    padding: 0;
}

.serendipityCommentForm dd input,
.serendipityCommentForm dd select {
    width: 95%;
}

You may need to play around with margins and widths depending on the language file you are using, but the above values appear to work in English. I did not test this exhaustively - just quickly in firefox and IE6 rrunning Windows.

[Steffen]

Thank you very much for your fast help. I will check all your hints tomorrow.

[Edit:] Many, many thanks for your help. It works. Slowly, I will understand the function of the *.tpl files.

Many greetings

Steffen