Forum Discussion

stgray's avatar
stgray
Guide
3 years ago

Change sign in form HTML structure.

Hi Folks,

I am updating the styling of our log in page through Khoros Studio and have managed to make most of the changes I need, however I'm looking for guidance on how to approach a couple of things:

  1. How would I go about changing the tile of the page?
  2. I'd like to get the "remember me" checkbox and "Forgot username/password" link on the same line, I know I could hack in some CSS to do this but wanted to know the correct approach for this?  I'm guessing some for of over-ride or custom element so I can get the html structure right?

I'm new to Khoros and trying to work towards Khoros best practices as much as possible.  I have attached screenshots of our current and desired states.

UI & Design
  • Akenefick's avatar
    Akenefick
    3 years ago

    I'm not sure if this is what you are looking for, but I have found it very helpful. On the page tab in studio if you switch to XML view you can add parameters to the page components. One parameter you can add is "wrapper" which lets you wrap a component in a div with a class of your choice. If you have multiple components with the same wrapper class that are adjacent to each other they will all be added to the same div. This makes styling them easier. 

    example: wrapper="ak-tkb-article-main"

     

     

  • Akenefick's avatar
    Akenefick
    Genius
    3 years ago

    I'm not sure if this is what you are looking for, but I have found it very helpful. On the page tab in studio if you switch to XML view you can add parameters to the page components. One parameter you can add is "wrapper" which lets you wrap a component in a div with a class of your choice. If you have multiple components with the same wrapper class that are adjacent to each other they will all be added to the same div. This makes styling them easier. 

    example: wrapper="ak-tkb-article-main"

     

     

    • stgray's avatar
      stgray
      Guide
      3 years ago

      Thanks Akenefick, this is really useful!

       

      This is probably a separate post/question but do you have any hints and tips on how to identify where to edit a page element, e.g. main-form on the screenshot?

       

       

      • Akenefick's avatar
        Akenefick
        Genius
        3 years ago

        Unfortunately, if it is a Khoros component like that one they can't be edited. You can only access and edit the custom components which are found in the components tab in studio.