Header Formatting Question

Header Formatting Question

Good Afternoon Intel XDK Team,

I am using XDK 3357, HTML5 + Cordova, and App Designer and App Framework3.  When placing the following code as custom to format the header only the background feature (turns black) is working as shown by the attached image.  The font size, color, and font family are not working.  What am I missing?  I want to be able to customize the header so all words show on the header, therefore I need to reduce the font size to 25% or even maybe 50%.  I choose  App Framework3 (not Framework 7) because I want this app for Android, iPhone, iPad, and Windows 10.  Thank you for your help in advance.

.Header1 {
background-color: black !important;
font-size: 25% !important;
color: red !important;
font-family: courier !important;
}

AttachmentSize
Downloadimage/jpeg HeaderTest.jpg6.32 KB
12 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.

Hi Ron,

The AF3 headers have <h1></h1> tags surrounding the text.

Locate the header in index.html  and try to add the style like this:

<h1 class="Header1">....

You should create a new style only for the font properties and leave the background in the current.

Hope this helps.

Regards

Diego

Good Afternoon Diego,

Thank you for your help and explanation.  I went to the Code tab and index.html and found the <h1></h1> tags, as you suggested.  I changed to the code below (which is probably bad code on my part).  As a matter of fact, when I now go the the Design tab, my text is now gone from the header and under Styles, I can no longer select my custom Header1 (it is grayed out), so that I can not change the background color if I wanted to (however, the header still shows black).  I am missing something.  Please help.  Also, is there a resource/document you can point me to so I can understand why we are separating the background and the font within App Framework3?    Thank you for your help in advance.

 <h1  class="Header1">Test1Test2Test3Test4::</h1>
                <style>h1.Header1 {
                font-size: 25% !important;
                color: red !important;
                font-family: courier !important;
                }
                </style>

 

Best Reply

Hi Ron,

I give you the steps asuming that you just created a page and placed a header control on it. I'm using the latest XDK, version 3357.

1. Select the header and at right panel, STYLES section, drop down Custom and select New.... Name the style as header_bg. At the style editor write 

.header_bg {
    background-color: black !important;
}

Save the style and you have the black background.

2. Same as above, create a new custom style for the header and name it header_font. Write the font properties as you wish, for example

.header_font {
font-size: 75% !important;
}

Save the style.

3. Go to index.html source, locate <h1>...</h1> header tags and place the font style class name as <h1 class="header_font">

Save index.html

I have no problems at design tab working this way, the header remains editable.

Good luck!

Diego

 

 

 

 

 

Good Afternoon Diego,

You are very helpful and your instructions were fantastic.  Thank you for your code and and step by step instructions because they were perfect.  I am now able to set the header the way I would like for my first app in the App Framework3 environment.

However, I still see one issue I can not quite fix.  The text still keeps getting cut-off in the header (see attached jpg).  I played with the text size but making text size anything less than 95% is too small to read and I like the text size of 110% (font-size: 110% !important;).  As you can see in the jpg, there is plenty of space on the left and right side of the words on the header, therefore I thought of playing with the margins.  However, wherever I place the margin parameter (margin: 0 !important;), nothing changes (I tried in .header_bg and did not work, so I then tried in .header_font, but that did not work either).  Please advise with steps again on best way to fix so all words show in the header while keeping the text readable in size. Thank you.

Also, I have looked all over the web and Intel's documentation (including Tips and Tricks for App Framework Getting Started - https://app-framework-software.intel.com/documentation.php#tips) and would have never figured out what you just taught me.  If you have a resource/document you can point me to so I can better understand App Framework3, including the tip you just sent me, please send me the info/URL?    

Again, thank you for all your help and have a wonderful day.

Attachments: 

AttachmentSize
Downloadimage/jpeg Text Cutoff.jpg13.61 KB

Hi Ron,

I'm glad to hear you find it useful and thank you very much for your kind comments.

Unfortunately, I have no more documentation for AF3 besides the official website and the github project (just few additional lines there),

What helps me a lot is read and search the web about jquery and LESS css handling.

Looking the code generated by XDK in index.html and thinking how to manipulate the attributes and values using javascript with jquery is the way I'm using to get things to work.

Best wishes,

Diego

Good Afternoon Diego,

I am sorry there is no documentation for a beginner like me.  It will take me many years to probably get even a percentage of your very valuable knowledge.  Thank you for your suggestions.

Please can I get your expertise for one more question regarding this header issue that I can not figure out how to fix. The text still keeps getting cut-off in the header (see attached jpg).  I played with the text size (which when at 80%, all text shows) but making text size anything less than 95% is too small to read and I like the text size of 110% (font-size: 110% !important;).  As you can see in the jpg, there is plenty of space on the left and right side of the words on the header, therefore I thought of playing with the margins.  However, wherever I place the margin parameter (margin: 0 !important;), nothing changes (I tried in .header_bg and did not work, so I then tried in .header_font, but that did not work either).  Please advise with steps again on best way to fix so all words show in the header while keeping the text readable in size.

I am sorry to be such a bother, but I am learning a lot and am documenting your knowledge for my own future reference and to help others that I am showing Intel XDK too.

Thank you in advance and have a wonderful weekend.

 

Attachments: 

AttachmentSize
Downloadimage/jpeg Text Cutoff.jpg13.61 KB

Hi Ron,

Add these two lines to the header_font style:

left: 0% !important;
width: 100% !important;

Let me know how it goes.

Regards,

Diego

Hello Diego,

Perfect idea.  Thank you.  That worked.  

I accidentally placed in header_bg first which was my mistake, of course.  After putting in header_font, like you stated, it worked perfectly.  You are incredible.  Thank you for your valuable knowledge and like I stated I am documenting to help others.  

Thank you for everything and enjoy the rest of your weekend!

Sorry, I forgot that I also changed index.html removing some lines from the header:

                <div class="widget-container wrapping-col single-centered"></div>
                <div class="widget-container content-area horiz-area wrapping-col header-left"></div>
                <div class="widget-container content-area horiz-area wrapping-col header-right"></div>

 

These lines are below header <h1></h1>, try removing them.

Good Evening Diego,

I am now good to go  (A big Thank You!!!).  I did not need to remove those lines, I had put your code in the wrong customizing area since I thought I was adjusting the background header.  Thank you for all your time and help.  We can now close this topic as you have more than completed/fix this issue for me.

I also selected one of your earlier responses as "The Best Reply".  

You are a wonderful teacher with your step by step instructions.

If you ever need me to fill out a survey, especially once I get an app out in multiple app stores (based on your help, of course), I would be love to fill out a survey.

Have a safe and relaxing weekend.

Thanks Diego

I had the same problem with the header label text width. Your solution worked a treat :)

Much appreciated

 

Leave a Comment

Please sign in to add a comment. Not a member? Join today