shortcodes for tick and cross lists

3 posts from 2 voices

• Started 11 months ago by sydneycraig
• Latest reply from Mya
• This topic is not a support question

Tags:

No tags yet.

1. 

   sydneycraig
   Member

   this is a tick (tick image)
   this is a tick (tick image)
   this is a tick (tick image)
   this is a cross (cross image)

   is there a shotcode - i uploaded a cross/tick icon, but when i put next to a line it puts it on the next line and if i use 1/2 1/2 they dont align at all!!

   thanks

   Posted 11 months ago #
2. 

   sydneycraig
   Member

   [button size="small" color="red" text="light"]no[/button] gives the right look, but if i leave the link blank it still acts as a # link and takes you to the top of the page...

   like this but no link possible??

   ps URGENT!! ;)

   Posted 11 months ago #
3. 

   Mya
   

   Hi sydneycraig,

   Apologies for the delay in responding.

   To answer your first post, there's no shortcode to create a list as you described.

   In order to do this, you would first need to upload your cross/tick icon then go to your custom.css or Quick CSS under Theme Options > Styling add the following CSS.

   .entry-content ul.tick li {
       background: transparent url(url-of-your-image.png) no-repeat top right;
       list-style-type: none;
       margin-left: 0px;
       padding: 3px 7px 3px 0;
   }

   Once your CSS is in place all you have to do in the future is type your list into the Visual Editor making sure that UL or OL is selected then simply switch to the HTML tab (top right tab of your editor) and type class="tick" next to ul.

   Example:

   <ul class="tick">
   <li>This is a tick</li>
   <li>This is a tick</li>
   <li>This is a tick</li>
   </ul>

   Now to your second question, you want to use a button but without the link, correct? Button shortcodes are meant to generate links whether you have a URL listed or not. To have the appearance of a button without the link you would once again need to type your text then switch to the HTML tab and add a SPAN tag around the text with the correct class name.

   Example:

   <span class="avia-button light red">Small Red Button</span>

   To explain, avia-button gives the button appearance, red sets the color, light sets the text color.

   Hope this helps!

   Regards,
   Mya

   Posted 10 months ago #

RSS feed for this topic

Reply

You must log in to post.