Anonymous_User Absent Member.
Absent Member.
1039 views

Custom UI images


So I know I can edit most of the text that appears in SSPR but I need to
"re-skin" it so that it will look like our corporate standard theme. I
can't seem to find anything in the docs about if this is possible or how
it is recommended to be done. I need to edit the login page and things
to include our logos and standard styles. Can someone help point me in
the right direction? Thanks.


--
gdrtx
------------------------------------------------------------------------
gdrtx's Profile: https://forums.netiq.com/member.php?userid=1660
View this thread: https://forums.netiq.com/showthread.php?t=53200

0 Likes
5 Replies
Anonymous_User Absent Member.
Absent Member.

Re: Custom UI images

On 03/26/2015 02:45 PM, gdrtx wrote:
>
> So I know I can edit most of the text that appears in SSPR but I need to
> "re-skin" it so that it will look like our corporate standard theme. I
> can't seem to find anything in the docs about if this is possible or how
> it is recommended to be done. I need to edit the login page and things
> to include our logos and standard styles. Can someone help point me in
> the right direction? Thanks.
>
>

Greetings,
Can you please let use know

1) What is the version of SSPR?

2) Is it integrated with IDM 4.5 and the Identity Applications?


--

Sincerely,
Steven Williams
Lead Software Engineer
NetIQ
0 Likes
Anonymous_User Absent Member.
Absent Member.

Re: Custom UI images


SSPR 3.2 connecting to an IDM 4.02 eDir.

Thanks


--
gdrtx
------------------------------------------------------------------------
gdrtx's Profile: https://forums.netiq.com/member.php?userid=1660
View this thread: https://forums.netiq.com/showthread.php?t=53200

0 Likes
Anonymous_User Absent Member.
Absent Member.

Re: Custom UI images


You can use the SSPR theme system to stylize SSPR how you wish. The
theme system allows you to include logos and images using standard CSS
language syntax. You will need to be familiar with CSS to accomplish
this. See SSPR - ConfigEditor - Settings - UI - Themes/Custom CSS
settings for more info. The 'sterile' theme is usually a good starting
point for custom CSS. Several of the themes show an example of a logo
in the upper left navigation header.


--
jrivard
------------------------------------------------------------------------
jrivard's Profile: https://forums.netiq.com/member.php?userid=541
View this thread: https://forums.netiq.com/showthread.php?t=53200

0 Likes
Anonymous_User Absent Member.
Absent Member.

Re: Custom UI images


what is the correct path of adding a logo on sspr 3.2, i really am not
familiar with css language syntax.

Regards
Mfundo


--
mfundo
------------------------------------------------------------------------
mfundo's Profile: https://forums.netiq.com/member.php?userid=10732
View this thread: https://forums.netiq.com/showthread.php?t=53200

0 Likes
kborecky1 Absent Member.
Absent Member.

Re: Custom UI images


Under Settings, User Interface, Look & Feel, you can change the
interface theme to Custom. Then point to your customised stylesheet.

I would recommend you make a copy of one of the existing stylesheets,
located here:

/public/resources/themes/

Each theme has its own directory. (You can see what they look like by
changing to the various themes in the SSPR config.) Copy the contents
of the theme you want to work with into the "custom" directory, or to a
new directory. (Remember if you create a new directory to change the
owner and group for that directory to be "tomcat.") Whatever you use,
point to it in the *Custom CSS Stylesheet Location* in SSPR. For
instance, I put mine in /public/resources/themes/smith/style.css and
/public/resources/themes/smith/mobileStyle.css. I also put my custom
images in the same directory.

The style.css file is for regular browsers, and the mobileStyle.css is
for phones etc. (Duh.) The bare bones thing you can do is put your
company's logo file up there - again, I put mine in the same directory
as the stylesheets - then edit the stylesheets to use them. The section
is "header-company-logo". I changed mine to look like this. The most
important bits are in red:

#header-company-logo {
background: url("SC-product.png") no-repeat scroll 0 0 rgba(0,
0, 0, 0);
color: #FFFFFF;
height: 42px;
width: 450px;
left: 27px;
position: absolute;
top: 10px;
}

To summarize:

ADD THE LINE starting with "background: url" and specify the name of
logo file (this examples assumes it is in the same directory as the
style.css file itself)
ADJUST the height and width numbers to match your logo.

I wouldn't mess with the left, position, and top settings until you see
how it works out.

**Remember you may need a smaller version of the logo for your
mobileStyle.css**

This is just the barest of descriptions. You can get in very deep, very
quickly if you don't know anything at all about CSS, and don't have time
to mess around with it.

I hope this helps!

Karla B


--
kborecky
------------------------------------------------------------------------
kborecky's Profile: https://forums.netiq.com/member.php?userid=6280
View this thread: https://forums.netiq.com/showthread.php?t=53200

0 Likes
The opinions expressed above are the personal opinions of the authors, not of Micro Focus. By using this site, you accept the Terms of Use and Rules of Participation. Certain versions of content ("Material") accessible here may contain branding from Hewlett-Packard Company (now HP Inc.) and Hewlett Packard Enterprise Company. As of September 1, 2017, the Material is now offered by Micro Focus, a separately owned and operated company. Any reference to the HP and Hewlett Packard Enterprise/HPE marks is historical in nature, and the HP and Hewlett Packard Enterprise/HPE marks are the property of their respective owners.