August Code Request

  • 1
  • Praise
  • Updated 6 years ago
For People who don't know how this works, it's simple.

You ask for a code, I respond, if I can do it (most of the time I can), I will make it for you.

There will be times that I can make something but I feel it would take way too long to make. I love coding just some little snippets of code.

Please note that you don't have to say: "I don't know if you can do this.". UNLESS, its something you know would run on server side. This would be anything, that you can interact with people (but not only), for example I won't be able to implement a Chat into Yola since its PHP and that is sadly not supported by Yola. I'm guessing it's because the pages itself are on a PHP file.

I won't make a whole site for you, but I can make cool widgets for your site.

Not only can you request a code, but if you are doing JavaScript and you are a little experienced with it and you are running into a problem, i'll be able to help with the trouble shoot.

What are my Skills in order from most to least skilled:


  • JavaScript is a client side Scripting/Programming Language that is easy to debug and is very fun.

  • HTML is a markup language. This is what every site is made of, well, maybe not every site.

  • XML is a markup language. A lot of times this is used to store data.

  • CSS is a stylesheet Language that should be in every site. CSS styles almost everything on the page.

  • PHP is a server side Scripting/Programming Language. Facebook is made using it!



Why I do this:

I just love coding and I never have any ideas of what to code. So you guys are giving me ideas, and your getting the help you are looking for. Plus, I like that when people have code issues on other posts, most of the Employees just redirect them directly to my posts. I've been doing this for 8-9 month's now, I won't be able to help everyone, but I will always try to get to you even if I takes a few days longer than you wish.

Best,

Shawn Holman
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
  • happy

Posted 6 years ago

  • 1
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Thanks Shawn, I noted this thread and closed July's thread!
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Ok, thanks.
Photo of How Doifind

How Doifind

  • 4 Posts
  • 0 Reply Likes
Hi Shawn, Just referring to the accordion content stuff from the July code request thread (no longer possible to reply on there)...those accordions look great! To answer you question, it would be great if more than one could be open at once, and if you could click to close the accordion. If that's too much work or is fiddly then don't worry, whats been made already is perfectly usable and great quality, thanks so much!

My last question is if it is possible to implement these without editing the CSS (as I am on yola bronze)? Or is it possible to include the CSS you created in the body rather than in the standard yola CSS editor? (sorry to be a pain!)

Here is what I tried... created

<script type="text/javascript">" (followed by the script)

<HEAD>
<STYLE type="text/css"> (followed by CSS)

followed by the HTML.



This displays and works fine on the yola page editor, however on page preview / when uploaded it all seems to work except the accordion doesn't open.

Thanks again for all your help, MUCH appreciated!!!
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Pain? Haha, this is no pain, i love doing this, the more work you give me the better ;) Yes, css can be implemented in the HTML editor. I can make the accordion exactly like you want it.

This is it! http://jsfiddle.net/shawn31313/gSAYw/...

I will post how to add it below.
Photo of Xue

Xue

  • 8 Posts
  • 0 Reply Likes
Hi Shawn,

Yola support staff directed me here.

I'm trying to change the banner size on all pages, can you tell me what code I should use? So far I've used HTML, but I'd have to put it in every page.

Would greatly appreciate your help!
Thank you!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Xue

I could also assist you with that. However, you will need to have at least Yola Silver to apply the code to all pages. If this is the case with you, please post your published domain name or your login e-mail address (no passwords) here for me to find your Yola account. If you have multiple website, please also let me know for which of them you would like to change the banner size. Thanks.
Photo of Xue

Xue

  • 8 Posts
  • 0 Reply Likes
Hi Stefan,
Thanks for your reply. Yes, I am a Yola Silver member and my website domain is: http://www.ecologiaus.yolasite.com

Thanks!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Xue,

You have mentioned you wish to change the banner size (on all pages). I'm not sure if you mean you want to fill the available space or change the specifications of the banner place holder?
Photo of Xue

Xue

  • 8 Posts
  • 0 Reply Likes
Hi Gop,
I would like to tchange the specification of the banner place holder, since I already have our organization's banner image and its ratio cannot changed. So I would like to change the size of the place holder itself.
Thanks!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK. Can you give me the specs of the banner and I'll use that in a mock up.
Photo of Xue

Xue

  • 8 Posts
  • 0 Reply Likes
Hi, it is 720 * 100. Thanks!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Xue,

I've had a look at this and there will be an anomaly because the banner will be far narrower than the size of the central partition. So to reduce this you will have a big gap on the right handside because the banner is left aligned.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The obvious work-around is to increase the banner place holder to accommodate a proportional height increase relevant to the increase in width. This way your banner will fill the space without any cropping.
Photo of Xue

Xue

  • 8 Posts
  • 0 Reply Likes
Hi Gop,
Yes, that's exactly the problem and that's why I was trying to use CSS code to change the size of the banner place holder. Would you provide me with the CSS code to do this?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
yes I will.
I'll post back here.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
div#sys_banner {
height: 135px;
width: 970px;
}

