MikeY
Lithium Alumni (Retired)
Joined 19 years ago
User Profile
User Widgets
Contributions
Re: Flexibility in styling User Settings page
Hi allisonn, You can have the top tabs on the left side with CSS only using something like: #lia-body .lia-content .lia-quilt-my-profile-page ul.lia-tabs-standard { display: table-cell; } #lia-body .lia-content .lia-quilt-my-profile-page .lia-tabs-standard > li { float: none; height: 20px; } .PersonalProfile { display: table-cell; padding-left: 20px; vertical-align: top; } The more difficult part is if you want both tabs to be on the left side in a nested fashion. The tabs and subtabs aren't nested in a way that naturally lend itself to show the subtabs below the tabs (like in the admin). Other options include the main tabs on the far left, subtabs in the middle and content on the right is possible or putting all the subtabs on the bottom of the list, but neither of those are likely what you're looking for. I hope that helps! mikeyRe: Specific Search Bar Format Component Help Needed
Hello, This is a default component of the marketing communitiy product, but there are some steps you can take to replicate the functionality. A word of warning. This uses the search form usually found at the top right of the community. You'll notice on the Sephora community that it doesn't have a search box on every page, it's absent from the message pages and other key pages. If you'd like to retain both search boxes, creating a custom component, or work to have duplicate forms play well on the same page would be required. 1. We use the "Search Form" component found under "Common" in studio and place it in the desired position on the page, and remove it from the header. If you leave it in the header, make the CSS selectors stronger so that you're not styling both. 2. The location dropdown between the input field and the button is actually still present, but we hide it to create a cleaner look at the expense of the context functionality. #lia-body .lia-content .lia-quilt .lia-component-common-widget-search-form select { display: none; } 3. The search box is a static 670x40 in Sephora's case, although you may want to use a different static or variable width. We'll also remove the space between the search field and search button. #lia-body .lia-content .lia-quilt .lia-component-common-widget-search-form .lia-form .lia-search-input-message { width: 670px; height: 40px; line-height: 40px; margin: 0; /* remove the space between the button and search field */ } 4. We want to replace the "search" text with an image by shifting the text and adding a background image and square the button #lia-body .lia-content .lia-quilt .lia-component-common-widget-search-form .lia-form .lia-button-wrapper input { height: 40px; width: 40px; border-radius: 0; /* remove the rounded corners */ -webkit-border-radius: 0; /* remove the rounded corners */ text-indent: -9999px; /* shift the text off the page */ background: transparent url('http://some/search/image/url.png') no-repeat scroll center center; /* add a background image for the search button */ } #lia-body .lia-content .lia-quilt .lia-component-common-widget-search-form .lia-form .lia-button-wrapper input:hover { background: transparent url('http://some/search/image/url-hover.png') no-repeat scroll center center; /* add a background image for the hover state, or replace both images with your favorite sprite generator */ } 5. Now the part that may take lithium's assistance is showing the post button below the suggested search results. I don't believe this is exposed in the admin, so this part would require filing a ticket. The first disables the auto-suggestion and the second adds auto-suggestion with the post button. search.enable_autocomplete_toggle = false search.enable_post_from_autocomplete = true That should get you a resonable way toward making it look and behave like Sephora's search bar. If you decide to retain the search granularity dropdown, there will be additional styling needed, the search input fields are all different input fields for the various types (user search, tkb search). Hope that helps, mikey
