Jump to content
Sign in to follow this  
cvandyck

Changing HTML and/or CSS in Custom Code Section

Recommended Posts

cvandyck

Trying to understand how to modify theme using Firebug. I want to change the length of the name, etc in the Comment Form. The Changes referenced from Firebug are: <div class="form-input"><input type="text" maxlength="25" size="20" value="" class="text required" name="ec_name" id="ec_name"></div> This is HTML. Changes in PlatformPro need CSS. How do I do this?

Share this post


Link to post
Share on other sites
Simon

css: ` input[type="text"] { width: 150px; } ` Adjust width to whatever you like :)

Share this post


Link to post
Share on other sites
catrina

Try this CSS instead:

textarea.required {width: YOURNUMBERpx;}
	textarea#ec_message {width: YOURNUMBER}

textarea.required = This adjusts the width for the form in the content area. textarea#ec_message = This adjusts the width for the form in the sidebar.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
cvandyck

great .. so we're getting close . .thanks ... I actually meant to change the other parts as well.. ie.. changed the comment width, but what about name, email address, website, and subject? Chuck

Share this post


Link to post
Share on other sites
catrina

I noticed that the code I provided you with for the text areas changed the forms back to grey instead of white, so this is a revised code you should use instead:

input.text {background-color: #fff; border: 1px solid #000; width: YOURWIDTHpx;}
	input.required {background-color: #fff; border: 1px solid #000; width: YOURWIDTHpx;}
	textarea.required {background-color: #fff; border: 1px solid #000; width: YOURWIDTHpx;}
	textarea#ec_message {background-color: #fff; border: 1px solid #000; width: YOURWIDTHpx;}

input.text = Change the width of the input boxes in the sidebar form input.required = Change the width of the input boxes in the form within the main content


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
cvandyck

Perfect .. you are great help.. thank you. If I had used Firebug, how would I know to do what you just did?

Share this post


Link to post
Share on other sites
catrina

When using Firebug, select the element you want to adjust (in this case, I selected the text area). When you the box turns blue, the HTML should be highlighted in the source code. What you need to look for is the type of element (for the text area, it was textarea) and the CSS selector, which is identified by the class. The class for the text area was "required" (since it shows up as

class=required
in the code). Therefore, you get the following code which you can use in the CSS to identify what you want to change:
textarea.required


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×