Forums / Templates, Stylesheets, Page Layout / Adding Text Into The Header

Adding Text Into The Header

Started by mcs_computers on 3 Jul 2016, 12:44 AM · Views: 11,848

Results 1 to 20 of 37
3 Jul 2016, 12:44 AM
#1
mcs_computers avatar

mcs_computers

Zen Follower

Join Date:
Aug 2013
Location:
Bridlington
Posts:
151
Plugin Contributions:
0

Adding Text Into The Header

Hey Zenners

Could someone please assist me in a small query.

I am wanting to add some text into the header of a website I`m doing for a friend. Please see the picture below ...

Attachment 16463

I would like to add some text in the area above the links in the top right as seen in the pic.

Now I have identified that the file I need to add the code to is the tpl_header.php file, the issue is I have no idea where or what to put. I have been experimenting and can get text to show but not in the right place or position, all I did was insert the word TEST and then looked at the webpage to see what happened.

Any assistance on this would be appreciated, I`m hoping to add 2 lines of text if possible.

Many thanks in advance.

3 Jul 2016, 1:08 AM
#2
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: Adding Text Into The Header

Position of text displayed to the browser is controlled through CSS. This is generally made possible by including <span or <div tags around the text such as:

<span class="test-text" >TEST</span>

Or similar with div. A class would be used if you want to do the same thing with multiple objects, where if you wanted to do something to a specific item you would using a unique id instead. It is bad html form for two objects to have the same id.

Then in the css file applicable to the page(s) in question, the applicable formatting is applied. As to "sequence" within the file, generally, things to be above other objects are displayed before the follow on item(s). They will be moved according to the css rules applied to them.

Once the applicable/desired tags are around the text, you can with a pc press f12 and be presented with a browser tool that will let you make up/modify the css before attempting to make it a permanent part of the site. This is something that others can help you do if you provide a link to the site (or hopefully a test version of the site). Otherwise, general/generic suggestions can only be provided and the desired result more than likely not to appear. Also, once such additional text is included, if the template is in some way responsive or mobile friendly, testing should be done to see the effects through as many browser arrangements as possible and the applicable css incorporated.

ZC Installation/Maintenance Support <- Site
Contribution for contributions welcome...

3 Jul 2016, 9:24 AM
#3
mcs_computers avatar

mcs_computers

Zen Follower

Join Date:
Aug 2013
Location:
Bridlington
Posts:
151
Plugin Contributions:
0

Re: Adding Text Into The Header

The web address in question is:

https://www.jmdelisupplies.co.uk/index.php (index.php needed otherwise you see a holding page)

Being a novice I kind of half understand what your saying (sorry)

As I explained in my first post, when I altered the PHP file I saw the text on the page but it was not in the right place. Are you saying that the text should go in the PHP file but then I need some coding in a CSS file to control it`s position.

You have to bare in mind that I entered the word TEST on its own in a PHP file, that should give you an idea of my knowledge LOL :shocking:

Thanks in advance :D

4 Jul 2016, 7:41 PM
#4
mcs_computers avatar

mcs_computers

Zen Follower

Join Date:
Aug 2013
Location:
Bridlington
Posts:
151
Plugin Contributions:
0

Re: Adding Text Into The Header

Okay I`ve tried all sorts, scoured the forums and the internet with no luck. Can anyone please offer me some help, I would be very grateful.

Thanks in advance .. :D

4 Jul 2016, 9:22 PM
#5
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,890
Plugin Contributions:
20

Re: Adding Text Into The Header

You should have a file on your computer at includes/templates/responsive_sheffield_blue/common/tpl_header.php. If it's not there, copy it from the includes/templates/template_default/common/tpl_header.php.
Once you've got it in the right directory, look for a line that starts with ```

