How do I adjust the spacing of the links in my header?

2775
12
Jump to solution
01-19-2016 02:08 PM
RudieWatzig
New Contributor III

I'd like to move my second link much further to the right.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Rudie,

  In that case ignore all the previous changes and just add this rule:

.jimu-widget-header-controller .links .jimu-link:nth-child(2){
  margin-left: 2em;
}

View solution in original post

12 Replies
DanPatterson_Retired
MVP Emeritus

Well can't see the link... so I presume that isn't what you want

0 Kudos
RudieWatzig
New Contributor III

I don't have a URL for an example.  I cannot expose my map to the public.  I am referring to the links at the top of the page.  You can set up links by clicking the Attribute tab, and under Branding, you can "add new link."  If you add links, they are all spaced closely together at the top.

0 Kudos
DanPatterson_Retired
MVP Emeritus

well a screen grab of that area would be useful and it wouldn't expose your map prior to its release

0 Kudos
RudieWatzig
New Contributor III

urlheader.JPG

0 Kudos
DanPatterson_Retired
MVP Emeritus

Robert Scheitlin​ would be the person to know... so flagged

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Rudie,

  Open the style.css from the [instal dir]\server\apps\[app #]\themes\FoldableTheme\widgets\HeaderController\css folder and add line 3 to this rule:

.jimu-widget-header-controller .links .jimu-link{
  height: 100%;
  margin-left: 1em;
}
RudieWatzig
New Contributor III

Robert,

Thanks for the reply.  I've made the edit you suggest, however I see no difference.  I even cleared my cache and history.  I am using 1.2

Is there something I'm missing?

.jimu-widget-header-controller{

  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);

}

.jimu-widget-header-controller .header-section{

  height: 100%;

  overflow: hidden;

}

.jimu-widget-header-controller .container-section{

  height: 100%;

  min-width: 80px;

}

.jimu-widget-header-controller .logo{

  cursor: pointer;

}

.jimu-widget-header-controller .hide-logo{

  display: none;

}

.jimu-widget-header-controller .titles{

  height: 100%;

  overflow: hidden;

}

.jimu-widget-header-controller .jimu-title{

  text-align: center;

  height: 100%;

}

.jimu-widget-header-controller .jimu-subtitle{

  text-align: center;

  height: 100%;

}

.jimu-widget-header-controller .links{

  height: 100%;

  overflow: hidden;

}

.jimu-widget-header-controller .dynamic-section,

.jimu-widget-header-controller .about-section,

.jimu-widget-header-controller .signin-section{

  height: 100%;

}

.jimu-widget-header-controller .links .jimu-link{

  height: 100%;

  margin-left: 1em;

}

.jimu-widget-header-controller .signin-section .jimu-link{

  color: #d9dde0;

}

.jimu-widget-header-controller .icon-node{

  cursor: pointer;

  opacity: 0.6;

  text-align: center;

  border-right: 1px solid #323e4f;

}

.jimu-widget-header-controller .icon-node img{

  height: 24px;

  width: 24px;

}

.jimu-widget-header-controller .icon-node:first-child{

  border: none;

}

.jimu-widget-header-controller .icon-node:hover{

  opacity: 1;

}

.jimu-widget-header-controller .icon-node.jimu-state-selected{

  background-color: #697a8c;

  opacity: 1;

  border: none;

  border-top: 2px solid #8491a1;

}

.jimu-widget-header-controller .drop-triangle{

  position: absolute;

  width: 0px;

  height: 0px;

  bottom: 1px;

  border-left: 4px solid transparent;

  border-right: 4px solid transparent;

  border-top: 4px solid white;

}

/****/

.jimu-widget-header-controller .jimu-drop-menu{

  background-color: #363455;

  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);

}

.jimu-widget-header-controller .jimu-drop-menu .menu-item{

  overflow: hidden;

  border-top: 1px solid #435063;

}

.jimu-widget-header-controller .jimu-drop-menu .menu-item:hover{

  background-color: #485566;

}

.jimu-widget-header-controller .jimu-drop-menu .menu-item img{

  width: 24px;

  height: 24px;

  cursor: pointer;

  margin: 8px;

  /*float: left;*/

}

