Changing contact form input fields color « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Propulsion

closed

resolved

Changing contact form input fields color

20 posts from 3 voices

Started 1 year ago by Nomar
Latest reply from Dude
This topic is closed
This topic is resolved

Tags:

Nomar
Member

Hey Kriesi,

First of all, let me congratulate you for an excellent work. Your template is awesome!!! ;o)

I'm new to WP, and though I was able to get most things done, there are several subjects I need help with (sorry for the long list).
Here I go:

1. How/where do I edit, hide or choose which text to display in the colored bar at the top of the site (where the shopping cart icon goes)?
Is it possible to keep the "Login" link when not using the "Shopping Cart" plugin?

2. I need to change the background color of the "input fields" of the contact form, of "Select a page" (for mobile size), and of the "Search site" widget. Where do I do that?

3. Is it possible to use additional plugins in your template (i.e.: Ads by Komoona)?

Thanks for your help, and keep up the great work! Take care,

Nomar

Posted 1 year ago #
Devin
Moderator
Hey Nomar,

I'll just go through your list if thats alright :)

1. In the Menus admin (under Appearance) you need to create a new menu to assign to the Sub Menu. Its the drop-down on the left of the menu manager area. Whatever links you add to that menu will appear in that spot (even the wordpress login page can be linked there).
2. Modify by adding the following to your custom.css or Quick CSS.
Search site widget:
```
#s {
background-color:red;
}
```
For the rest:
```
.input-text,
	input[type="text"],
	input[type="input"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		background: red;
}
```
3. Recommended plugins are in a thread here: http://www.kriesi.at/support/topic/useful-plugins
Posted 1 year ago #
Nomar
Member

Hi Devin,

I apologize for the double posting. For some reason my computer froze and then sent the posting again. I couldn't avoid it. Thanks for your help on this and the other posting, anyway. I'm sorry I didn't reply sooner, but I got sick with a nasty virus and spent almost a week in bed...

I followed your instructions, and was able to change the color of the input fields for everything, except for the "message" field. I added that field to the code you provided in the custom.css file, but it didn’t work.

Since I found you call it “input area” somewhere else, I also tried adding:

.input-area,
input[type="message"],
select {
background: #222;
}

The result was the same; it didn’t work. Am I missing something?

NEW QUESTION:

I just realized that the “Header font” I chose when “Styling” the theme (Raleway) is not showing in other computers. It is being replaced for totally different fonts. Is there something else I need to do? I was reading about “cufon fonts”, but didn’t find anything on that sense, except the WP-Cufon plugin for WP. Do I need to install that? I don’t think so, but what do I know?…

I also checked the plugin list you suggested in the forum, but I didn't find any to play audio. I need an audio player with playlist. Any suggestion?

COMMENT:

I have an Android Xoom tablet, and while sick in bed, I checked in it my new website and your demo for Propulsion as well. The fact is that the background (in both sites) only covers the screen partially, leaving the rest of the space (right and bottom) in white. I think this may be an issue on that device particularly, since both sites look fine in the iPad, in my iPhone and my Android X phone as well. Just wanted to let you know... ;o)

Once more, thanks so much for your help and support. Take care,

Nomar

Posted 1 year ago #
Devin
Moderator

Hi Nomar,

I've edited my response to show this, but I left out the textarea at the end of the classes there. So if you re-copy the above it will work for all the fields.

As for an audio, I don't have any personal experience with any plugins unfortunately.

The fonts you select from the Styling section should work across all computers. They are loaded in from google fonts similar to cufon. If you have a link to your site, I'll take a look to see if there is something incorrect happening.

I'll also let Kriesi know about the Xoom issue. Might just be a quick background repeat rule for android based tablets.

Posted 1 year ago #
Nomar
Member

Hey Devin,

Thanks for the code; it works fine now. ;o)

This is the link to my website: http://www.EBRAKstudio.com. And here, you can see/download a pdf with screenshots of how it looks in my desktop and my laptop across browsers: http://www.EBRAKstudio.com/downloads/PropulsionSS.pdf.
Please let me know whether you'd like access to the adminCP and/or the FTP.

I just downloaded this plugin: WPaudio MP3 Player. Gonna try it and see how it works within Propulsion. Any warning or advice?

