Hi everyone,
I have been trying to sort out a new SD16 site and really struggle on a few points. I have been trying to simplified thinks.
There is a gradient at the top of the page, I just want a solid bar behind the shopping links and for it to stop be for the header logo.
Examples below:
I have found the following code:
Chrome - you can see the header cuts in the bar at the top.
IE
I have adjusted the gradient so it roughly works but still not right.
Any thoughts, thanks Mash
I have been trying to sort out a new SD16 site and really struggle on a few points. I have been trying to simplified thinks.
There is a gradient at the top of the page, I just want a solid bar behind the shopping links and for it to stop be for the header logo.
Examples below:
I have found the following code:
body {
width:99.7%;
margin:0 !important;
padding:0 !important;
color:<actinic:variable name="TextColor" />;
background: <actinic:variable name="BGColor" />; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzg3ODc4NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZTBlMGUwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTElIiBzdG9wLWNvbG9yPSIjZTBlMGUwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2UwZTBlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, <actinic:variable name="Palette2" /> 4em, <actinic:variable name="BGColor" /> 0em, <actinic:variable name="BGColor" /> 100%, <actinic:variable name="BGColor" /> 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#0057a4), color-stop(1%,<actinic:variable name="BGColor" />), color-stop(100%,<actinic:variable name="BGColor" />), color-stop(100%,<actinic:variable name="BGColor" />)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, <actinic:variable name="Palette2" /> 4em,<actinic:variable name="BGColor" /> 0em,<actinic:variable name="BGColor" /> 100%,<actinic:variable name="BGColor" /> 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, <actinic:variable name="Palette2" /> 4em,<actinic:variable name="BGColor" /> 0em,<actinic:variable name="BGColor" /> 100%,<actinic:variable name="BGColor" /> 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, <actinic:variable name="Palette2" /> 4em,<actinic:variable name="BGColor" /> 0em,<actinic:variable name="BGColor" /> 100%,<actinic:variable name="BGColor" /> 100%); /* IE10+ */
background: linear-gradient(to bottom, <actinic:variable name="Palette2" /> 4em,<actinic:variable name="BGColor" /> 0em,<actinic:variable name="BGColor" /> 100%,<actinic:variable name="BGColor" /> 100%); /* W3C */
filter: progidXImageTransform.Microsoft.gradient( startColorstr='<actinic:variable name="Palette2" />', endColorstr='<actinic:variable name="BGColor" />',GradientType=0 ); /* IE6-8 */
}
width:99.7%;
margin:0 !important;
padding:0 !important;
color:<actinic:variable name="TextColor" />;
background: <actinic:variable name="BGColor" />; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzg3ODc4NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZTBlMGUwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTElIiBzdG9wLWNvbG9yPSIjZTBlMGUwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2UwZTBlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, <actinic:variable name="Palette2" /> 4em, <actinic:variable name="BGColor" /> 0em, <actinic:variable name="BGColor" /> 100%, <actinic:variable name="BGColor" /> 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#0057a4), color-stop(1%,<actinic:variable name="BGColor" />), color-stop(100%,<actinic:variable name="BGColor" />), color-stop(100%,<actinic:variable name="BGColor" />)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, <actinic:variable name="Palette2" /> 4em,<actinic:variable name="BGColor" /> 0em,<actinic:variable name="BGColor" /> 100%,<actinic:variable name="BGColor" /> 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, <actinic:variable name="Palette2" /> 4em,<actinic:variable name="BGColor" /> 0em,<actinic:variable name="BGColor" /> 100%,<actinic:variable name="BGColor" /> 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, <actinic:variable name="Palette2" /> 4em,<actinic:variable name="BGColor" /> 0em,<actinic:variable name="BGColor" /> 100%,<actinic:variable name="BGColor" /> 100%); /* IE10+ */
background: linear-gradient(to bottom, <actinic:variable name="Palette2" /> 4em,<actinic:variable name="BGColor" /> 0em,<actinic:variable name="BGColor" /> 100%,<actinic:variable name="BGColor" /> 100%); /* W3C */
filter: progidXImageTransform.Microsoft.gradient( startColorstr='<actinic:variable name="Palette2" />', endColorstr='<actinic:variable name="BGColor" />',GradientType=0 ); /* IE6-8 */
}
IE
I have adjusted the gradient so it roughly works but still not right.
Any thoughts, thanks Mash
Comment