Formatting footer with elements from headers login menu

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
5/6/2011 12:48:48 PM
Gravatar
Total Posts 167

Formatting footer with elements from headers login menu

I have moved the loging elements that are at the top of the page and have moved them to the footer with the copyrite, css, HTML etc...

I can change the style of the existing footer elements by altering CSS in style-Artisteer-overrides

.art-footer a, .art-footer a:link, .art-footer.......

This does not affect the elements that were in the header, so I have applied CssClass="sitemaplink" to each of these, as shown here

<portal:WelcomeMessage ID="WelcomeMessage1" runat="server" RenderAsListItem="false" ListItemCss="firstnav" CssClass="sitemaplink"  />
<portal:UserProfileLink ID="UserProfileLink1" runat="server" RenderAsListItem="false" CssClass="sitemaplink"  />  <portal:MailboxLink ID="MailboxLink2" runat="server" RenderAsListItem="false" CssClass="sitemaplink"  />
<portal:MemberListLink ID="MemberListLink1" runat="server" RenderAsListItem="false" CssClass="sitemaplink" />|<portal:SearchInput ID="SearchInput2" LinkOnly="True" RenderAsListItem="false" runat="server" CssClass="sitemaplink"  />|
<portal:RegisterLink ID="RegisterLink1" runat="server" RenderAsListItem="false" CssClass="sitemaplink"  />|<portal:LoginLink ID="LoginLink2" runat="server" RenderAsListItem="false" Visible="true"  CssClass="sitemaplink" />
<portal:LogoutLink ID="LogoutLink1" runat="server" RenderAsListItem="false" CssClass="sitemaplink"  /> |<portal:SiteMapLink ID="SiteMapLink1" runat="server" CssClass="sitemaplink" />
|<portal:SkinPreview ID="SkinPreview1" runat="server"></portal:SkinPreview>
|<portal:CopyrightLabel ID="cl1" runat="server" ShowYear="true" BeginYear="2008" />
<!-- |<portal:mojoPortalLink ID="lnkmojoportal" UseImage="false" runat="server" /> -->
|<portal:XhtmlValidatorLink ID="lnkw3cValidator" UseImage="false" runat="server" Html5="false" />
|<portal:CssValidatorLink ID="lnkCSSVal1" UseImage="false" runat="server"  />

 

I suspect that this is the wrong thing to do but it does work. However I have 2 issues with this and so am looking for the correct solution.

1) I cannot find CssClass="sitemaplink" in the style sheets to copy and place in the override style sheet

2) The search link is not affected by adding CssClass="sitemaplink", where as all the other header element are.

Any suggestions on how to mange the styles of these parts in the footer.

5/6/2011 1:54:40 PM
Gravatar
Total Posts 18439

Re: Formatting footer with elements from headers login menu

You should view the rendered source of the page and see what is rendered (ie you need to look at the actual markup and CSS classes on the markup) and you need to master CSS selectors and the use of Firebug then you will be able to style anything any way you want and understand why styles are applied or not.

Just because a CSS class exists in markup does not mean it always exists in the CSS files of skins. Classes just provide extra hooks to make it easier to devise selectors to select what you want but in any given skin specific classes may or may not be used in any selectors.

Those links will use whatever CssClass you put on them, if you leave it blank they use the class "sitelink" which is commonly used in most of our skins for header link style. Seems like if you just specify a CSSClass that is not used for anything and does not have any style rules then it will probably use the .art-footer a styles assuming you have them wrapped in a container div with the class art-footer.

Hope that helps,

Joe

5/6/2011 2:45:42 PM
Gravatar
Total Posts 167

Re: Formatting footer with elements from headers login menu

Thanks, I should have work that out myself apologies.

One thing that is still a bit strange is the "Search" element

<portal:SearchInput ID="SearchInput2" LinkOnly="True" RenderAsListItem="false" runat="server" CssClass="art-footer"  />|

As you can see I have set the class here to art-footer. This works for the other elements such as memberslist and login but on inspection through firebug the element has its class changed to the default of .sitelink

Therefor I have also added css styles to .sitelink in at the very bottom of the override css file.

When I inspect this element when rendered, not only is the class changed to .sitelink but the color and text-decoration have been updated to new values. I can therefor change the size of the text but not the color. As this is at the bottom of the text decoration

maybe this is this because it is being re-rendered as you can choose searchinput to be  LinkOnly="true" or "false"?  I see you can style the search panel if LinkOnly="false" http://www.mojoportal.com/styling-the-search-input-box.aspx but how do you style if true?

5/8/2011 8:36:24 AM
Gravatar
Total Posts 18439

Re: Formatting footer with elements from headers login menu

I will fix that issue with the search input by adding a new property LinkCss that can be used to specify the class it renders when using it as a link.

Note however, that whereas you solved it by giving .sitelink the same style, it could also be solved just by removing anything that references .sitelink from your CSS. In the absence of a style rule for that class it should style the same as if it had no CSS class on it at all, which would mean it should inherit the style from .art-footer a, .art-footer a:link, .art-footer....... assuming it is inside a container div with the class art-footer. 

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.