Sponsored By

Sign in to follow this  
Bubba Bob

Mapbuiler.net Text Color?

Recommended Posts

Hopefully someone here is familar with Mapbuilder.net. For some reason the text color on my maps is a real light blue. too light to read. The text mentioned is bolded in the quote below. If someone could read over that section and tell me how to change that text color Id greatly appreciate it. Or if someone knows a way to do it with Mapbuilder's GUI editor.

Also, I already tried HTML tags. Didnt quite work :blush:

Thanks yall.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>DivingNutz</title>

<meta name="title" content="MapBuilder - GoogleMap API Source Code Generator." />

<meta name="description" content="MapBuilder.net lets you tag locations on a map and publish it on your own site. Mapping is now easier than ever. It's free." />

<meta name="keywords" content="Google Maps API, PHP, AJAX, XML" />

<meta name="author" content="Andrew Bidochko. http://www.mapbuilder.net" />

<style type="text/css">

/* Generic map, side bar holder styles */

.MapBuilder {font: normal small verdana, arial, helvetica, sans-serif; font-size: 10pt; margin: 0px;}

.MapBuilder a {text-decoration: none; color: #000000; background-color: transparent;}

.MapBuilder a:hover {color: #F60; background-color: transparent;}

.MapBuilder h1 {font-weight: bold; font-size: 16pt; color: #000000; border-bottom: 2px solid #369;}

/* Info Window styles */

.IW { width: 350px;}

.IWContent {height: 120px; overflow:auto;}

.IWCaption {font-weight: bold; font-size: 12pt; color: #369; border-bottom: 2px solid #369;}

.IWFooter {margin-top: 5px; font-size: 8pt; }

.IWFooterZoom {}

.IWDirections{background-color:#FFF;}

.MapBuilderSideBar {float:left; margin-left: 10px; }

</style>

<!-- Please, request sign up for your own GMAP KEY at http://www.google.com/apis/maps/signup.html and replace 'GMAPKEY' entry with generated key in the line below. -->

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAxD2sHTTCC5qJBiqRraeN_BSQEafI61nDT5uivlKK6FxSLyogTBQeNOjeh_srR-Cd8qqAAfHie213Sg" type="text/javascript"></script>

<script src="http://www.mapbuilder.net/js/api/google/v2.03/?UserName=americanmadeford&Map=48600&SideBar=Right" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

// Global Variables

// set map variable

var map = null;

//set up array of locations

var aLocations = new Array;

/*************************** Configuration Options ***************************/

/*PDMarker is used to display tooltips when the user hovers over the markers.

* PDMarker is a LGPL library provided by Peter Jones.

* For details see http://wwww.pixeldevelopment.com/pdmarker.asp

*/

var usePDMarker = false;

// Create a base "tiny" red icon that specifies the shadow, icon dimensions, etc.

var iconsm = new GIcon();

iconsm.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";

iconsm.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";

iconsm.iconSize = new GSize(12, 20);

iconsm.shadowSize = new GSize(20, 18);

iconsm.iconAnchor = new GPoint(6, 20);

iconsm.infoWindowAnchor = new GPoint(5, 1);

// Create a base "large" red icon that specifies the shadow, icon dimensions, etc.

var iconbig = new GIcon();

iconbig.image = "http://www.google.com/mapfiles/marker.png";

iconbig.shadow = "http://www.google.com/mapfiles/shadow50.png";

iconbig.iconSize = new GSize(20, 34);

iconbig.shadowSize = new GSize(37, 34);

iconbig.iconAnchor = new GPoint(6, 34);

iconbig.infoWindowAnchor = new GPoint(5, 1);

// Custom Icon

var iconcustom = new GIcon(iconbig);

iconcustom.shadow = '';

function onLoad() {

if (!GBrowserIsCompatible())

{

document.getElementById("MapBuilderMap").innerHTML = "Unfortunately your browser doesn't support Google Maps.<br /> To check browser compatibility visit the following <a href=\"http://local.google.com/support/bin/answer.py?answer=16532&topic=1499\">link</a>.";

return;

}

map = new GMap2(document.getElementById("MapBuilderMap"));

var MB = new MapBuilder(map);

map.addControl(new GLargeMapControl());

map.addControl(new GMapTypeControl());

// Center the map to the default location and set map type

map.setCenter(new GLatLng(30.89279747750818, -85.133056640625), 6, map.getMapTypes()[0]);

// Initialize variables

var point = null;

var footerHtml = null;

var InfoHTML = null;

var marker = null;

/* Options used for PDMarker initialization:

* label: tooltip text

* opasity: tooltip opasity

*/

var options = {};

// Add locations

point = new GLatLng(30.65779386937264, -85.90391278266907);

footerHtml = "<div class=\"IWFooter\"><div class=\"IWFooterZoom\"><a href=\"java script:void(0)\" onclick=\"ZoomMapTo(0)\">Zoom To</a></div></div>";

// Define Marker

InfoHTML = "<div class=\"IW\"><div class=\"IWCaption\">Morrison Springs</div><div class=\"IWContent\"><P>EXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXT.</P></div>" + footerHtml + "</div>";

iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_blue.png";

marker = createMarker(point, InfoHTML, iconbig, options, 0);

map.addOverlay(marker);

aLocations[0] = new Array(marker, "Morrison Springs", InfoHTML, point);

point = new GLatLng(30.126124364224577, -85.73387145996094);

footerHtml = "<div class=\"IWFooter\"><div class=\"IWFooterZoom\"><a href=\"java script:void(0)\" onclick=\"ZoomMapTo(1)\">Zoom To</a></div></div>";

// Define Marker

InfoHTML = "<div class=\"IW\"><div class=\"IWCaption\">St Andrews St Park</div><div class=\"IWContent\"><P>EXAMPLE TEXT EXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXTEXAMPLE TEXT </P><br /><P>Dive flags are required and needed. Be carefull of the fishing lines cast near the rocks. Cary a dive tool!</P></div>" + footerHtml + "</div>";

iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_blue.png";

marker = createMarker(point, InfoHTML, iconbig, options, 1);

map.addOverlay(marker);

aLocations[1] = new Array(marker, "St Andrews St Park", InfoHTML, point);

// And finnaly create sidebar

createSideBar();

}

//]]>

</script>

</head>

<body onload="onLoad()" onunload="GUnload();">

<div id="MapBuilder" class="MapBuilder">

<h1>DivingNutz</h1>

<p>Local SE USA Scuba Site</p>

<div id="MapHolder" class="MapHolder" style="float:left;">

<div id="MapBuilderMap" style="width: 600px; height: 500px;"></div>

<!-- Please KEEP RESPECT to MapBuilder.net team and DO NOT DELETE line below if you want to keep MapBuilder service free. -->

Created by <a href="http://www.MapBuilder.net">MapBuilder.net</a>.

</div>

<div id="MapBuilderSideBar" class="MapBuilderSideBar">

<div id="SideBarAction">Map Locations [<a id="SideBarActionLink" href="java script:void(0)" onclick="ProcessLocationList()">-</a>]</div>

<div id="LocationList" style="height: 480px; overflow:auto;"></div>

</div>

</div>

Edited by Bubba Bob

Share this post


Link to post
Share on other sites

Thanks Mike,

Im just the web"master". May be a picture of me in the photo gallery. Dunno.

ON a side note, I figured it out. Although, I have to manually insert the font folor tags. Seems like that should be a feature in the GUI. Google, you've let me down <_<

Share this post


Link to post
Share on other sites

in this section of the stylesheet code you can change the info.

/* Info Window styles */
.IW { width: 350px;}
.IWContent {height: 120px; overflow:auto;}
.IWCaption {font-weight: bold; font-size: 12pt; color: #369; border-bottom: 2px solid #369;}
.IWFooter {margin-top: 5px; font-size: 8pt; }
.IWFooterZoom {}
.IWDirections{background-color:#FFF;}

Particularly the .IWCaption section. change the color from #369 to whatever hex code you would prefer for the color to be. You would only need to change the first #369 for the text color.

Share this post


Link to post
Share on other sites

Just remember, when you have a stylesheet that is what controls the colors, size, etc..

If you are using a template, look at the div id tag to determine which stylesheet command you need to work on.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this