[Keelin]

Hi there,
I am using the parallax pro and have questions.
1. Is there any way I can use the Featured Image Slider so I am uploading the images I want to use, but lay text over them and/or a button that I can link to a page within the site? The site is http://www.imaginedbalance.com and is in its infancy in terms of content. I am just trying to work out navigation at this point.
2. While on the site , you will see in the Hero section just below the slider, there is a redundancy in the page title and the bio-the name comes up twice which is being pulled from the about page, can I just show an excerpt without the title?
3. what is the ideal size for the homepage slider?
4. Is there a way the logo could be one color on the site but change to another when I scroll down and the menu bar comes up? You will see as is, it is not prominent because it is lost on the image, but as you scroll it is fine against the solid background. Is there a way it can be white against the image but change to the color version once scrolling to solid menu bar? Hopefully that makes sense.
Thanks so much!

[Mahesh]

@keelin:
1. Yes, you can use Custom images and custom links on the slider. Go to Dashboard=> Appearance=> Customize=> Featured Slider and select Featured Image Slider in Select Slider Type option.

2. Go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS:

#hero-section .entry-header {
    display: none;
}

3. Please refer to the theme instruction for this.
https://catchthemes.com/theme-instructions/parallax-frame-pro/#featured-image

4. For this, add the following CSS:

#site-logo a:before {
    content: " ";
    background-image: url("url-to-your-desired-image.jpg");
    display: block;
    height: 150px;
    width: 126px;
}
 
.header-background #site-logo a:before {
    content: none;
}
  
.fixed-header  #site-logo a img {
    display: none;
}
  
.header-background  #site-logo a img {
    display: block;
}

Note: Use your desired image.

Regards,
Mahesh

[Keelin]

Thank you, Mahesh,
I did the things you said, but I must be doing something wrong.
This is what I now have in my CSS:

#hero-section .entry-header {
display: none;
}

#site-logo a:before {
content: ” “;
background-image: url(“http://imaginedbalance.com/wp-content/uploads/2017/03/ImaginedBalanceWhite.png”);
display: block;
height: 150px;
width: 126px;
}

.header-background #site-logo a:before {
content: none;
}

.fixed-header #site-logo a img {
display: none;
}

.header-background #site-logo a img {
display: block;
}

You can see that the title from on the Hero slider is still there though.
Also you can see that I have hidden the logo and it comes up in color as you scroll down. But I would like this version of the logo on the page when you land on it and then the color one to come up on the scroll, here is the image link: http://imaginedbalance.com/wp-content/uploads/2017/03/ImaginedBalanceWhite.png
I wonder what I am doing wrong there.

On another note, I have looked all over and cannot find where I replace the footer image behind the widgets along the bottom of the page, I do not even see it in my media files. It is of a train tunnel. Can you advise me on that?

Thank you so much for your help and quick responses, so appreciate it.
Keelin

[Keelin]

I also forgot to ask another question-when I bought the pro version, it said for life and then also had language for updates only being for a year. If I make changes in the CSS and then do an auto update to my WP theme, in a year is it going to be messed up because the CSS has changed or am I safe to make changes and then not worry about it?
Thanks

[Keelin]

Hi Mahesh-I figured the hero slider question out, so you can disregard that one. But the others I could still use some help with. Thanks

[Keelin]

I also figured out the footer image, not sure why that was such a challenge. So to make more sense of all of this thread, I am going to list the questions I still have here:
1. With the CSS, I added what you suggested for the logos-one on the landing pages (this one I would like to be this image: http://imaginedbalance.com/wp-content/uploads/2017/03/ImaginedBalanceWhite.png ) and one on the menu bar as you scroll down, (which I would like to be this image: http://imaginedbalance.com/wp-content/uploads/2017/03/Imagined-Balance.png ) This is what I added to my CSS, and it works with the scroll but there is no image on the landing page, hopefully that makes sense.

#site-logo a:before {
content: ” “;
background-image: url(“http://imaginedbalance.com/wp-content/uploads/2017/03/ImaginedBalanceWhite.png”);
display: block;
height: 150px;
width: 126px;
}

.header-background #site-logo a:before {
content: none;
}

