How to update from version 2.1 to 3.1

[bsastech]

Hi Jason,

I have a client who uses your theme and insists on doing most tasks himself which gets him in trouble and costs him $$ which is great for me! Now he has dug a hole for himself and I need to get him out of it! It turns out that the last update he did on the theme was: Alyeska 2.1.4 with Theme Blvd Framework 2.1.0 which is obviously way out of date! When moving to Version 3.0 and 3.1 you ask that certain steps be followed. Now the only download available is the latest version 3.1.4. I would be grateful if you could advise on the best way to upgrade from 2.1.0 to the 3.1.4.

Many thanks
Tim

Topic

[Jason Bobich]

Hello Tim,

If he hasn’t been making code customizations, updating is really a breeze. This is really the only info you need:

http://support.themeblvd.com/updating-to-framework-v2-3/

Also, in the changelog, I would just read the 3.0.0 changes, as these are most relevant out of everything. This way, you’re just aware of the major things that have changed. The big thing in going to 3.0+ is that many of the elements that used to be in the theme now exist in separate plugins you need to install. But this is all prompted to you when you make the update; so it’s all fairly easy to do.

http://themeblvd.com/changelog/?theme=alyeska

The few minor things talked about it the 3.1 update article really aren’t all that relevant because you were never at 3.0.

[bsastech]

Hi Jason,

Wow what a difference between 2.1 and 3.1….love it! It’s taken nearly 2 weeks to sort this out with my client but after following your great instructional videos and advice I upgraded successfully but I have a few issues on my client’s site now that were not there before:

1) I have all the correct “responsive settings” at Appearance>Theme Options>Configuration but I am losing my last menu item from Menu on Macbook Pro 13″, iPad, iPhone…..21″Samsung Monitor shows complete menu. (FYI Menus were fine before upgrade).

Also I have changed all the colors for responsive mobile menu and added them to custom.css on Child Theme but one color is still coming up as YOUR Classic Green:

/* CLASSIC GREEN */

.classic-green .sf-menu ul {
background-color: #00563d;
border-color: #1a2f04;
}
.classic-green .sf-menu li li a:hover {
background-color: #007656;
}

.classic-green .sf-menu a,
.classic-green span.responsive-nav-text {
color: #ffffff;
}
.classic-green .sf-menu ul {
background-color: #007c46;
border-color: #004A2A;
}
.classic-green .sf-menu li li a:hover {
background-color: #33966B;
}

I have obviously missed out one of them but am at a loss which one it is! (It is the color of “Parent” menu item…..driving me crazy! ( I have option: Full graphic menu with toggle set so that you can see it if you visit site)….sub menus are fine!

2) Gallery slideshow shows slide number and total (5 of 20) in the transition between slides (like something is broken)…..e.g. http://qcc.school.nz/extra-curricula/sports/

3) Apart from Homepage all pages with Sidebar Right now have their Sidebar at the bottom of content!….e.g. http://qcc.school.nz/about-us/news/ this is especially worrying as I have not added any additional plugins…..I have only added the new Themeblvd plugins after the upgrade but something is obviously broken.

4) One last thing: I love the sliders but when I click on an image in the slider and it opens in the lightbox is there any way to make the slider slides scrollable (like a Gallery) once open in the lightbox?

Any pointers would be greatly appreciated!

Many thanks.

Regards
Tim

[Jason Bobich]

1) The CSS for the menus was re-written a little in menus.css.

http://qcc.school.nz/wp-content/themes/alyeska/assets/css/menus.css

So you just need to start from where you originally copied and modify it again to

/* CLASSIC GREEN */
.classic-green .menu-left,
.classic-green .menu-right,
.classic-green .menu-middle,
.classic-green .sf-menu > li > a:hover {
	background-image: url(../images/layout/menu/menu-classic-green.png);
}
.classic-green #search-trigger {
	background-image: url(../images/layout/menu/search-popup-trigger-classic-green.png);
}
@media 	only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (-moz-min-device-pixel-ratio: 1.5),
		only screen and (-o-min-device-pixel-ratio: 1.5),
		only screen and (min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx) {
	.classic-green .menu-left,
	.classic-green .menu-right,
	.classic-green .menu-middle,
	.classic-green .sf-menu > li > a:hover {
		background-image: url(../images/layout/menu/menu-classic-green_2x.png);
		background-size: 6px 232px;
	}
	.classic-green #search-trigger {
		background-image: url(../images/layout/menu/search-popup-trigger-classic-green_2x.png);
		background-size: 30px 60px;
	}
}
.classic-green .sf-menu a,
.classic-green span.responsive-nav-text {
	color: #ffffff;
}
.classic-green .sf-menu ul {
	background-color: #254306;
	border-color: #1a2f04;
}
.classic-green .sf-menu li li a:hover {
	background-color: #2e5209;
}

