Forum Discussion

jonathancrow's avatar
12 years ago

Changing the skin for My Settings, Search, etc.

How can I change the CSS/Skin for the pages for My Settings, Search,. etc?

  • The My Settings and Search pages are considered to be Community level pages and will automatically use the same skin set for the Community level. If you want to set a different skin for My Settings and Search than what you have for the Community level, this is technically possible but the cleanest way to do it is currently not available through Studio and that customization would have to be performed by Lithium Profession Services. Please file a case if that's something you're interested in pursuing further.

     

    That said, there are approaches that you could do through Studio today to get close to what you want. Let's take the Search Page for example. The internal page name for this page is "SearchPage"

     

    To have different header content for the Search Page, you could go into the wrapper for the skin currently set at the Community level and update the header content to something like:

    <#if page.name == "SearchPage">
         Your new header for the Search Page goes here
    <#else>
         Your existing header content goes here. It will be displayed for all other pages that have this skin set.
    </#if>

     To style the Search Page differently, you can use CSS selectors that are specific for that page. If you examine the source code for the Search Page, you'll notice that the body element has a "SearchPage" class. So if you wanted to create rules specifically for the Search Page, you could do something like this in your skin CSS:

    #lia-body.SearchPage .lia-content ... { ... }

     I hope this helps!

     

  • AdamN's avatar
    AdamN
    Khoros Oracle

    The My Settings and Search pages are considered to be Community level pages and will automatically use the same skin set for the Community level. If you want to set a different skin for My Settings and Search than what you have for the Community level, this is technically possible but the cleanest way to do it is currently not available through Studio and that customization would have to be performed by Lithium Profession Services. Please file a case if that's something you're interested in pursuing further.

     

    That said, there are approaches that you could do through Studio today to get close to what you want. Let's take the Search Page for example. The internal page name for this page is "SearchPage"

     

    To have different header content for the Search Page, you could go into the wrapper for the skin currently set at the Community level and update the header content to something like:

    <#if page.name == "SearchPage">
         Your new header for the Search Page goes here
    <#else>
         Your existing header content goes here. It will be displayed for all other pages that have this skin set.
    </#if>

     To style the Search Page differently, you can use CSS selectors that are specific for that page. If you examine the source code for the Search Page, you'll notice that the body element has a "SearchPage" class. So if you wanted to create rules specifically for the Search Page, you could do something like this in your skin CSS:

    #lia-body.SearchPage .lia-content ... { ... }

     I hope this helps!

     

    • MoniqueL's avatar
      MoniqueL
      Lithium Alumni (Retired)

      Both my settings and the search page use a one column layout. So you can change how this layout appears or apply a differnt layout to these pages. Be aware though that these pages were built with the idea that they would have a lot of horizitonal space devoted to them (due to the multiple tabs on the settings page and filters on search) so you may have to come up with design/ui compromises in order to make your ui changes work.

      • jonathancrow's avatar
        jonathancrow
        Advisor

        MoniqueL it feels like I could build some custom component to change the CSS but I can't see the path to do that. Am I fooling myself?

    • jonathancrow's avatar
      jonathancrow
      Advisor

      Thanks. That certainly helps. Although I wish I didn't have to make so many acceptions in the header.

       

      How do I find out the internal page names for other pages?

       

       

      • AdamN's avatar
        AdamN
        Khoros Oracle

        The name of each page is added as a class to the body element in the source code, for example:

        <body class="lia-board ForumPage lia-body" id="lia-body">

         This would tell me that the page was rendering using the ForumPage page type.

         

        Regarding building a custom component to control the CSS, the "Page Head Conent" in the wrapper for a skin can use FreeMarker as well. So if you desired, you could add CSS there and wrap it with logic for the desired page types. Keep in mind that anything in the "Page Head Content" renders before the core CSS and the skin CSS, so it may be a bit more tricky to construct any CSS overrides.