Make my Yola Site look/work like my Joomla Site

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Hi Folks

I need help. I want to build a new Yola site to replace my existing, unfinished Joomla site.

The existing site is in development. Please see here http://www.enlightenedsoccer.com/inde...

I want to know if I can do the following in Yola and, if so, how.

1. Have a rotating image/photo file with text as on the enlightenedsoccer.com site
2. Create column and text box background colour - light grey over white - as on the enlightenedsoccer.com site. How do I do this when adding text, image, or other widgets when building my Yola site
3. Horizontal nav and drop down menus under the main header banner image as in enlightenedsoccer.com

Essentially, I want to achieve the same look and functionality as my Joomla site but build it in the far more user-friendly Yola builder.

Thanks for your help.

C

p.s. Crazy big logo, eh?...lol
Photo of kingcharlescotton

kingcharlescotton

  • 11 Posts
  • 0 Reply Likes
  • grateful

Posted 9 years ago

  • 1
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Hi C

Welcome to Yola! You have a great looking website!

The short answer: You would be able to build a similar looking site with Yola. However, you would have to use custom HTML/Javascript/CSS to achieve the effects you described.

1. Is your rotating image a .swf file? If so you can upload it and embed it with HTML.
2. You can create textbox background color with HTML (supported by our text editor) You would then be able to continue editing text and images inside the text box as normal.
3. Currently our styles do not include drop down menus. However, a number of users have achieved these by creating custom menus (again, by using their own code.

If you would like to use our sitebuilder understanding that you would still have to do a bit of coding to achieve the desired result, then there are a number of people in this forum who would be happy to help you as needed!
Photo of kingcharlescotton

kingcharlescotton

  • 11 Posts
  • 0 Reply Likes
Thanks Monique

I have no idea how to do option 2 as per your reply.

Can you give more specifics, please.

Thanks

Charles
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Hey C.
I may have figured out number 1 on your list.
Visit this page for insturctions.
www.johntest.yolasite.com
p.s to download the js files,click the icons pasted into wordpad and save under the correct file name

Hope this helps
Photo of kingcharlescotton

kingcharlescotton

  • 11 Posts
  • 0 Reply Likes
Hi John

I had this working but I had to reload. Now it's not working. I may be missing something...

Can you help? I can email a link to the builder to check it out.

Thanks

Charles
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Charles

It would be helpful if you could post your page URL in case John is away and someone may be able to assist.
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Im back now :) has a great holiday,Charles i will post on your newest reply shortly.
Photo of kingcharlescotton

kingcharlescotton

  • 11 Posts
  • 0 Reply Likes
John

Totally works. Nicely done.

Thanks for the help.

How about question 2 from my original post? I understand Monique's reply but don't know how to implement it.

Cheers

Charles
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Great to hear,sadly i also do not know how to do Monique's suggestion :(
Photo of kingcharlescotton

kingcharlescotton

  • 11 Posts
  • 0 Reply Likes
No worries, John. I'm sure I'll get it sorted in the days ahead.

How do I use the testsite? I followed the instructions but got to a dead end.

I'm looking to use the smooth nav menu and want to test it for colour changes.

Once I get the code I have to put it into my site to replace the nav bar.

Any clue on how to do this?

Charles
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello kingcharlescotton

In response to suggestion #2 that Monique spoke of, here's the code:

<!--<div style="border: 2px solid red; width: 400px; height: 211px; background-color: pink;">This is where your text goes</div>-->

* Do not include the <!-- and --> as these are simply there to stop the code from rendering.

You can drag a text widget onto your page, click on the little HTML icon on the Edit Toolbar and paste in that code. Here is what the various pieces of the code do, each of which you can change to suite what you are trying to accomplish:

1. Width is how wide the area will be.
2. Height is how tall it will be.
3. Border is how thick it will be should you choose to have one, and after that you put the color of the border in this case solid red.
4. Background-color is the color of the background. If you want to be more precise about the color you can replace this with a hex value. For example, if you replace the word "pink" with the hex value:#63B8FF you will get a light blue color block. For a list of hex values see: http://cloford.com/resources/colours/...
5. You can put the text you wish to appear where you see: "This is where your text goes".
6. Click OK.

You can change the various pieces to make it the size and color that you prefer.

Note: Because this is in a text widget, you can also type directly into the text widget instead of putting the text you wish to appear in the HTML code. You can also highlight the text and use the Edit Toolbar to change its various attributes such as color and size.

