Feature Request: Site HTML Editer

  • 2
  • Idea
  • Updated 8 years ago
Has anyone ever considred a feature where
Yola users can edit there sites HTML, CSS, and
Javascript. I tried Webs once and they had it available,
but the path to get to that was a bit confusing.
Photo of Tyler

Tyler

  • 63 Posts
  • 1 Reply Like
  • happy

Posted 8 years ago

  • 2
Photo of jeremy

jeremy, Employee

  • 1349 Posts
  • 90 Reply Likes
Hi there Tyler,

At the moment we don't have a basic editor for your Site's HTML, CSS and JS. We find that not too many people want it.

You can add HTML by dragging and dropping an HTML Widget from the sidebar on the right onto your page (the icon for this is a blue sphere). An HTML editor will open up that will allow you to write or paste in your code. When you are done, click "OK" and you will see the way that the HTML displays on your page

To edit the HTML in a Text Widget, click the last icon on the text editing toolbar (HTML) You can then edit the HTML. When you are finished, click "OK" to return to editing text with the Yola text editor.

CSS files are uploaded to the "Resource" folder of your site. However, your custom styles are not auto-loaded for you. You will need to add them with the HTML widget.

e.g.:

`<link href="resources/your-custom-style.css" rel="stylesheet" type="text/css" media="screen" />`

You add your files manually with the HTML editor. The advantage is that you can use the same stylesheet across multiple pages - edit the one file, and your changes reflect on all the pages. As such your files will be included after the default template files and will over-ride the default.

Please note that this is an option for advanced users and we will not be able to assist you if your CSS edits break your site. If you unsure of how to proceed, we recommend that you try this on a blank test site first before attempting it on a website which contains your valuable content.

I hope this helps.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thank you Jeremy so much!!! I never knew that we could use our own custom CSS style sheets! But, doesn't the "link href" have to be in the HEAD tags of the website?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Please note that while you can use CSS to style your site, it is not really possible to upload CSS made templates though.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Oh, but can't we upload it to the /resources folder, and then in the link href link it to "resources/style1.css" or something?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Yes.. that is how you would link to your CSS file but you still cannot upload CSS templates. You do need to select a style from our Style library. I'm sorry that I don't have better news for you on this.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Acctually, all I want to do is change the color of the links like when they hover over it a background shows up behind the link, and I just wanted to do that. Maybe a little bit of other stuff too, but mostly for the links and divs.
Photo of Zaur Kavkaz

Zaur Kavkaz

  • 2 Posts
  • 0 Reply Likes
is it possible to add a search engine on the template?
if i had the html option i could of done it.
is there any way i can edit the template itself i need to add my search engine html code. how do i do this.? or we are only alowed to edit on the lower parts of the site
?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Zaur

We do not currently have an integrated feature for site search, but you can try out products such as Google's Custom Search Engine.

**It is important to note** that Google's Custom Search Engine will not work if your site has not been indexed by Google so make sure you have submitted your sitemap to Google before you install this on your website. Here is a link to our tutorial which will step you through verifying your site with Google Webmaster and submitting a sitemap. After you submit your sitemap to Google it can still take time for your site to be indexed. Google Webmaster Tutorial.

If you would like to give this a try, here is a link to get started: Google Custom Search and some help for setting it up.

1. Click Create Custom Search Engine
2. You will need to follow through the steps to set it up such as a Name, Description and Keywords that describe the content of your site.
3. In the field labeled "What do you want to Search?" click "Only sites I select".
4. If you want this to be a site search to only search your website put in your website address as such: http://mysite.yolasite.com (putting in your domain name).
5. The standard edition is free but will include some Google Ads; the Business Edition is $100 per year and will not include ads.
6. Agree to the Terms of Service and click Next.
7. You will now be able to try out the search engine you have created. Remember, if your site hasn't been indexed by Google, you will not receive any results. After you have tested it click Finish.
8. On this page you will see your Search Engine with three links next to it, Click Control Panel.
9. On this page you will see **Control Panel: Your Search Engine Name**, underneath this click on the link that says Code.
10. You will see a block of html code; please copy this entire block of code, which you will now add to your website.
11. Login to your Sitebuilder and drop an HTML widget onto the page where you want the search box to appear; now paste the code here and click OK.

You should now see your Custom search Engine. You will need to Save and Preview Page to see it work.

I hope this answers your question. If not, or if you had something different in mind, please let me know.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Zaur

If you manage to get a search engine you should place it into a text widget and then use the html button on the yola toolbar to insert the html then on your properties for that particular text widget you can put a -100 in the margins px in order for the text widget to then move higher up the template and into your header!! Sometimes only works with specific templates as well.

Hope this helps