Try this and tell me if there's any issue.
Photo of Xue

Xue

  • 8 Posts
  • 0 Reply Likes
Hi Gop, thanks!
It works quite well, but one problem - the bottom still has some blank space that I cannot eliminate. I tried adjusting the height to 120, but the height of the place holder does not change. Any way to get around this?
Much appreciated!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Oops. Thought it was part of your banner image . Checking now.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
#sys_banner {
background: url("resources/{place your ECOLOGIA banner here}.jpg") no-repeat scroll left top transparent;
border-bottom: 0 solid #F5EFDF;

}

If this doesn't work I think I'll know why but please try it first.
Photo of Xue

Xue

  • 8 Posts
  • 0 Reply Likes
Hi Gop,
Thanks for your help on this. Well, so it worked well the first time when I loaded it, but then afterwards, it just disappeared. So the banner space is blank right now.

I tried adjusting the size of the image to fit the placeholder, but again, it works the first time i load it, but afterwards it's gone. Would you help again?

much appreciated!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Aah. Can you just check that last piece of code because it was a bit cryptic. I meant to tell you that there was an instruction in there. Add the name of your banner into the place where I left the instruction. Make sure to remove the surrounding brackets. I think this will bring it back??
Photo of Xue

Xue

  • 8 Posts
  • 0 Reply Likes
Hi Gop,

Did as you suggested. Now the next problem is that the image is small - I adjust the size by dragging it around, but once I finish editing and load it again, it's back to the original size, which is around 2/3 of the holder place.

Any suggestion? Thanks!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Yes. Edit it in something like Photoshop before uploading it. Then it's at the correct dimensions. The inbuilt editor doesn't do this well. if you don't have such a facility send it to me and I'll buzz it through quickly and return it to you.

gop@designscent.com
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Make sure to publish after each operation then I can keep up with your moves.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I have your image optimised:

Please see the entry at the very bottom of this thread

Please make sure to change the last CSS over-ride to:

#sys_banner {
background: url("resources/ECOLOGIA-header.jpg") no-repeat scroll left top transparent;
border-bottom: 0 solid #F5EFDF;

}
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
@How Doifind

How to add the Accordion.

1. Go to Yola and open the yola site, and the page you would like to add this accordion to.

2. Drag a HTML widget out at the top of the page

3. Add JavaScript into the widget.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$('.head').click(function() {
if ($(this).children('.change').text() == '(+)') {
$(this).addClass('dropped').next().stop(true,true).slideDown();
$(this).children('.change').text("(-)")
} else {
$(this).removeClass('dropped').next().stop(true, true).slideUp();
$(this).children('.change').text("(+)")
}
});​
</script>


4. Add CSS after javaScript.

<style type="text/css">
.head{
background: grey;
color: white!important;
padding: 10px!important;
transition: background 350ms, color 350ms;
-webkit-transition: background 350ms, color 350ms;
-moz-transition: background 350ms, color 350ms;
-o-transition: background 350ms, color 350ms;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
margin-bottom:7px
}
.head:hover{
cursor: pointer;
background: lightGrey;
color: grey!important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.content{
margin:0 7px 7px 7px;
display:none;
}
.change{
float:right;
}
.dropped{
cursor: pointer;
background: lightGrey;
color: grey!important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}​
</style>


5. Click on Save (sorry if thats not what it says, haven't used Yola in a while)

6. Drag another widget to where ever you want the accordion.

7. Adding new accordion tabs.

It's simple to add new tabs with slideDown text to the accordian. You just to add the following code after each tab. And you can order it but moving it.

<span class="newSection">
<div class="head">TITLE <div class="change">(+)</div></div>
<div class="content">
CONTENT THAT WILL SLIDE DOWN
</div>
</span>


Where TITLE is, you need to add the actual text that will display on the accordion button. DONT edit <div class="change">(+)</div>.

Where CONTENT THAT WILL SLIDE DOWN is, you will put the content of the accordion.

I hope that I made this clear enough.

Best,

Shawn Holman.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes


You need to click on the image before saving to expand it to its true size.
Photo of Eyes Half Closed

Eyes Half Closed

  • 62 Posts
  • 17 Reply Likes
Hi Shawn,

I've got a two column layout on my page and the right column only has content until halfway down the page. So I'd like the last element in that column to remain static until you scroll down passed it and then it becomes fixed, always remaining visible.

Example:
http://www.cracked.com/blog/the-6-mos...

You can see in the right column there in the example how bottom item "detaches" itself from the page when scrolled passed then goes back to being static once scrolled up.

Any ideas?

Cheers :)
Photo of Corynn Brown Cusson

Corynn Brown Cusson

  • 3 Posts
  • 0 Reply Likes
Hi Shawn,

I'm a photographer trying to create a drop down menu for the various categories on my Gallery. I've tried different sites (there are sooooo many) with html wizards and am still not succeeding. Suggestions for a better site to use?

Thank you for your time :)
Photo of Ravikumar Reddy Yeruva

