Changing CSS Class for portal: elements

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/4/2009 9:38:14 PM
groston
Gravatar
Total Posts 64
View Posts
Gerry Roston gerry (at) pairofdocs (dot) net

Changing CSS Class for portal: elements

All,

This question is similar to this one: http://www.mojoportal.com/Forums/Thread.aspx?pageid=5&mid=34&ItemID=4&thread=2586&postid=11422

I moved the <portal:SearchInput> from topnav to wrapfooter. With the particular skin that I am using, the appearance of SiteLink and SiteMapLink are quite different, and the CSS class assigned to the text is SiteLink. I have tried adding CssClass="sitemaplink" to the element, but to no avail. I have tried wrapping the element in a span, and that to does not help. While I could simply change the appearance of SiteLink, this is undesireable as it would change the appearances of the element in topnav.

Question: Is there some way to break (what appears to be a hard-wired) connection between a <portal:*> element and a particular CSS class?

 

5/4/2009 9:50:47 PM
groston
Gravatar
Total Posts 64
View Posts
Gerry Roston gerry (at) pairofdocs (dot) net

Re: Changing CSS Class for portal: elements

More details:

Attempt 1:

layout.master:
<div id="wrapfooter" >
<portal:SiteMapLink id="SiteMapLink1" runat="server" CssClass="sitemaplink" /> |
<portal:SearchInput id="SearchInput1" runat="server" LinkOnly="True" /> |
</div>

view source:
<div id="wrapfooter" >
<a class="sitemaplink" title="Site Map" href="/mojocms/SiteMap.aspx">Site Map</a> |
<a href='http://localhost/mojocms/SearchResults.aspx' class='sitelink'>Search</a> |
</div>

Attempt 2:

layout.master:
<div id="wrapfooter" >
<portal:SiteMapLink id="SiteMapLink1" runat="server" CssClass="sitemaplink" /> |
<portal:SearchInput id="SearchInput1" runat="server" CssClass="sitemaplink" LinkOnly="True" /> |
</div>

view source:
<div id="wrapfooter" >
<a class="sitemaplink" title="Site Map" href="/mojocms/SiteMap.aspx">Site Map</a> |
<a href='http://localhost/mojocms/SearchResults.aspx' class='sitelink'>Search</a> |
</div>

Attempt 3:

layout.master:
<div id="wrapfooter" >
<portal:SiteMapLink id="SiteMapLink1" runat="server" CssClass="sitemaplink" /> |
<span CssClass="sitemaplink"> <portal:SearchInput id="SearchInput1" runat="server" CssClass="sitemaplink" LinkOnly="True" /></span> |
</div>

view source:
<div id="wrapfooter" >
<a class="sitemaplink" title="Site Map" href="/mojocms/SiteMap.aspx">Site Map</a> |
<span CssClass="sitemaplink"> <a href='http://localhost/mojocms/SearchResults.aspx' class='sitelink'>Search</a></span> |
</div>
 

In all cases, the output did not change. (And yes, the browser and server caches are being properly flushed.)

5/5/2009 5:56:28 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Changing CSS Class for portal: elements

Hi Gerry,

You can override the style of just the element you want using css selectors like this:

#wrapfooter .sitelink { style the same as sitemaplink }

It may also be needed to style the different modes of the a element like this:

#wrapfooter .sitelink a { style the same as sitemaplink }
#wrapfooter .sitelink a:visited { style the same as sitemaplink }
#wrapfooter .sitelink a:hover { style the same as sitemaplink }
#wrapfooter .sitelink a:link { style the same as sitemaplink }

Hope it helps,

Joe

 

6/5/2009 10:31:08 PM
groston
Gravatar
Total Posts 64
View Posts
Gerry Roston gerry (at) pairofdocs (dot) net

Re: Changing CSS Class for portal: elements

Joe,

Still not working!

This is the pertinent section of layout.master:

<div id="wrapfooter" >
<portal:SiteMapLink id="SiteMapLink1" runat="server" /> |
<portal:SearchInput id="SearchInput1" runat="server" LinkOnly="True" /> |
<portal:SkinPreview id="SkinPreview1" runat="server" /> |
<portal:CopyrightLabel id="copyrightLabel" runat="server" CopyrightBy="Annual Collaboration for Entrepreneurship" ShowYear="true" BeginYear="2000" />
</div>

Per your suggestion, I added the following to the end of stylecolors.css (and I also tried at the end of styletext.css) :

#wrapfooter .sitelink a { color: #4F82CB; }
#wrapfooter .sitelink a:visited { color: #4F82CB; }
#wrapfooter .sitelink a:hover { color: #4EBF37; }
#wrapfooter .sitelink a:link { color: #4F82CB; }

What I am getting is this:

Site map - uses the sitelink colors
Search - uses the sitelink colors
Printable view - uses the colors specified
Copyright notice - uses something entirely different

What is doubly frustrating is that whatever values I put in the css (above), nothing changes.

Please help me resolve this - thanks!

6/6/2009 2:06:57 PM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Changing CSS Class for portal: elements

Hi Gerry,

A month ago when you first posted the problem was styling the search input link and as I understand it that is working for you and now you have a new issue styling the copyright label. On this site I wrapped it in a link because I wanted it to link to a specific page (and that made it style like the others), you could either do the same or wrap it in a span and add a css class to style it. 

Hope it helps,

Joe

6/14/2009 3:47:15 PM
groston
Gravatar
Total Posts 64
View Posts
Gerry Roston gerry (at) pairofdocs (dot) net

Re: Changing CSS Class for portal: elements

A solution that worked was to do this:

#wrapfooter, #wrapfooter a, #wrapfooter.sitelink {stuff}
#wrapfooter a:hover {stuff}
 

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