stylesheet help please!

[fleetwood]

I know I shouldn't give up this easily, but I am getting to that point where I am getting frustrated, so here goes!

I am using Smart Responsive, and trying to clean up the look. Trying to get rid of the gradient backgrounds in the header area, and the button look to the top nav bar (many searches through forum help have shown that these really aren't popular, as they look so old fashioned, but it seems to be awfully difficult to find the styling of them).

I've searched through the style sheets multiple times, for 'header-area', 'navigation-bar', 'mega-menu' and 'menuflex', and commented out loads of different styling attributes (most of the references to background that I could find), but still the gradient background, and button styling remains. Not too sure what 'background:-webkit-gradient' and the like mean, but have tried commenting out that too

Please please please - where do I look?

I just want rid of the gradient background, and have the top nav as a simple horizontal list of links, not any naff buttons (so getting rid of the button borders would help, but I can't find where they come from)

Site under development is http://www.yourcomicshop.co.uk


Thanks

[Goz]

To remove the gradient background you need to edit the Current Stylesheet from within the design tab and look for .header-area - this is about line 96 :

.header-area {
    border:2px solid #ffffff;
    <actinic:block if="%3cactinic%3avariable%20name%3d%22Wiz4%5fSectionPageList%22%20%2f%3e%20%21%3d%20%22Main%20Menu%20Bar%22%20AND%20%3cactinic%3avariable%20name%3d%22Wiz5%5fBrochureList%22%20%2f%3e%20%21%3d%20%22Main%20Menu%20Bar%22" >
        border-bottom:1px solid #c6c6c6;
    </actinic:block>
    background: #c6c6c6; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M2YzZjNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #c6c6c6 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c6c6c6), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #c6c6c6 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #c6c6c6 0%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #c6c6c6 0%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to bottom, #c6c6c6 0%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c6c6', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}

Remove all the lines starting with the one after

background: #c6c6c6; /* Old browsers */

but leaving the final "}" in place.


To remove the button-like styling edit the Current Stylesheet and search for #mega-menu ul li - it should be around line 189 (assuming you've removed the code above). It will look like :

#mega-menu ul li, #mega-menu ul li:hover, #brochure-menu li, #brochure-menu li:hover {
    border-left:1px solid #cccccc;
    border-right:1px solid #cccccc;
    box-shadow:inset 0px 0px 0px 1px #ffffff;
}

Just remove "#mega-menu ul li, #mega-menu ul li:hover, "

You can then also remove the background and borders. To do this, edit the Current Stylesheet and look for .navigation-bar - it should be around line 158

From this class you can remove all the elements relating to the gradient (similar to above) and remove the border and box shadow - have a play.


Hope that helps (and I've understood what you wanted!)

[fleetwood]

Thanks for the detailed reply Andrew, but I had tried all of that prior to posting, which is why I was started to get a bit frustrated.

I thought that I must be missing something obvious somewhere.

It turns out that the problem lies in the preview window in SD.

After making those changes to stylesheet, the gradient and button borders were still showing in the preview (and still are), but when uploaded, they have had the desired effect on the site.

I have experienced this before, and am sure I remember reading why this was a long time ago, but cannot remember now. I assume that either the browser set up used to generate the preview in the software, isn't the same as the browser used to view the website, or, there is something I need to do to reload the now ammended stylesheet on my local machine, so that it correctly displays my local preview

Anyways, many thanks - back on track again