Help needed in Resizing the banner image

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Hi, I am testing a premium template - radiant music. Is it possible to reduce the length of the banner image. Currently it is 945 x 343 pixels - i need to make 200 x 343... No options from template.. When i open HTML i don't see any mention of banner image at all... thanks guys.. i fell in love with yola.. and can't how yola give all this for free??? I know they small banner at the bottom - it's nothing...
Photo of krishyogi9

krishyogi9

  • 28 Posts
  • 0 Reply Likes
  • positive and sure yola will make a difference to my life

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Krishyogi9

It's great to hear that you're really enjoying Yola's Sitebuilder!

You will need to create a CSS hack to change the banner size. If you can leave this with me, I may be able to come up with something for you. I'll hope to get back to you before the end of the day.

Thanks for your patience.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Krishyogi9

Just a quick question.. when you say you only want 200x343 - this will make a small vertical rectangle.

Is that what you're wanting? Or are you wanting to make the height smaller (343) so that the banner area is not as tall and you have a long rectangle?
Photo of krishyogi9

krishyogi9

  • 28 Posts
  • 0 Reply Likes
Hello Sanja,
Thank you very much for your help. Actually i already uploaded a header image into my file manager and also placed on this, If you can get it into my account and see that. The image i uploaded was 200x 940 pixes - in inches: 13.056 x2.778 - resolution 72. I am uploading it here. The radiant music template i am using says the banner size is is 945 x 343 - is it what it is really?
I shall be thankful if you can set this as my banner - as i really love this premium template and planning to buy as soon it's possible to get this banner size. If i have to the default banner size - it's going to be more 40 to 50 Kb - i want my home page to be light to download and it makes difference with google guys.

I will thankful if you can also tell me - is it possible to give borders or a background color to individual text boxes?
Thanks Sanja,
K.
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi Krishyogi9 - Sanja is currently offline, but I have passed on this info to her. She will answer you once she is online again later today. Thank you for your patience.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Krishyogi9

Thanks for your patience and for your clarification. Here is the code you can use to adjust the size of your banner area. You will need to drag over an HTML Widget and put in this code:

<style type="text/css">

#sys_banner {
background: url(http://s2.yolacdn.net/V0017978/templa...) center no-repeat;
height: 200px;
width: 940px;

}

</style>

You will need to add this code to every page if you wish to have it remain consistent.

As for the text boxes, for sure.. you can add border and/or background color! Here's the code:

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

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.

Please let me know if you have any trouble with this.
Photo of krishyogi9

krishyogi9

  • 28 Posts
  • 0 Reply Likes
Hi Sanja,
Thank you very much for your help.. I am going to try them now and let you know.
Photo of krishyogi9

krishyogi9

  • 28 Posts
  • 0 Reply Likes
Hello Sanja, I applied the html code for changing the banner. It's working in the site builder, but when i published i don't see the banner at all. Can you help me please. thanks.
Photo of krishyogi9

krishyogi9

  • 28 Posts
  • 0 Reply Likes
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello krishyogi9

Unfortunately, your site does not seem to be published. Can you please email me at support@yola.com (attn: Sanja) and I can help you further? Thanks!
Photo of krishyogi9

krishyogi9

  • 28 Posts
  • 0 Reply Likes
Hello Sanja, Hope you had a nice weekend. I wrote to support and another friend of yours Jeremy got back asking for me to replace the image - which i did and reported -- and it's not working... Can you please have a look at my site: www.hathayoga-meditation.com and help me how can i get my banner image set... I put the html you sent last time.. it does resize and even shows in sitebuilder but not in preview nor on the published site. I have problem with photos on Teachers page also... And finally one more questions - the distance between navigation menus is too much and spreading into two lines... Is it possible to get them in one line - by the reducing the space between..
thank you very much.
Krish
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Krishyogi9

My apologies. This is my fault. I did not realize that the image path in the code needed to be changed as well. I have done this for you and have published your site. You can now see your fabulous looking banner working on your homepage! Here's the screenshot.



This is the amended code:
<style type="text/css">

#sys_banner {
background: url(resources/header1.jpg) center no-repeat;
height: 200px;
width: 945px;

}

</style>

You will need to re-add the amended code to each page and that should fix up the issue.

As for the photo issues you're having on your Teacher's page, can you please let me know specifically what the problem is? Then, I can take a closer look.

