Zh GoogleMap PlacemarkGroupStyle Horizontal: Difference between revisions

From Documentation
Jump to navigation Jump to search
(Created page with "== Create Horizontal Placemark Group List == Let's modify our styles to show placemark group list horizontally, like this File:GM-Tutorial-PlacemarkGroup-Result.JPG T...")
 
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
== Create Horizontal Placemark Group List ==
== Create Horizontal Group List ==


Let's modify our styles to show placemark group list horizontally, like this
Let's modify our styles to show group list horizontally, like this


[[File:GM-Tutorial-PlacemarkGroup-Result.JPG]]
[[File:GM-Tutorial-PlacemarkGroup-Result.JPG]]
Line 9: Line 9:
To do this, go to map details.
To do this, go to map details.


Open slider '''Placemark Groups'''
Open slider '''Groups'''


And change '''Placemark Group CSS''' field to '''External'''. It means, you want to use your own styles, which you'll define in template
And change '''Group CSS''' field to '''External'''. It means, you want to use your own styles, which you'll define in template


After that, you should go to your template CSS files and add your styles. For easy use you can copy styles from component (folder ''\assets\css'', file ''markergroups.css'''), but you have to rename suffix to '''-external'''
After that, you should go to your template CSS files and add your styles. For easy use you can copy styles from component (folder ''\assets\css'', file ''markergroups.css'''), but you have to rename suffix to '''-external'''
Line 17: Line 17:
How find your template files see [[Zh_GoogleMap_FAQ#Using_template_CSS_files|Using template CSS files]]
How find your template files see [[Zh_GoogleMap_FAQ#Using_template_CSS_files|Using template CSS files]]


This is my styles to get group list like I show above
This is my styles to get group list like I show above. I don't pretend it is fine done (because I modify layout of group list twice, and may be some attributes from first time version)


<pre>
<pre>

Latest revision as of 12:02, 10 October 2019

Create Horizontal Group List

Let's modify our styles to show group list horizontally, like this


To do this, go to map details.

Open slider Groups

And change Group CSS field to External. It means, you want to use your own styles, which you'll define in template

After that, you should go to your template CSS files and add your styles. For easy use you can copy styles from component (folder \assets\css, file markergroups.css'), but you have to rename suffix to -external

How find your template files see Using template CSS files

This is my styles to get group list like I show above. I don't pretend it is fine done (because I modify layout of group list twice, and may be some attributes from first time version)

/* My styles */
#GMapsMenu-external #zhgm-menu-external li
{
  list-style-type: none;
  display: inline;
}

#GMapsMenu-external ul
{
margin-left: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#GMapsMenu-external a
{
padding: 3px;
background-color: #369;
border-bottom: 1px solid #fff;
display: inline;
}

#GMapsMenu-external a:link, #zhgm-menu-external a:visited
{
color: #fff;
text-decoration: none;
}

#GMapsMenu-external #zhgm-menu-external a.active {
background-color: #035;
color: #bbb;
                    }
#GMapsMenu-external a:hover
{
background-color: #036;
color: #eee;
}

        
.zhgm-markergroup-a-external
{
  display: inline;
  margin-left: -20px;

}
.zhgm-markergroup-img-external
{
  display: inline;
}
.zhgm-markergroup-text-external
{
  display: inline;
}