Sometimes you just want to take the title off a page in Confluence. Maybe you have a landing page and you want more control over the layout. Maybe someone in a group just wants the page to be almost 90% graphics. The reason doesn’t matter, the need dictates a solution.
Here is how you do it.
First make sure the HTML macro is enabled in your confluence install. If not here are the instructions to turn it on. It is disabled by default, so it won’t work unless you turn it on.
Edit the page:
3. Type: {html and hit return to create a macro. It doesn’t matter where in the page you put this code, you can put it in the top or the bottom.
4. Enter the following code into the macro.
Now the the line that has #title-text hides the title, and the .page-metadata line gets rid of the created and modified line below the title.
This might be strange, Google Maps API has lots of different options. But lets images that you want to overlay a heat-map from Google onto your own custom map. A situation where you want just the heat-map but not the actual map. I have run into this once and wanted to share how we accomplished this.
Map & Heat-map
Heat-map No Map
The goal is to take a google heat-map that uses the Google Maps API to display a custom heat-map, and to take the map out, just leaving the heat map, so we can take a screen capture and then drop it into photoshop to use over a custom map. I won’t go over the matt-process in photoshop but I will go over the steps to get to a browser.
You are going to want to right click on the white area outside the button bar on the heat-map. Then click “Inspect”. A toolbar will fold out on the right hand side of the browser and the content will shift over.
Step 3. Edit the Page Source Code
This is where the magic happens. What you are going to do is modify the source code of the page, and google chrome is going to update the page in real time.
Start by expanding the pane so you can read it properly, Something like this. Don’t worry, when we are going to close it and have a full screen map once again.
Next you want to expand the DIV’s, you will expand 5 div’s that start with the following:
<div id=map
<div style=height:
<div class = “gm-style”
<div tableindex=”0″
<div style=”z-index:
Now under the “z-index” div you will find at least 4 div’s that look the same. If you have more than one heat-map or markers there may be more. You want to highlight the last div like in this screenshot:
And then hit “Delete” on your keyboard. The map should disappear leaving the heat-map and horrible egg-shell off white background.
Step 4: Get rid of the background color
Now we need to get rid of that off white background color. This is easy to do. With the pane still open look towards the second Div you expanded. The one that started with “<DIV style=”height…” At the end of that div there is a part that says “color: rgb” we are going to change the three values after that to 255. You can click on the text and edit away.
Close the pane by clicking on the ‘X’ in the upper right hand corner of the screen.
Then go ahead and take a screen shot and drop it into a photo editors as you see fit:
One Heat-map, no background.
Conclusion:
You can remove the map in a google map just by removing some simple lines of code from the HTML after your computer downloads and renders the map from google.
There may be the possibility, of adding more CSS to hide or even replace the layer on page-load if you wanted to, yet that is not covered here. You could also do this on a map that has other information on it, such as points or polygons.
I hope this helps you in whatever project you are working on. If you have any comments or suggestions I would love to hear them.
