RocketTheme - TOPIC: Missing image pattern

Welcome Guest! Login

0 items Join Now

- EgoTheme
- Rocketeer
- Posts: 77
- Thanks: 0
Missing image pattern

Posted 12 years 2 weeks ago
- Hi,
  with Firefox 20 on Mac missing background image in .rt-showcase-pattern
  This is the link: demo.gantry-framework.org/?presets=preset2
  
  See screenshot:
  
  This image is hidden for guests.
  Please log in or register to see it.
#955483

tramber91
Sr. Rocketeer
Posts: 126
Thanks: 4

Re: Missing image pattern

Posted 11 years 3 months ago

Dera all

I just see the same issue

With relevant CSS (.less) datas

.rt-showcase-pattern {
background-image: -webkit-linear-gradient(rgba(0,0,0,0.03) 2px,transparent 2px), -webkit-linear-gradient(0,rgba(0,0,0,0.03) 2px,transparent 2px), -webkit-linear-gradient(rgba(0,0,0,0.03) 1px,transparent 1px), -webkit-linear-gradient(0,rgba(0,0,0,0.03) 1px,transparent 1px);
background-size: 80px 80px, 80px 80px, 5px 5px, 5px 5px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

pattern is available for Chrome but not IE9 or Firefox

any solution ?

Thanks an happy new year

Bertrand

Gantry joomla user - template Gantry / Fresco / Affinity
http://www.aide-joomla.com/
http://www.modem-essonne.org/
http://www.ete44.fr/

#1051468

Damir
Preeminent Rocketeer
Posts: 22450
Thanks: 2679
Web Developer

Re: Missing image pattern

Posted 11 years 3 months ago

Try adding this into your custom css:

.rt-showcase-pattern {
background-image:
-webkit-linear-gradient(rgba(0,0,0,0.03) 2px, transparent 2px),
-webkit-linear-gradient(0, rgba(0,0,0,0.03) 2px, transparent 2px),
-webkit-linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
-webkit-linear-gradient(0, rgba(0,0,0,0.03) 1px, transparent 1px);
-moz-linear-gradient(rgba(0,0,0,0.03) 2px, transparent 2px),
-moz-linear-gradient(0, rgba(0,0,0,0.03) 2px, transparent 2px),
-moz-linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
-moz-linear-gradient(0, rgba(0,0,0,0.03) 1px, transparent 1px);
linear-gradient(rgba(0,0,0,0.03) 2px, transparent 2px),
linear-gradient(0, rgba(0,0,0,0.03) 2px, transparent 2px),
linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
linear-gradient(0, rgba(0,0,0,0.03) 1px, transparent 1px);
background-size:80px 80px, 80px 80px, 5px 5px, 5px 5px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!

#1051871

- tramber91
- Sr. Rocketeer
- Posts: 126
- Thanks: 4
Re: Missing image pattern

Posted 10 years 10 months ago
- Dear all
  
  sorry to answer you late, late
  
  I have tested your new code but always the same issue with IE and Firefox
  
  take care
  
  Bertrand
- Gantry joomla user - template Gantry / Fresco / Affinity
  http://www.aide-joomla.com/
  http://www.modem-essonne.org/
  http://www.ete44.fr/
#1104587
- DiXieDoN
- Newbie
- Posts: 9
- Thanks: 1
Re: Missing image pattern

Posted 10 years 4 months ago
- Hello,
  
  I have the same problem with the image-pattern.
  For which *.less file must be a custom.less file to be created?
  
  Greeting Don
#1159169

DiXieDoN
Newbie
Posts: 9
Thanks: 1

Re: Missing image pattern

Posted 10 years 4 months ago

Hello,

I think I have solved the problem.

Copy the following files:

/gantry/less/header-light.less

and

/gantry/less/header-dark.less

and paste in the same folder.

Then rename the files:

header-light.less

header-light custom.less

and

header-dark.less

header-dark-custom.less

Now you have custom header files for the light and the dark header with which you can override syntax.
I changed the following syntax from line 68 in header-light-custom.less:

.rt-showcase-pattern {
background-image:
-webkit-linear-gradient (rgba (0,0,0,0.03) 2px, transparent 2px), - webkit-linear-gradient (0, rgba (0,0,0,0.03) 2px, transparent 2px), - webkit -linear-gradient (rgba (0,0,0,0.03) 1px transparent 1px), - webkit-linear-gradient (0, rgba (0,0,0,0.03) 1px transparent 1px); background-size: 80px 80px, 80px 80px, 5px 5px, 5px 5px; background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;}

.rt-showcase-pattern {
background-image: 
	-webkit-linear-gradient(rgba(0,0,0,0.03) 2px, transparent 2px), /* For Safari 5.1 to 6.0 */
	-webkit-linear-gradient(0, rgba(0,0,0,0.03) 2px, transparent 2px), /* For Safari 5.1 to 6.0 */
	-webkit-linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), /* For Safari 5.1 to 6.0 */
	-webkit-linear-gradient(0, rgba(0,0,0,0.03) 1px, transparent 1px); /* For Safari 5.1 to 6.0 */
	background-size:80px 80px, 80px 80px, 5px 5px, 5px 5px;
	background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.rt-showcase-pattern {
background-image:	
	-o-linear-gradient(rgba(0,0,0,0.03) 2px, transparent 2px), /* For Opera 11.1 to 12.0 */
	-o-linear-gradient(0, rgba(0,0,0,0.03) 2px, transparent 2px), /* For Opera 11.1 to 12.0 */
	-o-linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), /* For Opera 11.1 to 12.0 */
	-o-linear-gradient(0, rgba(0,0,0,0.03) 1px, transparent 1px); /* For Opera 11.1 to 12.0 */
	background-size:80px 80px, 80px 80px, 5px 5px, 5px 5px;
	background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.rt-showcase-pattern {
background-image:
	-moz-linear-gradient(rgba(0,0,0,0.03) 2px, transparent 2px), /* For Firefox 3.6 to 15 */
	-moz-linear-gradient(0, rgba(0,0,0,0.03) 2px, transparent 2px), /* For Firefox 3.6 to 15 */
	-moz-linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), /* For Firefox 3.6 to 15 */
	-moz-linear-gradient(0, rgba(0,0,0,0.03) 1px, transparent 1px); /* For Firefox 3.6 to 15 */
	background-size:80px 80px, 80px 80px, 5px 5px, 5px 5px;
	background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
/*
.rt-showcase-pattern {
background-image:
	linear-gradient(rgba(0,0,0,0.05) 2px, transparent 2px), // Standard syntax
	linear-gradient(0, rgba(0,0,0,0.05) 2px, transparent 2px), // Standard syntax
	linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), // Standard syntax
	linear-gradient(0, rgba(0,0,0,0.05) 1px, transparent 1px); // Standard syntax
	background-size:80px 80px, 80px 80px, 5px 5px, 5px 5px;
	background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
*/

The same starting line 68 in header-dark-custom.less of:

.rt-showcase-pattern {
background-image: -webkit-linear-gradient(rgba(0,0,0,0.1) 2px, transparent 2px),-webkit-linear-gradient(0, rgba(0,0,0,0.1) 2px, transparent 2px),-webkit-linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),-webkit-linear-gradient(0, rgba(0,0,0,0.1) 1px, transparent 1px);background-size:80px 80px, 80px 80px, 5px 5px, 5px 5px;background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;}

.rt-showcase-pattern {
background-image: 
	-webkit-linear-gradient(rgba(0,0,0,0.1) 2px, transparent 2px), /* For Safari 5.1 to 6.0 */
	-webkit-linear-gradient(0, rgba(0,0,0,0.1) 2px, transparent 2px), /* For Safari 5.1 to 6.0 */
	-webkit-linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), /* For Safari 5.1 to 6.0 */
	-webkit-linear-gradient(0, rgba(0,0,0,0.1) 1px, transparent 1px); /* For Safari 5.1 to 6.0 */
	background-size:80px 80px, 80px 80px, 5px 5px, 5px 5px;
	background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.rt-showcase-pattern {
background-image:
	-o-linear-gradient(rgba(0,0,0,0.1) 2px, transparent 2px), /* For Opera 11.1 to 12.0 */
	-o-linear-gradient(0, rgba(0,0,0,0.1) 2px, transparent 2px), /* For Opera 11.1 to 12.0 */
	-o-linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), /* For Opera 11.1 to 12.0 */
	-o-linear-gradient(0, rgba(0,0,0,0.1) 1px, transparent 1px); /* For Opera 11.1 to 12.0 */
	background-size:80px 80px, 80px 80px, 5px 5px, 5px 5px;
	background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.rt-showcase-pattern {
background-image:
	-moz-linear-gradient(rgba(0,0,0,0.1) 2px, transparent 2px), /* For Firefox 3.6 to 15 */
	-moz-linear-gradient(0, rgba(0,0,0,0.1) 2px, transparent 2px), /* For Firefox 3.6 to 15 */
	-moz-linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), /* For Firefox 3.6 to 15 */
	-moz-linear-gradient(0, rgba(0,0,0,0.1) 1px, transparent 1px); /* For Firefox 3.6 to 15 */
	background-size:80px 80px, 80px 80px, 5px 5px, 5px 5px;
	background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
/*
.rt-showcase-pattern {
background-image:
	linear-gradient(rgba(0,0,0,0.1) 2px, transparent 2px), // Standard syntax
	linear-gradient(0, rgba(0,0,0,0.1) 2px, transparent 2px), // Standard syntax
	linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), // Standard syntax
	linear-gradient(0, rgba(0,0,0,0.1) 1px, transparent 1px); // Standard syntax
	background-size:80px 80px, 80px 80px, 5px 5px, 5px 5px; // Standard syntax
	background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px; // Standard syntax
}
*/

Now save the files.
Clear the cache of your Browser, Gantry and Less.

Now save the files.
Empty the cache of browser, gantry and Less.
Now you get the background in Showcase viewed properly.
Note:

linear gradient

is commented out because it was not compatible with all browsers together.
Older browsers still need a browser prefix
-moz- //for Firefox
-ms-, mso- // for Internet Explorer
-khtml- //for Konqueror
-o- //for Opera
-webkit- //for Chrome, Safari

I hope this is helpful for you

Don

Last Edit: 10 years 4 months ago by DiXieDoN.

#1159580

Time to create page: 0.054 seconds