Regarding this WIP website here: paulorwig.net

I have two minor styling issues with a ZT2 module in the sidebar2 position (top left, with module title "Zentools 2 Module"). I added some extra top margin for that image in custom.less [EDIT/UPDATE: I moved that CSS class from custom.less to custom.css and it is now referenced by a module class suffix. Issues still remain.) so that it would improve the positioning in the ZT2 module. I see these two issues (see attached screen captures):

1. 1. Home page only - there is a gray line (a divider or separator?) that extends behind the ZT2 image. How can that best be removed?
2. Services page only (main nav link) - There is more top margin for the photograph, instead of equal margins as seen on all other pages for this site. How can that best be tweaked, and so it won't affect the equal margin on all other pages?

For comparison purposes, I have published a Custom HTML module in the sidebar with the same content. The Custom HTML module displays consistently on all pages, but if possible I want to use the ZT2 module for this, so I can more easily manage content changes over time.

Thanks in advance for your help!

Hi Paul,

Can I just check are these the latest versions of the template and zentools v2?

Cheers
Paul

Hi Paul,

Thanks for your quick response. That site has the following:

• Rasa2: 1.3.3
• ZGF4: 1.3.2
• Zentools 2: 1.0.7

I may not have time to work on this today, but I had a thought about the potential cause for #1 - For the Zentools2 module, I used Joomla as the content source. I wonder if that horizontal line behind the image is part of the styling for the article title area.

I think it may be a small glitch with the css - could you just upgrade to the latest zentools 2 version

I think the issue will remain but so we are on the same page could you upgrade

Thanks
Paul

Ah, sorry, I didn't realize ZT2 was updated - I have now installed 1.0.8.

As you mentioned, both of those issues are still present.

Update: I was just thinking it might make sense to use a module class suffix for that module. So I commented out the entry in custom.less, added a class to custom.css and referenced that class as a module class suffix.

Both of the issues I mentioned in the original post are still present, but I wanted to mention the change for how the CSS is getting applied. If these minor issues can be solved by adding more css classes that are the module class suffix, that's perfectly fine with me.

I solved my #1 (1 pixel line behind sidebar image, only on home page) by adding this to custom.less:

.sidebar .moduletable {
border-top: 0px;
border-bottom: 0px;
}

I would still appreciate any help/suggestions for my #2 (extra margin or padding above sidebar image, only on Services page).

Hi Paul if you add

.sidebar ul { margin-top:0}

that should solve that issue. Thanks

Hi Anthony, thanks for your help!

I added that to custom.css but unfortunately I don't see a change in the positioning for that module on the page in question:
paulorwig.net/services

When I checked with Chrome Developer tools, that custom.css class is shown as marked out.

I am attaching screenshots (also with Chrome Developer tools) for the problem page (Services) and another page (About).

Developer tools shows that same sidebar module as being 10 pixels taller on the Services page (553px) compared the About page (543px). And the way Developer tools shows the blue highlighted overlay for that module seems to have the extra margin or padding (compared again to the About page).

I hope that helps. Thanks again for your help!

Best,

paul

Hi Paul,

Can you try increasing the specificity a notch by adding this

.sidebar .moduletable ul {margin:0}

Cheers
Paul

That was the solution - thank you again, Paul and Anthony!

Cheers

Paul