I am having some serious problems styling my front end users submit button. It only seems to be affected by changing the CSS 'input' propoerties, however, this then changes all my other input boxes, which is not what I want.
Does anybody have any ideas on how I can affect the the submit button only? Any help would be super appreciated!
David
Script is as follows:
Website is as follows with guest log-in id below.
http://www.archipedia-uk.com/project-ru ... tasks.html
username: guest
password: password
Script is as follows:
{if $need2beLoggedIn ne ''}
{$need2beLoggedIn}
{else}
{$addComment}
{$startForm}
{$hiddens}
{$inputComment}
{$submit}
{$endForm}
{/if}
SOLVED - FEU Comments Styling
-
- New Member
- Posts: 7
- Joined: Sun Oct 10, 2010 2:20 pm
SOLVED - FEU Comments Styling
Last edited by David James Arnold on Sun Nov 14, 2010 1:12 pm, edited 1 time in total.
Re: FEU COMMENTS STYLING
You have to go down to the input you want, in this case if it's the submit then it would be p.comment-submit {your style calls}, most times if you use a module to make the forms it will be in a div and the inputs will have a class assigned to them like search-button for the search submit button, look at the page view source to see if you can get any closer to what you are trying to target...
B.T.W. please don't use all caps in subject line...
B.T.W. please don't use all caps in subject line...
Last edited by Anonymous on Fri Nov 12, 2010 2:43 am, edited 1 time in total.
-
- New Member
- Posts: 7
- Joined: Sun Oct 10, 2010 2:20 pm
Re: FEU Comments Styling
Thanks for the note Dr CSS. I have decapitalized the subject as requested.
Regarding your advice, I think the scripting I originally posted was a little confusing. I enclosed ($submit) in the tags as suggested, plus tags too, in attempt to modify the display of the button, however, this had no affect. I forgot to delete the additional code.
The only way I could affect the submit button was by altering the 'input' tag/category in the CSS file but this affects all the other input areas on the page. Changing the 'submit' category/tag in the CSS file strangely has no effect. Very weird.
Any ideas?
Thanks very much,
David
The CSS is located below.
input
{
color: #000000;
background: #FFFFFF;
}
textarea
{
color: #000000;
background: #FFFFFF;
font-family: "Helvetica";
font-size: 13px;
overflow: hidden;
}
submit
{
color:#FFFFFF;
background:#000000;
}
Regarding your advice, I think the scripting I originally posted was a little confusing. I enclosed ($submit) in the tags as suggested, plus tags too, in attempt to modify the display of the button, however, this had no affect. I forgot to delete the additional code.
The only way I could affect the submit button was by altering the 'input' tag/category in the CSS file but this affects all the other input areas on the page. Changing the 'submit' category/tag in the CSS file strangely has no effect. Very weird.
Any ideas?
Thanks very much,
David
The CSS is located below.
input
{
color: #000000;
background: #FFFFFF;
}
textarea
{
color: #000000;
background: #FFFFFF;
font-family: "Helvetica";
font-size: 13px;
overflow: hidden;
}
submit
{
color:#FFFFFF;
background:#000000;
}
Re: FEU Comments Styling
There are a lot of validation errors on that page...
But what you want to target is this, which like I always say, it's best to look at your page source to see what you can target...
p.comment-submit .cms_submit {your styles}
But what you want to target is this, which like I always say, it's best to look at your page source to see what you can target...
p.comment-submit .cms_submit {your styles}
-
- New Member
- Posts: 7
- Joined: Sun Oct 10, 2010 2:20 pm
Re: FEU Comments Styling
Thanks Dr. CSS,
Problem now solved!
I did the following.
div#comments-type textarea
{
color: #000000;
background-color: #FFFFFF;
font-family: "Helvetica";
font-size: 13px;
border: 1px dashed #000000;
}
div#comments-submit input
{
font-family: "Helvetica";
font-weight: bold;
font-size: 13px;
color: #FFFFFF;
background-color: #000000;
}
Problem now solved!
I did the following.
div#comments-type textarea
{
color: #000000;
background-color: #FFFFFF;
font-family: "Helvetica";
font-size: 13px;
border: 1px dashed #000000;
}
div#comments-submit input
{
font-family: "Helvetica";
font-weight: bold;
font-size: 13px;
color: #FFFFFF;
background-color: #000000;
}