Some Tricks for CSS in Backlight

Markus · 2016-06-19 01:12:35

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

rod barbee · 2016-06-19 01:31:43

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 barbee · 2016-06-19 01:52:42

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 barbee · 2016-06-19 02:04:17

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 barbee · 2016-06-19 02:19:09

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 barbee · 2016-06-19 02:22:49

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 barbee · 2016-06-19 02:24:19

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

Markus · 2016-06-19 03:22:20

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

Markus · 2016-06-19 03:26:31

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/

Markus · 2016-06-19 03:40:37

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...

Markus · 2016-06-19 04:06:17

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>

Markus · 2016-06-19 04:10:27

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

Markus · 2016-06-19 05:46:00

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

Markus · 2016-06-19 05:55:42

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?

rod barbee · 2016-06-19 07:06:17

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 barbee · 2016-06-19 07:10:06

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 barbee · 2016-06-19 08:31:36

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 barbee · 2016-06-19 08:39:09

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;
}

Markus · 2016-06-19 18:54:01

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

Markus · 2016-06-19 19:19:49

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

Markus · 2016-06-19 20:34:18

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

Markus · 2016-06-19 21:56:32

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

rod barbee · 2016-06-20 00:47:40

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:

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

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

So this is what I'd try using:

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

rod barbee · 2016-06-20 00:55:18

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.

Markus · 2016-06-20 04:50:51

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.

Community @ The Turning Gate

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

Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

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

Re: Some Tricks for CSS in Backlight

Board footer