Does someone feel like creating a code for me?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I want a code similar to how a Yola widget looks.

I want my section title to have a background color added and I want a border to extend around the section body area and to be the same color as the background of the section title area. The colors don't matter, I can change those myself.

Also, I don't want the code to add a border line when enter is pressed.

If you're not sure what I'm talking about, refer to a Yola widget, it's practically the same thing. Where Yola's widget says "edit" or the 8 dots... that's where I want my title to go with a background color. I want a border (same color as the background color of the title) to wrap around the body of the section.

Much help is appreciated. Thanks! :)

An almost perfect example is... http://en.wikipedia.org/wiki/Portal:U...

Except, I want my border around the body the same color as the background color.

And Diane, if you're reading this...

You once showed me a editor provided by a yola site that gives you the code of something you create. Does that have table and/or excel options in that cause I could make this code myself if it does and what's that source again?
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
  • http://youcanneverbetoosmart.com

Posted 8 years ago

  • 1
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Donald, I think you mean this one? http://html101.yolasite.com/
It does have a table.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
ok, thanks Diane, I'm going to look at it right now.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Trying to work with it, but unfortunately it doesn't have as many options as excel. I can only seem to highlight the text as a background color rather than the whole cell, so I would need a custom code! If someone wants to help, it would be much appreciated!
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Something like this Donald the box in the blue?



<!--<style type="text/css"> .outerrim { width: 320px; padding: 4px; background-color: #ffffff; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-top-right-radius: 4px; border-top-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border: 1px solid #CCCCCC; } #outerbox { width:320px; margin:2 auto; background: #ccdceb no-repeat left top; } #topstrip { background:#ccdceb; padding: 3px; } #colorbar { background:#003366; } #maininnerbox { background-color:#ffffff; background-image:url('http://Abbotsfordgolfsection.yolasite...) ; height: 300px; } </style> <div class="outerrim"> <div id="outerbox"> <div id="topstrip"></div> <div id="colorbar"><div style="text-align: center;"> </div><p style="padding: 2px; text-align: center;"><font style="color: white;"><font style="font-family: Georgia;" size="4"><span style="font-weight: bold;">ONLINE GOLF BARGAINS</span></font><br></font></p> </div><div style="text-align: right;"><font size="1"><font style="color: rgb(0, 0, 153);" size="2"><span style="font-weight: bold;"></span></font></font><br></div><br><br><br><br></div></div>-->
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
kind of... I would really like it to have 100% width instead of a fixed size. I would really like it to stretch from left to right of the entire widget regardless what changes I make to the widget's size. I know there's codes that allow you to use 100% instead of px. In fact, the code you have here probably allows that. Just change the width size from 320px to 100% and that may work. Right now I'm working on something else, but so far it looks something like what I would want. I do appreciate it, when I get back to that I will look at the code. Thanks Craig!
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Craig, mind if I snag this code to tuck away for future use?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Donald

You may find this to be a useful table generator: http://www.quackit.com/html/html_tabl...
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
ok, thanks Sanja, when I get the chance I'll take a look at that! :)
Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
Donald, If you like Craig's example, you could use his code and replace "width: 320px;" with "width: 100%;"
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
ok, thanks, I'll do that when I get to it, thanks for the help Craig, margie, Sanja, and Diane! :)
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Diane, fire away and use the code no bother!!

Craig
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Thank you!