As for the testsite - are you referring to the Yola Code site? If you're wanting to grab the codes, you can log into the Yola Test site using the email and password provided here in the rules section of the Yola Code site. Then, you can navigate to the Navigation site and grab the code needed.

If you have further troubles with this, please let me know and I'll be happy to assist further.
Photo of kingcharlescotton

kingcharlescotton

  • 11 Posts
  • 0 Reply Likes
Sanja,

Brilliant. Easy to understand, implement and edit to my needs.

You and the rest of the Yola support team do a wonderful and timely job of responding to my questions.

First class

Charles
Photo of kingcharlescotton

kingcharlescotton

  • 11 Posts
  • 0 Reply Likes
Sanja,

Further to your comments:

"As for the testsite - are you referring to the Yola Code site? If you're wanting to grab the codes, you can log into the Yola Test site using the email and password provided here in the rules section of the Yola Code site. Then, you can navigate to the Navigation site and grab the code needed."

I do need some help here.

I'm going to build my new site with a blank "Clean Slate" template.

I want to use the Smooth navigation menu, from the Navigation Site in the Yola Code site.

I've downloaded the 2 gifs.

I can see the code in the 5 text/html boxes. What do I use to download them with? How do I organize them and put them into my site?

How do I override/replace the existing navigation menu?

Lots of questions, I know. I appreciate your help

Charles
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Sorry Charles I'm not that good with the Yola code site,im sure Sanja will help you when she is next online.If you need anymore help with the slideshow I am currently away until friday so im sure the Yola team will be glad to help you.
Happy Site building
Photo of kingcharlescotton

kingcharlescotton

  • 11 Posts
  • 0 Reply Likes
No worries, John. Sanja and I are having a go with things. She's been very helpful. As have you.
Cheers
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Charles

To copy the codes, you can highlight the code, then right-click and select copy and paste into Notepad. Then you can paste into your HTML Widget on your site.

As for over-riding your default navigation menu, you will need to hide those pages.

These are the steps to removing a page from your navigation:

1. Click on the "Edit Navigation" button on the top toolbar.
2. A dialog box will open and you will see the list of your pages in the left-hand pane under "Pages in the Navigation".
3. Click on the page you would like to remove and drag-and-drop it to "Pages out of the Navigation".

The page will no longer be in your navigation.

If you need any further assistance, please let me know.
Photo of kingcharlescotton

kingcharlescotton

  • 11 Posts
  • 0 Reply Likes
Hi Sanja,

Great stuff.

I'm able to do the over-ride on the default nav. Thanks

As for the HTML for the Smooth Navigational Menu - still some challenges to overcome:

There are 5 HTML boxes on the YolaCode site for the Smooth Navigational Menu.

I've copied them all into one HTML widget in the order they appeared on the code site.

Save...viola...There is nothing showing...

here's a link to see

http://sitebuilder.yola.com/ide/index...

Help? Would be of use for you to log-in to my site and have a peek?

Once it's functional, I'll need to set name the menu and submenu to reflect my needs.

Thanks

Charles
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Charles

It is best that you separate the codes. If there were 5 HTML boxes, then you should set them up in 5 HTML boxes. You also need to make sure that each line is broken up the same as well.

If you still have trouble with this, I'll be glad to take a look. Please do send me an email to support@yola.com.
Photo of kingcharlescotton

kingcharlescotton

  • 11 Posts
  • 0 Reply Likes
Hi Sanja

I didn't know the protocol for asking about help on something like this...

I'm trying to get the rotating images like John's done here

www.johntest.yolasite.com

here's my page where I want to insert the same

http://sitebuilder.yola.com/ide/index...

thanks for the help

Charles
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Hi Chatles,Please can you post the preview URL as i can't view your site in the sitebuilder.If you click preview in the site builder and then copy the URL you cn post it here and I will take a look.
Photo of kingcharlescotton

kingcharlescotton

  • 11 Posts
  • 0 Reply Likes
Hey John,

Welcome back. Good times on the holidays?

Here's the link

http://sitebuilder.yola.com/sites/S3/...

The rotating images are 'supposed' to be in the white space under the banner.

I can give you back end access to editor if need be.

Cheers and Thanks!

Charles
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Hi Charles,
I had a great time on holiday thanks,
Ive taken a look and cant see the problem checking briefly.
I'm working tommorow (im in england so my times may be a bit different)
I will finish work at around 1:00pm (BST british summer time)
If its ok I will take another look then.
Im sorry i can't help any sooner.
Thanks for being patient.

John