Page 1 of 1
SOLVED - FEU Comments Styling
Posted: Thu Nov 11, 2010 10:59 pm
by David James Arnold
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}
Re: FEU COMMENTS STYLING
Posted: Fri Nov 12, 2010 2:22 am
by Dr.CSS
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...
Re: FEU Comments Styling
Posted: Sat Nov 13, 2010 10:32 pm
by David James Arnold
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;
}
Re: FEU Comments Styling
Posted: Sun Nov 14, 2010 2:33 am
by Dr.CSS
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}
Re: FEU Comments Styling
Posted: Sun Nov 14, 2010 1:12 pm
by David James Arnold
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;
}