Menu and Footer

[Harold Altamirano]

Hello

I would like to add the light box behind the menu as in this site:

Inicio

Also how do I make it scroll as in theirs?

One last thing, I want to add an image to the footer and behind logo (also as in the above website)?

Thank you,

[Bill Robbins]

Hello Harold,

Great questions. Let’s see if we can find answers for you.

Menu Highlight

You can highlight the current menu item as they have. Here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   nav#top-menu li.current-menu-item a,
   nav#top-menu li a:hover,
   nav#top-menu ul ul li a:hover,
   nav#top-menu ul li ul li.current-menu-item a,
   nav#top-menu ul li.current-menu-item a:hover {
   	color: #617C88;
   	border: 1px solid rgb(193, 196, 164);
   	background: rgba(0, 0, 0, 0.26);
   }
   

3. Update your settings.

---

Home Page Slider

They have customized the theme here to incorporate a slider plugin called Revolution slider. One way to create a similar feature would be to add a slider plugin like Soliloquy. That plugin will allow you to add in a slider via a widget. We can then style it with a bit of Custom CSS so that it’s full width like the one they have.

If you want to give that a try, install the plugin and add a slider to the first widget spot on your home page. Then let me know it’s ready. Then I can take a look at your site and send over the correct changes for you.

---

Graphics Behind Header/Footer

The process for each of these is similar. Here’s what to do:

1. Go to the Media Section in your WordPress dashboard and select Add New. Upload the header image you’d like to use. Once the upload is complete, click on the edit link. Look on the right hand side of the screen that opens up for the File URL. We’ll need that in just a minute. Repeat that for the footer image too.
2. Go to the Theme Options page and click on the Advanced tab. Scroll down to the Custom CSS box and add this:

   
   #header {
   	background-image: url(https://yoursite.com/header.jpg);
   }
   
   #footer {
   	background-image: url(https://yoursite.com/footer.jpg);
   }
   

   Replace the http://yoursite.com/header.jpg with the URL to your header background image and the http://yoursite.com/footer.jpg with the URL to your footer image.

3. Save your changes.

That should let you add in a header and footer background image.

Let me know about the slider and also if you have any questions.

Thanks,
Bill

[Harold Altamirano]

Wow…thank you for your super fast reply…One quick clarification question…what size should I do footer and header images?

Also, I do have HUGE IT GALLERY installed…its a slider too….can that work?

Thank you oo much for taking the time to help me

Harold

[Bill Robbins]

Harold,

Since you already have that on installed, give it a try. We’ll see if we can make it work too.

Bill

[Harold Altamirano]

Ok, I will…

One quick clarification question…what size should I do footer and header images?

Thanks

[Bill Robbins]

Harold,

Sorry about that. It varies tremendously depending on what you’re trying to do there. Could you let me know a bit more about what you’re wanting to do with images in the header and footer?

Bill

[Harold Altamirano]

I am trying to do something similar to this page:

Inicio

In the header, I want a shape behind the logo as in their website

For the footer…similar to what they have…

Thanks again

[Bill Robbins]

Good Morning Harold,

If you’re going for an images that will span the entire header and footer without repeating, I would make them 2500 pixels wide by 130 pixels tall for you header and 80 tall for your footer.

Let me know how it goes,
Bill

[Harold Altamirano]

Hi again, I tried the slider using the image sizes 2000 x 1400 and it doesn’t fill the whole screen, do I need to set it in a different size?

[Bill Robbins]

Harold,

Most likely we’ll have to add some custom CSS styling to make the slider go full width. I took a look at your home page, but didn’t see it there at the moment. If you want to add it, I’ll be glad to make sure it’s possible with that slider and then send over the instructions on how to make it happen for you.

Bill

[Harold Altamirano]

Thank you soo much!

I am working on it…the wordpress has been agonizingly slow…not sure why…

What do you need me to do or what do you need in order for you to know what to do to make the slider fit nicely? Just tell me and I will do it…

Thanks

[Bill Robbins]

Harold,

Sure, if you’d like to have the slider be full width on your home page (in place of the hero image), go on and add it to the first widget area on your home page. Right now I don’t see it there.

By being able to see the slider there I can interact with the code that’s generated and give you the correct styling. Plus it saves me setting up a test server to sort through that as well.

So if you don’t mind, add the slider you’d like to have full width to your home page (or send the URL to the page where you want it) and I’ll get back to you with it.

Thanks,
Bill

[Harold Altamirano]

Done…

Please let me know next steps.

Thanks,

[Bill Robbins]

Thanks Harold. Let’s give this a try:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #home-widgets {
   	margin-top: 0;
   }
   
   #home-widgets .widget.widget_huge_it_gallery_widget {
   	width: 100%;
   	padding: 0;
   }
   
   .huge_it_slideshow_image_wrap_gallery_1,
   .huge_it_slide_container_gallery_1,
   ul.huge_it_slider_gallery_1 {
   	width: 100% !important;
   }
   
   #home-widgets .widget.widget_huge_it_gallery_widget img {
   	width: 100% !important;
   }
   

3. Update your settings.

Hopefully that will get it.

---

I noticed looking at the site, it loaded really slowly. In the code for the footer, I have a timer there so I can see how long it takes for the page to be generated. It look 254.849 seconds for it to be put together by the server. That should typically be less than 3 for a shared web hosting environment. Do you mind if I ask what company is hosting the site?

Bill

[Harold Altamirano]

Thank you!
I will give that a try and will let you know…

Yes, I am with customer support with Godaddy right now…apparently there is a plugin conflict…So I am trying to identify which one.

This is new…The last thing I installed was the theme and the events manager…but it worked fine early on…

Not sure what is going on…

[Harold Altamirano]

You have been beyond amazing!

Check out the website: http://www.lifefellowship.church

One more thing and I am sorry to abuse your kindness…I can’t get the events to show on the events page…can you help?

Thanks,

[Bill Robbins]

Good Morning Harold,

I’m glad that I could help you out. It looks like you were able to get the events showing up at http://lifefellowship.church/events/ last night. If you do run into any questions there, let em know.

Your site really turned out well. Good work 🙂

Have a great day,
Bill

[Harold Altamirano]

Hello Bill

Thanks for all your help.
I have one more question. How do you get the current series to show on the home page?
The previous one keeps showing up.
The date of the podcasts that are not showing is the latest.
I can’t put a date on the series.
Please let me know how to do it

Thanks again,

[Bill Robbins]

Good Evening Harold,

Excellent question. By default WordPress will list the series in reverse chronological order from when they are created. You can change that though by using a plugin called Category Order and Taxonomy Terms Order (https://wordpress.org/plugins/taxonomy-terms-order/). It’ll let you rearrange them via drag and drop.

If you have trouble, let me know.

Take care,
Bill

[Harold Altamirano]

Ok, I uploaded it. How do I do it. Do I go into the series page and drag and drop?

[Bill Robbins]

Under podcast, it will add a new menu called “Taxonomy Order.” You can arrange them there.

[Harold Altamirano]

ok got it…
The order changed on series once I changed it on Taxonomy|…but still shows the previous one as before on the home page

[Bill Robbins]

The list there is the reverse order of how they will be on the series page and the home page. The last one in the list will be the “current” series.

[Harold Altamirano]

Just reversed them and it is not changing…any ideas?

[Bill Robbins]

It looks like they are matching to me. The current one on your home page is the first one listed on your series page. They are showing the same order.

You can always delete the current series and add it again. The last one created will be the one listed in the current if everything else is equal.

[Author]

Posts