Topic Closed

Hello everybody, I was looking for a simple but effetive CMS so here I am, put a site up quite easily, edited the flatly layout switching text and bg colors,  so it's white text on black bg.

that works good, only flaw is that in every form (contacts, my guestbook, simple blog) the text is invisible, I need to define the form text as black. how can I achieve that!? I am no noob but not a css expert.

please give me an hint, I'm going crazy after it!!!

3 years ago#11744

mabu
458 Posts
8.1K Downloads
5 Themes
9 Plugins

I dont know Your Template - but an example : Contactform. Klick in firefox-portable with the right mousekey at a text in the message-field -> inspect element , and look at the sourcecode :

<form...  <textarea id="contact_message" name="message" rows="10" cols="10"></textarea> 

Textarea has already :

textarea {
    padding: 5px;
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
textarea {
    overflow: auto;
}
button, input, optgroup, select, textarea {
    color: inherit;           (!!!!!!!!!!!!!!!!!!!!!!!!)
    font: inherit;}

 Try : textarea {color:black !important;} (important only if necessary) in the custom.css or replace it in the stylesheet against 'inherit'. - otherwise put it online in a subdomain please

(P.S. Your Typesetter-Version is quite old )

Edited: 3 years ago#11745

got two domains, one is 5.0.3 the other one is 5.2 rc. same situation.

 

this is the code of the contacts page.

<div id="gpx_content" class=" cf"><div data-gp_label="Contact" class="GPAREA filetype-text editable_area editable_area" id="ExtraEditArea1" data-draft="0"><h2>Contact Us</h2><p>Use the form below to contact us, and be sure to enter a valid email address if you want to hear back from us.</p><div class="gpclear"></div></div><div class="GPAREA filetype-special_contactform"><form class="contactform" action="/index.php/Contact" method="post"><input type="hidden" name="verified" value="39d6270bd92236a9e3b9acd3b01e26b3e1c01d71327a0d061494e2be2f02156a2523e7cc9258eae39529411195dda14a82e7d1e824bc4c0d9240ea13e5f984c6"><div style="display:none !important"><input type="hidden" name="contact_nonce" value="398a95eac437d283926cda77a718a62a81f6b6ebd868f11211796e5f0837b55857431807f58acf90514709bf9c5ac8064fe51d25af5510fd2dc4ccadf4534982"><input type="text" name="contact_void" value=""></div><label for="contact_name"><span class="title"><span class="editable_area " id="ExtraEditArea2">Your Name</span></span><input id="contact_name" class="input text" type="text" name="name" value=""></label><label for="contact_email"><span class="title"><span class="editable_area " id="ExtraEditArea3">Your Email</span></span><input id="contact_email" class="input text" type="text" name="email" value=""></label><label for="contact_subject"><span class="title"><span class="editable_area " id="ExtraEditArea4">Subject</span>*</span><input id="contact_subject" class="input text" type="text" name="subject" value=""></label><label for="contact_message"><span class="editable_area " id="ExtraEditArea5">Message</span>*</label><textarea id="contact_message" name="message" rows="10" cols="10"></textarea><input type="hidden" name="cmd" value="gp_send_message"><a href="/index.php/Admin_Theme_Content?cmd=EditText&amp;key=send_message" title="send_message" data-cmd="gpabox" class="ExtraEditLink nodisplay" id="ExtraEditLink6" data-gp-area-id="6">Edit</a><input type="submit" class="submit editable_area" id="ExtraEditArea6" name="aaa" value="Send Message"></form></div></div>

3 years ago#11746

mabu
458 Posts
8.1K Downloads
5 Themes
9 Plugins

Just that You understand the principle. For the contactform You see a style (firefox - right mousekey - inspect element)

.contactform input.... and further :

<input id="contact_name" class="input text" ...
<input id="contact_email" class="input text"...
<input id="contact_subject" class="input text"....
<textarea id="contact_message" ...

The solution in css  is :

.contactform input, textarea#contact_message {color:green;} add it to the custom.css or at the end of the stylesheet, but less doesnt understand css (use http://beautifytools.com/css-to-scss-converter.php to convert)

-- for flatly scss it is

.contactform {
    input { color: green;
}
} {
    textarea#contact_message {
        color: green;
    }
}

--  for Flatly with less it is

.contactform {
    input {
        color: green;
    }
}
textarea#contact_message {
    color: green;
}

You can also make general changes in the variables.less and in the variables.scss,

P.S. The smart-multi has several templates with black background. You can add expansions like bootstrap-xtra and bootstrap essentials (bootstrap3)

Edited: 3 years ago#11747

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

Log In

  Register