Joomla Templates Club 406,261 posts

[zdmdesignz Friend zdmdesignzJoin date: October 2009Posts: 122Downloads:0Uploads:25 Thanks: 54 Thanked: 11 times in 1 posts]

#192952

Hello,

I’m really needing to change the background color of the tiles after they lift and rotate to a different color than black. I don’t see this setting anywhere in template magic. How is this achieved?

Also, is the current menu item supposed to have a black background when the Blue template style is selected? It looks very out of place and dark in context with the rest of the template.

Thank you.

Screenshot of Menu:

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#515381

So that I can try to best assist you, please provide the url of the site you’re working on,
as well as set “Optimize CSS” to “No” within your Template Manager–General settings.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#515391

For the large tile . . . .

Within file path –> /templates/ja_fixel/css/themes/blue/template.css
at line 5389, you will see the following:


.fixel-grid .items.image.rotateY article .back {
-moz-box-sizing: border-box;
background: none repeat scroll 0 0 #000000
display: block;
height: 100%;
padding: 40px;
transform: perspective(800px) rotateY(180deg);
width: 100%;
}

Note the “background” property – currently indicating the background color code for black, or #000000
Simply change the color code to whatever you want – for example . . .


.fixel-grid .items.image.rotateY article .back {
-moz-box-sizing: border-box;
background: none repeat scroll 0 0 #222222
display: block;
height: 100%;
padding: 40px;
transform: perspective(800px) rotateY(180deg);
width: 100%;
}

Likewise, for the smaller tiles, look to file path –> /templates/ja_fixel/css/themes/blue/template.css
at line 5162, you will see the following:


.fixel-grid .items article .item-desc {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.75);
bottom: 0;
color: #FFFFFF
left: 0;
padding: 15px;
position: absolute;
right: 0;
vertical-align: middle;
}

Again, simply change the color code to whatever you want – for example . . .


.fixel-grid .items article .item-desc {
background: none repeat scroll 0 0 #222222
bottom: 0;
color: #FFFFFF
left: 0;
padding: 15px;
position: absolute;
right: 0;
vertical-align: middle;
}

For several resources for color hex codes –> SEE HERE

Hope That Helps

[zdmdesignz Friend zdmdesignzJoin date: October 2009Posts: 122Downloads:0Uploads:25 Thanks: 54 Thanked: 11 times in 1 posts]

#515416

Hi Tom,

Thanks for your quick response and help. Much appreciated 🙂

It looks like we’re almost there. The changes you suggested did indeed make a dent into the issue, but there still seems to be some remnant issue where the black remains. I’ve updated my site using the changes you included, but you’ll notice that the tile that rotates on the X axis still has black as the background. Also, the tiles that lift show black for a moment in transition before eventually changing to blue. Any ideas?

Also, do you have any ideas about removing the black background for the mainmenu selected item on the J! Pages > 404 Page?

Best,
Zechariah

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#515782

For that one grid that’s still black, try this . . .

Within file path –> /templates/ja_fixel/css/themes/blue/template.css
at line 5468, change the background color to your hex code for blue – as follows:


.fixel-grid .items.image.rotateX article .back {
-moz-box-sizing: border-box;
background: none repeat scroll 0 0 #265299
display: block;
height: 100%;
padding: 40px;
transform: perspective(800px) rotateX(180deg);
width: 100%;
}

That should fix that problem.

I am not entirely certain why the other grid displays temporarily black before turning to blue.
I am forwarding this issue onto the JA Development Team to take a look at and provide further feedback on.

1 user says Thank You to TomC for this useful post

1. zdmdesignz

[Author]

Posts