[SOLVED] I want to add CSS to the select box of Time Origination to make it slick.

nonamer

Joined: 2007-03-28
Posts: 63
Posted: Sun, 2012-08-26 17:37

I want to add CSS to the select box of the Time/Date Origination dropdown to make it look slick. In order to do so I need to be able to add a class to the select box. How can I do this when its in javascript? I'm referring to itemedititem.tpl

{capture name=originationTimestampField}{strip}

      {g->formVar var="form[originationTimestampSplit]"}

    {/strip}{/capture}

    {capture name=htmlSelectDate}

      {html_select_date time=$form.originationTimestamp

       field_array=$smarty.capture.originationTimestampField start_year="2000" end_year="+0"}

    {/capture}

    {$smarty.capture.htmlSelectDate|utf8}


  {if !empty($ItemEditItem.originationTimestamp)}

  <script type="text/javascript">

  // <![CDATA[

  function setOriginationTimestamp() {ldelim}

    var frm = document.getElementById('itemAdminForm');

    frm.elements['{$smarty.capture.originationTimestampField}[Date_Month]'].value = '{$ItemEditItem.originationTimestamp.Date_Month}';

    frm.elements['{$smarty.capture.originationTimestampField}[Date_Day]'].value = '{$ItemEditItem.originationTimestamp.Date_Day}';

    frm.elements['{$smarty.capture.originationTimestampField}[Date_Year]'].value = '{$ItemEditItem.originationTimestamp.Date_Year}';

    frm.elements['{$smarty.capture.originationTimestampField}[Time_Hour]'].value = '{$ItemEditItem.originationTimestamp.Time_Hour}';

    frm.elements['{$smarty.capture.originationTimestampField}[Time_Minute]'].value = '{$ItemEditItem.originationTimestamp.Time_Minute}';

    frm.elements['{$smarty.capture.originationTimestampField}[Time_Second]'].value = '{$ItemEditItem.originationTimestamp.Time_Second}';

  {rdelim}

  // ]]>

  </script>

so where and how do I set the class for this code? or am I looking in the wrong place? thanks appreciate your help guys.

 
Dayo

Joined: 2005-11-04
Posts: 1642
Posted: Sun, 2012-08-26 18:21

That bit of code uses the native smarty "html_select_date" function and for some reason, it doesn't have an "id" param. Not sure about smarty 3 but it doesn't in smarty 2.

Best bet is to try to use JS to shim the id in.

Not tested but try changing ...

  {if !empty($ItemEditItem.originationTimestamp)}
  <script type="text/javascript">
  // <![CDATA[

to ...

  {if !empty($ItemEditItem.originationTimestamp)}
  <script type="text/javascript">
	var obj;
	var elemArr = new Array();
	var nameArr = new Array(
			"g2_form[originationTimestampSplit][Date_Year]",
			"g2_form[originationTimestampSplit][Date_Month]",
			"g2_form[originationTimestampSplit][Date_Day]",
			"g2_form[originationTimestampSplit][Time_Hour]",
			"g2_form[originationTimestampSplit][Time_Minute]",
			"g2_form[originationTimestampSplit][Time_Second]"
	);
	for (var j = 0; j < 6; j++) {ldelim}
		elemArr = document.getElementsByName(nameArr[j]);
		for (var i = 0; i < elemArr.length; i++) {ldelim}
			obj = document.getElementsByName(nameArr[j]).item(i);
			obj.class = "CLASSNAME";
		{rdelim}
	{rdelim}
  // <![CDATA[

** EDIT **
Checked the actual G2 source

You will be better off using a single CSS class for all the drop downs (".CLASSNAME" instead of "#CLASSNAME" in your css file)

Modified the code above. Note change in area where edits start.

If you do want ids for some reason, that should give you a jump off point to complete it but remember that each id has to be unique on a page.

--
dakanji.com

 
nonamer

Joined: 2007-03-28
Posts: 63
Posted: Sun, 2012-08-26 18:51

That didn't seem to work. Thank you for trying though.

 
Dayo

Joined: 2005-11-04
Posts: 1642
Posted: Sun, 2012-08-26 19:07

No reason why it shouldn't really.

Post the html source from your browser (using "View Source" or similar) of the select boxes and let's have a look.

Also, what id, probably better as a class actually, do you want to assign to the select boxes?

--
dakanji.com

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Sun, 2012-08-26 19:18

use document.getElementById("MyElement").className += " MyClass"; instead <- note the necessary space if you are concatenating

-s
All New jQuery Minislideshow for G2/G3

 
nonamer

Joined: 2007-03-28
Posts: 63
Posted: Sun, 2012-08-26 20:05

I tried all the solutions above. Still not getting class on those select boxes. I was hoping to use this jquery script but I need to have classes for it work. http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

If this can't be figured out I did come across an alternative albeit is not as pretty as jquery would have made the select boxes though. Since g2 does name the form select boxes... g2_form[originationTimestampSplit][Date_Month],g2_form[originationTimestampSplit][Date_Day], etc.

I have figured out I can direct CSS to the attribute "name" using...

<style type="text/css">

select[name="g2_form[originationTimestampSplit][Date_Month]"] {
    background:url(http://imgur.com/MJyZM.png) 0 0 no-repeat;
    -webkit-appearance: none;
    border: solid 1px #515151;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: normal;
    height: 30px;
    position: relative;
    width: 170px;
    overflow:hidden;
}

select[name="g2_form[originationTimestampSplit][Date_Day]"] {
    background:url(http://imgur.com/MJyZM.png) 0 0 no-repeat;
    -webkit-appearance: none;
    border: solid 1px #515151;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: normal;
    height: 30px;
    position: relative;
    width: 170px;
    overflow:hidden;
}

</style>
 
Dayo

Joined: 2005-11-04
Posts: 1642
Posted: Sun, 2012-08-26 20:32

You're right. Tested and can't shim in the class.

Your take seems valid enough. maybe something like

<style type="text/css">

select[name="g2_form[originationTimestampSplit][Date_Month]"], select[name="g2_form[originationTimestampSplit][Date_Day]"], ETC, ETC {
    background:url(http://imgur.com/MJyZM.png) 0 0 no-repeat;
    -webkit-appearance: none;
    border: solid 1px #515151;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: normal;
    height: 30px;
    position: relative;
    width: 170px;
    overflow:hidden;
}
</style>

can also work
--
dakanji.com

 
nonamer

Joined: 2007-03-28
Posts: 63
Posted: Sun, 2012-08-26 20:37

thanks for your help Dayo and suprsidr.

very much appreciated.