texture issue

Ken · 2016-07-22 23:14:19

sorry to start a new thread on textures, but I thought I had a mobile menu issue and texture issue. I sorted out the mobile issue, but had already posted and could not delete post.

The background texture does not switch to the basic colors when the browser window is small, which it is suppose to do using the CSS script. I had modified the CSS script to not include texture in the negative space. Here is the link to my test website and below it is the CSS.

http://sweetlightgallery.com/test/home/

.masthead,
nav,
.main, .page__main,
.page__tray[data-position="T1"],
.page__tray[data-position="T2"],
.copyright  {
	background-image: url(/test/photos/bkgrd3.jpg);
	/* adds texture to main page area but not negative space */
}

nav ul,
nav li,
.page__tray ul.menu li {
	background-color: transparent;
}

@media screen and ( min-width: 1025px ) {

	.masthead,
	nav,
	.main, .page__main,
	.page__tray[data-position="T1"],
	.page__tray[data-position="T2"],
	.copyright {
		background-color: rgba( 255, 255, 255, 0 );
	}

/*Slideshow styling
======================*/
#slideshow img {
	border: 2px solid white;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
	
}

Last edited by Ken (2016-07-22 23:27:38)

Daniel Leu · 2016-07-22 23:58:34

Have a look again at Matt's post. You have to switch background-color and background image.

BTW, I like the white border around the slideshow!

Ken · 2016-07-23 00:38:28

I only changed the first part to what I thought would keep the texture from appearing in the negative space, which it does. I left the rest of the code the same, except the transparency setting. Doesn't the section @media screen and (min-width: 1025px) .... control the change from texture to color when the display is less than 1025px?

My goal is to use texture, but not in the negative space. I do not mind keeping the texture in small browser windows, but Matthew seemed to indicate that texture doesn't work well in small displays, that solid colors should be used.

Last edited by Ken (2016-07-23 00:41:54)

rod barbee · 2016-07-23 01:05:30

what the media query is doing is applying the transparent background ( rgba( 255, 255, 255, 0 ); ) to those selectors whenever the browser window is 1025 px or wider.

Ken · 2016-07-23 01:43:36

OK, so when it is smaller than 1025 px, then a 100% non transparent background should be applied? Which would mean when the display is less than 1025 px the texture would be hidden by the background color?

Matt's original code allowed texture to be everywhere. I simply want to be able to have texture, but not in the negative space, which the code I modified does, but the texture is there even in a small browser window, which Matt indicates is not good. So how do I modify Matt's original code to accomplish what I want?

The ideal would be if there was a way to specify texture within Backlight. Perhaps in the future this capability will be incorporated.

rod barbee · 2016-07-23 01:54:39

OK, so when it is smaller than 1025 px, then a 100% non transparent background should be applied?

Not necessarily. It depends on what your other css is doing. In your case, it looks like it's applying the textured background in a lot of places.

the way I read the css, all these things:
.masthead,
nav,
.main, .page__main,
.page__tray[data-position="T1"],
.page__tray[data-position="T2"],
.copyright

will have the background image applied from the start. (Mobile too, if these selectors apply to mobile devices)

and these items:
nav ul,
nav li,
.page__tray ul.menu li
will have a transparent background (mobile too if these selectors apply to mobile devices)

With the media query, the transparent background is applied only to those items in the query when the browser/device size is 1025px or larger.

The negative space is (I believe) simply the page background.

If you don't want any texture in backgrounds for mobile devices, then put the css calling the background texture image in a media query to that it's applies only to screens larger than 1024px.

Ken · 2016-07-23 02:29:02

I don't understand very much about css, so I am lost when you say things like" put the css calling the background texture image in a media query to that it's applies only to screens larger than 1024px".

The reality is that if you are not a web programmer and understand CSS, your option is to work within the confines of Backlight, and when it will not do what you want, then try and take the basic code provided by you, Matt, and Daniel and use it for what it was intended, but without the ability to modify it.

Backlight is huge improvement over CE4, though it does not allow the same level of layout control. For example Backlight allows you to add Padding-left/right to the Masthead, but not to the Navigation Header, which greatly restricts your layout options for these two items. I would like for my Masthead and Navigation Header to line up but am limited to where the placement is. You can see what I mean at my test site http://sweetlightgallery.com/test/home/

My hope is that future versions of Backlight will incorporate the layout controls that CE4 has and even improve upon them. I am amazed at what could be done with CE4, but I have to say using CE4 was the most frustrating unintuitive work I have ever done on a computer. This is not a criticism, but reflects the limitations of Lightroom and the challenge that Matt faced in creating the TTG plug-ins. The huge disadvantage of the CE4 plug-ins was offset by CE4 Publisher, which allowed easy creation of galleries and the inclusion of meta data in captions, plus CE4 Cart. These features I was not able to find in other wysiwyg website building programs. So I put up with the frustration of CE4 and was rewarded with a website with great galleries and a shopping cart.

The other amazing thing about TTG is the incredible support that you, Daniel and Matt provide on the forums. It puts large software companies like Adobe to shame.

I will continue to tinker, which is a lot easier in Backlight since you can see the results within a second or two.

Thanks again for your help.

rod barbee · 2016-07-23 02:48:05

I don't understand very much about css, so I am lost when you say things like" put the css calling the background texture image in a media query to that it's applies only to screens larger than 1024px".

You already have a media query that applies css to screens larger than 1024px. So it's the same as that.