Note: Starting in Alyeska 3.0, you can move all CSS customizations to style.css of your child theme, if you like, and ditch custom.css. It’s all up to you. Just remember that, if you do this, keep in mind the relative paths to any image files in your CSS.

2) Apologies, but I’m looking at the page and not seeing what you mean. Can you post a screenshot or something that shows me what you’re seeing?

3) It’s from the main menu. You have too many items. Notice how the the last item of the menu drops to the next line? That’s what’s screwing everything up moving down the page.

4) No I’m sorry but there is no feature for this.

[Jason Bobich]

1) I think I missed something on this one. I will double check when I get back on a computer.

[Jason Bobich]

Oh, I’m sorry I just completely misunderstood issue #1, originally. I think you were just describing what corresponded to issue #3, and having too many menu items, correct?

[bsastech]

Hi Jason,

1) Sorry about the confusion I should have separated the two topics….Modified the CSS as you mentioned and saved in Child theme like before but I see no changes. I have posted a screenshot:

http://s28.postimg.org/8c843cey5/Alyeska_responsive_menu.png

2) I have posted a screenshot:

http://s16.postimg.org/ga1j2n63p/Alyeska_Gallery_transition_error.png

3) I still find this strange as I had the same amount of menu items before I upgraded to latest framework version. Anyway I have removed Contact menu item and the pages now look how they should!

I have an additional question: I love the new Fontawesome icons and would like to change your choice of phone icon in TB Quick Contact widget to “fa fa-phone” like I have in the header of the site. I would be grateful if you could point me in the right direction.

Many thanks

Regards
Tim

[bsastech]

Hi Jason,

Just to add to my previous post regarding menu colors and after modifying CSS like you suggested the parent menu went white but sub menus stayed green. For the moment I have reverted back to the code snippet I was using previously. I have posted a screenshot:

http://s7.postimg.org/4b5a44557/Alyeska_Menu_color.png

Cheers
Tim

[Jason Bobich]

1) Sorry about the confusion I should have separated the two topics….Modified the CSS as you mentioned and saved in Child theme like before but I see no changes. I have posted a screenshot:

http://s28.postimg.org/8c843cey5/Alyeska_responsive_menu.png

I’m sorry, but I’m just totally lost on this. What is wrong in the screenshot you’re posting? You originally said “I am losing my last menu item from Menu” — What is missing in the screenshot?

2) I have posted a screenshot:

http://s16.postimg.org/ga1j2n63p/Alyeska_Gallery_transition_error.png

Aw, so we’re talking about just gallery. I believe what you’re seeing is just the second it takes the image to be loaded. Are you on a slower Internet connection? Maybe try using a smaller file size for the enlarged image?

Just to add to my previous post regarding menu colors and after modifying CSS like you suggested the parent menu went white but sub menus stayed green.

Are you viewing on a retina macbook? Did you create a retina 2x version of the menu? This is something that didn’t exist prior to Alyeska 3.0.

For example, two default images for the menu:

http://qcc.school.nz/wp-content/themes/alyeska/assets/images/layout/menu/menu-classic-green_2x.png

http://qcc.school.nz/wp-content/themes/alyeska/assets/images/layout/menu/menu-classic-green.png

I have a feeling you just quickly copied the CSS, and didn’t take into account that you now need a second image. You could also remove the declaration for the 2x image, as well, if you don’t care about having a retina image. With the classic style menu, it’s not as much noticeable.

I have an additional question: I love the new Fontawesome icons and would like to change your choice of phone icon in TB Quick Contact widget to “fa fa-phone” like I have in the header of the site. I would be grateful if you could point me in the right direction.

I’m not sure how easy that’s going to be. You could target the list item with CSS that has the phone number — You’d then have to remove the current background image, and insert the icon with pseudo :before on the selector of the list item, inserting the proper unicode for the phone icon and applying the FontAwesome font-family.

.tb-contact_widget ul.simple-contact li.phone {
	background-image: none;
	padding-left:0;
}
.tb-contact_widget ul.simple-contact li.phone:before {
	content: "\f095";
	font-family: FontAwesome;
	font-size: 14px;
	margin-right: 5px;
}

That should get you started… start tweaking that.

[Author]

Replies