[nerwin]

That’s a bummer!

Is it a way around it? I tried removing the featured image and just placing the photo in the editor instead but it removes it from the blog list home page. I’m not sure if it’s because of the automatic excerpts.

[nerwin]

It is activated.

[nerwin]

I also wanted to mention that the images in on the portfolio pages are not the same size, they are different sizes.

I went into the customizer and selected fit rows, but that didn’t make any difference.

Also you can clearly see that one of the titles below of the portfolio item is not even aligned properly.

[nerwin]

AH! My mistake. I did not see that.

I have lots of custom code in there.

Thank you haha.

[nerwin]

Odd.

It’s in there and I’ve cleared my cache several times both on desktop and mobile.

I removed that line from the media query version you gave me earlier. Should I have no done that?

[nerwin]

That didn’t work unfortunately.

[nerwin]

Haha….ugh.

So I just checked on mobile view and it didn’t fix it there.

On desktop view, its perfect.

But on mobile the same issue is occurring.

Is it just the matter of changing the media queries a bit?

[nerwin]

Dude, you are amazing.

I added this which brought up the featured image/video which made it perfect.

@media screen and (min-width: 768px) 
{
.entry-header { margin-bottom: 0em;}
}

Thanks again, I really appreciate it.

[nerwin]

Thank you! That worked like a charm!

[nerwin]

Thank you! That worked perfect.

[nerwin]

How do I add a hover color to those links (the ones that have the underline)? I can’t figure it out.

[nerwin]

Well I managed to get it to work doing this:

 .mfp-preloader {
    width: 24px;
    height: 24px;
    opacity: 1;
    margin: 0 auto;
    background: url("http://nickerwin.com/wp-content/themes/theblogger/images/bckg/loading.gif") center center no-repeat;
    background-size: 24px 24px;
}; 

Apparently I coulden’t just edit that one line, I had to add the whole thing in the custom css to make to make it work right.

[nerwin]

I actually ended up figuring it out, it wasn’t too hard.

Besides changing the background color, I had to also change some of the text color too.

The hardest part of it was modifying the svg skin file for the Lightbox so the controls would be visible but I just used notepad++ to find and replace white color with a black color and it worked perfect.

I think it would be kind of nice to let users decide if they want to use their own lightbox or the built in one, or just turn it off altogether.

Also, perhaps making a light and dark settings for it in the customizer, that might be pretty cool.

The only problem I’m currently having is trying to get the black preloader gif to load instead of the white one.

All I’m simply doing is replacing the “loading-light.gif” with “loading.gif” since there was already a black version in the same folder.

.mfp-preloader {background: url(../images/bckg/loading.gif) center center no-repeat;}

I’m not exactly sure what I am doing wrong? I thought the background css urls need to have questions but when I add them, it just goes back to loading the white ones.

My website isn’t 100% done yet, but you can check it out. http://nickerwin.com

[nerwin]

Thanks! That worked perfect.

[nerwin]

I checked and it’s already enabled.

The lightbox works on mobile, it just makes the photos too small for viewing in my opinion whereas photoswipe shows them nice and big. I guess if you were viewing it on a tablet it would be okay but even on my Galaxy S7 the photos are just tiny. It’s OKAY when viewing vertical but once you go horizontal its small. Too small for me.

It’s not a HUGE deal, I’ve seen worse. But I suppose I could live with it…if I could at least change the color of the lightbox. I’m not very keen on the blueish/grey transparent color on the background of the lightbox. Can this easily be changed to a black or white color?

[nerwin]

Yes I have the plugin activated and I checked the screen options and there is no option for featured image, just Featured Audio/Video/Link.

[nerwin]

Thanks, I guess I’ll just leave it for now and make it a project for another day.

It would be neat if you could make it a feature someday though.

[nerwin]

I’m quite an amature when it comes to CSS, so forgive me if I don’t explain it well.

This first code here made the image smaller and a 3:2 crop. I’m not sure if it’s 100 percent perfect 3:2 but its pretty close, good enough for me.

@media screen and (max-width: 991px) {
.blog-list .featured-image {
width: 38%;
padding-top: 26%; }
}

I’m not sure if I needed to media query or not, but it seemed like it didn’t work without it.

Now while that made the images smaller and cropped the way I wanted, when I resized, it still went to square. I believe the problem I was having was the media queries, not having have max and min defined.

@media screen and (min-width: 992px) {
.blog-list .featured-image {
width: 38%;
padding-top: 26%;}
}

Once I did that, it worked the way I wanted.

Now I wanted the excerpt to show and I did that by using this code:

.blog-list .entry-content {display:block;}

I did other padding and margin adjustments to make it look good but on mobile it didn’t look so good. So I did this and made the featured image full width when the page is reized to 600px using this code:

@media screen and (max-width: 600px) {
.blog-list .featured-image {width:100%; padding-top: 67%;}
.blog-list .hentry-middle {width: 100%; padding: 1em 0em;}
}

And this worked quite out really well. This only major compliant I have is the image quality is pretty poor and I’m not too sure why. But it’s not a major deal.

I still have some little kinks here and there work out but it’s pretty much done. I’m just trying to get the post date inline with the categories on the blog list but not on the first full post. However, I don’t think it’s possible without modifying the PHP files and I honestly don’t really want to do that. But for some reason, I still think its possible to do with some custom CSS because the “entry-meta below-title” div class is still there even when I hide the below meta data, but the actual metadata content isn’t there. So I don’t know. I made a post about that that anyways. http://www.pixelwars.org/forums/topic/how-to-move-below-title-meta-data-above-title-except-for-first-post/