<div id="logo"> ```That starts the instruction for inserting the logo. That line should end with a </div>. It may de several lines down before you find the closing </div>. I don't have a copy of the template file or I could be more specific. Post yours if you want a more accurate answer. What you want to add after that code is a line to tell the code what text you want and where to put it. Adding something like``` <div class="logoText"><?php echo 'This is my text.'; ?></div> ```right after the first line will get the text to appear. Then, you'd use your includes/templates/responsive_sheffield_blue/css/stylesheet.css to tell the text where to go. Probably just needs to have a line added at the end of the css file like``` .logoText {float:right;} ```Again, if you post your tpl_header.php, we can be more specific.

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

5 Jul 2016, 12:24 PM
#6
mcs_computers avatar

mcs_computers

Zen Follower

Join Date:
Aug 2013
Location:
Bridlington
Posts:
151
Plugin Contributions:
0

Re: Adding Text Into The Header

dbltoe:

You should have a file on your computer at includes/templates/responsive_sheffield_blue/common/tpl_header.php. If it's not there, copy it from the includes/templates/template_default/common/tpl_header.php.
Once you've got it in the right directory, look for a line that starts with ```

<div id="logo"> ```That starts the instruction for inserting the logo. That line should end with a </div>. It may de several lines down before you find the closing </div>. I don't have a copy of the template file or I could be more specific. Post yours if you want a more accurate answer. > What you want to add after that code is a line to tell the code what text you want and where to put it. Adding something like``` <div class="logoText"><?php echo 'This is my text.'; ?></div> ```right after the first line will get the text to appear. > Then, you'd use your includes/templates/responsive_sheffield_blue/css/stylesheet.css to tell the text where to go. Probably just needs to have a line added at the end of the css file like``` .logoText {float:right;} ```Again, if you post your tpl_header.php, we can be more specific.

Mate you are a legend, that worked a treat and is exactly what I want.

Just a couple of questions to add on to this issue, I was hoping to have more than 1 line of text, please don`t laugh but I thought that if I used your coding again under the first line of text but change the logotext to logotext2 in both the php and css files it would give me a 2nd line of text but it didn't it just kept it on the same line.

Secondly is there an easy way to align my line of text with the row of icons underneath ??

Website is https://www.jmdelisupplies.co.uk/index.php again index.php needed or you will see the holding page.

Many thanks again in advance

5 Jul 2016, 3:05 PM
#7
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: Adding Text Into The Header

Something needs to tell the browser that a new line is involved for the second "line". Typically can add ```
<br />


My current browser doesn't allow me to play with the html to test this against your site to see what greater effect it will have as compared to using a paragraph parameter or other css commands.

ZC Installation/Maintenance Support <- Site
Contribution for contributions welcome...

5 Jul 2016, 4:11 PM
#8
lat9 avatar

lat9

Administrator

Join Date:
Sep 2009
Location:
Stuart, FL
Posts:
14,120
Plugin Contributions:
56

Re: Adding Text Into The Header

... or you could simply update your stylesheet.css file (around line 565), adding:

margin-right: 1em;

to the styling of your newly-added .logoText selector.

5 Jul 2016, 5:21 PM
#9
mcs_computers avatar

mcs_computers

Zen Follower

Join Date:
Aug 2013
Location:
Bridlington
Posts:
151
Plugin Contributions:
0

Re: Adding Text Into The Header

lat9:

... or you could simply update your stylesheet.css file (around line 565), adding:

margin-right: 1em;

> to the styling of your newly-added .logoText selector.

The line originally read ...

.logoText {float:right;}

So I changed it to ..

.logoText {float:right;margin-right: 1em;}

Worked a treat mate, thank you very much :cool:
5 Jul 2016, 5:30 PM
#10
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,890
Plugin Contributions:
20

Re: Adding Text Into The Header

Actually, since the text is in a PHP echo, you would use \n instead of the HTML <br />. You could also split the lines in the echo by using ```
[I]<div class="logoText"><?php echo 'This is my text1' . PHP_EOL . 'This is my text2'; ?></div>[/I]

