art-button disappeared in 2.3.9.7

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.
6/4/2013 12:08:07 PM
Gravatar
Total Posts 8

art-button disappeared in 2.3.9.7

Hi,

I use the art-button style for some links and after upgrading from 2.3.8.1 to 2.3.9.7 the links now are displayed as ordinary links, without the button-like styles. The data/sities/1/skins directory was not changed while upgrading.

How to return the button-like appearance for links?

Thanks.

 

p.s. The tab styles of the administration interface are disappeared also, they now displayed as a set of vertical links instead of tabbed horizontal links.

6/4/2013 12:16:23 PM
Gravatar
Total Posts 18439

Re: art-button disappeared in 2.3.9.7

Every time you upgrade you should review the Important Skin Changes article and apply any needed changes.

For best results in getting help with design problems always post a link so we can see the problem on your site.

If you are using .NET 3.5 in medium trust hosting then you need to copy the theme.skin file from your skin folder into /App_Themes/default fodler

Hope that helps,

Joe

6/4/2013 2:42:41 PM
Gravatar
Total Posts 8

Re: art-button disappeared in 2.3.9.7

Thank you very much for information!

I would post a link to the updated site, but I test it internally currently.
The generated HTML looks like this:

<a class="art-button" href="ContactInfo.aspx">Next</a>

I compared the csshandler CSS code for art-button for 2.3.8.1 and 2.3.9.7 - it exactly the same.

But, the buttons in the MojoPortal 2.3.9.7 administration interface look as necessary, although they use another HTML code:

<span class="art-button-wrapper"><span class="art-button-l"> </span> <span class="art-button-r"> </span> <input type="submit" name="ctl00$mainContent$btnSave" value="Save" onclick="...." id="ctl00_mainContent_btnSave" title="Save" class="art-button" /> </span>

So, I am out of ideas what would be the reason of this behavior.
The site is running under .NET 4.0 Full Trust.

Below is the 2.3.9.7 csshandler for art-button

/* begin Button */
span.art-button-wrapper>a.art-button,
span.art-button-wrapper>a.art-button:link,
span.art-button-wrapper>input.art-button,
span.art-button-wrapper>button.art-button
{
   text-decoration: none;
   font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
   font-style: normal;
   font-weight: normal;
   font-size: 13px;
   position:relative;
   top:0;
   display: inline-block;
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;
   color: #FFFFFF !important;
   width: auto;
   outline: none;
   border: none;
   background: none;
   line-height: 28px;
   height: 28px;
   margin: 0 !important;
   padding: 0 10px !important;
   overflow: visible;
   cursor: pointer;
   text-indent: 0;
}

.art-button img, span.art-button-wrapper img
{
   margin: 0;
   vertical-align: middle;
}

span.art-button-wrapper
{
   vertical-align: middle;
   display: inline-block;
   position: relative;
   height: 28px;
   overflow: hidden;
   white-space: nowrap;
   text-indent: 0;
   width: auto;
   max-width:892px;
   margin: 0;
   padding: 0;
   z-index: 0;
}

.firefox2 span.art-button-wrapper
{
   display: block;
   float: left;
}

input, select, textarea
{
   vertical-align: middle;
   font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
   font-style: normal;
   font-weight: normal;
   font-size: 13px;
}

div.art-block select
{
   width:96%;
}

span.art-button-wrapper.hover>.art-button, span.art-button-wrapper.hover>a.art-button:link
{
   color: #FFFFFF !important;
   text-decoration: none !important;
}

span.art-button-wrapper.active>.art-button, span.art-button-wrapper.active>a.art-button:link
{
   color: #EBEBEB !important;
}

span.art-button-wrapper>span.art-button-l, span.art-button-wrapper>span.art-button-r
{
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   margin: 0;
   padding: 0;
   background-image: url('/Data/Sites/1/skins/cpsite/images/button.png')
;
   background-repeat: no-repeat;
}

span.art-button-wrapper>span.art-button-l
{
   left: 0;
   right: 11px;
   background-position: top left;
}

span.art-button-wrapper>span.art-button-r
{
   width: 11px;
   right: 0;
   background-position: top right;
}

span.art-button-wrapper.hover>span.art-button-l
{
   background-position: center left;
}

span.art-button-wrapper.hover>span.art-button-r
{
   background-position: center right;
}

span.art-button-wrapper.active>span.art-button-l
{
   background-position: bottom left;
}

span.art-button-wrapper.active>span.art-button-r
{
   background-position: bottom right;
}

span.art-button-wrapper input
{
   float: none !important;
}
/* end Button */

6/5/2013 11:44:41 AM
Gravatar
Total Posts 18439

Re: art-button disappeared in 2.3.9.7

"the buttons in the MojoPortal 2.3.9.7 administration interface look as necessary"

That is because they use <portal:mojoButton instead of <asp:Button

If you want the same result in custom code or features you should use <portal:mojoButton which renders the needed extra markup based on theme.skin settings

Or if you are hand coding html then you need to add the needed extra markup yourself.

6/5/2013 1:44:09 PM
Gravatar
Total Posts 8

Re: art-button disappeared in 2.3.9.7

>Or if you are hand coding html then you need to add the needed extra markup yourself.

The Arteester's 3.1 javascript code adds the extra markup for every element with the art-button class in the page automatically. It stopped to do this (actually js run-time errors were thrown) without IncludeJQueryMigrate="true". This was a surprise, I just thought that adding the class is the only 'magic' that is necessary. 

Thanks for the help!

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