[tfmwa]

Thank you guys for sharing these solutions! This was a lot harder to figure out than it should be in my opinion.

What worked for me is adding a logo using the Customizer as normal. And then adding the custom css @PaulS mentioned last to another custom css rule I am using to increase the height of the header area, because I'm using a bigger logo:

.header-image .site-title > a {
min-height: 140px !important;
background-position: center center !important; }

[tfmwa]

It might not be the prettiest solution, but you can also change the gradient settings to 0. Please note that it's now necessary to add !important before the semicolon to the lines for .image-section.

Lighter gradient:

.image-section {
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.7) 100%) !important;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.3)), color-stop(80%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.7))) !important;
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.7) 100%) !important;
	background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.7) 100%) !important;
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.7) 100%) !important;
	background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.7) 100%) !important;
}

No gradient:

.image-section {
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%) !important;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(30%,rgba(0,0,0,0)), color-stop(80%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))) !important;
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%) !important;
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%) !important;
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%) !important;
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%) !important;
}

[tfmwa]

Please note that !important now needs to be added to each line before the semicolon for this change to the gradients to work.

For example, for a lighter gradient:

.image-section {
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.7) 100%) !important;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(30%,rgba(0,0,0,0.3)), color-stop(80%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.7))) !important;
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.7) 100%) !important;
	background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.7) 100%) !important;
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.7) 100%) !important;
	background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.7) 100%) !important;
}

[tfmwa]

I very much appreciate your answer since you feel it's not the highest priority a website owner should have. 🙂

Thanks for clarifying where the jQuery comes from. And for the two links to the plugins, knowing the right keywords like async and defer to use for additonal research has helped a lot. Everything makes a lot more sense now, including the asynchronous Google Analytics code. I never made that connection until now.

I also found a lot of mentions of https://wordpress.org/plugins/autoptimize/ and I think we'll be using that plugin to try and improve more than just js loading times and positions.

Thank you very much for taking the time to help us with this issue and for your overall contributions to the Studiopress and WordPress community. I hope it helps future users who come to the forum looking for an answer as well (please leave a reply and thank you if it does!)

[tfmwa]

@Christoph you are a wizard. Thank you. That completely did the trick.

I would never have figured that out on my own. I hope this can help someone else in the future as well (if so, please take the time to leave a reply!)

[tfmwa]

Thanks for your suggestion. I'll play around with it a bit more over the next couple of days.

What I personally want to achieve is have the sleekest version (post scroll) of the black menu all the time, no matter what. Editing the .js like @Christoph suggested does work. Just need to tinker a little more to get rid of the snapping effect.

[tfmwa]

Nothing changed at all. So the logo did not maintain the same size.

After applying the css provided, the theme continued to behave exactly like the demo theme. With and without @Christoph's earlier suggestion of the .js modification. The .js modification does make the navigation black everywhere and the sleekest version. But when a page loads, it first loads the bigger version of the black navigation which then quickly shrinks/snaps down to the smaller, sleeker version without all the extra padding. And that happens on every page load.

[tfmwa]

Hi @launchapril2015,

I tried your code with and without @Christoph's modifications and in neither situation it seems to have any observable effect at all. 🙂

[tfmwa]

I am a doofus.

I copied the code from the forum notification email I got. Sadly, the single quotes get replaced with their html equivalent.
Once I copied the code from your actual post, it worked.

It does seem to create a snapping effect though. When the page loads, the menu starts out as the larger dark one and then quickly snaps to the size of the smaller dark one. It does this on every page load in both Chrome and IE. I'll dig into the css!

[tfmwa]

Hi Cristoph,

Thanks so much for your reply!

Replacing the code made the menu stop resizing when you scroll down, which is great.

I'm going to see if I can get the homepage menu to turn into the dark one and overall remove some of the padding from the menu by changing the css so I get the sleek menu look.

[tfmwa]

Glad to hear you found the cause of the issue. 🙂

[tfmwa]

I cannot see any changed code related to this issue in your active css file.
Please describe how you're trying to apply these changes in detail.

[tfmwa]

I personally went with the following one, which is slightly darker than @jufo's.

.image-section {
background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.6) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(30%,rgba(0,0,0,0.3)), color-stop(80%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.6)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.6) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.6) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.6) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.6) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#33000000′, endColorstr=’#e6000000′,GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}

[tfmwa]

The code you posted looks the same as the original as far as I can see?

I've tested the following code on the Altitude Pro site I'm currently working on. And it removed the gradient completely as the transparency is set to 100% (by changing ALL the x.x values before the closing brackets to 0).

Only changing the values for the first background line did not work in either Chrome or IE.
Once I changed ALL the transparency values, it worked.

You can 'find & replace all' the four x.x values to avoid making mistakes.

.image-section {
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(30%,rgba(0,0,0,0)), color-stop(80%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#33000000′, endColorstr=’#e6000000′,GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}

Please replace the corresponding section of code in your css file with the code provided above.
Be sure to save your changes if using the Editor screen in WordPress. Or overwrite the css file on your server if you're using an FTP program.

Then open an incognito window of the browser of your choice and open your site again to compare.
CTRL+F5 a couple of times even in incognito just to be sure.

The background images should be displayed clear/normal without any type of gradient using the code above.
This makes it easy to see the difference compared to the original settings. Once you confirm it's working, you can tweak the transparency values to something more suitable.

[tfmwa]

This question has been answered before here:

Altitude Pro front page images shading

Read the following article about CSS gradients to understand how they work:
http://www.w3schools.com/css/css3_gradients.asp

In the Altitude Pro style.css Front Page section you'll find:

.image-section {
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}

Play around with the number values - particularly the last one after all the zeros - (and perhaps even percentages) to achieve the effect you want.

Always make a backup of your website and current css file before making any changes.

[tfmwa]

@kelmom
Your suggested method also removed the menu completely on my site. 🙂

@Dan B
Thank you very much for posting a clear and effective way to remedy this menu 'feature'.

I love sticky menus, but only when the menu is visible in the first place and the sticky menu appears once the rigid menu scrolls from the screen.

[tfmwa]

So scratch that. In the plugin settings you can click a button to generate a thumbnail for all your posts, so it will work retroactively.

We're using the Expose theme. To get the image to display 'full width' on the blog page (or in an archive template if you will) I needed to add:

img.alignleft.post-image.entry-image {
width: 760px;
}

Probably not the prettiest way to fix it, but it gets the job done. Basically, view the source code of the blog page and see what the featured image/thumbnail class is and change the width property with some custom css.

You may or may not have to change your thumbnail settings under Dashboard > Settings > Media as well.

Hope this helps someone in the future.

[tfmwa]

This plugin + custom function might help:
http://wordpress.org/support/topic/thumbnail-not-generated-from-flickr-post?replies=4

Still trying to figure out how to change the default embed/wordpress template width for Flickr images posted to WordPress in this manner, but it works. Keep in mind it only works for new images posted in such a way, it won't work retroactively.

I think Studiopress can really set its dedicated photography themes apart from the competition even further by adding support for Post to WordPress functionality like this from Flickr and possibly other mainstream image platforms.

[tfmwa]

@tlars try checking/unchecking minify css and be sure to check in an incognito window as your browser cache might be playing games with you, even after multiple CTRL+F5s.

@GaryJ
Thanks for the css code, works like a charm after removing the surplus '{'.

#nav .genesis-nav-menu {
float: right;
width: auto;
}

[Author]

Posts