By default the background is styled with a gradient overlay. It works well on darker colours however not so much on lighter ones!) The CSS simply removes this overlay.

Ciarán

Aaaaaaaaarrrrrggggghhhhh! It's working!! WTF?? I've tried so many things but not adding "!important"...
Thanks a lot. If you have several seconds to tell me why this particular piece of code has to be added, I'd like to understand!

Thanks once again for your great support.

Ok.. could you trty using the following instead...


[code type=css]body, #body_bg {
background-image: none !important;
}[/code]

Hi there,

unfortunately, this doesn't work. To get a white background, I have to use a white image. If I add your custom CSS code, nothing happens, If I delete my white jpg, I have the gray gradient everywhere as a background...

A solution could be to tell the footer to keep at the bottom of the monitor but I don't know how to do this, my attempts did'nt work either.

Any idea ?

Thanks once again,

Thank you

Try adding the following to the Custom CSS field of your templates parameters...


[code type=css]body, #body_bg {
background-image: none;
}[/code]

Ciarán

Hi!

Here: http://queback.net/multidomaines/art-de-vivre/index.php/hebergement

but you have to check it with a high resolution, at least 1920x1080.

Thanks !

Hello

Would you have a URL to an example of this issue?

Ciarán

Thanks, I was able to get the desired color.
I'd have a last demand for you, how can I get rid of the gray gradient that automatically appears at the bottom of the footer when the page page height is short:



I can't find where it comes from and I need this part to be white, like the rest of the website content background.

Thanks in advance and good evening !

Hello

For the top menu try adding the following to tthe Custom CSS field of your templates parameters...


[code type=css].hornavmenu {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ3NGQ1MyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzg1OTdhMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */
background-image: -moz-linear-gradient(bottom, #474d53 0%, #8597a1 100%); /* gradient overlay */
background-image: -o-linear-gradient(bottom, #474d53 0%, #8597a1 100%); /* gradient overlay */
background-image: -webkit-linear-gradient(bottom, #474d53 0%, #8597a1 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #474d53 0%, #8597a1 100%); /* gradient overlay */
}[/code]


For your 'read more' buttons try also adding the following...


[code type=css].readmore a, input.button, ul.pagination li, li.pagenav-prev, li.pagenav-next, button, .j51-button a, .module .j51imagelinkhover .j51button a, .module_style-box .j51imagelinkhover .j51button a {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q1YzE1MyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U2ZGE5MyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */
background-image: -moz-linear-gradient(bottom, #d5c153 0%, #e6da93 100%); /* gradient overlay */
background-image: -o-linear-gradient(bottom, #d5c153 0%, #e6da93 100%); /* gradient overlay */
background-image: -webkit-linear-gradient(bottom, #d5c153 0%, #e6da93 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #d5c153 0%, #e6da93 100%); /* gradient overlay */
}[/code]


Failing that you will have to recreate the background using images.

Ciarán

Ok, when working, gradients under IE are far from the desired colors, even for the main menu it will be problematic for my client who is kind of an artist.
I have to get the gradient from the right part of this example: http://www.queback.net/partage/ScreenShot007.png

Thanks

Hi there, sorry for the late reply, I had other websites to finish in emergency !

Thanks for the trick about the background image, I'll keep it in mind for my next job, finally, I won't use a background for this particular project.

About the gradient under IE, I'd like to have this: from d5c254 to ffffff or from d5c254 to ece19e

Thanks in advance !!

Thanks for your help, I'll try your answer asap and let you know !
Bye

Hello

For your background issue try removing the following from your templates styles.php (../templates/j51_nocturne/php/styles.php - line 242)..


[code type=css] -ms-filter: "progidXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo $this->baseurl ?>/<?php echo $bgimagefile; ?>',sizingMethod='scale')";
[/code]

As the template is largely CSS3 based there is some elements of the template that will appear differently on older browsers (in particular IE). Is there a specific colour you would like to use for your buttons and I will try creating the gradiant using a trident syntax (CSS which can be added to your CustomCSS field)?

Ciarán