Anyways, I’m it’s not 100% correct way of doing things, but it works and I guess that’s all that matters. If you have any suggestions, I’d be glad to hear them.

[nerwin]

I can’t believe it. But I figured it out. Took me all day but I manage to do what I wanted to do.

[nerwin]

Well the images are not resizing properly. I’m not sure what I can do to make them smaller.

[nerwin]

The other issue is trying to align the entry headers.

I want the single full blog post to align center which it is right now, but I want the smaller blog list below to have the entry header aligned left not center.

Ok. I did manage to get this to work, I just had to add first child which worked perfect.

For anyone who is wondering, I used this code:

.blog-list.first-full .hentry:first-child .entry-header {text-align: center;}

Which allowed me to keep the first entry of the 1st full + list layout entry header in the center and be able to align the list entry headers to the left.

[nerwin]

I’m already using that exact code but still can’t get the small feature images to resize on mobile.

[nerwin]

Yeah I found the culprit. I might have to copy what I have and bring it into notepad++ and clean it up.

[nerwin]

Well I can make it work with this code:

@media screen and (min-width: 992px) {
.blog-list .featured-image {
width: 275px;
padding-top: 184px; }
}

The problem is when I go mobile view, it goes back to square. I’m having a hard time figuring that one out.

[nerwin]

I removed the media query but it didn’t make a difference.

[nerwin]

My apologies, I guess I didn’t think about creating another thread. My bad.

That code works, but not on mobile view. I tried different min-width, but none of them work.

[nerwin]

That worked great!

Is there a way to change the social icons and search icon color in the nav bar?

[nerwin]

Oh my goodness. I’m such a fool.

The alignment issue was caused by the “I Recommend This” plugin, I don’t have the plugin enabled and forgot to change it to hidden in the settings.

That seemed to solve the alignment issue.

Something so simple…haha.

[nerwin]

Well this code seemed to do the trick.

.entry-meta.below-title .prefix {
display: none;
}

However, there is still a strange alignment issue. I removed all the custom code and the issue is still present. It just doesn’t look right.

[nerwin]

Thank You!! That worked.

[nerwin]

I’m talking about the menu item colors. Like the Home, About, Contact links.

[nerwin]

I’m aware of that one. I’m talking about the base color if you know what I mean.

[nerwin]

Thanks.

What about the nav link colors?

For some strange reason it will on change color if I do {color: white;} but if I did {color: #fff;} – It won’t work! Very strange.

[nerwin]

I’m using Chrome.

My apologies, I didn’t notice at first, but when I got rid of the letter spacing in the footer it seemed to have centered the icons.

.site-footer .site-info {letter-spacing: 0px;}

Sorry that I’m not using the theme what it was originally intended for.

[nerwin]

Sweet! I can’t wait for the update.

Also wanted to add another alignment issue if you don’t mind.

I added social media links in the footer on top of the copyright area and the icons are off centered too. Now I don’t REALLY need the background to them, but it does look cool.

Here’s an example.
http://nickerwin.com/wp-content/uploads/2016/10/2016-10-26.png

[nerwin]

I spent hours trying to figure this out and adding span would have worked. Wow…I sure don’t feel very smart.

Thanks for all your help, I really appreciate it!

[nerwin]

I know its probably not the right way of doing things, but it works for now until someone here can find the proper way. Now I did check out the demo sites and they also have the same issue, so I think its just a bug that needs to be worked out.

But this will center the meta data, Its probably not exact but looks a lot better to my eyes.

.entry-meta > span:last-child {
margin-right: -13px;}

Its a huge improvement on mobile.

[nerwin]

I had to do this to make it work:

.is-menu-bar .menu-wrap, .is-header-row .header-wrap, .is-header-small .header-wrap, html .site .footer-subscribe { background-image: url(‘#’); }

haha.

[nerwin]

I just tried this and I can’t get it work, the orginal one is still there. Tried clearing cache and what not.

[nerwin]

Bummer. Well I don’t intend to share videos too often anyways, I did manage to make videos work the same as featured images though, which is cool.

Maybe you can help me with something else, I’m trying to adjust the font of the entry meta. I tried added .entry-meta in the custom css but it doesn’t do anything.

I didn’t see any options in the customizer either to adjust the entry meta, Unless I’m just not seeing it. I just want to style it more.

Thanks in advance!

[nerwin]

Will it affect videos too?

[nerwin]

Sorry about that.

I decide to change my design and do something different.

HOWEVER, I am still very much interested in making the featured images and regular images wider than the text but not like insanely huge like the full image class. Since I post a lot of my photos, I just want them to be the highlights of posts.

Also, can videos too match the size?

Thanks for all your help, I really appreciate it a lot.

[nerwin]

Made a mistake.

[nerwin]

Ok well that seemed to have worked but now the grid/masonry formats featured images are too small haha.

[nerwin]

Thanks!

Everything is kind of messed up at the moment. I’ll have to fix it but I did also notice when in grid/masonry format all the images are smaller too.

[nerwin]

So I went to the customizer and went to single post and selected “featured image full width” and that seemed to have done the trick for the most part.

When I add the image tag “full” to the images I added in the posts, it actually makes them smaller.

My website isn’t done yet, still figuring things out. This theme has so many options haha. I’m using the john template.

But it’s http://nickerwin.com if you want to check it out for yourself.

[nerwin]

Thanks! But that didn’t seem to work unfortunately.

I just want the images a little bit bigger than the text. Can’t be too hard right? Haha.

[nerwin]

Okay…I’m truly an idiot.

It was a plugin causing the whole problem. Disabled it and everything works perfect!

Silly me.