Header text in Mobile outside headers

theomolenaar · 2016-01-25 05:43:26

I put it in this forum, but it is the same in autoindex or galleries.

The text that is in the header spreads outside the header area for mobile (or small screens). You can see the subtitle below the menu's. And even the title if I make the screen small enough. Only if the Screen is very small (near to the minimum side on my PC) the fonts are changed and it fits again...

Both Chrome and Firefox.

http://test.theomolenaar.nl/

Last edited by theomolenaar (2016-01-25 05:44:18)

rod barbee · 2016-01-25 10:31:10

I think you have a couple of options here.
The layout your using for the Identity Plate role is Profile. That's really intended for a smaller (narrower) graphic logo as Matt shows here:
http://ce4.theturninggate.net/docs/doku … image_text

The height of the graphic seems to control the height of the masthead container area. So a taller and narrower (a square, perhaps) graphic could help. This gives more room for the text.
You could also use a smaller font for the heading text.

Another thing to consider is the text you're using in the Heading field. This gets the H1 tag and is very important for SEO so it should probably be your name or the name of the site. But that's up to you.

Another option is to create graphics to be used in a dynamic masthead. Matt has a tutorial from the CE3 documentation here:
http://ce3wiki.theturninggate.net/doku. … _mastheads

and I've got a post that updates that for CE4:
http://ttg-tips-and-tricks.barbeephoto. … heads-ce4/

theomolenaar · 2016-01-25 20:35:16

Thnxs for the suggestions

With your help I made the tekst in the heading the album name. That is essential. I do not want my name or my site's name as header. I want the album name as H1 and in the header. Because it is so important for SEO. And for the visual side. In my old site I had to make a identity plate per album. That was a lot of work. It also does not work with publisher. I could try the dynmic masthead but only in combination with the profile layout.

I could leave out the subtitle and make the text a bit smaller, but that does not help much. Also I do not very much want to change the logo.

The funny thing is that when you make the layout very narrow the lettering suddenly gets smaller. It would be nice if that happened in more steps or earlier.

Because none of the options seem workable for what I want... Losing publisher and making multiple identityplates per album, Changing the H1 into something else. Smaller font might help but is visually not appealing.

Is there a way to dynamically change the H1 size in the CSS ????

rod barbee · 2016-01-25 22:40:37

I'd forgotten that you were using the album title as the page title.

you could try using a media query to adjust the size of the H1 element inside the Masthead. Use a different size for different devices.

theomolenaar · 2016-01-26 02:13:59

I guess I'll have to do a little of everything maybe,

What I do not understand is that the logo suddenly gets a lot smaller when the width reaches a certain amount (like 350 or so. Until then a the logo remains the same but the title dissapears starting at approx 600 The contents get scaled but the title seems to stay to the right of the screen (so invisible).

A media query sounds like a good idea. Found that in Mats documantation you mentioned above. So I can change the size there. Could I also set the subheader to blanks ? Wil lbe a tough job and a lot of experimenting for someone who does not know any code (newer then Cobol) But I'll give it a try

Thxs

rod barbee · 2016-01-26 02:19:31

Could I also set the subheader to blanks ?

You should. Just find the right selector and set it to display: none; at the media query width where you want it to disappear.

rod barbee · 2016-01-26 02:54:06

theomolenaar wrote:

Wil lbe a tough job and a lot of experimenting for someone who does not know any code (newer then Cobol) But I'll give it a try

with all the customizing you've been doing, it would be a good idea to learn some css. I found CSS:The Missing Manual very good.
You can also look into online resources like Treehouse or Lynda.com

theomolenaar · 2016-01-26 04:28:12

Thxs I'll check it out...

theomolenaar · 2016-01-27 22:24:30

I have looked into it a bit. Matts dynamic masthead seems to take over the header entirely. But I have changed the phplugins to insert the title. I guess if I implement Matsts solution the code will never get there. Also there is a reference to an img in that code and also the size.

It all gets to complicated for me as I do not know how the CSS, php and phplugins files interact. I have checked, but I do not know how to 'override' the image in this code through css. Or could I fill 'profile image clearfix' in the CSS?

if ((G_STYLE == 'CE4-GALLERY' || G_STYLE == 'CE4-AUTOINDEX' || G_STYLE == 'CE4-MOBILE')AND (G_PATH != 'GALLERIES'))
{
echo '
<div id="masthead" class="block-id masthead clearfix">
<div class="mantle clearfix">
<div class="core clearfix">
<div id="profile-image" class="profile-image clearfix">
<div id="profile-icon" class="profile-icon clearfix">
<a href="/"><img alt="Pictures.theomolenaar.nl - A visual blog" src="/galleries/lib/images/identityplate.png" width="402" height="90" /></a>
</div>
<div id="profile-labels" class="profile-labels clearfix">

         <h1><span><a href="#">' . ALBUMTITLE . '</a></span></h1>
<h2><span>a visual travel blog</span></h2>

</div>
</div>
</div>
</div>
</div> 
';
return false; // replaces normal mastead for CE4 Gallery pages
}
return true; //Pages not CE4-Gallery or autoindex use normal masthead
} //END

