Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Template CSS not displaying properly for Zentools2

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi there
I have been experimenting with the new Zentools2 on my TEST site before implementing changes on actual website. My problem is that Zentools2 is not using my custom styling from Newstream2 template. It is displaying the wrong colours.

My layout style is set to Filter.
I am using Joomla Tags as the Filter Type.
I have Navbar style set to Buttons.

Your documentation about "Filter using the button style" says the style is inherited from your template.

I can't work out where the styling is coming from. It doesn't look anything like the example in your documentation. On my test website it is not even displaying Buttons for all tags, only the active one.

As well as the styling for Zentools2 not displaying the correct colours, it is also doing something strange with the styling for entire webpage. On test site it has replaced background for page to pure white instead of off-white. You can see what I mean if you compare test and live sites linked below.

Here is a link to test website page using Zentools2
www.moviestudiozen.com/msz_test1/free-tutorials/sony-vegas-pro

For comparison, here is the same page on my LIVE website using Zentools1
www.moviestudiozen.com/free-tutorials/sony-vegas-pro

Regards
Derek.
  • Derek Moran's Avatar
  • Derek Moran
  • 12 Month Developer
  • 34 posts
  • Karma: 0
Last Edit: 8 years 9 months ago by Derek Moran.
The administrator has disabled public write access.
Hi Derek,

.zt-filter-list.btn ul li.active span {
background: #b64926;
border-color: #b64926;
}

from zentools.min.css:3
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: Derek Moran
.btn:hover, .btn:focus, .btn.focus {
color: #ffffff;
text-decoration: none;
}

bootstrap.css:2560
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: Derek Moran
body .zt-filter-list.btn ul li.active span {
background: transparent;
border:0 ;
color:red
}

.btn:hover, .btn:focus, .btn.focus {color: #000;}

For example to override them

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: Derek Moran
You could also style elements in the zentools2 module itself but depending on how you are using zentools1 you many want to use the custom.css file

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thanks for replies, but now I feel more overwhelmed about what to do, so I am going to re-phrase my questions and start again. I would like to understand more clearly how Zentools2 works, when it comes to customizing the Theme. I have read all the documentation.

In the Theme tab there are controls for Theme panel, Item Style, Shadow Style, Overlay Style, Lightbox theme, Breakpoints & Masonry Style.

All I want to do is customize the Navbar so it looks the similar as what you have shown as an actual example in your documentation here:
zentools2.joomlabamboo.com/zentools-layout-styles/filter
Filter using the button style

When I installed Zentools2 and set to Filter using the button style, I expected it would look similar to your documentation, not something different with non-active buttons only displaying as text. I am guessing this is because I am using Newstream2 and that is how buttons are handled.

In the Theme tab controls for Zentools2, the only control that seems to affect the Navbar is Theme panel/Secondary, which only changes the background colour for Active buttons. It would be great if ALL styling for the Navbar could be controlled inside the Theme tab.

If I can control non-active Button style with the Theme of my websites template, which settings in T3 Theme Magic control Buttons ?

If everything I have just written above is irrelevant, can you please just tell me exactly which files I have to modify manually to create the button style I would prefer.

This the look I would like:
All non-active buttons background colour = #0096ff
All non-active button Text colour = #ffffff
Active buttons background colour = #0000ff
Active buttons Text colour = #ffffff

Regards
Derek.
  • Derek Moran's Avatar
  • Derek Moran
  • 12 Month Developer
  • 34 posts
  • Karma: 0
Last Edit: 8 years 9 months ago by Derek Moran.
The administrator has disabled public write access.
Don't worry about anything I said in last reply. I have been able to change styling for Buttons in the Navbar after mucking around.

*******UPDATE-Discovered problem-posted solution in new message below*******
I do have ONE problem left which I can't work out and would like some help with.

Zentools2 is doing something to the Styling for entire webpage it is published to. There seems to be some type of conflict which is changing my default background colour from #f3f3f3 to #ffffff.

Here is an example of how my webpages should look like. On a normal webpage, only the Menu bar and top Banner use pure white #ffffff.
www.moviestudiozen.com/msz_test1/free-tutorials/sony-vegas-pro/531-how-to-burn-dvd-bluray-sony-vegas-pro

On page where Zentools2 is located, everything in background is now pure white #ffffff
www.moviestudiozen.com/msz_test1/free-tutorials/sony-vegas-pro

Please compare both pages and see what I mean.

Derek.
  • Derek Moran's Avatar
  • Derek Moran
  • 12 Month Developer
  • 34 posts
  • Karma: 0
Last Edit: 8 years 9 months ago by Derek Moran.
The administrator has disabled public write access.
I did some experimentation and found the element that was disturbing Styling for pages with Zentools2.

File located at media/mod_zentools2/css/zentools.min.css
Line 3 .clearfix float:left - this was making all background pure white.
Edited to .clearfix float:unset - this returned page to normal
  • Derek Moran's Avatar
  • Derek Moran
  • 12 Month Developer
  • 34 posts
  • Karma: 0
The administrator has disabled public write access.
Thanks for the information - I'll pass it on to Anthony

Are you all ok now?

Cheers and thanks again
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: Derek Moran
Thank you very much for your assistance Paul.
Your first replies definitely helped point me in the right direction and I have now published Zentools2 to my live website.
www.moviestudiozen.com/free-tutorials/sony-vegas-pro
  • Derek Moran's Avatar
  • Derek Moran
  • 12 Month Developer
  • 34 posts
  • Karma: 0
The administrator has disabled public write access.
Thanks I'll update anthony this evening

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers