Follow

Adding custom button styles to themes

When inserting a link, you can choose from a number of theme-specific button styles. To add custom button styles to a theme, follow these steps:

  1. Enable theme overrides and download the theme files.
  2. Within your theme's root folder, open the LinkStyles.cfg file for editing (using any text editor). It is a regular .XML file, with the following structure:
    <LinkStyles> <Style>stylizedButton buttonStyle001</Style> <Style>stylizedButton buttonStyle002</Style> </LinkStyles>
  3. For each button style you want to add, insert another <Style> entry. The value within the <Style> and </Style> tags is the class name for the style.
    <LinkStyles> <Style>stylizedButton buttonStyle001</Style> <Style>stylizedButton buttonStyle002</Style> <Style>myFavoriteButtonStyle</Style> </LinkStyles>
    You can add compound classes as we did with the first two styles in the above example.
  4. For each style, add the CSS class description to your CSS/LESS. For example:
    .myFavoriteButtonStyle { display: block; background-color: #000; color: #fff; padding: 5px 15px; }
    For Treehouse, Clean lines, Whitespace, and Dark Impact themes, add the class to /Styles/link.styles.less. For all other themes, add the class to /Styles/theme.css or create a new CSS file under /Styles/ folder.
  5. After you have finished modifying these files, upload them to the appropriate folder under the Theme_Overrides folder on your site using File management or WebDAV.
  6. Rebuild your theme.

Your button style will now appear in the Styles dropdown on the Insert link dialog. The resulting HTML for links formatted using your custom button style would appear as follows:

<a href="#somelink" class="myFavoriteButtonStyle>Some text here</a>

0 Comments

Please sign in to leave a comment.

Search: WildApricot.com 

About results ( seconds) Sort by: 
Sorry, an error occured when performing search.