CSS help with moving "Browse by Category" pane to the left of home page

David_Darling

Hi Experts, we're looking for CSS code that will allow us to move the "Browse by Category" pane on the "http://hostname/ServiceCatalog/Listing/#/" home page to the left of the middle pane, rather than being on the right side of the screen.

Can anyone help?

Thanks!

james_kleinschnitz

For home page only
.sc-main-wrapper .sidebar-right{ right: auto; left:80px; z-index:0;}
.sc-main-wrapper .col-sm-9.col-sm-right-offset-3{margin-right:0; margin-left:27.5%;}

and kb only in case someone wants that
.kb .sidebar-right{ right: auto; left:80px; z-index:0;}
.kb .col-sm-9.col-sm-right-offset-3{margin-right:0; margin-left:27.5%;}

Tom_Hendricks

Try these:

.sidebar-right { right: unset !important; }
.col-sm-9 { float: right; }

In a quick test in Chrome, it did what I think you are trying to accomplish.

David_Darling

Doesn't look like this works in IE, which is a requirement for us.  Also in Firefox, the Browse by Category is moved to the left, but it sits on top of the middle pane so much of the middle pane is not visible.

Tom_Hendricks

That would be because I left something important out! 

.col-sm-9.col-sm-right-offset-3 { margin-right: unset !important; }

I tried it in IE with this included, and it worked.  One note, however--if you are using portal 6.0+, it has a responsive design that may negate some or all of this at different screen resolutions.  At 1920x1080, this CSS works in Chrome and IE, at least.

Perhaps this is / could be considered in the theme tool?

For convenience, the whole block is:

.sidebar-right { right: unset !important; }
.col-sm-9 { float: right; }
.col-sm-9.col-sm-right-offset-3 { margin-right: unset !important; }

David_Darling

Hi. Works like a charm now in Firefox, but not IE.  We're using IE11, what version are you using?

I can see in the DOM Explorer in IE11 that the following settings are struck through (not applied):

.sidebar-right { right: unset !important; }

.col-sm-9.col-sm-right-offset-3 { margin-right: unset !important; }

Tom_Hendricks

IE11, also.  I have quite a bit of custom CSS on our site, so I may already have cancelled out whatever is overriding these classes.

The best way to find out what is interfering is to find a "right" and a "margin-right" in the F12 window that are not crossed out, and then look at what class contains them.  In the IE developer window, the class name should be black while any others that may be included but do not directly affect the element you selected will be dimmed out in gray.

If you find those classes, add them to your CSS file above and unset the attribute(s).

If @james_kleinschnitz is reading this, perhaps this type of customization will make it into the upcoming or a future version of the themer?  It might be a little out of the current scope, but things like this and getting request offering fields into rows are clearly on some customers' minds.  I think we can get by for a while with customizations, but there is an opportunity here to wow some customers.

james_kleinschnitz

@Tom_Hendricks
These are more layout tweaks then style/theme changes.  The plan is to eventually overlay the new Dashboard page editing functionality onto different pages within the portal to give you this type of flexibility.

David_Darling

Hello, we were successful in moving the Browse by Category pane to the left of the page by implementing the following CSS:

.sidebar-right{ right: auto; left:80px; z-index:0;}
.col-sm-9.col-sm-right-offset-3{margin-right:0; margin-left:27.5%;}

Our problem now of course is that not only has it moved it on the home page (where we wanted to move it), but it has also moved it on the "Knowledge" page, which we didn't necessarily want.

Is there any way to have this change ONLY affect the home page?

Thanks so much!

james_kleinschnitz

For home page only
.sc-main-wrapper .sidebar-right{ right: auto; left:80px; z-index:0;}
.sc-main-wrapper .col-sm-9.col-sm-right-offset-3{margin-right:0; margin-left:27.5%;}

and kb only in case someone wants that
.kb .sidebar-right{ right: auto; left:80px; z-index:0;}
.kb .col-sm-9.col-sm-right-offset-3{margin-right:0; margin-left:27.5%;}

Tom_Hendricks

james_kleinschnitz said:

@Tom_Hendricks
These are more layout tweaks then style/theme changes.  The plan is to eventually overlay the new Dashboard page editing functionality onto different pages within the portal to give you this type of flexibility.

For what it's worth, I like that approach even better.  I only brought up the themer because it seemed like a (potentially) quicker fix.  Thanks for weighing in!

David_Darling

Thank you James and Tom, you've been most helpful!

Lukas_Kocher1

Hi there
how can i have the search by category list @ 94ecd540-714b-49dc-82d1-0b34bf11888f back?

In http://xxxx/ServiceCatalog/Listing/#/
i have create the category but know it is just Count me the numbers and not the Name of the category only i Dropdown them?

Can i have this list inside 94ecd540-714b-49dc-82d1-0b34bf11888f ?

Best regards

james_kleinschnitz

@Lukas_Kocher1
Are you missing some localization values for those categories in SCSM?
You can not have that list in 94ecd540-714b-49dc-82d1-0b34bf11888f.

Lukas_Kocher1

@James_kleinschnitz
Thank you James for your respond
is there a possible way to remove the Counter of the category and just see the Name?

best regards

Tom_Hyde

@Lukas_Kocher1 try this in your custom.css

small.ng-binding{display: none;}

Lukas_Kocher1

@Tom_hyde

What i would like to have is hide the Count (Left Corner red circles) as you wrote (Thank you) and direct see the description without having the Dropdown (Right Corner red circles)

Before custom:

With the custom: "small.ng-binding{display: none;}"

Konstantin_Slavin-Bo

@Lukas_Kocher1
It seems you are missing the SO titles in the list. There should (without custom) be some text before the Count, e.g.:


IT, Study Administrative systems and WEB is SOS, and Get Help and Request Service are ROs. Do you not have any title on your SOs? Or maybe some other customization has removed them by mistake?

Lukas_Kocher1

@konstantin_slavin-Bo
Thank you for your reply
I found out that Change the language of the Portal form English to german Change the Type of the browse by category which means:
Have the Portal in English it works, have it in German the Situation is different. showing me the weird Information,

I have disable all custom files.

best regards

Konstantin_Slavin-Bo

@Lukas_Kocher1
Ah okay. I think you need to select "German" as language in the SO properties in SCSM, as the portal are looking for German display strings, when you set it to German. And those will be empty, if language is not set to German also.

Lukas_Kocher1

@konstantin_slavin-Bo

Interessting point but, i have set the SO Language inside SCSM to (German Germany) and i see them on the All Request Page the SO title above the RO right Hand side is displaying but the category left is empty.

The Hardware Category already exist inside the list ServiceOffering Category

john_doyle

@Lukas_Kocher1

The best thing to do is to export the Management Pack which contains the Category definitions and add a language pack section for each language you wish to support.

On my SCSM Server the Management Pack is called Service Manager Service Catalog Library - Customization. Export this MP from the SCSM Console and edit the XML file in a text editor.
Scroll down to the LanguagePacks section. You can copy the section for ID="ENU" and change the ID to DEU on the copied section. Then you can translate the Name/Description into German for each display string.
Go back to the top and increase the version number of the management pack under <ManagementPack><Manifest><Identity><Version>, save the file and import the XML back into SCSM.
You can restart the cache builder and IIS to replicate the translations to the ServiceManagement db.
Your browser also caches the translations, so you may need to clear out the cache on your machine to see the changes.

Lukas_Kocher1

john_doyle

it is now working perfekt my way.

Thank you very Much

Do you know a solution to have the ServiceOffering (SO) Large where currently the RO's are displayed?

Best regards