Orbit #fd5 Yellow Background Color

Posted By smummery Fri 28 Mar 2014
Add to Favorites0
Author Message
smummery
 Posted Fri 28 Mar 2014
Supreme Being

Supreme Being - (9,261 reputation)Supreme Being - (9,261 reputation)Supreme Being - (9,261 reputation)Supreme Being - (9,261 reputation)Supreme Being - (9,261 reputation)Supreme Being - (9,261 reputation)Supreme Being - (9,261 reputation)Supreme Being - (9,261 reputation)Supreme Being - (9,261 reputation)

Group: Forum Members
Last Active: Thu 17 Apr 2014
Posts: 19, Visits: 61
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?
radframeworks Marked As Answer
 Posted Fri 28 Mar 2014
Supreme Being

Supreme Being - (1,229 reputation)Supreme Being - (1,229 reputation)Supreme Being - (1,229 reputation)Supreme Being - (1,229 reputation)Supreme Being - (1,229 reputation)Supreme Being - (1,229 reputation)Supreme Being - (1,229 reputation)Supreme Being - (1,229 reputation)Supreme Being - (1,229 reputation)

Group: Forum Members
Last Active: Fri 13 Jun 2014
Posts: 2, Visits: 11
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
Fri 28 Mar 2014 by radframeworks

Similar Topics

Expand / Collapse

Reading This Topic

Expand / Collapse

Back To Top