Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2016-06-19 01:12:35

Markus
Member
From: Witten - Germany
Registered: 2012-10-06
Posts: 180
Website

Some Tricks for CSS in Backlight

Hello experts in html and css,

I am now quite happy with my test page http://backlight.der-canonier.de/home/. But some little things I want to change before I replace the pages.

I am still a beginner in HTML and CSS, but some I have already found and built into backlight.

I would appreciate to you if you can help me. Maybe some things are not possible.



For Pages I have created 2 templates. Once with tray (for the album sets) and one without tray. Is this the right way?


1. On "Home" I would like to include a margin left and right and a central alignment. In CSS I tried it this way:

.the_copy p {
text-align: center;
margin-left: 100px;
margin-right: 100px;
}

But this has not worked. I guess that I did not hit the right area.

In addition, the also affects to the second template. How can I restrict only to one template?

For the other sections ("Über..", "Ausrüstung" etc.) is only the left and right margin are used.

For this Reason I try this in Page Copy in the Designer:

<style>
div  {
text-align:  justify;
margin-left: 150 px;
}
</style>

<div>
<h1 style="color: #FF0000; text-align: center"> Hallo und herzlich Willkommen auf meiner Fotoseite</h1>  

2. For the 2nd template (http://backlight.der-canonier.de/galler … n_canaria/ I just need a right margin


3. in Photoswipe I want to center the metadata.
http://backlight.der-canonier.de/galler … id=1&pid=3
But even that does not work

.pswp_caption_center {
text-align: center;
}

4. Is it possible to replace the separator in the breadcrumbs?
I would like to replace the separator ">" by a "red |" and "Home" by my "Favicon.jpg".
Like this http://www.der-canonier.de/galleries/03 … el/firgas/
Is that possible?


5. I would like a larger shadow around the gray frame of the thumbnails in the gallery. Similar to the image in "About ..."

"div.album-frame" already in the album sets. And that is why the changes in CSS also affect these thumbnails

How can I restrict the album that?


6. What is the reason for the break in the background in the "Impressum" http://backlight.der-canonier.de/impressum/

Where is the issue? I can not find him

body {
    background-color: #909090;
    background-image: linear-gradient(180deg, #909090, #efefef 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

Many Thanks for your help
Markus

Offline

#2 2016-06-19 01:31:43

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,808
Website

Re: Some Tricks for CSS in Backlight

the best way to center align text is to target the div in which the text is placed:
try
.the__copy {
text-align: center;
}

note, there are two underscores in .the__copy

for the paragraph margins, you could either add padding to .the_copy or margin to the p inside the .the_copy

.the__copy p {
margin-left: 100px;
margin-right: 100px;
}

If you don't want this css affecting other pages, then save this css file, giving it a unique name, and apply it only to those page templates that you want the css to affect.

Are you using the browser's inspector and trying out your custom css there?


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#3 2016-06-19 01:52:42

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,808
Website

Re: Some Tricks for CSS in Backlight

also, instead of needing to create separate custom css files for each page template, you could create custom classes and apply them as needed.
For example, to center copy, create a custom class to do that:

.center-copy {
text-align: center;
}

Then, when adding copy to a page, put it in a div with that class applied:

<div class="center-copy">
<h2>Your page heading</h2>
<p>Your page text.</p>
<p>More pae text.</p>
</div>

You'd have to write it in html rather than Markup though.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#4 2016-06-19 02:04:17

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,808
Website

Re: Some Tricks for CSS in Backlight

6. What is the reason for the break in the background in the "Impressum" http://backlight.der-canonier.de/impressum/

try adding

min-height: 100%;

to the body css for the background


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#5 2016-06-19 02:19:09

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,808
Website

Re: Some Tricks for CSS in Backlight

3. in Photoswipe I want to center the metadata.
http://backlight.der-canonier.de/galler … id=1&pid=3
But even that does not work

.pswp_caption_center {
text-align: center;
}


that's because you've written the selector incorrectly. There are two underscores, not one:

.pswp__caption__center


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#6 2016-06-19 02:22:49

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,808
Website

Re: Some Tricks for CSS in Backlight

4. Is it possible to replace the separator in the breadcrumbs?

with custom css. You'll need to find the correct selectors and change what's in the "content" property.

However, I would not be surprised at all if Matt adds some options for that in the Backlight Publisher settings area. (I don't actually know if he's got plans for this)


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#7 2016-06-19 02:24:19

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,808
Website

Re: Some Tricks for CSS in Backlight

5. I would like a larger shadow around the gray frame of the thumbnails in the gallery. Similar to the image in "About ..."

"div.album-frame" already in the album sets. And that is why the changes in CSS also affect these thumbnails

How can I restrict the album that?

Can you provide a link to a page? I'm not exactly sure if you're talking album thumbnails or album set thumbnails


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#8 2016-06-19 03:22:20

Markus
Member
From: Witten - Germany
Registered: 2012-10-06
Posts: 180
Website

Re: Some Tricks for CSS in Backlight

rod barbee wrote:

for the paragraph margins, you could either add padding to .the_copy or margin to the p inside the .the_copy

Padding is the best solution

Offline

#9 2016-06-19 03:26:31

Markus
Member
From: Witten - Germany
Registered: 2012-10-06
Posts: 180
Website

Re: Some Tricks for CSS in Backlight

rod barbee wrote:

5. I would like a larger shadow around the gray frame of the thumbnails in the gallery. Similar to the image in "About ..."

"div.album-frame" already in the album sets. And that is why the changes in CSS also affect these thumbnails

How can I restrict the album that?

Can you provide a link to a page? I'm not exactly sure if you're talking album thumbnails or album set thumbnails

I meant the shadow around the gray frames
http://backlight.der-canonier.de/galler … aria_2014/ like the shadows in http://backlight.der-canonier.de/about/

Offline

#10 2016-06-19 03:40:37

Markus
Member
From: Witten - Germany
Registered: 2012-10-06
Posts: 180
Website

Re: Some Tricks for CSS in Backlight

rod barbee wrote:

that's because you've written the selector incorrectly. There are two underscores, not one:

.pswp__caption__center

Oh man, I did not see the two underscores. Now it works...

Offline

#11 2016-06-19 04:06:17

Markus
Member
From: Witten - Germany
Registered: 2012-10-06
Posts: 180
Website

Re: Some Tricks for CSS in Backlight

rod barbee wrote:

also, instead of needing to create separate custom css files for each page template, you could create custom classes and apply them as needed.
For example, to center copy, create a custom class to do that:

.center-copy {
text-align: center;
}

Then, when adding copy to a page, put it in a div with that class applied:

<div class="center-copy">
<h2>Your page heading</h2>
<p>Your page text.</p>
<p>More pae text.</p>
</div>

You'd have to write it in html rather than Markup though.

That´s a good solution, but I think the Font Awesome code doesn´t work in HTML, right?

the headline is too small

<h1 class="fa fa-home" aria-hidden="true"> Hallo und herzlich Willkommen auf meiner Fotoseite</h1>

and here the Font Awesome code is missing

<h1 style="color: #FF0000; class="fa fa-home" aria-hidden="true"> Hallo und herzlich Willkommen auf meiner Fotoseite</h1>

Offline

#12 2016-06-19 04:10:27

Markus
Member
From: Witten - Germany
Registered: 2012-10-06
Posts: 180
Website

Re: Some Tricks for CSS in Backlight

rod barbee wrote:

6. What is the reason for the break in the background in the "Impressum" http://backlight.der-canonier.de/impressum/

try adding

min-height: 100%;

to the body css for the background

unfortunately it did not work

Offline

#13 2016-06-19 05:46:00

Markus
Member
From: Witten - Germany
Registered: 2012-10-06
Posts: 180
Website

Re: Some Tricks for CSS in Backlight

rod barbee wrote:

Are you using the browser's inspector and trying out your custom css there?

Yes, I did. But not always to find the right area


rod barbee wrote:

If you don't want this css affecting other pages, then save this css file, giving it a unique name, and apply it only to those page templates that you want the css to affect.

That´s the better way. This works perfect for me

Offline

#14 2016-06-19 05:55:42

Markus
Member
From: Witten - Germany
Registered: 2012-10-06
Posts: 180
Website

Re: Some Tricks for CSS in Backlight

I will set a padding in the breadcrumbs in the album.
http://backlight.der-canonier.de/galler … el/falken/

I try this in CSS

/* Breadcrumbs Album */
.breadcrumbs {
    padding-left: 70px;
}

Where is the issue?

Offline

#15 2016-06-19 07:06:17

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,808
Website

Re: Some Tricks for CSS in Backlight

Markus wrote:
rod barbee wrote:

6. What is the reason for the break in the background in the "Impressum" http://backlight.der-canonier.de/impressum/

try adding

min-height: 100%;

to the body css for the background

unfortunately it did not work


then try adding html to the selector:

html, body {
your other css....;
min-height: 100%;
}


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#16 2016-06-19 07:10:06

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,808
Website

Re: Some Tricks for CSS in Backlight

Markus wrote:
rod barbee wrote:

also, instead of needing to create separate custom css files for each page template, you could create custom classes and apply them as needed.
For example, to center copy, create a custom class to do that:

.center-copy {
text-align: center;
}

Then, when adding copy to a page, put it in a div with that class applied:

<div class="center-copy">
<h2>Your page heading</h2>
<p>Your page text.</p>
<p>More pae text.</p>
</div>

You'd have to write it in html rather than Markup though.

That´s a good solution, but I think the Font Awesome code doesn´t work in HTML, right?

the headline is too small

<h1 class="fa fa-home" aria-hidden="true"> Hallo und herzlich Willkommen auf meiner Fotoseite</h1>

and here the Font Awesome code is missing

<h1 style="color: #FF0000; class="fa fa-home" aria-hidden="true"> Hallo und herzlich Willkommen auf meiner Fotoseite</h1>

Font Awesome is html. You're just not using it correctly. You need to use <i> tags:
<i class= "fa fa-circle" aria-hidden="true"></i>
Click on any of the fonts in the Font Awesome library and you'll be shown the code you need
http://fontawesome.io/icons/

<h1 style="color: #FF0000;" <i class="fa fa-home" aria-hidden="true"></i> Hallo und herzlich Willkommen auf meiner Fotoseite</h1>

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#17 2016-06-19 08:31:36

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,808
Website

Re: Some Tricks for CSS in Backlight

Markus wrote:
rod barbee wrote:

5. I would like a larger shadow around the gray frame of the thumbnails in the gallery. Similar to the image in "About ..."

"div.album-frame" already in the album sets. And that is why the changes in CSS also affect these thumbnails

How can I restrict the album that?

Can you provide a link to a page? I'm not exactly sure if you're talking album thumbnails or album set thumbnails

I meant the shadow around the gray frames
http://backlight.der-canonier.de/galler … aria_2014/ like the shadows in http://backlight.der-canonier.de/about/

according to the browser inspector, this is the rule governing the cells. Use the selector and change the box-shadow properties:

.the__gallery figure {
	background-color: rgb(210, 210, 210);
	border: 0 solid rgb(0, 0, 0);
	border-width: 0px;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.25 );
	box-sizing: border-box;
	float: left;
	margin: 0 10px 20px;
	overflow: hidden;
	position: relative;
	width: 220px;
}

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#18 2016-06-19 08:39:09

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,808
Website

Re: Some Tricks for CSS in Backlight

Markus wrote:

I will set a padding in the breadcrumbs in the album.
http://backlight.der-canonier.de/galler … el/falken/

I try this in CSS

/* Breadcrumbs Album */
.breadcrumbs {
    padding-left: 70px;
}

Where is the issue?

You'll need to get more specific with the selector. If you want to add padding to the breadcrumb container:

ul.breadcrumbs

the breadcrumbs themselves:

ul.breadcrumbs li

the icons:

ul.breadcrumbs li:after

to change the breadcrumb separator to a red bar rather than the greater than icon >:

ul.breadcrumbs li:after {
content: '|';
color: red;
}


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#19 2016-06-19 18:54:01

Markus
Member
From: Witten - Germany
Registered: 2012-10-06
Posts: 180
Website

Re: Some Tricks for CSS in Backlight

rod barbee wrote:

You'll need to get more specific with the selector. If you want to add padding to the breadcrumb container:

ul.breadcrumbs

the breadcrumbs themselves:

ul.breadcrumbs li

the icons:

ul.breadcrumbs li:after

to change the breadcrumb separator to a red bar rather than the greater than icon >:

ul.breadcrumbs li:after {
content: '|';
color: red;
}

ah, slowly I understand the system. I found "li" and "li: after", but I did not know how I need to install it in the syntax

Similarly, would it then work with the favicon in exchange with "Home"?
I found this expression:

<Span itemprop = "title"> Home </ span>

Is just stupid that this line is the same for all Breadcrumps

BTW: Many thanks for your great support

Offline

#20 2016-06-19 19:19:49

Markus
Member
From: Witten - Germany
Registered: 2012-10-06
Posts: 180
Website

Re: Some Tricks for CSS in Backlight

rod barbee wrote:

according to the browser inspector, this is the rule governing the cells. Use the selector and change the box-shadow properties:

.the__gallery figure {
	background-color: rgb(210, 210, 210);
	border: 0 solid rgb(0, 0, 0);
	border-width: 0px;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.25 );
	box-sizing: border-box;
	float: left;
	margin: 0 10px 20px;
	overflow: hidden;
	position: relative;
	width: 220px;
}

now it is becoming increasingly clear. I have not looked right onto Styles, because there are the corresponding areas yikes

Offline

#21 2016-06-19 20:34:18

Markus
Member
From: Witten - Germany
Registered: 2012-10-06
Posts: 180
Website

Re: Some Tricks for CSS in Backlight

If I want to reduce the font size of the submenus, then what is the correct syntax?

I find <ul class = "sub-menu"> and <li class = "menu-item menu-item-has-children">

But this is probably not the right place. Nothing happens

Offline

#22 2016-06-19 21:56:32

Markus
Member
From: Witten - Germany
Registered: 2012-10-06
Posts: 180
Website

Re: Some Tricks for CSS in Backlight

rod barbee wrote:

then try adding html to the selector:

html, body {
your other css....;
min-height: 100%;
}

Perfect! Now it's like I want it

Offline

#23 2016-06-20 00:47:40

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,808
Website

Re: Some Tricks for CSS in Backlight

Markus wrote:

If I want to reduce the font size of the submenus, then what is the correct syntax?

I find <ul class = "sub-menu"> and <li class = "menu-item menu-item-has-children">

But this is probably not the right place. Nothing happens

Just a matter if drilling down to the correct selector. The browser's inspector makes this easier:

right-clicking on a sub-menu item and choosing "Inspect element", you'll see the element highlighted:
sub-menu-items.jpg

at the top of the list of css used, you'll see the main selector for the list item:

sub-menu-selector.jpg


but the item that needs styling is the "a" element inside the li element:

sub-menu-a.jpg

So this is what I'd try using:

nav ul ul li a {
	font-size: 10px;
}

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#24 2016-06-20 00:55:18

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,808
Website

Re: Some Tricks for CSS in Backlight

Similarly, would it then work with the favicon in exchange with "Home"?
I found this expression:

<Span itemprop = "title"> Home </ span>

Is just stupid that this line is the same for all Breadcrumps

Not sure why you think it's stupid. "Home" is what most every website uses if they have a breadcrumb leading to the home page.

but you can change the wording if you like in Backlight's Publisher settings. Or not display the home breadcrumb at all since the link to the home page should be part of your masthead anyway. Or on the menu.

As far as changing it to a favicon, I see no way of doing that.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#25 2016-06-20 04:50:51

Markus
Member
From: Witten - Germany
Registered: 2012-10-06
Posts: 180
Website

Re: Some Tricks for CSS in Backlight

rod barbee wrote:

Not sure why you think it's stupid.

Stupid is the wrong word - better is "That's a pity!"

Ok, is not so bad.

Offline

Board footer

Powered by FluxBB