What I did noticed that somewhere in all the code the header image gets 'shrunk' (below 360) and the H1 gets smaller..

Last edited by theomolenaar (2016-01-27 22:55:02)

rod barbee · 2016-01-27 23:13:15

I have looked into it a bit. Matts dynamic masthead seems to take over the header entirely.

Yes. I had forgotten that you were sending the album name to the masthead. The dynamic masthead solution is for sites that use the same masthead throughout.

Also there is a reference to an img in that code and also the size,

Several images, in fact. The idea is to dynamically serve a different image to the page depending on the width of the browser.

It all gets to complicated for me as I do not know how the CSS, php and phplugins files interact.

phplugins is a php file. Any custom css is in a separate file. CSS styles the html elements.
The phplugins file is used to insert or change elements on the page. Matt has set up the plug-ins so that they refer to the phplugins file while processing and use the functions found there to add/remove from the normal page.

I have checked, but I do not know how to 'override' the image in this code through css.

The dynamic masthead code uses background-image, which is a css property, applied to the masthead element. The code you're using doesn't. I don't know of any way to change this image via css.

The only easy to implement thing I can think of is to try to use your setup in the way Matt has designed it. It's meant to sort of mimic what the profile image on a Facebook page does: a smaller, square image.

Or you could try to rewrite the html to include a background image in one element (probably a new one you'd have to create) of the masthead. And then serve that element a different background image according to browser width.

If I was to try this, I'd start by removing and replacing this section:

<div id="profile-icon" class="profile-icon clearfix">
                <a href="/"><img alt="Pictures.theomolenaar.nl - A visual blog" src="/galleries/lib/images/identityplate.png" width="402" height="90" /></a>

I'm thinking it would need new html and its own css (to keep the image on the left of the Title area).

Like I said above, if you want to get into this level of customization, you're going to have to get your hands dirty learning some code.

theomolenaar · 2016-01-28 03:08:34

If I look at Matts code there is a .logo that is set.

html .logo etc.

So I removed the lines and tried to replace .profile-icon like matt did:

html .profile-icon {
background-image url(/tm-themes/oog.png);
height: 90px;
}

That does not work. If I do not replace ,profile-icon but profile-image the test image appears, only as background and repeated...

It also does not work if I leave out 'background-image'.. So there is something different in profile-icon as compared to profile image. Icon is the part left where te image should be. I tried to find it with the inspect element feature of Chrome, but did not come up with something.

rod barbee · 2016-01-28 03:54:25

So there is something different in profile-icon as compared to profile image

the div with the ID profile-image (#profile-image) contains both the div with the ID profile-icon (#profile-icon), which is where the image is, and the div with the ID profile-labels (#profile-labels), which contains the title and sub title.

Seems like one main problem is that the html includes your identity plate image inside the profile-icon div. I don't know that you can just apply a background image to the profile-icon div via custom css without also removing the markup containing that image.

So instead of this, which is what the code looks like now:

<div id="masthead" class="block-id masthead clearfix">
    <div class="mantle clearfix">
        <div class="core clearfix">

    <div id="profile-image" class="profile-image clearfix">
    <div id="profile-icon" class="profile-icon">
    <a href="/"><img alt="Pictures Theo Molenaar" src="http://test.theomolenaar.nl/wp-content/themes/CE4_WORDPRESS_TM_V1/lib/images/identityplate.png" width="402" height="90" /></a>
    </div>
    <div id="profile-labels" class="profile-labels clearfix">
 
        <h1><span><a href="/">Pictures Theo Molenaar</a></span></h1>
 
        <h2><span> a visual blog</span></h2>
 
    </div>
    </div><!-- #profile-image -->

it might need to look something like this:

<div id="masthead" class="block-id masthead clearfix">
    <div class="mantle clearfix">
        <div class="core clearfix">

    <div id="profile-image" class="profile-image clearfix">
    <div id="profile-icon" class="profile-icon">
    <a href="/"></a>
    </div>
    <div id="profile-labels" class="profile-labels clearfix">
 
        <h1><span><a href="/">Pictures Theo Molenaar</a></span></h1>
 
        <h2><span> a visual blog</span></h2>
 
    </div>
    </div><!-- #profile-image -->

you'll need to use phplugins to replace the existing masthead with your own structure. Use the ttg_header_masthead hook for this
http://ce4.theturninggate.net/docs/doku … r_masthead

and you'd need custom css for this selector (just a guess):

html #masthead #profile-icon a

and then create media queries targeting desktop, tablet, and phone sizes to add rules for height, width, repeat (no-repeat), and a background image.
You'll probably want to create three different background images (maybe six, if you want retina ready logos) for this.

All this is just off the top of my head and is untested. So there may be an easier way that I'm not seeing.

theomolenaar · 2016-01-28 04:38:36

Apart from not heaving clearfix afeter profile-icon and the href that was what I had. I modified it. But it still does not work

I thought we already had replaced the existing masthead with this code:

function ttg_header_masthead( $style, $path) {
if ((G_STYLE == 'CE4-GALLERY' || G_STYLE == 'CE4-AUTOINDEX' || G_STYLE == 'CE4-MOBILE')AND (G_PATH != 'GALLERIES'))
{
echo '
<div id="masthead" class="block-id masthead clearfix">
<div class="mantle clearfix">
<div class="core clearfix">

<div id="profile-image" class="profile-image clearfix">
<div id="profile-icon" class="profile-icon">
<a href="/"></a>
</div>
<div id="profile-labels" class="profile-labels clearfix">

         <h1><span><a href="#">' . ALBUMTITLE . '</a></span></h1>
<h2><span>a visual travel blog</span></h2>

</div>
</div>
</div>
</div>
</div> 
';
return false; // replaces normal mastead for CE4 Gallery pages
}
return true; //Pages not CE4-Gallery or autoindex use normal masthead
} //END

I can see this is invoked. Only to get the profile-icon filled in the custom css does not work. I can see the height is taken from the custom-Css, so it is recognized. But not the image (path is correct, i could see when i changed it into bg-image)

If I can get an image in the profile icon the rest looks quite logical if I look at Matts explanation.

CSS:

html .profile-icon: url(/tm-themes/oog.png);
height: 90px;
}

html #masthead #profile-icon a

Last edited by theomolenaar (2016-01-28 05:41:39)

rod barbee · 2016-01-28 05:31:03

html .profile-icon {
   image url(/tm-themes/oog.png);
    height: 90px;
    }

your code has the wrong syntax for that. Try:

html .profile-icon {
   background-image: url(/tm-themes/oog.png);
    height: 90px;
    }

theomolenaar · 2016-01-28 05:59:05

Great

I had noticed the error (changed it in the post, was trying variants). Yours I did not try..

When I tried it it did not work. Plus the height no longer came from the custom CSS. But when I removed the #masthead #profile-icon i put in front it worked !!

Only multiple times, but í'll have to set the width I guess this image is smaller..

So I can make three or so images and also change the H1, H2 in the media. That should solve ir

Thanks a lot..

ps I could not have done it without the Chrome element inspection. I do have some experience in CSS (mainly trail and error)

rod barbee · 2016-01-28 06:28:56

Using the inspector is pretty much required skill if you want to do some customizing

rod barbee · 2016-01-28 06:33:17

looks like your original identity plate image is still showing. That would be because the html for the image is still there.

theomolenaar · 2016-01-28 06:54:37

Only with a smaller image the text stays on the same place... So it does not really help...

theomolenaar · 2016-01-28 07:04:06

rod barbee wrote:

looks like your original identity plate image is still showing. That would be because the html for the image is still there.

Yes, I know. That is not a problem (yet). Only on the homepage and the galleries (that I wil not use). The home page is a Wordpress page. So also a different template. It is the not in the phlugins code either. Strange that is is the small version.

I am concentrating on the albums in the destinations. The rest will (I hope) be copy...

rod barbee · 2016-01-28 07:11:16

The home page is a Wordpress page. So also a different template. It is the not in the phlugins code either.

Actually, it is. I can tell by the fact that the custom css file is being served to it:

<link rel="stylesheet" href="/galleries/phplugins/css/custom.css" />

theomolenaar · 2016-01-28 07:42:00

The custom CSS yes. But not the phplugins code that changes the header for the autoindex and albums...

if ((G_STYLE == 'CE4-GALLERY' || G_STYLE == 'CE4-AUTOINDEX' || G_STYLE == 'CE4-MOBILE')AND (G_PATH != 'GALLERIES'))
{
echo '
<div id="masthead" class="block-id masthead clearfix">
<div class="mantle clearfix">
<div class="core clearfix">

<div id="profile-image" class="profile-image clearfix">
<div id="profile-icon" class="profile-icon">
<a href="/"></a>

etc.

So it is using the 'normal' code for the rest. Somehow that goes wrong.

theomolenaar · 2016-01-28 07:55:18

Think I got it.

http://test.theomolenaar.nl/destination … -at-jakar/

I can also manipulate where the text starts. Going to make the original image a bit less wide and 1 or two others manipulate letter size and alignment in a few steps.

But it took me most of a day to figure it all out...

Thanks for your patience :-)

rod barbee · 2016-01-28 08:57:18

You can conditionally send one css file your indexes and galleries and another to the rest of your site.

theomolenaar · 2016-01-28 19:09:53

Maybe. But that would complicate things a little and introduce duplicates.

I'll first try including code for the other pages in the phplugin. Basically that is only one type, the wordpress page. And the top level index (my destinations page at the moment, but there will be more). Because that one is not made by publisher and .ALBUMTITLE. is not filled. So I only have to fill this field conditionally. Or fill profile labels with something else.

rod barbee · 2016-01-28 22:38:00

Maybe. But that would complicate things a little and introduce duplicates.

not really.
Just use the same conditional statement you're using in ttg_header_masthead for ttg_head_end to send your current custom css file to your galleries and indexes and a different one (that doesn't contain the masthead css) to the rest of the site:

