360 Core: E-Journal Portal Tabbed View Customization

If you use a Cascading Style Sheet (CSS) to customize the look of your E-Journal Portal, and you subscribe to 360 Core eBooks and have chosen the tabbed view for E-Journal Portal, then you can customize the look of those tabs (e.g., to match the look of your web pages.)

Copy the code below into your own CSS, or into the CSS in the Page Head section of the E-Journal Portal Administration Console. This can be found in the Advanced Options section in the left-hand navigation menu:

This action will create the default appearance for the tabs:

In the URLs within the code below, you need to replace CLIENTID with your Serials Solutions client ID. This is the 10-digit code at the beginning of the Serials Solutions URL you use for the E-Journal Portal. For example, if your E-Journal Portal URL is "http://pv2ru5bh3k.serach.serialssolutions.com/" then your client ID is pv2ru5bh3k.

You can then modify the tabs by modifying the code. For example, in the section called ".SS_EJP_TabContainer a {" if you change the color from #00c to #00c060, the tab container will change from gray to green.

If you need assistance with this procedure or are unable to do it yourself, please contact us using the Contact Us tab near the top of this page.

/** Tab related classes **/

.SS_EJP_TabContainer {
float: left;
width: 100%;
background: #DAE0D2 url("http://CLIENTID.search.serialssolutions.com/alEJPStatic/img/ejp_tab_bg.gif") repeat-x bottom;
font-size: 93%;
line-height: normal;
margin-bottom: 1em;
}
.SS_EJP_TabContainer ul {
margin: 0;
padding: 10px 10px 0;
list-style: none;
}
.SS_EJP_TabContainer li {
float: left;
background: url("http://CLIENTID.search.serialssolutions.com/alEJPStatic/img/ejp_tab_left_both_unselected.gif") no-repeat left top;
margin: 0;
padding: 0 0 0 9px;
border-bottom: 1px solid #765;
}
.SS_EJP_TabContainer a {
float: left;
display: block;
width: .1em;
background: url("http://CLIENTID.search.serialssolutions.com/alEJPStatic/img/ejp_tab_right_both_unselected.gif") no-repeat right top;
padding: 8px 35px 4px 26px;
text-decoration: none;
color: #00c;
}

.SS_EJP_TabContainer > ul a {
width: auto;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
.SS_EJP_TabContainer a {
float: none;
}
/* End IE5-Mac hack */

.SS_EJP_TabContainer a:hover {
color: #333;
}

li.SS_EJP_TabListItemSelectedAll,
li.SS_EJP_TabListItemSelectedJournals,
li.SS_EJP_TabListItemSelectedBooks,
li.SS_EJP_TabListItemSelectedOther {
background:url("http://CLIENTID.search.serialssolutions.com//alEJPStatic/img/ejp_tab_left_both.gif") no-repeat;
background-position:0 -150px;
border-width:0;
}

/* selected anchor */
.SS_EJP_TabListItemSelectedAll a,
.SS_EJP_TabListItemSelectedJournals a,
.SS_EJP_TabListItemSelectedBooks a,
.SS_EJP_TabListItemSelectedOther a {
background:url("http://CLIENTID.search.serialssolutions.com//alEJPStatic/img/ejp_tab_right_both.gif") no-repeat;
background-position:100% -150px;
font-weight: bold;
padding-bottom:5px;
color:#333;
}

.SS_EJP_TabContainer li:hover,
.SS_EJP_TabContainer li:hover a {
background-position:0% -150px;
color:#333;
}

.SS_EJP_TabContainer li:hover a {
background-position: 100% -150px;
}

• Date Created: 9-Feb-2014
• Last Edited Date: 12-Feb-2016
• Old Article Number: 7095