Good Morning,

I'm trying to figure out how to change the Slideshow Top Distance in the New Lifestyle Template. I want to increase the number slightly so that the bottom border of the nav area is not covered by the Slideshow. I've looked at the template but it appears that the current number of 148px is set outside the template.css.

Thanks for the help.

Have a link for the site?

Thanks
Paul

Here it is Paul - forwardthinkingwebsolutions.com/~rollingh/

Now when you look it, I have actually gone into the template.css and have changed the following line by adding the top:150px !important but feel there is an easier way of doing this.:

Hi

That looks ok but are editing the wrong file
You need to leave template.css coding alone and instead override it in the custom.css

If you were to update the template or compile LESS to CSS it would disappear

Cheers
Paul

... thus the reason that I keep messing up some things ... still learning ...

When using the custom.css do I need to ensure that the !important is used or does this automatically override the template.css files as I continue to understand CSS?

It depends

Most css you will just need to match the specificity of the css e.g. usng same id, class or tag (the selector) and then add the property and value you want to override

But in this case you are overriding an inline style which will require an important

#slideshowwrap {top:150px !important ;}

Inline styles take priority over external styling hence the need for the important

Cheers
Paul

By matching styling - being exactly the same selector wise the css that is listed last in the list of css files is rendered

The custom.css file if you view the source is further down the file stack list - so this file overrides template.css

Cheers
Paul

This article covers the content above

coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Cheers
Paul

Thanks again Paul. I feel like I've made some great strides this past week and am picking up momentum as I transition into this full-time.

No problem and enjoy your weekend sounds like you earned it

Cheers
Paul

Hi Paul,

I'm still having difficulties with the logo being hidden by the slideshow at www.rollinghorse.ca

- logo disappears for a smaller screen size
- it appears that this happens as soon as the Responsive Menu appears

Hi Steve,

Can you try this

@media (max-width:1030px) {
#slideshowwrap {top:inherit !important}
}

Cheers
Paul

You're a genius. Thanks again. I even put the additions in the custom.css.

FYI - I've been doing some great reading on CSS but obviously the @media is an area that I need to work on as well.

No problem

For the reading you need to look for media queries

Cheers
Paul