I'd like to move my second link much further to the right.
Solved! Go to Solution.
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; }
Well can't see the link... so I presume that isn't what you want
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.
well a screen grab of that area would be useful and it wouldn't expose your map prior to its release
Robert Scheitlin would be the person to know... so flagged
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; }
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%;
}
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; }
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