Add the Backlight logo into custom footer

tomowensphoto · 2017-07-25 21:49:13

OK chaps,
I know my limitations and I think I'm at a point that I ought not to interfere with;
I have used Backlight for my top level domain and unlike my photography sub-site where I use the Footer/Bottom pallet/Copyright turned on, I use a custom footer to display certain legal stuff for the parent company.
I really like the Backlight logo and it fits my colour scheme. I've added the logo into my grid by copying code from the sub-site to this one but I cannot display 'Built with Backlight'.
I can see when I inspect my photography site that there is a shed load of TTG CSS stuff associated with the logomark. That is a big red light for me.
I expect I should be stuffing something into my custom CSS file.
Any pointers gratefully accepted.
The parent site is www.openpoint.co.uk
Thanks

Last edited by tomowensphoto (2017-07-25 21:49:30)

rod barbee · 2017-07-25 22:19:41

the text is there. It just looks like it's the same color as the background. just add a little custom css:

li.logomark h1 {
  color:white;
}

the H1 looks large there. You could add some custom css to make it look a bit better.

#page__body .logomark h1 {
    font-size: 1.2em;
}

that's the size of the H1 for the .backlight_logomark in a standard page. The spans inside the h1 also have specific sizes to them. You can target those if you wish to have "Built with" and "Backlight" at slightly different sizes.

tomowensphoto · 2017-07-26 00:30:07

Thanks Rod,
Never thought to check for font colour as my stuff was coming out white!
I'll fiddle about to get the font smaller as it looks a tad large at present.

rod barbee · 2017-07-26 00:51:08

I saw that you set the div color to white. The problem is that the color for that logomark h1 uses a more specific selector, and higher specificity takes preference.

tomowensphoto · 2017-07-26 01:20:53

I still have a way to go with CSS as I don't do it all the time. I ought to set myself some tasks. I did buy the Missing Manual you recommend and did every exercise in the book then thought it would stick but the day job got in the way as always.
I only got my head around the grid this morning after a number of reads through. I blame my previous attempts at too late in the day when my eyes and head are a tad tired.
Always grateful for your tips and help.

tomowensphoto · 2017-07-26 22:14:49

I've had a go and messed about with the grid in the custom footer in the phplugins file. This is better but not perfect. I can live with it but if I could make the logo align next to the text that would be good but from what I have been reading up on today I would have to place the logo in a span to make that work and demands an image source from what I can see and and I'm not sure what the file is or where it resides.
Thanks

rod barbee · 2017-07-26 22:22:02

The logo is not an image. Look at the page source code and you'll see it's made up of a bunch of list items inside of a ul.

just copy the code that's there for the copyright, the logo, and the text, and paste it into the same column in your footer.
Right now you've got the image logo in one column and the text in another.

tomowensphoto · 2017-07-26 22:50:37

Hi Rod,
I can see that there are a load of items inside a ul. I copied that into my phplugins file. I put that in a column alone as I could not find a way of controlling the h1 text that was there originally. When I put a <p> bit of content with it the text always sat under the logo. This was my attempt to get around that and a bit of a cludge.

Last edited by tomowensphoto (2017-07-26 23:15:00)

rod barbee · 2017-07-26 23:26:47

The issue is that the Backlight default footer is in the bottom pallet (.page__pallet__bottom) and there is css being applied that depends on the logomark being inside the bottom pallet.
Looking at the default example in the inspector I was able to isolate the css and then just removed .page__pallet__bottom from the selector.

This seems to be working, at least in the browser inspector:

#page__body .backlight_logomark {
    float: left;
}

#page__body .backlight_logomark h1 span {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 18px;
}

#page__body .backlight_logomark h1 span:nth-child(2n) {
    font-size: 1rem;
}

tomowensphoto · 2017-07-27 00:38:01

Hi Rod,
Many thanks.
I tried that and got huge font the same colour as the background so did this;

li.backlight_logomark p {
color: white;
font-size: .5em;
}
#page__body .backlight_logomark {
float: left;
}

#page__body .backlight_logomark p span {
display: block;
font-size: 0.5rem;
font-weight: 400;
line-height: 18px;
}

#page__body .backlight_logomark p span:nth-child(2n) {
font-size: 1rem;
}

I then altered the phplugins to
<div class="col_3 alpha">
<li class="logomark clearfix backlight_logomark">
<a href="http://theturninggate.net">
<ul>
<li style="opacity:.85; top:75%; left:75%;"></li>
<li style="opacity:.40; top:75%; left:50%;"></li>
<li style="opacity:.40; top:50%; left:75%;"></li>
<li style="opacity:.55; top:75%; left:25%;"></li>
<li style="opacity:.55; top:25%; left:75%;"></li>
<li style="opacity:.55; top:50%; left:50%;"></li>
<li style="opacity:.70; top:50%; left:25%;"></li>
<li style="opacity:.70; top:75%; left: 0%;"></li>
<li style="opacity:.70; top:25%; left:50%;"></li>
<li style="opacity:.70; top: 0%; left:75%;"></li>
<li style="opacity:.85; top:50%; left: 0%;"></li>
<li style="opacity:.85; top: 0%; left:50%;"></li>
<li style="opacity:.98; top: 0%; left: 0%; width: 50%; height: 50%"></li>
</ul>
</a>
</li>
<p><span>Built with</span>
<span>Backlight</span></p>
</div>
and now get a neat result displaying font the same size as the rest of the footer but only on one line.
It seemed like a good idea to use your guidance notes on grids as so much more control could be place on the content in the footer area.
Thanks again for your help.

rod barbee · 2017-07-27 01:19:20

the H1 might be picking up the font-size and color set by your custom css in the footer.

Community @ The Turning Gate

#1 2017-07-25 21:49:13

Add the Backlight logo into custom footer

#2 2017-07-25 22:19:41

Re: Add the Backlight logo into custom footer

#3 2017-07-26 00:30:07

Re: Add the Backlight logo into custom footer

#4 2017-07-26 00:51:08

Re: Add the Backlight logo into custom footer

#5 2017-07-26 01:20:53

Re: Add the Backlight logo into custom footer

#6 2017-07-26 22:14:49

Re: Add the Backlight logo into custom footer

#7 2017-07-26 22:22:02

Re: Add the Backlight logo into custom footer

#8 2017-07-26 22:50:37

Re: Add the Backlight logo into custom footer

#9 2017-07-26 23:26:47

Re: Add the Backlight logo into custom footer

#10 2017-07-27 00:38:01

Re: Add the Backlight logo into custom footer

#11 2017-07-27 01:19:20

Re: Add the Backlight logo into custom footer

Board footer