Ravikumar Reddy Yeruva

  • 10 Posts
  • 0 Reply Likes
How to display submenus when mouseover menu items using CSS for my site www.tutorialsguru.net

Current css for menu & sub menu:
/* Main menu */
div#ys_menu {
width: 914px;
min-height: 30px;
}

div#ys_menu ul {
right: 33px;
text-align: right;
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0 30px 0 0;
}

div#ys_menu li {
display: inline;
border-left: 0px solid ;
border-color: #000000;
font: 16px/30px Georgia, Helvetica, sans-serif;
margin: 0;
padding: 0 5px;
list-style-type: none;
list-style-image: none;
position: relative;
}

div#ys_menu li.single, div#ys_menu li.first {
border-left: none;
}

div#ys_menu li.selected a {
font-weight: bold;
background-color: #E6DFB8;
color: #000000;
}

div#ys_menu li a {
font-size: 18px;
text-decoration: none;
margin: 0;
padding: 0 15px;
background-color: #FFFE9C;
color: #000000;
font-weight: bold;
-webkit-border-radius: 15px;/*safari and Chrome*/
-moz-border-radius: 15px; /*Mozilla*/
-o-box-border-radius: 15px; /*Opera*/
-ms-box-border-radius:15px; /*Ms IE*/
border-radius: 15px; /*W3C*/
}

div#ys_menu li a:hover{
text-decoration: None;
background-color: #0000FF;
color: #FFFFFF;
}

/* Sub menu */
div#ys_menu_2{
display: block;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}

div#ys_menu_2 ul {
left: 33px;
text-align: center;
list-style-type: none;
list-style-image: none;
padding: 0 50px;
}

div#ys_menu_2 li {
border-left: 0px solid;
border-color: #000000;
font: 16px/30px Georgia, Helvetica, sans-serif;
margin: 0;
padding: 0 5px;
list-style-type: none;
list-style-image: none;
}

div#ys_menu_2 li a {
background: #FFFE9C;
line-height: 1em;
padding: 10px;
width: 100px;
height: auto;
color: #000000;
font-weight: bold;
-webkit-border-radius: 15px;/*safari and Chrome*/
-moz-border-radius: 15px; /*Mozilla*/
-o-box-border-radius: 15px; /*Opera*/
-ms-box-border-radius:15px; /*Ms IE*/
border-radius: 15px; /*W3C*/
}

div#ys_menu_2 li a:hover {
text-decoration: None;
font-weight: bold;
background-color: #0000FF;
color: #FFFFFF;
}

This reply was created from a merged topic originally titled
How to display submenus when mouseover menu items using CSS.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I have a table created on my Interviews page that I would like to style with CSS instead of the way I have it styled now using HTML which isn't working out too well. My page is called Interviews. My webiste is www.mcran.com. I would like to increase the font size where the comments are for each entry.

You can view my table code by looking at the source for that page. In Firefox right mouse click on the page and select View page source.

Bottom line is that I would love to have more flexibility styling my Interviews page using CSS.

Thanks!!

This reply was created from a merged topic originally titled
Styling an HTML table with CSS.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Here's the CSS that will work with the CSV file

You can adjust the font size etc. You may need to adjust the widths with font size increase.

<style type="text/css">

.the_table {
width: 900px;
margin: 0 auto;
color: #FFDD99;
}

.Image {
float: left;
width: 80px;
color: #FFDD99;
font-size:1.25em;
}

.Artist
float: left;
text-align:center;
width: 120px;
color: #FFDD99;
font-size:1.25em;
}

.Interview {
float: left;
text-align:center;
width: 120px;
color: #FFDD99;
font-size:1.25em;
}

.Information {
float: left;
text-align:center;
width: 200px;
color: #FFDD99;
font-size:1.25em;
}

.Website {
float: left;
width: 120px;
color: #FFDD99;
font-size:1.25em;
}

</style>
Photo of julianaliu2008

julianaliu2008

  • 3 Posts
  • 0 Reply Likes
I deadly need the drop down menu code on my website. and I need the step by step teaching. I hope someone can help .Thank you so so much!!!

This reply was created from a merged topic originally titled
I deadly need the drop down menu code. who can teach me step by step?.
Photo of Chaz

Chaz

  • 14 Posts
  • 0 Reply Likes
Hi

So I've got a weird problem. Tried to add javascript / html to allow pages to have a "fade effect" when switching from one page to another. I found the code here: http://tester3.yolasite.com/super-fad...

However after adding the code in the html widget it breaks the widgets in yola and I can't edit my site at all. Diane from yola support helped me to remove the code so at least now I can edit my site again but I'd really like to add this fade effect. Any suggestions?

PS. When using the code I set the background colour to white.