Well, thanks so much for your help, and for telling Kriesi about the Android issue. Take care

Nomar

Posted 1 year ago #
Dude
Dude

Hi!

I don't know WPaudio MP3 Player but many users in this forum use: http://wordpress.org/extend/plugins/mp3-jplayer/

Best regards,
Peter

Posted 1 year ago #
Nomar
Member

Thanks Dude; I'll try this one.

Have Devin, you or anyone else had a chance to look into the fonts issue?
Thanks,

Nomar

Posted 1 year ago #
Devin
Moderator

Hi Nomar,

It looks like your fonts are loading fine on my end so I'm not sure if it was a computer specific issue or what. If you find some specific circumstances/browsers where its not showing up we can try and diagnose what specifically is happening.

Posted 1 year ago #
Nomar
Member

Hi Devin,

Did you look at the images I uploaded here?: http://www.EBRAKstudio.com/downloads/PropulsionSS.pdf.
You'll see what I mean, and I just checked in 7 different computers, and the same thing is still happening...

Please take a look at the images in the link I provide above. Thanks,

Nomar

Posted 1 year ago #
Devin
Moderator

Hi Nomar,

I must have missed the screenshot. It looks like there is an issue with adding Raleway with the backend theme options. You'll need to open up header.php and search for:

<link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/custom.css" type="text/css" media="screen"/>

Then add the following just above that line:

<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>

Posted 1 year ago #
Nomar
Member

Hi Devin,

Thanks for the code. Unfortunately, it didn't work; the result is exactly the same. What else could I try?
Thanks. Take care,

Nomar

Posted 1 year ago #
Nomar
Member

Hi Dude,

I just installed the mp3-jplayer. It works great and is fairly simply to customize.
Thanks for recommending it. Take care,

Nomar

Posted 1 year ago #
Devin
Moderator

Hi Nomar,

I'm gladd the mp3 plugin worked for you. Were you able to get the font working properly? I did a quick test on a live site adding that to the header.php just to make sure.

Looking at the source of your site thats currently live, the code I provided isn't currently shown so maybe you removed it?

Posted 1 year ago #
Nomar
Member

Hi Devin,

Yes, since it didn't make any difference, I removed it again after I tried it. I just put it back in, cleaned the cache in all 5 computers, and still the same; the font only looks right in my MacBook Pro and in my Android X phone. It shows different fonts in my MacPro, PC, iPhone and Android Xoom tablet. Today I have to go to my phone company and to the Apple store, so I will look at my site in their different tablets, computers and phones. I'll let you know...

Man, the more I play with your theme, the more I like it, but also more questions pop up everywhere. So...:

1. I'm building a new site for my brother, and I'm using Propulsion as well to see whether he likes it (like me, he is a Flash guy). I'm using an image for the background (set to "Center", "Stretch Fullscreen", "Fixed"), and apparently, that is causing the Footer and Socket not to stay at the bottom of the screen; they are now floating below the content of each page. How do I make them stay "glued" to the bottom of the screen? You can see it here: http://ebrakstudio.com/CGA/spanish/

2. This is about using more than one language: If my brother likes the site made with WordPress, it will have a second version for English (http://ebrakstudio.com/CGA/english/) but with opposite color pallet. I read a bit about using multiple languages in WordPress, but it was rather confusing to me, so I decided to make two installations, and create two databases, one for each language. However, I wanted to ask you: Is there a way I can add a "chose language" feature or plugin to a site like this?

3. The contact form has a common background behind the fields. Is it possible to delete it or hide it? It looks awful when using an image in the background.

4. LAST (for now): I would like to change the graphic you use for the text divider [hr top] ( the one that looks like a ribbon: "delimiter"?). I see it in the PSD file, but I don't know how you named it, and I cannot find where it lives among the files so I can replace it. Would you please tell me?...

Well, thanks so much again for your help. I'm very glad I found you guys; because you are not only knowledgeable but very reliable and patient as well. Take care,

Nomar

Posted 1 year ago #
Devin
Moderator
Hey Nomar,

Well I'm not sure why its not working for you, but the font (with the added code) is working on my test machines now :)

1) That is actually the correct behavior with those options. Without any content to push the footer down to the bottom of the screen, it stays attached to the container holding the whole thing. That is a mod you will probably need to handle on your own. I'll ask the other support to take a look but I don't know of a quick and simple way in which to do the sticky footer trick.