IF (your conditional)
send /phplugins/css/custom.css

else
send /phplugins/css/custom2.css

Community @ The Turning Gate

#1 2016-01-25 05:43:26

Header text in Mobile outside headers

#2 2016-01-25 10:31:10

Re: Header text in Mobile outside headers

#3 2016-01-25 20:35:16

Re: Header text in Mobile outside headers

#4 2016-01-25 22:40:37

Re: Header text in Mobile outside headers

#5 2016-01-26 02:13:59

Re: Header text in Mobile outside headers

#6 2016-01-26 02:19:31

Re: Header text in Mobile outside headers

#7 2016-01-26 02:54:06

Re: Header text in Mobile outside headers

#8 2016-01-26 04:28:12

Re: Header text in Mobile outside headers

#9 2016-01-27 22:24:30

Re: Header text in Mobile outside headers

#10 2016-01-27 23:13:15

Re: Header text in Mobile outside headers

#11 2016-01-28 03:08:34

Re: Header text in Mobile outside headers

#12 2016-01-28 03:54:25

Re: Header text in Mobile outside headers

#13 2016-01-28 04:38:36

Re: Header text in Mobile outside headers

#14 2016-01-28 05:31:03

Re: Header text in Mobile outside headers

#15 2016-01-28 05:59:05

Re: Header text in Mobile outside headers

#16 2016-01-28 06:28:56

Re: Header text in Mobile outside headers

#17 2016-01-28 06:33:17

Re: Header text in Mobile outside headers

#18 2016-01-28 06:54:37

Re: Header text in Mobile outside headers

#19 2016-01-28 07:04:06

Re: Header text in Mobile outside headers

#20 2016-01-28 07:11:16

Re: Header text in Mobile outside headers

#21 2016-01-28 07:42:00

Re: Header text in Mobile outside headers

#22 2016-01-28 07:55:18

Re: Header text in Mobile outside headers

#23 2016-01-28 08:57:18

Re: Header text in Mobile outside headers

#24 2016-01-28 19:09:53

Re: Header text in Mobile outside headers

#25 2016-01-28 22:38:00

Re: Header text in Mobile outside headers

Board footer