Creating master pages

  • 3
  • Idea
  • Updated 9 years ago
After using Yola for a few days I thought it may be nice to have the ability to create a Master page(s) that could be used as templates for other pages so that if you made a change to a master page, other pages referencing that page would change accordingly saving us a ton of time.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
  • confident

Posted 9 years ago

  • 3
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Randy,
Thanks so much for the idea, that would be a great feature to have. You can use the "Save Page As" feature which will allow you make a duplicate copy of the page you are on, or you could create a master page and use this function whenever you create a new page. To do this, click the down arrow of the "Save" button and click "Save Page As".

Unfortunately, it isn't possible at this time to make a change to a master page and have that change reflect on all the other pages, but that would be nice! I will put this forth to our team as a feature request.

Thanks,
Emmy
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Thats what you call CSS. Thats exactly what CSS is used for.

I can change my menus on every page on my site, my box and border colours, styles, even text styles - i would highly recommend learning about CSS, it gives you the master page :)

You need Yola Pro to upload CSS files , then you just link to it on every page (not have the css on each and every page) but it can be used Yola free accounts, i did it like that for ages, its just not as tidy.

Lee.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi UK Duke. Thanks for your reply. Can you further elaborate on what you are talking about. I know some CSS and realize the power behind using it. It's actually quite awesome.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--
The best way to get your head around CSS is to see it in examples, i'll try to explain a little bit of it.

It basically saves you writing endless code for every object you create - the CSS holds all the style code and can be used whenever you like.

The CSS code is held in a single file and that is linked to at the top of every page you want the style applied on.

This is an example of a section of a CSS file, you might notice values you know from html code. This is just telling a box how to look.

.leeboxcss{
margin: 0px;
width: 100%;
padding: 5px;
background: #3b5998;
border: 1px dotted #ffffff;
}

At the top of any page you just link to the CSS file, then you only have to change the CSS file and the change goes to all pages.

Try it on your site, add this code to a text widget: I uploaded the code above to a css file, if i change it then it will change how the box appears on your page.

<link rel="stylesheet" type="text/css" href="http://hexham.info/resources/test.css">
<div class="leeboxcss">Hello - look, i'm in a box.</div>

Lee.

-->
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
That is so cool. Change something in the CSS file so I can see the change here. Do I have to have a Pro account to use this feature, or can I just link back to a CSS file I have on my other hosting server?

I would probably need some help in setting up the css file. I have a CSS book on my night table that I look at just so I can wrap my head around the syntax etc... I like the ability to keep my site consistent and what you described above seems to be the answer. By the way, how do you get code to display properly in a post? Do I have to do something special to it before posting to this forum?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
You wrap code in these things <!-- CODE -->

I have changed the CSS - browsers cache CSS so you may not see the change till you refresh or clear your browsers history.

You dont need a Pro account but it makes it easy - you can add CSS to each separte page but then that obviously takes away the master page joy of it all -- You could host the css file on your own server and link to that - that would work fine - as long as the server was always on and available.

Like everything else you just learn CSS slowly step by step - start with box's and text styles, they are simple. Learn about 'div classes' and everything else kind of falls into place once you understand that basic function.

Hope that helps

Lee.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Lee is a bit slow to learn sometimes, Randy ;)
You don't need to wrap code in these things <!-- CODE -->
You just have to use this thing... http://forsite.synthasite.com/encoder...
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
So if I had a Pro account, I wouldn't hav to put the CSS link on every page to the CSS file? I really like this. Would be neat also if we could do that with index.html file if need be but for me the CSS thing would be more important.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
you would still have to put the link on every page - if you wnated that particular page to follow its style rules, you get over that chore by using save page as instead of create new page.

Having your own server is just like having a pro account beciuse you can host any file you like - perfect practice is to have it all hosted in the same directory but its ok to host javascript and css files else where.

Obviously with a pro account you alos get a premium style and footer removal - the extra hosting allowance permisisions is just a extra beneift.

This is where i do most of my web schooling http://www.w3schools.com/css/ - its a good base knowledge.

Lee.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Do you know of any good online screencasts regarding CSS?

I am a member of Lynda.com. I'll check out if they have any tutorials.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Lee!! All of my files reside on Hostmonster.com. I have been very happy them. I have around 150GB worth of data up there. My Yola site pages just link back to the files I have on my HM server keeping everything flexible and easy to understand.