In regards to your menu, I am not seeing the menu issue you're talking about? The screenshot I posted above is how I'm seeing your menu. Is it possible for you to send me a screenshot and also let me know what browser and version you are using?

Thank you for your patience as we work on this together.
Photo of krishyogi9

krishyogi9

  • 28 Posts
  • 0 Reply Likes
Hello Sanja,

you are incredible... i never understand how this few codes (basically same letters) in note pad can make so many changes and bring out colors and formats???

The problem is solved - yeah, it looks fabulous - though i still have to do small bits to make it look better...The issue with photos on Teacher page is sorted out.. it was simple alignment - i found it from properties.

About menu - i am attaching the image. Actually i want to try one of the custom menus from yolasites - below the banner, instead of above banner as it is... Do you think is it safe enough to try them or do i need to backup the site first! Though i haven't yet explored how to install them.. I think you will have to help me if i have any problem in installing and if it works well, i assume your magic codes can remove the current menus above the banner.



I really like the background of my site - but it's taking time to download it? is there anyway howmuch KB is it? Most of my visitors are from West - i assume it doesn't make much difference for them, like it is on slow net in India.

And finally (for today), Is it possible to change the font for Site Title - Yoga Vidya Retreats? Or much better, if i can insert a image text in my own font.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Krishyogi9

You can definitely add a custom menu to your site but what you will need to do is hide the default menu by going to "Edit Navigation" and drag the pages from "Pages in the Navigation" to "Pages out of the Navigation".

You should always try the codes on a test site first in case a code was not copied correctly and breaks your page.

If you run into any problems with getting the menu installed onto your site, just give me a shout!

Your background is definitely a keeper! If you wish, you can try compressing the image so that it loads a bit faster. Give this optimizer a try: http://tools.dynamicdrive.com/imageop...

If you wish to use an image file on the page heading. you should be able to to this!

Please follow these steps carefully:

1. Go to the "Properties" tab.
2. In the box under "Page Heading", enter the image code which would look like this:

<!--<img src="resources/yourimage.jpg">-->if you wish to include text, it goes here

* Do not include the <!-- and -->. They're simply there to stop the code from being interpreted.

Please let me know if you have any trouble with this.
Photo of krishyogi9

krishyogi9

  • 28 Posts
  • 0 Reply Likes
Hello Sanja,
thanks for the last mail. Your magic codes worked great with header image. Can you please check the site now: www.hathayoga-meditation.com
The fonts are not sharp - i tried blending effects in Photoshop they are not looking great. So what you see now is without any effect - just bold. Is there anyway to make them look more clear.

About menus, the codes from yolacodes is applying nicely on my site but i don't see anyway to edit them without html knowledge. I found one free css menu builder online and got a beautiful menu - but the code in the page is not linking to css stylesheet - placed in Menus folder. Can you please look at this page: http://www.hathayoga-meditation.com/o...

I want to optimize the background image as you suggested - but where is image file? Not in the file manager.

On contact page, i got a google map at the bottom of page. Is it possible to use this map as banner image for this page. Or shall i simply make the banner zero size and place the map on top - still the gap between header and page will stay - may not look cool.

Thanks a lot of your guidance Sanja. I can't believe i could make such nice site. I still have to improve.

Nice day,
Krish
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Krish

My apologies for the late reply. I've been trying to figure all this stuff out :)

First of all, I do see what you mean by your text not being sharp. Can you please tell me how you created your banner? How did you get your text onto your banner?

I, as well as a colleague, have been trying to make that menu work on your site and neither of us are having much luck. Can you please post the URL for the free CSS menu builder?

For your Google Maps, you can take a screenshot of your Google Map and then use it as part of your banner as you did for the other banners.

I hope that made sense!
Photo of krishyogi9

krishyogi9

  • 28 Posts
  • 0 Reply Likes
Hello Sanja, Great to hear back and to know you are trying with my menus....

I created my banner in Photoshop and then put the code you sent:
<!--<img src="resources/yourimage.jpg">--> in the properties bar - page heading.

About the menus on Online-store page, i got it from http://cssmenumaker.com/ I am placing the downloaded file and instructions from them, in zipped folder with name: "cssmenus" in my file manager - i am sure you can access it. Otherwise, if you can send me email id i can mail you right away. I am going to be online for the three-four hours and trying to finish the site today.

