Hi

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




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:




Any idea why the module on Top1 keep making itself wider? They are both Zentools Modules with the Grid layout.

Hi

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

Cheers
Paul

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.

This is what I see

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.

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?

Here is my template manager currently:




I'm publishing these modules in the Top1 and Top2 positions.

Are other settings changing when being saved?

Cheers
Paul

Yes

If you open a ticket I will take a look

Cheers
Paul

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.

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

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.

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>

and in the custom css add

#topwrap p.blue {color:#035495;}

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.

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

Thanks. This is making sense. Should I make it bold using css too?

font-weight: bold;

you would add to #topwrap p

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

Cheers
Paul

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.