Announcement

Collapse
No announcement yet.

Top bar of the page

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Top bar of the page

    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:
    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 */
    }
    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
    Mash

    #2
    I managed to sort this, I set up a new div to sit the shopping links in.

    Then in the style sheet, I added it and gave it a min-height plus a background. I then <!-- --> round the unwanted code.

    Works a treat.

    M
    Mash

    Comment


      #3
      The bar at the top of the Smart layout is made by the grad background on body. This is fine with default Smart as the Wrapper is 100% wide, but if you want a centered site with the wrapper say 1280px you got that odd graddy overlap thing.

      css
      Code:
      #wrapper
          box-shadow: 0 0 60px rgba(0, 0, 0, .2);
          position: relative; {
        width:100%;
        max-width: 1280px;
      etc
      Take the grad out of body:
      Code:
      body {
      	width:99.7%;
      	margin:0 !important;
      	padding:0 !important;
      	color:<actinic:variable name="TextColor" />;
      	background: #ffffff;
      	}
      Add a new div inside <div id="wrapper"> so the top looks like:
      Code:
      	<div id="wrapper">
      	<div class="pagetop">
      And the bottom:
      Code:
          </div><!-- pagetop -->
          </div><!-- wrapper -->
          
      	 <actinic:variable name="AJAXFunctions" />
           <actinic:block if="%3cactinic%3avariable%20name%3d%22GoogleAdwordsEnabled%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22GoogleAdwordsMarketing%22%20%2f%3e%20%21%3d%20%22%22" >
      		<actinic:variable name="GoogleAdwordsMarketing" />
          </actinic:block>
      </body>
      Then add the gradient to the pagetop css:
      Code:
      .pagetop {/* 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, #8F919F 5em, <actinic:variable name="BGColor" /> 5em, <actinic:variable name="BGColor" /> 11%, <actinic:variable name="BGColor" /> 100%); /* FF3.6+ */
      	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#8F919F), color-stop(1%,<actinic:variable name="BGColor" />), color-stop(11%,<actinic:variable name="BGColor" />), color-stop(100%,<actinic:variable name="BGColor" />)); /* Chrome,Safari4+ */
      	background: -webkit-linear-gradient(top, #8F919F 5em,<actinic:variable name="BGColor" /> 5em,<actinic:variable name="BGColor" /> 11%,<actinic:variable name="BGColor" /> 100%); /* Chrome10+,Safari5.1+ */
      	background: -o-linear-gradient(top, #8F919F 5em,<actinic:variable name="BGColor" /> 5em,<actinic:variable name="BGColor" /> 11%,<actinic:variable name="BGColor" /> 100%); /* Opera 11.10+ */
      	background: -ms-linear-gradient(top, #8F919F 5em,<actinic:variable name="BGColor" /> 5em,<actinic:variable name="BGColor" /> 11%,<actinic:variable name="BGColor" /> 100%); /* IE10+ */
      	background: linear-gradient(to bottom, #8F919F 5em,<actinic:variable name="BGColor" /> 5em,<actinic:variable name="BGColor" /> 11%,<actinic:variable name="BGColor" /> 100%); /* W3C */
      	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8F919F', endColorstr='<actinic:variable name="BGColor" />',GradientType=0 ); /* IE6-8 */
      }
      And there you go...
      Jonathan Chappell
      Website Designer
      SellerDeck Website Designer
      Actinic to SellerDeck upgrades
      Graphicz Limited - www.graphicz.co.uk

      Comment


        #4
        Hi Jonathan,

        Thank you for your post, apologise for not responding, I didn't get an email notification that someone had responded.

        I will try your suggestion, thanks for your time.

        Take care M
        Mash

        Comment


          #5
          Originally posted by mash View Post
          ...Thank you for your post, apologise for not responding, I didn't get an email notification that someone had responded....
          There were some issues recently re not getting notifications. If you unsubscribe to the thread and then re-subscribe again it should work.

          Comment

          Working...
          X