Please check http://www.hathayoga-meditation.com/r...
It's different menu from Coffecup DHTML menu builder.. their instruction is: "make sure the entire script is placed after the first tag"
I simply dragged the HTML widget and placed on this place.

Thank you very much for your time and eagerness to help.

Nice day.
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hello krishyogi9

Sanja is currently offline, but I will be sure to pass this message on to her. She will respond to you when next she is online.

Thank you
Nazlie
Photo of krishyogi9

krishyogi9

  • 28 Posts
  • 0 Reply Likes
Thanks Nazile, Plz. inform her the banner is okay now.. Just the menu is problem.. All of you are so sweet and i can't believe it.
Photo of krishyogi9

krishyogi9

  • 28 Posts
  • 0 Reply Likes
Hello Sanja, Please check this page:
http://www.hathayoga-meditation.com/t...
I added navigation background to the banner image.
Is there anyway for me to put text menus on this bar (which is part of banner now). Then i can just remove the navigation bar from up.. that would be perfect.... Otherwise, is it possible for you to remove the whiteline below the present navigation bar.. that will just do..
Thanks, Nice weekend.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Krish!

Your banner looks much better now! Well done!

As for the white line, the reason why this is happening is because your image is slightly too small to fill the space. Under your page heading where you have this code: <!--<img src="resources/yogateachertrainingindia.gif">-->

Just add a height value. I found this to be a good height: <!--<img src="resources/yogateachertrainingindia.gif" height="70px"> -->

As for your menu, sorry... which menu are you wanting to use? The CSSmenu maker or the Coffee DHTML one? I'll fiddle with this today and hopefully get back to you with some results.
Photo of krishyogi9

krishyogi9

  • 28 Posts
  • 0 Reply Likes
Hello Sanja, Thank you very much for your help even on sunday.

Yeah, the white line is gone now, with your magic codes!

Any menu will do - either the CSS one, or Coffee DHTML. What i need is to get the menu right below the banner and above the white text page, if i am not asking for too much. Or even the menu i got it from yola code - that's on 'Online-store' page.. this works fine - but i can't edit the menu text or color.

If i can't get menus below banner - then i have to be happy with the default navigation menu - provided i can reduce the space between them... then I can add a word - 'Yoga' in front of Teacher Training. If i do that now - the menu is spreading into two lines - on mozilla and chrome browsers. It looks okay in IE!!!

How do you like the site? I am so excited for what i could do so far, of course with your graceful help.

Nice day.
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello krishyogi9,
Sanja is offline at the moment, though I will be sure to pass this request on to her. Thank you for your patience!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Krish

I duplicated a page in the Sitebuilder called "test1". I suggest using this page to tweak your codes until it is what you want. This way, if something goes wrong, you still have the original intact.

So, on the "test1" page, in the first box which actually shows the menu, this has actually been added to a Text Widget. The reason why I did this is because this allows you to adjust the top margin to pull up your menu onto your banner. To do this, go to your "Properties" tab and then input a negative number into your top box under "Margin". You will need to play around with this number and be sure to check what it looks like in the preview page.

In this same Text Widget is where you'd also change your menu text and links. To do this, click inside the box to bring up the Text Editing Toolbar. Then, click on the HTML button on your Text Editing Toolbar. Locate your a href tags to change the links and replace the Menu text.

In the second box (HTML Widget) below the Text Widget contains the CSS codes to tweak the colors of your navigation menu, font color, etc... I suggest using hex generator to obtain the hex value to have the exact shade of color you want. You can use this Hex Color Chart or Color Schemer.

I think your site is coming along fabulously! Once you're done, I'd like to submit it to be a part of our Featured Sites - every week a site is selected to be featured on our Yola Blog. I've been so impressed with yours that I think it's definitely feature-worthy!

Please do let me know when your work has been completed and I will be happy to submit your site should you want me to do this!

Please let me know if you have any further questions.
Photo of krishyogi9

krishyogi9

  • 28 Posts
  • 0 Reply Likes
Hello Sanja,
Thanks a lot - the problem with menus is solved... I am just adding the grey background to all the banners - and placing simple text menus - in a text widget - at a negative height!
By the way, if i have banner size around 45KB - is it too much for net speed in the west?
Yeah, i will be glad to be featured in your Yola Blog. I will let you know when i am done. thanks again.
k.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
45KB should be fine. It really depends on your visitor's internet speed. But, generally speaking, I believe this should be fine!
Photo of krishyogi9

