SOLVED How to implement input styling in non-RT comps/mods
-
-
- Scott Gregory
- Newbie
- Posts: 17
- Thanks: 0
-
Hello RocketWorld!
I very much like the input styling (such as rokradios and rokchecks) included with my spiffy rt_affinity_j15 template, and am interested in strategies for implementing that same styling across other, non-RocketTheme components and modules that come equipped with forms of their own.
I really have no problem hacking a mod or component in an effort to style it to harmonize with the template themes, and have had smashing success in styling various text input boxes and buttons, but I am quite at a loss to discern what is happening inside of rokutils.inputs.js well enough to extend rockchecks and rokradio styles, along with their morph functionality, throughout the remainder of the website.
Some documentation on RT input styling would be of great help, but in absence of same I will gladly accept any tips as to how I should be id-ing/classifying my <input> tags to invoke rockutils morph functions upon those particular elements. The CSS is really no problem, just looking for the particular class names/syntax used by rockutils.inputs.js and some pointers in how to use them for the desired effects, especially if a little JS manipulation is required in directing event handlers.
Thanks in advance for any assistance that can be offered in this could-be complex challenge. - Last Edit: 15 years 3 months ago by Scott Gregory.
- Firebug : the FREE Firefox Add-on for Joomla! Web Site Builders.
-
-
-
- Scott Gregory
- Newbie
- Posts: 17
- Thanks: 0
-
Oh, for the sake of Pete!
I find that my questions here are best answered by MYSELF. Perhaps the folks whom I am addressing are far too sophisticated to reply to the inane queries of such an obvious fresh-fish such as myself. If, indeed that is the case, perhaps my puling will elicit a response in other, likewise unschooled folks out here in the uneducated realm, whom like myself, are having troubles with getting answers to the simplest of questions. This one for instance.
Would it have killed some of you gurus to just reply that all I had to do was assign a class name to a label that was assigned to the particular input, that the JS would take care of the rest of it for me?!? Would it indeed have killed someone to include this little itty bitty comment in, say, some documentation? Searchable, findable documentation?
For future reference, for those who need it, this is the drill:
1) Get brave.
2) Commit yourself to poring over a few (00) lines of code, the which I cannot necessarily describe here in other than very general terms.
3) Take a deep breath.
Now we can really start.
Open, in your favorite text editor, the *.php file that contains the code for the actual input you want to alter. (As I said above, this may take some searching, but what you are looking for is an index.php or maybe tmpl.php, perhaps even model.php where you'll find the <input> tag you're looking for.) Moving right along...
1) If it doesn't already exist, assign a <label> tag around your <input>, assigning a class to the <label> that denotes it is a "rokcheck" or "rokradio", and styling your <input> to be hidden, while yet preserving the <input type="original-type" value="original-value"> in order to preserve its native behavior, like thus:
<label for="your-choice" class="rokchecks"><input type="checkbox" id="your-choice" name="your-choice" value="really-valuable" style="display:hidden;"></input>Some pretty text for your checkbox</label>
What?!? you're doing a radio button?!?!? pshaw, nothing to it:
<label for="your-pick" class="rokradios"><input type="radio" id="your-pick" name="your-pick" value="not-quite-so-valuable-as-all-that" style="display:hidden;"></input>Some even prettier text for your radio button!</label>
(Note: the only real tight-tolerance factors here are these: 1) gotta have a label "class" like I showed above--- "rockradios","rokchecks"; 2) gotta preserve your value attributes from the original config; and 3) the "for" attribute in the label has gotta match EXACTLY the "id" attribute of the <input> you're trying to manipulate. Name attribute of the <input> should probably not get fiddled with either, as sometimes the form is looking for that input specifically by that name. You don't necessarily hafta style the input as "hidden" but the idea is to pretty up the site, not uglify it, hehe. Also, you won't have any luck using this on, say, a "select all" column, as the id's are gonna become a factor.)
2) Modify your CSS so the radio button/checkbox image is coming from the appropriate RT style folder (I use rt_Affinity_j15, so i've got "light", "medium", "dark" and normal radio-button images to deal with, which all conform to different background colors - a little hard-calling in the CSS overcomes most all of the minor ugliness).
You're done - as I stated above, the fantabulistic JS provided with most of the RT templates I've dealt with takes care of the rest. And for that I thank RT, even if I am a little snotted up with you right now, hehe. God Bless, and thanks all!!! - Firebug : the FREE Firefox Add-on for Joomla! Web Site Builders.
-
-
-
- mike smythe
- Newbie
- Posts: 10
- Thanks: 0
-
Thanks Scott,
I share your frustration when it comes to documentation for the RT releases.
Great designs with very well thought out features (Gantry, RTL support, custom inputs et al), just lacking the supporting docs for developers / modders.
I get the feeling that most RT implementations aren't modded that much and the 'developers' tend not to understand even basic php / css - so these questions don't come up that often.
Nicely answered, even if you appear to be talking to yourself!
Thanks
Mike
-
-
-
- mike smythe
- Newbie
- Posts: 10
- Thanks: 0
-
Thanks Scott,
I share your frustration when it comes to documentation for the RT releases.
Great designs with very well thought out features (Gantry, RTL support, custom inputs et al), just lacking the supporting docs for developers / modders.
I get the feeling that most RT implementations aren't modded that much and the 'developers' tend not to understand even basic php / css - so these questions don't come up that often.
Nicely answered, even if you appear to be talking to yourself!
Thanks
Mike
-
-
-
- Invision
- Hero Rocketeer
- Posts: 261
- Thanks: 0
- Thank You Scott :cheesy:
- Apache Version 2.2.14 (Unix) | PHP Version 5.2.12 | MySQL Version 5.1.43-log | Architecture x86_64 | OS Linux | Joomla Version 1.5.20 | pHpBB v3.0.7-PL1 | Firefox v3.6.8 | Internet Explorer 8 |
-
-
-
- VitalBodies.com
- Sr. Rocketeer
- Posts: 202
- Thanks: 0
-
A few notes of interest added to this most helpful thread:
You do not need to have the label be AROUND the input. A detail yes but there is more...<input id='unique id' /> <label for='unique id'>Some Label Text...</label>
I found that when attempting to use a different template that my radio buttons stopped working. Was a little bit tricky to track down why. The check boxes worked though. This was my own hand coded Strict W3C Valid Form not a template form or a Joomla form. Worked fine on the old template.
In studying the matter I noticed the check box has a bit more going on than the radio button.
Below is the XHTML of the form BEFORE the template changes it and adds other code to the code.
Adding code to MY code? I was not expecting that... Like really not expecting that and only by using Firebug could I see what what happening. Even "view page source" did not reveal it.
Orginal XHTML check box example that works (at least in Quasar):<input type='checkbox' checked='checked' class='small' name='areaid[]' id='areaid_228' value='228' /> <label class='small' for='areaid_228'>Town</label><br />
Orginal XHTML radio button example that does not work (at least in Quasar):<input type='radio' name='filterby' value='nomobile' /> <label class='small' for='mfgonly'>Hide Mobile Homes</label><br />
Code-added-to-code-version:<input type="radio" value="nomobile" name="filterby" style="position: absolute; left: -10000px;"> <label for="mfgonly" class="small rokradios rokfilterby">Hide Mobile Homes</label>
Note how rokradios and rokfiterby suddenly shows up as does other code.
I was looking at the code thinking to myself "wow, did I really style the form this way?", "naw", "wait I had to have, I hand coded this form to be XHTML strict", "Dang, my memory must be going, I draw a total blank on coding that", "hmmm -10000px?", "wait, no way, something must be wrong here, I know I did not code this - what the hey?"... "MUST BE JAVASCRIPT!"
What fixed the radio buttons?
I did not need to have class in the input at all, only the matching id in the input and for in the label (at least in Quasar). I did not have to have class="rokradios" at all (at least in Quasar).
Orginal (updated) XHTML radio button example that does work (at least in Quasar):<input type='radio' name='filterby' value='nomobile' id='mfgonly'/> <label class='small' for='mfgonly'>Hide Mobile Homes</label><br />
-
http://www.VitalBodies.com
Organic, Eco, Vital and Sustainable...
http://www.VitalBodies.net
Web Site Design - Green, W3C and Open Source...
-
Time to create page: 0.069 seconds