Must Read: New Unified System is officially live Must Read     |   6 Templates Updated (27 April 2018) Read more

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.

Mo

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

Hi

On onboardtraining.branchoutwebsites.com I'm using module positions Top1 and Top2 in the following arrangement:

Screenshot2017-08-1712.27.08.png



The problem is the module on the left (the logo) is too wide and is taking up more space than 3 of the possible 12 available. I'd really like it to look something like this:


Screenshot2017-08-1712.26.18.png


Any idea why the module on Top1 keep making itself wider? They are both Zentools Modules with the Grid layout.
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
Hi

Can you try removing the inline styling for the font size and see if that works?

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
No it doesn't make a difference. It's the module in Top1 position that is appearing larger than I need. I've removed the styling anyway just so you can see.
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
This is what I see

2017-08-17_17h29_57.png
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Yes - the logo won't go smaller. I want it to take up about the amount of space in the screen shot I sent above. I've tried changing the size of the module position in the template to 2 or 3 out of 12, with the Top2 module taking up the rest. Whatever I do it stays the same size. I tried reducing the size of the image in Zentools but didn't get anywhere.
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
Hi There,

You have two modules at the top and each are 6 in width at the moment

Are you setting it as 3 and 9 in template manager?
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Here is my template manager currently:


Screenshot2017-08-1718.33.29.png


I'm publishing these modules in the Top1 and Top2 positions.
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
Are other settings changing when being saved?

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Yes
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
If you open a ticket I will take a look

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

I tried the template controls for the blue and red text lines (I have one as the title and now as the intro text) but couldn't figure out how to make one red and one blue for that row - that's why I used inline text which has now been removed, resulting in the small text you can currently see.

As in the ticket, the main issue is the modules not resizing.
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
Hi

When viewing the site I can see the front end is 3 / 9 position width

You will need to use custom css to add the colours and the font size

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Do you know of a tutorial for changing css? I'm so not there with it yet.

It's the OnBoardTrainingScotland.co.uk part that I want to be dark blue, that's all. The second row can stay red.
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
first I'd remove all inline styling as it really isn't good to use with colours and alignment

The template has this style already

#topwrap p {
color: #e31429;
}

with paragraph you want to be blue instead add in the html

<p class="blue">OnBoardTrainingScotland.co.uk</p>
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
and in the custom css add

#topwrap p.blue {color:#035495;}
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thanks - so what's the best was to increase text size for this module? If I change it using the text editor then the colour changes introduced by the css I just added disappear.
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
Adding font sizes by an editor is something to be avoided where possible

/* Add your custom styles here */
#topwrap p {font-size:4em; line-height:1}
#topwrap p.blue {color:#035495; margin-top:.25em}

something along these lines instead
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thanks. This is making sense. Should I make it bold using css too?
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
font-weight: bold;

you would add to #topwrap p

but you would need to adjust font size and other styles maybe

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thanks. I'll have a play around. The top blue looks great, the red also needs to go bold. I guess that needs css too.
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.

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

Happy Campers