2) You might want to look at http://wpml.org/ . I've heard good things about it from others.

3) Sure, you can add the following to your custom.css or Quick CSS and adjust as you like:
```
.input-text,
	input[type="text"],
	input[type="input"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		background: #fff;
		}
```
4) The HR Flag is actually a couple of styles put together. If you tell me a bit more on what you want to change with it, I can give you some specifics.

Generally, you'll have a lot of success when doing most of these kinds of quick modifications with a tool like Firebug for Firefox. It'll just allow you to inspect the CSS for the site live so that you can figure out what class or id needs to be modified, then allow you to preview the changes while working within the browser. Finally, you can copy over the changes to your custom.css or Quick CSS and its all done :)

If you are getting more comfortable with these kinds of modifications, its just a really good tool to get in the habit of using.

See: http://www.kriesi.at/support/topic/fyi-firebug-tutorial-for-wordpress-users

Regards,

Devin
Posted 1 year ago #
Nomar
Member

Hey Devin,

Thanks for your fast reply. ;o)

I tried the same font on the site I'm building for my brother, and the problem with the font still persists. Go figure... :o(
I was looking into Google Fonts, and found this plugin: "WP Google Fonts". I just downloaded it Will try and see if I can solve the problem with it. Any suggestions?.....

1. Well, that's a pitty, because it really looks weird. I guess I won't be using images in the background for now. Should Kriesi or the other support person know how to modify this, PLEASE let me know. ;o)

3. You already provided me that code, and it works perfectly for the input fields; however, what I meant was the background behind (should I say around?) the entire form (see it here: http://ebrakstudio.com/CGA/spanish/contact/)...

4. This is what I was talking about: http://www.kriesi.at/support/topic/divider-text-colour-and-position. That code allows me to move the text ("top" or "comments", for instance) to where I may want it, cool, but I would like to modify the actual graphic ("flag-tex"t, "flag-diamond") (see it here: http://ebrakstudio.com/downloads/Graphicflag_and_background.jpg). I did actually use Firebug and saw that the size and placement of the graphic is controlled by the code in the "layout.css" file (lines 625 to 712). Now, this graphic is in the PSD for Propulsion, but I can't find where to replace it...

Thanks again for your help. Take care,

Nomar

Posted 1 year ago #
Nomar
Member

Hey,

Just wanted to let you know that "WP Google Fonts" plugin solved my fonts problem. ;o)

Regarding the background and footer deal (#1 above):

I managed to push down the footer by adding some space and separators, BUT I just realized that in my own website (www.EBAKstudio.com), the soket DOES stick to the bottom of the screen and grows up as much as needed if there is not much content. Any ideas???.....

Please don't disregards numbers -3- and -4- in the post above; those are things I still would like to fix.
Thanks and take care,

Nomar

Posted 1 year ago #
Devin
Moderator
Hi Nomar,

I'm not sure what the difference could be in the two sites. Perhaps its a change in content/settings thats letting you see something different.

3 from above: Add the following to your Quick CSS. The page id number may need to be changed if you re-do the page or re-make it. You can re-find it by inspecting the page source and looking at the body classes to see what page id class is applied.
```
#top.page-id-86 fieldset {
background: none;
}
```
4 from above: That isn't actually a graphic at all. Its made up of entirely css, so you can change the CSS to change the way it looks, or re-do it to add your own background graphic.

The css you found in the layou.css is what you'll need to work with in order to change the way it looks. You can add background images etc if thats what you'd like.
Posted 1 year ago #
Nomar
Member

Hi Devin,

The code for the background works great; thanks so much. ;o)

I'll start learning how to create/modify graphics dynamically in CSS (I was hopping I could get away without doing that)... LOL. And I'll look further into what is detaching the socket from the bottom of the screen later; for now, the extra content will do.

Thanks for all your help. Hope you are having a great weekend. Take care,

Nomar

Posted 1 year ago #
Dude
Dude

Hi!

I'll close this thread now.

Regards,
Peter

Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top