How do I change this color?

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I have a code which uses words for colors, "red, black, orange, blue" etc. How do I change the color to an uncommon color such as light blue? I tried typing in light blue and it just took that portion of the code out of the html.

Here's the code...
<!--
<DIV align=center>
<DIV style="BORDER-BOTTOM: orange 6px double; BORDER-LEFT: orange 6px double; WIDTH: 200px; HEIGHT: 100px; BORDER-TOP: orange 6px double; BORDER-RIGHT: orange 6px double">
<DIV align=left>
<UL>
<LI>
<DIV align=left>Astrophysics</DIV></LI>
<LI>
<DIV align=left>Nuclear Fusion</DIV></LI>
<UL>
<LI>
<DIV align=left>R-Process</DIV></LI>
<LI>
<DIV align=left>S-Process</DIV></LI></UL>
<LI>
<DIV align=left>Nuclear Fission</DIV></LI></UL></DIV></DIV></DIV>
-->

that's the exact code pasted from my html, but I want light blue if at all possible. I know some of you know how to modify codes really well... will probably give me an answer with numbers instead of words LOL.

If you use an RGB scale to add the color, the exact color is 93,196,211
Photo of Donald

Donald

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

Posted 9 years ago

  • 1
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
or maybe you have another code, I want a double line border.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
lol, writing this post triggered me to try something... I added the rgb in place of the color and it worked. lol
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
But I do have another problem. I added 100% where the width and height is to make it 100% to the size of the widget... well... it's 100% to the left... but the right is 100% to the end of my column divider and extends beyond the widget.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Here's the code...

<!--
<DIV align=center>
<DIV style="BORDER-BOTTOM: rgb(93,196,211) 6px double; BORDER-LEFT: rgb(93,196,211) 6px double; WIDTH: 100%; HEIGHT: 100%; BORDER-TOP: rgb(93,196,211) 6px double; BORDER-RIGHT: rgb(93,196,211) 6px double">
<DIV align=left>
<UL>
<LI>
<DIV align=left>Astrophysics</DIV></LI>
<LI>
<DIV align=left>Nuclear Fusion</DIV></LI>
<UL>
<LI>
<DIV align=left>R-Process</DIV></LI>
<LI>
<DIV align=left>S-Process</DIV></LI></UL>
<LI>
<DIV align=left>Nuclear Fission</DIV></LI></UL></DIV></DIV></DIV>
-->
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
I just found out that it's not extending all the way to the edge of the two column divider, but it is overlapping the widget it's in... which throws it off balance, the left side will be good and the right side will be off-centered slightly.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Here we go Donald,
You can change the width and height to suit.

<div style="width:400px;height:100px;border:6px double rgb(93,196,211);padding:10px;">
<ul>
<li>Astrophysics</li>
<li>Nuclear Fusion</li>
<ul>
<li>R-Process</li>
<li>S-Process</li>
</ul>
<li>Nuclear Fission</li>
</ul>
</div>
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
yea, thanks for trying to help... but let me get something straight... if you don't use 100% then based on someone's computer settings, it'll be different from one computer to the next right? I want... regardless of a circumstance, the border to stretch from one side of the widget to the next, even if I adjust the widget, I don't want to have to adjust the html to suit. Just in case in the future I need to edit or modify things. I am well aware I can use the sizes as indicated above. But then it's not going to be 100% at all time and every circumstance.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Your banner size for example is a fixed size.
If you made the div a fixed size (slightly less than your banner size for example)
it will always remain the same size.

Maybe I explained that wrong... Your banner size never adjusts to the monitor size. It is always fixed. Unless of course you use a fluid width template, which you are not.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
lol... yes, but that's because we can't adjust the margins at the banner level... if we could, the banner wouldn't stretch from one side of the margin to the other. Take for example my headings... if I change the widget size... the headings background and border changes with it automatically, without changing the html... for example...
http://sitebuilder.yola.com/sites/D7d...

on that page are my headings with light blue background and borders. You'll notice different size headings on this page, but yet, I don't change it's html except the text in it.

Now... scroll down to "theoretical Astronomy" - that's a heading... this is also where my border code is as listed above... you'll notice there's a heading and beneath it is my border. The left side is where I want it and the right side is not.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
<!--
<DIV style="BORDER-BOTTOM: black 1px solid; TEXT-ALIGN: center; BORDER-LEFT: black 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: rgb(93,196,211); PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid; PADDING-TOP: 10px"><B><FONT size=5 face=Arial>Table of Contents</FONT></B></DIV>
-->

this is my heading's code, and it works fine, it adjusts WITH the widget, I can change my widget size to anything I want and the borders and background changes without changing the code.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
I'm working on something else that might even look better (based on an opinion)... check the above link now... at the Theoretical Astronomy section.... and tell me how that short list looks to you. Kind of unique.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
I see what you are getting at ;-) Strange how we all do things differently.

One of the Yola technical guys once said that some browsers interpret things differently to others, (which we all know) and it's best to specify fixed widths and heights. That comment stuck in my brain and I've done it ever since.

If you look at my Helderberg site you will see all the DIV elements on my home page.
They all have fixed heights and fixed widths (not adjustable when dragging a widget) and I have tested the site in all the major browsers and it remains consistent.

Another thing, why don't you use my HTML encoder when pasting your code in GS ?
Theres no need to use the comment tags anymore <!-- -->
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
ok... I see... let's say for example, with one of your div codes... that you adjusted the size of a widget WITHOUT adjusting the html... what's going to happen?

The thing is, my site is on it's way to being EXTREMELY large. If I need to add content or change/edit pages, I'm going to want to be in and out as quickly as possible. Not wanting to change the html of a widget that I'm not editing... want to just leave those alone because they were already done. Fixed widths cause problems and consumes time when your site is so large and is updated / edited regularly. I'm trying to get a 100% to work properly... my 100% seems to overlap the widget... but I used a different code to make the look that's up there right now. Don't know how good it looks.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
and with fixed sizes, you have to test it... 100 px.. nope too small... 125 px... nope too large... 110px... nope too small... 115px... nope too small. 120px... nope too large... 117px... nope too small.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
maybe try 118px? ;)
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
yes, these were examples... I was just indicating that testing and trying is too much time consuming. My code above for my headings work just fine, they adjust WITH the widgets, they aren't fixed... what's the difference?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Yes, if you fix the size of the div, unfortunately (or fortunately depending how you look at it) you can't drag the widget smaller than the width of that div.

In your case, maybe its best to leave it the way you have it (adjustable) because of all the text you have that will vary from page to page. My site will also be pretty large (about 1000 pages) when done. It's a directory site and the page layouts remain the same from page to page, so "fixed" works for me.

Each one of my accommodation listings is in its own div, so it's easy to drag around or delete. I also use a randomisation script, so that each time the page loads the listings (divs) are in a different order so that no listings always occupies the same spot. You can see an example of how it works here: http://travelsa.yolasite.com/tut-rand...

The other thing I also do is have an image for the div heading instead of a hex or rgb colour. This way I can edit the image in the file manager and it will change it site wide instead of doing it on each page. You could even use a "flat" colour for this ie. a green or blue image.

I can change my site colour 'site wide' in a matter of minutes. All I do is change the background colour, div heading image and banner and presto the whole site can
change to lets say blue instead of green... cool hey?

These are just a few things to consider, specially with a site that has 1000's of pages like yours will.