Orbit #fd5 Yellow Background Color


https://forum.kartris.com/Topic2926.aspx
Print Topic | Close Window

By smummery - Fri 28 Mar 2014
I have tried unsuccessfully to alter the background color in orbit in the custom.css sheet. Does anyone know how to change the background color?
By radframeworks - Fri 28 Mar 2014
Hi,

Check that you are editing the correct custom.css which should be located in:
skins/kartris/

<link href="Skins/Kartris/custom.css" rel="stylesheet" type="text/css">

Specifically Line 96 of custom.css of the latest Kartris release - change the #fd5 to another hex color value.

/*
====================================================================
ORBIT SLIDESHOW
==================================================================
*/

#front-slideshow { background-color: #fd5; }



(here is the ul that is affected - it is actually in the Admin Menu > Miscellaneous> Custom Pages > Default -edit this page to see the markup)


<ul id="front-slideshow" data-orbit="" data-options="timer_speed:5500; animation_speed: 300;" class="orbit-slides-container" style="margin-left: -200%; width: 500%; height: 200px;"><li data-orbit-slide="" style="width: 20%;">
<h1>Headline 3</h1>
<h2>Easy to Configure</h2>
<p>All the javascript you need is already plumbed in. Just need to edit the code in the 'Default' custom page in the back end to add your own content here. You can adjust slider properties from the data-options in the UL code.</p>
</li>
<li data-orbit-slide="headline-1" class="" style="width: 20%;">
<h1>Headline 1</h1>
<h2>This is a sample slide show.</h2>
<p>You can fill this with text, images or other content.</p>
</li>
<li data-orbit-slide="headline-2" class="active" style="width: 20%;">
<h1>Headline 2</h1>
<h2>Configuration</h2>
<p>This slider is called 'Orbit' - it's part of the Foundation framework. You can find further technical information on working with it in the Zurb Foundation documentation.</p>
</li>
<li data-orbit-slide="headline-3" class="" style="width: 20%;">
<h1>Headline 3</h1>
<h2>Easy to Configure</h2>
<p>All the javascript you need is already plumbed in. Just need to edit the code in the 'Default' custom page in the back end to add your own content here. You can adjust slider properties from the data-options in the UL code.</p>
</li>
<li data-orbit-slide="" style="width: 20%;">
<h1>Headline 1</h1>
<h2>This is a sample slide show.</h2>
<p>You can fill this with text, images or other content.</p>
</li></ul>

Happy coding!

Jeff
radframeworks.com
By smummery - Sat 29 Mar 2014
Hi Jeff,



The custom.css is where did make the change (#FD5 to #FAF), a couple of days ago..oddly enough when I back to it today, the color had changed. So to experiment, I changed back to #FD5 and now it is stuck on #FAF.

I have done the stop and re-start, but that doesn't make it change....is there a Cache issue do you think?