CSS-styled buttons in WebHelp output

Nothing is perfect! This is where you can post your ideas and wishes for functions you'd like to see in Help & Manual. Current version only please (H&M7).

Moderators: Alexander Halser, Tim Green

Post Reply
Mark Wilsdorf
Posts: 151
Joined: Thu Dec 24, 2009 8:41 pm
Contact:

CSS-styled buttons in WebHelp output

Unread post by Mark Wilsdorf »

The H&M-generated .PNG files for button links are a great way to support output to a lot of different formats, but they aren't very pretty. :)

I wish we had the option to assign class names to button links, to allow .CSS styles to control button appearance. Here's what I'm using, but of course I have to insert it as HTML in the H&M editor:

Code: Select all

<p style="text-align: center;"><a href="index.html?newtopic#testlink" class="grnbtn" target="_blank">Go to New Topic</a></p>
And here is the .CSS that formats it (inserted into defaultPageTemplate.html...because I didn't know where else to put it):

Code: Select all

.grnbtn {    
        display: inline-block;
        -webkit-box-shadow: 2px 3px 3px #666666;
        -moz-box-shadow: 2px 3px 3px #666666;
        -ms-box-shadow: 2px 3px 3px #666666;
        box-shadow: 2px 3px 3px #666666;
        font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
        color: #ffffff;
        font-size: 16px;
        font-weight: bold;
        background: #008000;
        padding: 3px 7px 3px 7px;
        border: solid #000000 2px;
        text-align: center;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
      }
      .grnbtn:hover {
        background: #DC143C;
        text-decoration: none;
      }
By itself inserting the simple but of HTML to create a button isn't a big hassle, but it does not allow H&M to automatically maintain the link--such as if the topic or anchor gets renamed. So what I'd really like is a button like the Topic Link button type--which could automatically maintain links to targets within the project--but which supported a lot more options for formatting the button, either via CSS or other means.
Simon Dismore
Posts: 454
Joined: Thu Nov 16, 2006 1:29 pm
Location: London, UK

Re: CSS-styled buttons in WebHelp output

Unread post by Simon Dismore »

If you create a custom style (e.g. 'myStyle') in H&M's editor, apply it to a link, publish to webhelp and examine the output, you'll see that H&M generates a class based on your style name and adds it to a <span> that wraps the link. This is what it looks like in the HTML generated by H&M:

Code: Select all

<span class="f_myStyle">
  <a href="second$topic.html" class="topiclink">Second topic</a>
</span>
You can use CSS descendent or child combinators to style classes within classes, e.g.

Code: Select all

.f_myStyle .topiclink {    
  display: inline-block;
  -webkit-box-shadow: 2px 3px 3px #666666;
  -moz-box-shadow: 2px 3px 3px #666666;
  -ms-box-shadow: 2px 3px 3px #666666;
  box-shadow: 2px 3px 3px #666666;
  font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  background: #008000;
  padding: 3px 7px 3px 7px;
  border: solid #000000 2px;
  text-align: center;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
.f_myStyle .topiclink:hover {
  background: #DC143C;
  text-decoration: none; 
}
Result:
topiclink wrapped with myStyle.png
That's what you want, isn't it?
You do not have the required permissions to view the files attached to this post.
Mark Wilsdorf
Posts: 151
Joined: Thu Dec 24, 2009 8:41 pm
Contact:

Re: CSS-styled buttons in WebHelp output

Unread post by Mark Wilsdorf »

Yes Simon, works great...excellent! That will save me loads of time maintaining link integrity...you rock!

I continue to be amazed with what's possible with H&M...
Simon Dismore
Posts: 454
Joined: Thu Nov 16, 2006 1:29 pm
Location: London, UK

Re: CSS-styled buttons in WebHelp output

Unread post by Simon Dismore »

Simon Dismore wrote:You can use CSS descendent or child combinators to style classes within classes
FYI using a child ('>') combinator is more efficient than a descendent (space), so I suggest you test with that if you haven't already. In my example that would be:

Code: Select all


.f_myStyle > .topiclink {   
  ...
}
.f_myStyle > .topiclink:hover {
  ...
}
Mark Wilsdorf
Posts: 151
Joined: Thu Dec 24, 2009 8:41 pm
Contact:

Re: CSS-styled buttons in WebHelp output

Unread post by Mark Wilsdorf »

Thanks Simon...a reason for me to bone up a bit on CSS selectors.
Post Reply