[matthewseanmclachlan]

Hi Mahesh,

Okay, a little clarification on my part…

1. Turn off transparency on the top menu bar:

I added the CSS you suggested, but it did not work? Is there some CSS i should have also deleted possibly?

2. make -some- of posts transparent:

I added the CSS you suggested, but I only want the white background of the post to be transparent, but the text, graphics, etc. in the post to stay normal.

3. Make footer tranparent:

Same thing applies from (2), I added the CSS you suggested, but I only want the background of the footer to be transparent, but the text to stay normal.

Thanks in advance!
Matt

[matthewseanmclachlan]

Great, this works perfect! Thanks Mahesh!!

[matthewseanmclachlan]

Hi Sakin,

Question, I changed the size of my slider and gave it a white background color, but no matter how i resize the image there is always a white bar on top? Is there a CSS to remove this white top bar?

My site: trendfly.org

Thanks in advance!
Matt

[matthewseanmclachlan]

Hi Mahesh,

Thanks for the clarification! All of your suggestions worked.

Follow up question: How do I increase the space between the last post and the bottom of the web page? Currently, when the post ends the web page ends. I will like to elongate the page a little further.

Website: http://www.trendfly.org/

Thanks in advance!
Matt

[matthewseanmclachlan]

Hi Mahesh,

In addition, it only makes sense that I added this same code to the top slider as well. What is the CSS needed to create a drop shadow to the top slider?

Thanks!
Matt

[matthewseanmclachlan]

Hi Mahesh,

All of your code you offered worked great, but I would like to decrease the opacity of the drop shadows and the sizes that I added to my posts. What in the code you gave me changes these attributes?

Thanks!
Matt

3. To drop shadow to the posts, add the following CSS:

#main article.post {
-webkit-box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 1);
-moz-box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 1);
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 1);
}

[matthewseanmclachlan]

Mahesh,

I added the code you suggested and the background is fixed. Thanks!

1) I would now like to know how to move the slider up snug up with the menu bar

2) How do I increase the space in between the posts?

3) How do I add a drop shadow to the posts?

Thanks in advance!
Matt

[matthewseanmclachlan]

Hi Mahesh,

I have put a draft of a background on my site. I was hoping the background would stretch to fill the screen when centered. Is this possible? That image is at 1600×1600.

I also did not find in my Custom CSS the code for the body (see code, below). Should I just copy and paste your CSS in the Custom, and I will be okay?

Website: http://www.trendfly.org/

Thanks in advance!
Matt

.site { padding-top: 75px; }
#header-top { position: fixed; }

/* Menu Font Size */
#header-menu ul.menu a { font-size: 20px; }

.home .post-44,
.home .post-44 .entry-content,
.home .post-44 .entry-content p {
margin: 0;
padding: 0;
}
.home .post-44 .entry-header {
display: none;
}
.entry-meta { display: none; }
#top-logo img {
margin-bottom: -80px;
max-height: 160px;
}
#access-top .menu {
bottom: 10px;
position: absolute;
right: 0;
}
#access-top ul.menu a {
font-size: 18px;
}

@media screen and (max-width: 940px) {
#top-logo img {
max-height: 150px;
}
}
#header-top {
background: #ea3b36;
background: rgba(234, 53, 54, 0.7);
box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
position: fixed;
z-index: 99;
}

[matthewseanmclachlan]

Hi Mashesh,

Not a problem. Go to the “about” section. You will see that all the letters are capitalized, it does this automatically.

Thanks,
Matt

[matthewseanmclachlan]

Hi Mahesh,

This worked perfectly.

Thanks!
Matt

[matthewseanmclachlan]

Okay, the graphic that said “About” in my “About” post has disappeared. This is without adding a table in the post, but only because I added text.

I would also like it so that the user is not directed to another page by clicking on, “Continue Reading…” All content should be seen on the main home page. Is this possible?

Website: http://www.trendfly.org/

Thanks for your help!
Matt

[matthewseanmclachlan]

Mahesh,

This worked perfectly.

Thanks!
Matt

[matthewseanmclachlan]

Hi Sakin,

What do you mean by, “if you have added in table in text mode.” I am familiar with the text mode, but am not familiar how this is works in regards to adding a table to a post.

The post I am trying to create is very simple: 2 Rows. Left cell, image. Right cell, text.

*I should also add when I have tried adding text to a post, without a table, the post will disappear or say “click here to continue reading…” I do not want this. I want all my content to stay on this page.

Thanks,
Matt

[matthewseanmclachlan]

tried it. here is the results. the extra white padding at the top is not necessary i don’t think, and still it bounces? haha

it’s interesting, because it seems like an animation added to theme? I just want to switch it off.

I’m sure you understand. essentially I just want the menu bar to behave as it does when you scroll down the page. Staying fixed at the top. I just want that smooth scroll to be how it behaves when you open the site.

Example: http://www.theinfantree.com/

[matthewseanmclachlan]

Okay, I made it live again and deleted this css code:

#header-top,
#header-top.fixed-header {
-moz-transition: all 0.50s ease-in-out;
-webkit-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;
}

let me know then how to remove the bounce effect (I’m assuming the ease-in-out is only a part of this problem) and what css to use to make the menu simply scroll down with the page.

Thanks again Sakin!

[matthewseanmclachlan]

Interesting. To clarify, what I want to do is remove the effect? I don’t want it to bounce when I scroll, I simply want the menu to scroll down with the page. There is no way to remove the bounce effect?

If not, I guess I will try to find another solution.

Thanks again!
Matt

[matthewseanmclachlan]

http://www.trendfly.org

Okay I got the scrolling effect for my posts! But the menu bar still snaps off from the top in its animation. This got me wandering if I could change the animation effect on the menu bar. I think it uses:

`-moz-transition: all 0.50s ease-in-out;
-webkit-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;`

The scrolling animation effects for the smooth scroll uses:

ease-in-out-quad

Is there any way to get this animation effect for the menu bar? As you can see the animation for the scroll has no bounce or elasticity.

Thanks in advance!
Matt

[matthewseanmclachlan]

Hi there,

I tried to use the same code to increase my font size in my menu, perhaps I need a different kind of code? Please advise.

/* Menu Font Size */
#header-menu ul.menu a { font-size: 14px; }

Thanks!
Matt

[matthewseanmclachlan]

I did, it still jumps when I scroll down. Is it possible for it to not jump at all as I scroll down from the top?

[matthewseanmclachlan]

Hey Sakin,

So I found this code as a possible solution for smooth scrolling, but wanted to run it by you before adding it. I think it wants me to paste in HTML. Let me know your thoughts.

Thanks!
Matt
Website:

Here is the link I got it from: https://css-tricks.com/snippets/jquery/smooth-scrolling/

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

[Author]

Posts