One other thing I do is write all of my code in Textwrangler (text editor for the Mac and then just save the files in my Dropbox folder. What I love about Dropbox is that every time I save a file, it creates a new version of that file so I never loose anything and I can go back to a particular version of a file I was working on (I'd love to see something like this adopted in Yola) I am using the Page save as feature which I really love because one of the important things for me in creating a web site is consistency and ease of use for the end user.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Lee,

Can you take a look at my site (www.mcran.com) and let me know if it is possible to modiffy the actual menu that appears on the left hand side of my site. I obviously have to find a way to create sub menus to better organize things. I was thinking that without going with an external menu option I can just modify the menu that is part of this template.

I am trying out a menu system that Sanja and I worked on based on one of the horizontal menu options on the Yola code site.

I know exactly how I would like to structure the menu.

I'm just looking for other options I may want to look at that may be easier to implement. Thanks!!!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Theres no real way to change much about the built in menu - you could change the colours thats about it.

I would go for the cutsom menu - the extra work will pay off on your site. You have a page structure which is crying out for a drop down menu.

<!--
I Have changed the CSS sample to match the colour of your sites template - if you ever need a box just add <div class="leeboxcss"><br></div>

Lee.

-->
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Lee,

I haev menu code now thanks to Sanja's help. One issue I think will need a solution is the CSS for the menu. My understanding is that I would have to put the four HTML menu widgets on every page on my site. If I want to ever want to change the look and feel of the menu, I would have to go to every page and change the CSS menu widget which is a real pain.

Is there a better way? Maybe putting a CSS file in my File Manager and just linking to it so that when I make a change to the CSS file, all of the menus will change accordingly?

I think I am starting to understand the power of CSS. :)

I know that Yola is working on a video on how to create menus in a Yola site but I was wondering if you know of any other video tutorials on menu creation.

Thanks!!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Finally!! My horizontal menu is complete. When you visit my site you will see it on the Home page. I can tweak the color and other CSS stuff later but for now, this is what it looks like.

My understanding is that all I have to do is go into the Edit Menu window and move the items to the right column to disable them? Until I get the CSS issue resolved, I think the best way is to copy all the code to my text editor and then just copy/paste into the new HTML widgets I will make for each page?

When you go to my Home page you will see a Radio Archives tab in the menu, when you hover on it you will see two items. How can I have menus off those two items, because I will have pages that are sub pages to each item. Or' is there a better way to implement this?

Although this solution will work, I really hope that Yola implements a much easier way of implementing menus in Yola.

Thanks!!

Randy
www.mcran.com
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
it looks great - i dont think the site style is now appropriate. I would think about changing the style, there is a lot of wasted space at the left
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I had to take the menu down because it is not going to work in my situation. If I need to make a change to the CSS or structure of the menu, I would have to change it for every page on my site. For sites with a handul of pages, I could see custom menus working but I don't think in my case it will work. I will end up spending way too much time copy/pasting code etc...

Maybe Yola's solution for sub pages might work? Or, if there is an easier more practical way that would be great. Even if I have to alter my pages and reorganize my data. I'm open to all ideas (as usual), but I am after the simplest way to do this.

I learned a lot going through the menu creation exercise and I thank Sanja for all of her help but in the end, I don't think this solution is feasible after trying it out.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
what you need to do is make your main nav menu. This would not have 100's of pages attached it would be a basic menu which would apply to all pages - then 1 of them links would link to a page which had a menu which was always added to and changed - you need to think of your main site nav and sub page naviagtion as 2 seperate things.

For example ebay doesnt have all its items listed in its main nav.

Lee.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
I create master pages...

I just create a page with the layout I want including analytics, AdSense, sitelevel, etc. and name them....

-0 Gateway Template
-0 Article Template

The reason for the -0 is so they appear in the list before everything else for easy access. Then you can save page as to create a similar page.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Lee and Donald!!

Great advice although I think I understand what Lee is talking about, I would like to actually see how to go about doing this. Lee' if you could crete a short screencast so that everything clicks in my mind, that would be excellent!!

For the time being I think I found a solution that would work for me. Check out the Bennett Archives page. I am going to create 26 pages (one for each letter of the alphabet, duplicating the current Bennett Archives page to make things easier. Comments please. I think this could work. If so I could apply it to my other pages that have some sub pages. I just have A and B done so far.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
I haven't read every reply in this thread so I'm not sure exactly what you're doing but it sounds like you're working on a letter system for navigating? If this is the case, have you thought about placing them all on the same page and using anchors to take you to the appropriate letter? Anchors can be done on same page OR different page. So for example, you can have on one page, go to topics beginning with letter C and have an anchor take them to the letter C topics on that different page!