Jump to content
Sign in to follow this  
oxrox

Text Color and Website background color

Recommended Posts

I just created a calendar (Trumba was recommended by my hosting site) and put it on the site with no problem. However, when I click on an event, I don't get to see the "When" and "where" details. My site background is black, and this font is also in black.

 

Can I do anything about this (i.e. change the text to white), or will I just have to forego the calendar until such time as the website is completely re-done?

 

Thanks!

Share this post


Link to post
Share on other sites

Hi oxrox,

You can try a couple of things to change the colors. One is to experiment with the pre-defined color schemes in step 1 of the publishing wizard (display your calendar in your account and click Publish). You can use the preview below to test out the different screens and see if the selected scheme works.

 

If you want more control, you can go to step 3 of the publishing wizard, and then in the mix in other calendars section, click the customize the colors link. There you can enter hex values for event colors.

 

If you don't see this customize colors link, see this post for more info.

 

If you want more info about customizing colors, see this: Set custom colors for published events.

 

Hope this helps.

 

Jill / Trumba UA

Share this post


Link to post
Share on other sites

Hi - I went through the suggestions, and can toggle certain colors, but here's the true problem I'm having.

 

I don't mind if the calendar itself isn't black in background, it's when I open the event - that's where the trouble lies.

 

For example. on the Trumba calendar, if I click on the event, I can read it due to the fact that the background is white and the lettering is black:

 

preview.jpg

 

However, if I open an event on my website calendar, I only see the following:

 

lookslike.jpg

 

How can I change this portion...or can I?

Share this post


Link to post
Share on other sites

Hi oxrox,

I see what you mean. I was messing with this, and it seemed that the text that's black in your spud inherits the setting in your .css file for body text color. In other words, this setting:

 

body {
color: #00ff00;
}

 

Will give you green text, which is readable on black background. You can substitute whatever color you're using for body text on your black background.

 

It appears as if the color of the link text on this page is hard coded. If I set it in the .css file, it doesn't change on the event details page. However, you can add other formatting elements that aren't hard-coded. For example, if I add a background color to the body, paragraph, or link elements, the colors appear in various ways in the event details page (tho some of my results weren't what I'd call aesthetically pleasing :). Anyway, you might need to experiment with different combinations to see what works best.

 

Development is working toward providing increasing flexibility in manipulating these formatting elements, and we're implementing these features little by little each week or so. I'll double-check to make sure changing the text color on the event details page is on the request list.

 

Jill / Trumba UA

Share this post


Link to post
Share on other sites

Hi Jill,

 

I appreciate all the help. I'm a total newbie to this, so forgive me for sounding dense - where do I go to change that color? Or more appropriately, where is my .css file?

 

:unsure:

 

Andrea

Share this post


Link to post
Share on other sites

Hi Andrea,

Before I explain all of the .css stuff, I'll give you a simple workaround to try. Open the HTML page that contains your calendar in a text editor so you can edit the code. Then, before the code for your embedded calendar, enter this code: <font color="#8080ff"> Then after the closing tag for the calendar, add the closing font tag: </font> After that, if you click an event on your embedded calendar, the body text will show in a gray-blue color instead of black. This does affect some text on your main calendar (as would changing the setting in a .css file), so you will probably have to find a color that works with both white and black backgrounds. What color text do you use now on your black background, and how is the color defined?

 

Now about the .css file...

If your pages are using a .css file, which contains a list of style/formatting definitions for the HTML elements, you can see where it is by looking at the top of your HTML file (in the code). You'll see a line that looks something like this:

<link rel="stylesheet" type="text/css" href="stylesheetname.css" />

 

where the text in blue indicates the name of the .css file and the path to where you can find it on your computer. If there's no path, the file is just in the same directory as your HTML file. If you don't see this line of code, you might not be using a .css file. If that's the case, you can either create a .css file or use local style definitions right in your HTML file.

 

I would recommend eventually creating a .css file that defines all of the elements in your HTML pages. The workaround using the <font> tag is what a developer might refer to as a "hack." :) A .css file allows you to eliminate tons of code in your HTML that is defining the formatting locally each time an element appears. In addition, you get more control over how things look, and when you change a definition in the style sheet, all content in your HTML files that uses that element inherits the change. In the Trumba context, if you have a css file, your calendar spuds will pick up some of its settings, so they look more like a part of your site than the default settings would.

 

A good place to go to learn more about CSS is the W3C: http://www.w3.org/Style/Examples/011/firstcss and http://www.w3.org/TR/CSS21/ (on this second one, scroll to the table of contents and start with the introduction). You can also search the web for more sources of info. There is no shortage of them!

 

But in the meantime, the <font> tag should work. If you do have a .css file, you can open it in a text editor such as Notepad or Text Edit. In the file, find the body element, which will look like the code I posted earlier, and that's where you can add or edit the text color definition.

 

I hope that makes sense! Sorry if it's a bit overwhelming.

 

Jill / Trumba UA

Share this post


Link to post
Share on other sites

My apologies once again for seeming so daft. I really am trying to put it all together in my head. At what point do I edit the html of the calendar? Well, I guess what I mean is do I do it at the trumba page of my calendar, or do I do it somewhere on my website?

 

I went to my trumba calendar page and did a File > Edit with MS Word...but that was a bit overwhelming, and it opened as "read only." Maybe I'm just waiting until it's too late at night to think about these things...

Share this post


Link to post
Share on other sites

Hi Andrea. You're not sounding daft at all.

 

The best way to edit the HTML code for a page on your site is to actually open the file for the page in a text editor, such as Notepad, or an HTML editor program such as Macromedia HomeSite, Microsoft FrontPage, or BBEdit.

 

Notepad is just fine and, if you use Windows, comes on your computer. You can find it under Programs > Accessories. To edit the HTML for a page, you can start Notepad and then use File > Open to open the .html file for the Web page that you want to edit.

 

If you've never worked with HTML before, seeing the code for an entire page might be a bit overwhelming. To get to the area where your embedded calendar is so you can use the <font> tags that Jill suggested, you might want to try doing Edit > Find and then searching for "</script>".

 

After you make the changes, just save the Notepad file but don't close it yet. Then open the page you're editing in a browser and refresh to see the changes. You can keep experimenting with the code in Notepad and refreshing the page in the browser until (we hope) you get results you like.

 

I hope this helps some.

Connie / Trumba User Assistance

Share this post


Link to post
Share on other sites

Okay, after some frustration, and basically throwing a dart while blindfolded - IT WORKED!!!

 

And then...it stopped working. When I add the code, save, and close notepad and do all my refreshes - it doesn't stick. The code disappears.

 

I'm so close!!! What step am I missing?

Edited by oxrox

Share this post


Link to post
Share on other sites

Hi again Andrea.

 

This is puzzling.

 

One possibility that occurs to me is that somehow you are viewing an html file that is different from the file that you actually changed in Notepad. That maybe you copied the file to your computer or another location on your computer to modify it and then in your browser you are looking at the original page?

 

Is that possible?

 

Sorry for the endless problems.

 

Connie

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...