I need to adjust the postioning of the "User Navigation Links" and "List Private Messages" components. They do not show up in the components list in Studio, so I am wondering if I can edit those, and where I would be able to do that.
Any ideas?
Hi mdoriano,
Unfortunately since those are core components, you won't be able to edit those. If you'd like to adjust the positioning however, you could use CSS. The classes for each are outlined below:
UserNavigation .lia-component-common-widget-user-navigation
PrivateNotes .lia-component-notes-widget-summary
Hey Jeff, Marlowe and I work together at the American Diabetes Association.
Where can we find the CSS for those components? All I see on Studio on the Page Type-->Header area is Canvas and XML.
And on the Community Style page, I don't see CSS relating to those components anywhere.
You wont see the original css for core components (or any core part of the application) inside studio. Studio is a tool that allows you to override lithium's core code/css with your own, so these areas will be blank unless you add your own code/css there.
Jeff provided the class's of the elements you want to customize. For example if you wanted to move those components to appear to the far left side of the community, you would go into studio > community style > css> and added the following css
#lia-body .lia-content .lia-component-common-widget-user-navigation {float:left;}
Depending with how comfortable and knowledgeable you are with css, you can really go to town customizing the look and feel of your community. Although we encourage that anyone who adds custom code to a community (be it Lithium, the customer or a third party agency) do so while keeping UX best practices in mind so that the end user is a happy user.
Thanks Jeff. Basically what I am trying to do is to get the row with the search bar and the row with the "user navigation links" to line up horizontally. I also need to move the messages icon over to the "user navigation links." This seems a little tricky if I can't see the code that already dictates the position of these components in relation to other elements on the page. How I code that should depend on how they are already positioned, no? Or do I have to write that from scratch and override what is already there?
I appreciate your help.
