Finalized the layout color applying part, at least in terms of a POC. Now we have a solid base to work on auto-applying kickass color schemes that we build from the picture.
This commit is contained in:
Veno Server
parent
eebe7d1681
commit
18c87c2c16
3 changed files with 147 additions and 36 deletions
|
|
@ -181,7 +181,7 @@ a:hover { text-decoration: underline; }
|
|||
top: 20px;
|
||||
right: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
height: 226px;
|
||||
padding: 5px;
|
||||
opacity: .7;
|
||||
background-color: #292929;
|
||||
|
|
@ -191,15 +191,18 @@ a:hover { text-decoration: underline; }
|
|||
-webkit-box-shadow: 1px 1px 7px #333;
|
||||
}
|
||||
|
||||
#testBanner, #testContent {
|
||||
#testBanner, #testContent, #testSidebar, #testFooter {
|
||||
padding: 5px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
#testFooter { clear: both; }
|
||||
#testBanner { height: 20px; margin: 0 0 5px 0; }
|
||||
#testContent { height: 155px; }
|
||||
#testContent, #testSidebar { height: 155px; margin-bottom: 5px; }
|
||||
#testContent { float: left; width: 125px; }
|
||||
#testSidebar { float: right; width: 50px; }
|
||||
#testContent p { margin: 0 0 5px 0; }
|
||||
|
||||
#layoutMods {
|
||||
|
|
@ -207,24 +210,26 @@ a:hover { text-decoration: underline; }
|
|||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 330px;
|
||||
width: 140px;
|
||||
background-color: #000;
|
||||
opacity: .8;
|
||||
padding: 10px 4px;
|
||||
opacity: .9;
|
||||
padding: 4px 4px 0;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-box-shadow: 1px 1px 7px #333;
|
||||
-webkit-box-shadow: 1px 1px 7px #333;
|
||||
}
|
||||
|
||||
#layoutMods a {
|
||||
display: block;
|
||||
background-color: #498FB2;
|
||||
border: 1px solid #55A2C9;
|
||||
padding: 5px 10px 4px;
|
||||
padding: 5px 5px 4px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
opacity: .8;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
#layoutMods a:hover { text-decoration: none; opacity: 1; }
|
||||
#layoutMods a:hover { text-decoration: none; opacity: .8; }
|
||||
|
|
|
|||
85
index.php
85
index.php
|
|
@ -8,7 +8,14 @@
|
|||
<script type="text/javascript" src="js/franz.js"></script>
|
||||
<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
|
||||
<script type="text/javascript">
|
||||
var img_input;
|
||||
var img_input,
|
||||
layoutMods,
|
||||
selectedColor,
|
||||
previewMainBG,
|
||||
previewBannerBG,
|
||||
previewContentBG,
|
||||
previewSidebarBG,
|
||||
previewFooterBG;
|
||||
|
||||
/* Oh god a global function wrrrryyyy */
|
||||
function lol() {
|
||||
|
|
@ -18,6 +25,12 @@
|
|||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
layoutMods = $("#layoutMods");
|
||||
previewMainBG = $("#testLayout");
|
||||
previewBannerBG = $("#testBanner");
|
||||
previewContentBG = $("#testContent");
|
||||
previewSidebarBG = $("#testSidebar");
|
||||
previewFooterBG = $("#testFooter");
|
||||
franz.init("lol");
|
||||
|
||||
img_input = document.getElementById("img_input");
|
||||
|
|
@ -75,16 +88,72 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
$(".color_boxd").live("click", function() {
|
||||
// It's 4AM, and I'm tired. I'm not building a damn regular expression, so yeah, we'll multiple .replace() ;P
|
||||
alert("This hex color: " + franz.RGBtoHex($(this)[0].style.backgroundColor.replace(")", "").replace("rgb(", "").replace(" ", "").split(",")));
|
||||
$("#setMainBG").click(function() {
|
||||
previewMainBG.css({"background-color": selectedColor});
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#setHeaderBG").click(function() {
|
||||
previewBannerBG.css({"background-color": selectedColor});
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#setContentBG").click(function() {
|
||||
previewContentBG.css({"background-color": selectedColor});
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#setFooterBG").click(function() {
|
||||
previewFooterBG.css({"background-color": selectedColor});
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#setSidebarBG").click(function() {
|
||||
previewSidebarBG.css({"background-color": selectedColor});
|
||||
return false;
|
||||
});
|
||||
|
||||
$(".color_boxd").live("mousedown", function(e) {
|
||||
// Yes, this function is horribly un-optimized. It's 4AM, we'll clean it up later. ;P
|
||||
selectedColor = franz.RGBtoHex($(this)[0].style.backgroundColor.replace(")", "").replace("rgb(", "").replace(" ", "").split(","));
|
||||
var coords = {x: e.pageX, y: e.pageY};
|
||||
layoutMods.hide();
|
||||
layoutMods.css({"top": coords.y + "px", "left": coords.x + "px"});
|
||||
layoutMods.fadeIn("slow");
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="layoutMods">
|
||||
<a href="#" id="setMainBG" title="Set as background color">Set as Main Background</a>
|
||||
<a href="#" id="setHeaderBG" title="Set as Header BG">Set as Header Background</a>
|
||||
<a href="#" id="setContentBG" title="Set as Content BG">Set as Content Background</a>
|
||||
<a href="#" id="setSidebarBG" title="Set as Sidebar BG">Set as Sidebar Background</a>
|
||||
<a href="#" id="setFooterBG" title="Set as Footer BG">Set as Footer Background</a>
|
||||
</div>
|
||||
|
||||
<div id="testLayout">
|
||||
<div id="testBanner">
|
||||
This is an example layout
|
||||
</div>
|
||||
<div id="testContent">
|
||||
<p>
|
||||
This is an example layout to test colors with.
|
||||
</p>
|
||||
<p>
|
||||
Click on a color to set it for one of these layout sections!
|
||||
</p>
|
||||
</div>
|
||||
<div id="testSidebar">
|
||||
Sidebar
|
||||
</div>
|
||||
<div id="testFooter">
|
||||
© lol enterprises
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Franz - client side color swatches</h1>
|
||||
|
||||
<div id="container_top">
|
||||
|
|
@ -113,12 +182,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- might log colors later on
|
||||
<ul id="logHSV">
|
||||
<li><p id="logHue">Hue: </p></li>
|
||||
<li><p id="logSat">Sat: </p></li>
|
||||
<li><p id="logVal">Val: </p></li>
|
||||
</ul> -->
|
||||
</div>
|
||||
|
||||
<div id="options">
|
||||
|
|
|
|||
71
index2.php
71
index2.php
|
|
@ -8,8 +8,14 @@
|
|||
<script type="text/javascript" src="js/franz.js"></script>
|
||||
<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
|
||||
<script type="text/javascript">
|
||||
var img_input,
|
||||
layoutMods = $("#layoutMods");
|
||||
var img_input,
|
||||
layoutMods,
|
||||
selectedColor,
|
||||
previewMainBG,
|
||||
previewBannerBG,
|
||||
previewContentBG,
|
||||
previewSidebarBG,
|
||||
previewFooterBG;
|
||||
|
||||
/* Oh god a global function wrrrryyyy */
|
||||
function lol() {
|
||||
|
|
@ -19,6 +25,12 @@
|
|||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
layoutMods = $("#layoutMods");
|
||||
previewMainBG = $("#testLayout");
|
||||
previewBannerBG = $("#testBanner");
|
||||
previewContentBG = $("#testContent");
|
||||
previewSidebarBG = $("#testSidebar");
|
||||
previewFooterBG = $("#testFooter");
|
||||
franz.init("lol");
|
||||
|
||||
img_input = document.getElementById("img_input");
|
||||
|
|
@ -76,25 +88,50 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
$(".color_boxd").live("mousedown", function(e) {
|
||||
var coords = {x: e.pageX, y: e.pageY};
|
||||
layoutMods.fadeIn("slow");
|
||||
//layoutMods.css({"top": coords.x + "px", "left": coords.y + "px"});
|
||||
/*
|
||||
// It's 4AM, and I'm tired. I'm not building a damned regular expression, so yeah, we'll multiple .replace() ;P
|
||||
alert("This hex color: " + franz.RGBtoHex($(this)[0].style.backgroundColor.replace(")", "").replace("rgb(", "").replace(" ", "").split(",")));
|
||||
*/
|
||||
$("#setMainBG").click(function() {
|
||||
previewMainBG.css({"background-color": selectedColor});
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#setHeaderBG").click(function() {
|
||||
previewBannerBG.css({"background-color": selectedColor});
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#setContentBG").click(function() {
|
||||
previewContentBG.css({"background-color": selectedColor});
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#setFooterBG").click(function() {
|
||||
previewFooterBG.css({"background-color": selectedColor});
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#setSidebarBG").click(function() {
|
||||
previewSidebarBG.css({"background-color": selectedColor});
|
||||
return false;
|
||||
});
|
||||
|
||||
$(".color_boxd").live("mousedown", function(e) {
|
||||
// Yes, this function is horribly un-optimized. It's 4AM, we'll clean it up later. ;P
|
||||
selectedColor = franz.RGBtoHex($(this)[0].style.backgroundColor.replace(")", "").replace("rgb(", "").replace(" ", "").split(","));
|
||||
var coords = {x: e.pageX, y: e.pageY};
|
||||
layoutMods.hide();
|
||||
layoutMods.css({"top": coords.y + "px", "left": coords.x + "px"});
|
||||
layoutMods.fadeIn("slow");
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="layoutMods">
|
||||
<a href="#" title="Set as background color">Main Background</a>
|
||||
<a href="#" title="Set as Header BG">Header Background</a>
|
||||
<a href="#" title="Set as Content BG">Content Background</a>
|
||||
<a href="#" id="setMainBG" title="Set as background color">Set as Main Background</a>
|
||||
<a href="#" id="setHeaderBG" title="Set as Header BG">Set as Header Background</a>
|
||||
<a href="#" id="setContentBG" title="Set as Content BG">Set as Content Background</a>
|
||||
<a href="#" id="setSidebarBG" title="Set as Sidebar BG">Set as Sidebar Background</a>
|
||||
<a href="#" id="setFooterBG" title="Set as Footer BG">Set as Footer Background</a>
|
||||
</div>
|
||||
|
||||
<div id="testLayout">
|
||||
|
|
@ -109,6 +146,12 @@
|
|||
Click on a color to set it for one of these layout sections!
|
||||
</p>
|
||||
</div>
|
||||
<div id="testSidebar">
|
||||
Sidebar
|
||||
</div>
|
||||
<div id="testFooter">
|
||||
© lol enterprises
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Franz - client side color swatches</h1>
|
||||
|
|
|
|||
Reference in a new issue