.fixed-header #site-logo a img {
display: none;
}

.header-background #site-logo a img {
display: block;
}

You can see that I have hidden the logo and it comes up in color as you scroll down. But I would like this version of the logo on the page when you land on it and then the color one to come up on the scroll, here is the image link: http://imaginedbalance.com/wp-content/uploads/2017/03/ImaginedBalanceWhite.png
I wonder what I am doing wrong there.

2. When I look at the site on a mobile device (once the homepage logo is in place, right now it is not visible,) the logo lands over the homepage text, can I fix that?

3. When I bought the pro version, it said for life and then also had language for updates only being for a year. If I make changes in the CSS and then do an auto update to my WP theme, in a year is it going to be messed up because the CSS has changed or am I safe to make changes and then not worry about it?
Thanks Mahesh,
Keelin

[Mahesh]

@keelin:
1. Add the following CSS:

.header-background #site-logo a:before {
    background-image: url("http://imaginedbalance.com/wp-content/uploads/2017/03/ImaginedBalanceWhite.png");
    background-repeat: no-repeat;
    content: " ";
    display: block;
    height: 131px;
    width: 148px;
}
  
.header-background.fixed-header #site-logo a img {
    display: none;
}
  
.header-background #site-logo a img {
    display: block;
}

2. When I look at the site on a mobile device (once the homepage logo is in place, right now it is not visible,) the logo lands over the homepage text, can I fix that?

@media screen and (min-width: 990px) {
    #header-featured-image 
    {
 	margin-bottom: 144px;
    }
}

3. If you want to make changes to the theme, I recommend you to use Child theme. Change the theme files will result in loss of all modification. I you just want to Change CSS, I recommend you to use Custom CSS.

Regards,
Mahesh

[Keelin]

Mahesh,
Thank you so much for your time and help. I so appreciate it.

1. THe logo now works, thanks, but you will see that it is not right in terms of size- I tried to change the dimensions in the code but that did not work, you can also see a duplicate of the white logo beneath it, so I wonder how I can fix that. It will make more sense when you look at the site. http://imaginedbalance.com

2. When I change the header color from the default, which is #000000, to another color, it creates a bar across the top of the whole site, is there a way I can maintain the transparent menu until I scroll down and then the scroll color is #b2b2b2 rather than the default black?

3. And regarding the child theme/CSS conversation, these small changes we are making to the CSS, are they child themes or will any them updates mess up the site as a result of these CSS changes? I do not know much about these things but just want to prevent the site from going down when updates come along.

THanks again,
Keelin

[Mahesh]

@keelin:
1. Made some correction in the above code, please use it.
2. Add the following CSS:

.fixed-header.header-background {
    background-color: #b2b2b2
}

3. No, this won’t be affected by theme updates. You won’t lose anything in updates unless the changes are made in the theme files itself.

Regards,
Mahesh

[Keelin]

Hi Mahesh,
I have a couple more questions for you. Things have evolved since last touching base.
1. On the mobile version, the logo lands right on the face of a person photographed, is there a way to justify it left so I can avoid that?
2. Right now as you scroll down the menu bar turns gray, I wonder if that can be transparent and maybe the logo goes away.
THanks ,
Keelin
site again: imaginedbalance.com

[Mahesh]

@keelin: Add the following CSS:
1. On the mobile version, the logo lands right on the face of a person photographed, is there a way to justify it left so I can avoid that?

#site-branding {
    text-align: left;
}

2. Right now as you scroll down the menu bar turns gray, I wonder if that can be transparent and maybe the logo goes away.
THanks ,

.fixed-header.header-background {
    background-color: transparent;
}

Regards,
Mahesh

[Author]

Posts