Home Self-Service Portal - Community

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

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!

Best Answer

  • james_kleinschnitzjames_kleinschnitz Cireson Dev, Product Owner Advanced IT Monkey ✭✭✭
    Accepted Answer
    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%;}

Answers

  • Tom_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    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_DarlingDavid_Darling Customer IT Monkey ✭

    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_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    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_DarlingDavid_Darling Customer IT Monkey ✭

    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_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    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_kleinschnitzjames_kleinschnitz Cireson Dev, Product Owner Advanced IT Monkey ✭✭✭
    @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_DarlingDavid_Darling Customer IT Monkey ✭

    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_kleinschnitzjames_kleinschnitz Cireson Dev, Product Owner Advanced IT Monkey ✭✭✭
    Accepted Answer
    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_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    @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_DarlingDavid_Darling Customer IT Monkey ✭
    Thank you James and Tom, you've been most helpful!
  • Lukas_Kocher1Lukas_Kocher1 Customer IT Monkey ✭

    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_kleinschnitzjames_kleinschnitz Cireson Dev, Product Owner Advanced IT Monkey ✭✭✭
    @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_Kocher1Lukas_Kocher1 Customer IT Monkey ✭

    @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_HydeTom_Hyde Customer Advanced IT Monkey ✭✭✭
    @Lukas_Kocher1 try this in your custom.css

    small.ng-binding{display: none;}

  • Lukas_Kocher1Lukas_Kocher1 Customer IT Monkey ✭

    @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-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    @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_Kocher1Lukas_Kocher1 Customer IT Monkey ✭
    edited June 2017

    @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-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    @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_Kocher1Lukas_Kocher1 Customer IT Monkey ✭
    edited June 2017

    @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_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    @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_Kocher1Lukas_Kocher1 Customer IT Monkey ✭

    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

Sign In or Register to comment.