Tabbed UI Header Height

[njguy]

In the image below there is a lot of wasted space (shown in yellow)....how do you change the height of this area, I can't seem to find a setting for it

[TPeterson]

Re: Tabbed UI Header Height

Almost exactly a year ago! I have the same issue and I can't find the setting. Thanks.

[Steve Wood]

Re: Tabbed UI Header Height

The height is zero unless you put something in it. What you put inside the header determines the height. In the first post's case, the text and the far-right image determine the height.

[TPeterson]

Re: Tabbed UI Header Height

Steve, is there a way to adjust the padding above and below the text/objects to narrow the height?

[GGandhi]

Re: Tabbed UI Header Height

change to <h2> or <h3>
default is <h1>
it is the <h1> behavior you are seeing.

[Steve Wood]

Re: Tabbed UI Header Height

The 'default' depends on your style sheet setting for class mystylePage, e.g. ".GrBluePage". But that can only set the font, not the padding. And you don't want to change that class because it will affect font all over your TabbedUI. Instead, add your header text similar to this:

<div style="font-size:large;padding:2px;color:red">My Text Here</div>

And play with the font size, padding and color to suit.

If you include an image, alter your img tag as below to get back a few automatic pixels padding:

<img src="myimage.jpg" style="display:block">

And as Govindan says, using <h2> or <h3> if set to default, will add less padding than <h1>, if that is what you are using.

[TPeterson]

Re: Tabbed UI Header Height

Steve, thanks...that works great!

Govindan, thanks for your response. Although changing the header from <h1> to <h2> or <h3> did narrow the header, it only does so by making the font smaller, which I didn't want to do.

[GGandhi]

Re: Tabbed UI Header Height

yes.
i should have completed by saying
"or use <div> </div>instead"
which is what i have in mine.
good, you got it working.

[TPeterson]

Re: Tabbed UI Header Height

In case anyone's interested, I created a nice little logo using Word (using Insert, WordArt). However, since the text box created had too much top padding, I used SnagIt (I think the microsoft snipping tool would also work) and cut around the letters very tightly and pasted into Microsoft Paint so that I could save as an image (I saved as a PNG file). When I saved the Paint file, I sized the Paint white area/work space very tightly around the copied letters before saving.

Below is a picture of the result. Notice I borrowed slightly from the current version of Alpha I'm using (note: Omega is not a play on Alpha, our company is Omega Healthcare Investors).

Capture.PNG

[Malcolm]

Re: Tabbed UI Header Height

Hi all, I'm obviously a novice, but this is the problem I'm trying to sort out. Steve's post is where I'm stuck.

Instead, add your header text similar to this:

<div style="font-size:large;padding:2px;color:red">My Text Here</div>

The snippet shows script from my tabbed UI, and the text I currently use in the header. I want to reduce the size of the header text without messing with the text in the rest of the page. The question is, 'where do I insert the text Steve provides above?' I tried just pasting it above the text that's there, but the tabbed UI didn't recognize it and returned a (nice small) error message.

Can anyone guide me as to where I insert the script? I can then play with it until I get what I need.

Thanks

Malcolm

Tabbed UI Header text script.PNG

[GGandhi]

Re: Tabbed UI Header Height

hello
go to the properties of your tabbed ui and look for header text . and the you should be able to change the size without affecting other area, I am sure.

[Malcolm]

Re: Tabbed UI Header Height

Thanks for your reply Govindan, I just changed the h1 to h2 as suggested above and the font size reduced appropriately. However, the header is still too large. Another possibility might be to move the 'logout' link to be right aligned, but to remain on the same line as the 'Welcome' message. The text of my 'header' is below. Could you advise how to change the code to achieve this please?

Many thanks

Malcolm

<h2>ArrowCMS welcomes <%a5 ?session.UserFullName %></h2>
<p align=left>
<%a5 if a5ws_getcurrentuser()<>""
?"<a href=\"Logout.a5w\">Logout</a>"
end if
%>
<p></p></font>

[GGandhi]

Re: Tabbed UI Header Height

You may have put them all in div
I will try in a short while
Let you know

[GGandhi]

Re: Tabbed UI Header Height

yes,
you can use <div align="right"> </div> for the log out message, but the <h> tag automatically will add a line break. so the log out will be one line after if you can understand what i mean.
if you want to align them together in one line do not use <h> tags, use <font> tags instead, like size=4 etc.
that should work

[Malcolm]

Re: Tabbed UI Header Height

Thanks for your help - much appreciated. My eventual code/script doesn't look that pretty but the WYSIWYG page looks OK. I settled on:

<font size="4"> <p align="left">ArrowCMS welcomes <%a5 ?session.UserFullName %>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font>&nbsp;<font
size="3"><%a5 if a5ws_getcurrentuser()<>""
?"<a href=\"Logout.a5w\">Logout</a>"
end if
%> </font></p>

Thanks again.