Make markers bigger

Jun 23, 2020

Is there any way to make markers on a graphic larger and more noticeable? I saw an old discussion for making them not white/black, but it didn't seem to have been resolved.  And I'm seeing no discussion for how to change marker size for Rise 360

14 Replies
Yvonne Leklou

The markers are too big for something I am working on. If they could be transparent, that would eliminate my problem. For example, markers on a map cover the name of the location. The only workaround is to put the marker to the side of the map somewhat near the area we are identifying reducing the effectiveness of the marker and slowing down the learner. 

Christopher Santos

Hi Cody,

We don't have this option in our roadmap yet.  We will be updating this thread as soon as we hear news about this feature from our team.

But if you are familiar with CSS and basic HTML, you may be able to modify the main.bundle.css to adjust the size of the marker (as shown below):

marker

First, locate this file inside your folder (scormcontent/lib folder).  Open the CSS file using a text editor like Notepad or Notepad++.  Then find the following CSS entry: 

@media(min-width:48em) {
.labeled-graphic-marker__pin {
font-size: 1.8rem;
height: 3rem;
line-height: 3.2rem;
text-align: center;
width: 3rem
}
}
 
To adjust the size of the marker, change the height and width property.  The cross can be adjusted by changing the font-size.  And to change the cross' vertical alignment, adjust the line-height property.
 
Then saved the CSS file, rezip the package and upload it to your LMS.  Note that when zipping, make sure you will zip the package in the location where the main files and folders are located (as shown below):
archive