The reality is that if you are not a web programmer and understand CSS, your option is to work within the confines of Backlight, and when it will not do what you want, then try and take the basic code provided by you, Matt, and Daniel and use it for what it was intended, but without the ability to modify it.

That's the reality. If you want to be able to customize beyond what the product is currently designed to do, you're simply going to have to get your hands a little dirty learning some basic html and css. There are some customizations in the Backlight Tips & Tricks forum and I'm often adding things to my TTG-tips site.

(Using TTG is the reason I started learning html, css, and now some php, javascript, WordPress etc.)

My hope is that future versions of Backlight will incorporate the layout controls that CE4 has and even improve upon them.

Matt has indicated that he'd like to. Seems like each iteration of Backlight adds something new.

The other amazing thing about TTG is the incredible support that you, Daniel and Matt provide on the forums. It puts large software companies like Adobe to shame.

And those companies have a tone of employees! TTG is just Matt and Ben. Plus a few volunteers helping out with support and testing where we can.

Ken · 2016-07-23 14:11:13

Rod, you are an inspiration. I found a couple of tutorials on youtube introducing HTML and CSS. It is starting to make a little sense, hopefully enough that I will be able to modify the code that you and others provide. If I understand correctly Backlight takes care of the HTML and uses CSS to style the web page. The option to use a separate CSS file allows the user to add additional CSS code to modify the style of a particular element on the webpage (by using a selector to specify that element and a rule that defines what type of style change is applied to that element).

It is a start. At least I have a little more understanding of the code you and others provide.

Ken · 2016-07-23 21:57:55

Thanks to your encouragement, I am making some progress. After getting my hands a little dirty, I was able to add left padding to the Navigation Header. This was accomplished by modifying the nav area of the CSS file. I was surprised how easy it was to make this one change.

I tried adding a media query to my the part of the CSS that calls up the texture. I thought this would limit the texture display to screens larger than 1024px, but it didn't work. Here is the modified CSS:

@media screen and ( min-width: 1025px )

.masthead,
nav,
.main, .page__main,
.page__tray[data-position="T1"],
.page__tray[data-position="T2"],
.copyright {
background-image: url(/test/photos/bkgrd3.jpg);
/* adds texture to main page area but not negative space */
}

rod barbee · 2016-07-23 22:55:11

You just forgot a couple of curly braces

@media screen and ( min-width: 1025px ) {
.masthead,
nav,
.main, .page__main,
.page__tray[data-position="T1"],
.page__tray[data-position="T2"],
.copyright  {
    background-image: url(/test/photos/bkgrd3.jpg);
    /* adds texture to main page area but not negative space */
}
}

Ken · 2016-07-23 23:15:19

that makes sense, and now it works.

Thanks again for the encouragement to learn a little more about html and css

rod barbee · 2016-07-24 00:05:35

if you really want to get into it, try out CSS: The Missing Manual
http://shop.oreilly.com/product/0636920036357.do

tomowensphoto · 2016-07-24 17:42:55

I bought this book after Rod suggested it to someone else Ken. Now halfway through the 670 odd pages and tutorials and I am slowly learning stuff.
The tutorials (all downloadable) are good and there are finished examples if you mess things up. Very powerful stuff.
I'll practice on my test test site with all sorts of of stuff in the custom.css file to see if anything sank in. I 'm sure it will become second nature soon enough.

I'm lagging way way behind Rod but I have started to study and learn this stuff from starting out on CE2. I realised I could not ignore this stuff anymore. I've got Wordpress under my belt now but CSS is something that will change the label on the tin and it is soooooo much easier to create and modify pages in Backlight.

Ken · 2016-07-24 19:12:11

Tom, thanks for sharing your experience. Backlight is so much better than CE4 in terms of ease of use, but I was beginning to feel a little frustrated attempting layout modifications not directly available in the Backlight settings. Thanks to Rod's encouragement, I found and watched two short very good yoututbe tutorials explaining the basic idea behind HTMl and CSS. The 28 minutes spent watching these tutorials gave the little knowledge needed to make the CSS scripts provided on the Backlight forum, much more understandable. I was able to modify the scripts in a fairly easy straightforward way to accomplish what I wanted. This achievement replaced some frustration with fulfillment and has encouraged me to continue learning. Knowledge is a powerful thing.

I like learning through video tutorials, but I will consider the book Rod suggested. The challenge for all of us is fitting our learning projects in with our work projects, which in my case includes design and layout, photo projects (landscape photography as well as other types of commercial work including events and portraits).

rod barbee · 2016-07-24 23:56:44

Two good sources for video learning are Lynda.com and Treehouse.

They both have trial periods so you can try them out.

Community @ The Turning Gate

#1 2016-07-22 23:14:19

texture issue

#2 2016-07-22 23:58:34

Re: texture issue

#3 2016-07-23 00:38:28

Re: texture issue

#4 2016-07-23 01:05:30

Re: texture issue

#5 2016-07-23 01:43:36

Re: texture issue

#6 2016-07-23 01:54:39

Re: texture issue

#7 2016-07-23 02:29:02

Re: texture issue

#8 2016-07-23 02:48:05

Re: texture issue

#9 2016-07-23 14:11:13

Re: texture issue

#10 2016-07-23 21:57:55

Re: texture issue

#11 2016-07-23 22:55:11

Re: texture issue

#12 2016-07-23 23:15:19

Re: texture issue

#13 2016-07-24 00:05:35

Re: texture issue

#14 2016-07-24 17:42:55

Re: texture issue

#15 2016-07-24 19:12:11

Re: texture issue

#16 2016-07-24 23:56:44

Re: texture issue

Board footer