.jimu-widget-header-controller .jimu-drop-menu .menu-item .label{

  /*float: left;*/

  cursor: pointer;

  margin-top: 12px;

  font-size: 14px;

  color: white;

  min-width: 50px;

  text-align: center;

}

/**the popup link panel is not appended to container, so, don't add .jimu-widget-header-controller here**/

.popup-links .popup-title{

}

.popup-links .logo{

  /*float: left;*/

  /*margin-left: 5.26315789473684%;/*14/266*/*/

  height: 30px;

}

.popup-links .title{

  /*float: left;*/

  color:#fff;

  text-align: center;

  font-size: 16px;

  /*margin-left: 5.26315789473684%;/*14/266*/*/

  width: 71.42857142857143%;/*190/266*/

  overflow: hidden;

  white-space: nowrap;

  height: 100%;

}

.popup-links .line{

  width: 100%;

  height: 4px;

  border-bottom: 1px solid #393c40;

}

.popup-links .link-section{

  width: 100%;

  height: 66px;

}

.popup-links a{

  color: #fff;

  margin-left: 20px;

  font-size: 14px;

  height: 100%;

  width: 95%;

  overflow: hidden;

  display: inline-block;

}

.popup-links .link-section.signin a{

  color: #d9dde0;

}

/***/

.jimu-header-more-popup{

  position: absolute;

  border-radius: 2px;

  z-index: 111;/*same zindex with loading*/

  background-color: #516070;

}

.jimu-header-more-popup .pages{

  position: relative;

  overflow: hidden;

  padding: 2px;

}

.jimu-header-more-popup .points{

  position: absolute;

  overflow: hidden;

  bottom: -15px;

  left: 0px;

  right: 0px;

  text-align: center;

  background-color: #bababa;

}

.jimu-header-more-popup .points-inner{

  display: inline-block;

  overflow: hidden;

}

.jimu-header-more-popup .point{

  float: left;

  width: 8px;

  height: 8px;

  margin-left: 5px;

  border-radius: 4px;

  background-color: #f2f6f9;

  cursor: pointer;

}

.jimu-header-more-popup .point-selected{

  background-color: #485566;

}

.jimu-header-more-popup .page{

  position: relative;

  overflow: hidden;

}

.jimu-header-more-popup .close{

  position: absolute;

/*  width: 08.92857142857143%;50/560

  height: 08.92857142857143%;*/

  top: -04.46428571428571%;/**/

  right: -04.46428571428571%;

  border-radius: 50%;/*the context is the node itself*/

  background-color: #697a8c;

  cursor: pointer;

}

.jimu-rtl .jimu-header-more-popup .close{

  left: -04.46428571428571%;

  right: auto;

}

.jimu-header-more-popup .close-inner{

  width: 80%;/*40/50*/

  height: 80%;

  margin-left: 10%;/*5/50*/

  margin-top: 10%;/*5/50*/

  border-radius: 50%;/*20/50*/

  background: #1d2123 url(images/close.png) no-repeat center center;

}

.jimu-header-more-popup .icon-node{

  background-color: #697a8c;

  cursor: pointer;

}

.jimu-header-more-popup .icon-node.jimu-state-selected{

  background-color: red;

}

.jimu-header-more-popup img{

  width: 48px;

  height: 48px;

  margin: auto;

  margin-top: 25%;

  display: block;

}

.jimu-header-more-popup .node-label{

  width: 100%;

  text-align: center;

  font-size: 16px;

  margin-top: 5px;

  color: white;

  overflow: hidden;

  white-space: pre-line;

  text-overflow: ellipsis;

  display: inline-block;

}

@media screen and (max-width:600px){

  .jimu-header-more-popup .node-label{

    font-size: 14px;

  }

}

.jimu-more-icon-cover{

  z-index: 110;

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

}

RobertScheitlin__GISP
MVP Emeritus

Rudie,

  I only tested in 1.3. for 1.2 you need to adjust this rule instead (line 4):

.jimu-widget-header-controller .links{
  height: 100%;
  overflow: hidden;
  margin-left: 4.5em;
}
RudieWatzig
New Contributor III

Hi Robert,

Thanks again.  That moved all links to the left.  I would like to move the "Help" to the left while having the Oregon Department of Geology and Mineral Industries" to stay put.

Rudie

0 Kudos