Just for appearances, I'd add a margin-right:20px; to the stylesheet to make it```
[I].logoText {float:right;margin-right:20pc;}[/I]
```This gets the text more in line with that below it.
I do find it interesting that the text disappears in mobile view.

Most of this was on hold while getting a snack. Too slow as usual.

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

5 Jul 2016, 5:43 PM
#11
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,890
Plugin Contributions:
20

Re: Adding Text Into The Header

I do tend to avoid em in favor of px in most cases involving margin but that's just me. I tend to use em more where it might not make a difference if the font changed. Like padding for instance. Mixing em and px in a document can do crazy things if an element is added that changes the relative font size.

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

5 Jul 2016, 6:07 PM
#12
mcs_computers avatar

mcs_computers

Zen Follower

Join Date:
Aug 2013
Location:
Bridlington
Posts:
151
Plugin Contributions:
0

Re: Adding Text Into The Header

dbltoe:

Actually, since the text is in a PHP echo, you would use \n instead of the HTML <br />. You could also split the lines in the echo by using ```
[I]<div class="logoText"><?php echo 'This is my text1' . PHP_EOL . 'This is my text2'; ?></div>[/I]

> Just for appearances, I'd add a margin-right:20px; to the stylesheet to make it```
[I].logoText {float:right;margin-right:20pc;}[/I]
```This gets the text more in line with that below it.
> I do find it interesting that the text disappears in mobile view.
> 
> Most of this was on hold while getting a snack. Too slow as usual.

This ..
<div class="logoText"><?php echo 'This is my text1' . PHP_EOL . 'This is my text2'; ?></div>
In the php file still keeps it on 1 line ??? Where is the /n ??
5 Jul 2016, 6:14 PM
#13
mcs_computers avatar

mcs_computers

Zen Follower

Join Date:
Aug 2013
Location:
Bridlington
Posts:
151
Plugin Contributions:
0

Re: Adding Text Into The Header

Using </n> Instead Of </br> again keeps it all on 1 line LOL ???

5 Jul 2016, 6:18 PM
#14
mcs_computers avatar

mcs_computers

Zen Follower

Join Date:
Aug 2013
Location:
Bridlington
Posts:
151
Plugin Contributions:
0

Re: Adding Text Into The Header

If I use the </br> it works but then I end up with the icons below being thrown out ...

Attachment 16466

5 Jul 2016, 6:19 PM
#15
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,890
Plugin Contributions:
20

Re: Adding Text Into The Header

taking another look

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

5 Jul 2016, 6:26 PM
#16
mcs_computers avatar

mcs_computers

Zen Follower

Join Date:
Aug 2013
Location:
Bridlington
Posts:
151
Plugin Contributions:
0

Re: Adding Text Into The Header

dbltoe:

taking another look

Sorry mate I`ve changed it again. I used your suggestion and it keeps it on 1 line still

5 Jul 2016, 6:32 PM
#17
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,890
Plugin Contributions:
20

Re: Adding Text Into The Header

gotta client emergency Google add carriage return to php echo

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

5 Jul 2016, 6:45 PM
#18
mcs_computers avatar

mcs_computers

Zen Follower

Join Date:
Aug 2013
Location:
Bridlington
Posts:
151
Plugin Contributions:
0

Re: Adding Text Into The Header

dbltoe:

gotta client emergency Google add carriage return to php echo

I'm looking now but its blowing me away mate, I would appreciate your help when you are free mate. I do appreciate your assistance.

5 Jul 2016, 7:16 PM
#19
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: Adding Text Into The Header

If memory serves even half way correctly and you want to use the \n character instead, it should be added within double quotes instead of the single quoted string currently used. ```
echo 'This is text 1' . "\n" . 'text 2';

Or possibly use three echo lines, the first your first text, the second PHP_EOL, and the third your text 2...

ZC Installation/Maintenance Support <- Site
Contribution for contributions welcome...

7 Jul 2016, 6:11 PM
#20
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,890
Plugin Contributions:
20

Re: Adding Text Into The Header

The reason I was taking another look is that I wanted to make sure this wasn't going to break with a PHP upgrade. Let's try[I]<div class="logoText"><?php echo nl2br("'This is my text1.\n\rThis is my text2."); ?></div>[/I]If there's too much spacing between the lines, remove the \r to see if that helps. The example shown should result in```
This is my text1.

This is my text2.
Without the \r the result should be
This is my text1.
This is my text2.

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com