krishyogi9

  • 28 Posts
  • 0 Reply Likes
Hello Sanja, sorry for bothering you again and again.
I have another issue with this menus - some pages like home have two column layout on top - i can't put the text widget for menus there.. If i chose 1-over-2 column layout, the 2 columns below are taking 5-50 space of page width - but my design is 75-25 for two columns. Is there anyway to manipulate the width of a column in 1-over-2 layout?

if Sanja is not in office can anybody help me.. i am trying to finish the site today.

Thank you.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Krish

If you would like greater flexibility over the layout of your site, I suggest using a 1-column layout. Then, utilizing the Text Widget (creating a horizontal section) and Column Divider widget (for your vertical section).

You can also add more Column Divider widgets inside the Column Divider widget - therefore giving you multiple columns..

The center divider of the Column Divider widget can be dragged to the left or right to change the size of the columns. You can also edit the margins by clicking on the Properties tab in the right-hand sidebar. You'll see top, bottom, right, left margin entry box settings displayed that you can edit to see how your text and and/or images are altered.

I hope that this gives you the ability to create the perfect layout for your site.

Also, I forgot to tell you that I noticed that you have text copied and pasted from MS Word. I need to advise you that when you copy and paste rich text directly from MS Word (or another word processor) onto your site, this brings along a whole lot of unwanted formatting that is not web friendly and can easily break your page. It can also cause your site to show up inconsistently in different browsers. The problem might not always show up immediately, but sometimes it happens after you save and navigate to a different page or log out and log in again. To avoid display and loading issues, the best alternative is first to paste your text into NotePad (in the accessories folder of your computer) and then paste it as plain text onto your Yola page. You can then use the Yola text editor to format your text as desired. Please note that this would be the case with any browser-based text editor you might use, not just Yola. It is a universal website building problem.

It's also always a good idea to keep a copy of your text in a .txt file from Notepad so that you have a backup copy kept on your PC.

The solution in this case - you can delete the page or delete the existing text and then re-add it to your page following the steps above.

You can use this Text Editor to format and spell check your text and strip out MS Word code. It will generate valid markup which you can safely paste into the Yola site builder.

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

krishyogi9

  • 28 Posts
  • 0 Reply Likes
Problem solved. I got a image on leftside column and dragging to width i want - column is automatically adjusting. Nice evening.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
great to hear, Krish!
Photo of krishyogi9

krishyogi9

  • 28 Posts
  • 0 Reply Likes
Hello Sanja, The site is almost ready - i just have to read the text final time and have to do SEOise the page titles, keywords etc.. I am very very thankful for letting me know about this word formatting.. I will the use the yola text editor to clear all the formatting and reformat freshly... I was checking html source for contact page and i found something www.w3.com in the code on the very top - seems it's from css menu i placed it on non-using pages, which i will delete and then check the html code on all pages...

Without your help i could not have done this... I owe you and remember me whenever you come to India and wants to do some yoga:) You can be my special guest.

I started the adwords from today itself and in the next few days i will focus on SEO. I am going to read more about this from the forum and support articles on yola.

Please do submit our site for yola blog...

Thank you very very much Sanja and everybody at yola. Going to be with you for a long long time..

Nice day, K.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
It has been my pleasure Krish!

One more thing that I did notice - it seems that you were trying to mask your keywords on your homepage. You should not do this. Instead, please take a look at our SEO tutorials to help land your site on Google!

1. We have a series of short SEO Tutorials which will bring you through the various aspects of planning, building and promoting your site with SEO in mind. Here is a link: SEO Tutorials.

2. Verify your site with Google Webmaster and submit a sitemap: Google Webmaster Tutorial.

3. Each time you make a change to your site, you can Tweet the changes to your Twitter account. This is a great way to encourage more traffic to your site. Here is a link: Tweet your new site or your recent changes.

4. Watch a webinar on Introduction to SEO where we will bring you through the various ways to optimize your site in the Yola Site Builder. Here is a link: Yola.tv.

5. Analyze your site traffic and how your visitors behave while on your site with Google Analytics. Here is a link: Google Analytics Tutorial.

Search engine optimization is something that takes time and effort, and is not a quick process; it's something that you will want to work on before, during and after you publish your website. Take your time going through these resources; we hope you find them helpful.

Also, can you please email us at support@yola.com so that we may follow up with you in regards to being a featured site for our Yola blog? Thanks!