WordPress.org

1. Richmond Media
   Member
   Posted 11 months ago #
   

   Using Artisteer for design, I am using class="button" in pages to make text links into buttons. But I need to set the width for some types of these buttons.

   Is there a way to either duplicate the button code in the style sheet so I can use (for example) class="button2" for those buttons?

   OR can I set individual button widths in the code on the page?

   Thanks in advance.

2. WPyogi
   Volunteer Moderator
   Posted 11 months ago #
   

   Copy and paste the CSS code in the style.css file, then change the name of the class selector for the new style and the new width.

3. Colin Murphy
   Member
   Posted 11 months ago #
   

   What you could also do is the following for example you have two types of buttons but the only difference between them is the width so what you could do is have a class called button and button2. The class button2 class would have a larger width.
   

   <a class="button" href="#" title="Title 1">Button 1</a>
   <a class="button button2" href="#" title="Title 1">Button 2</a>

   so the CSS would be
   

   .button {
       //Some styling here
       width: 100px;
   }
   .button2 {
       width: 200px;
   }

   How this works is you can add multiple classes to any element so CSS reads down so it would add the style for the class button to every link width the class button but when you also add the class button2 because the CSS code for button2 is below button it will override its width and make it a width of 200 pixels.

   Please leave me know if you have any questions about this works.

4. Richmond Media
   Member
   Posted 11 months ago #
   

   Thank you VERY much for the reply. A question (I am a WYSIWYG guy):

   The style sheet has a LOT of button code. Do I duplicate all of it? And if so, do I retitle every instance of "button" to "button2"?

   Here's the code for buttons:

   [Code moderated as per the Forum Rules. The maximum number of lines of code that you can post in these forums is ten lines. Please use the pastebin]

5. Richmond Media
   Member
   Posted 11 months ago #
   

   Sorry, let's see if I can figure out pastebin for the CSS button code:

   http://pastebin.com/6zh9MWxb

   Got it.

6. Colin Murphy
   Member
   Posted 11 months ago #
   

   Hi Richmond what you need to do is add the class button2 along with the class button like this.

   <span class="button-wrapper button button-2">
       <a href="#">Button 2</a>
   </span>

   You then would use the following CSS
   

   .button-wrapper.button-2 {
     width: 200px;
     max-width: none;
   }

   In the above code
   The reason why we would set the max-width to none is because otherwise it would only go to a max width 1064px as stated in the class button-wrapper.

   I would also recommend unless other elements other then the span element is the class button-wrapper to remove span in front of the class button-wrapper because it will search for every span that has a class called button-wrapper which slows down the loading time.

   If you need any further help please leave me know.

7. Richmond Media
   Member
   Posted 11 months ago #
   

   Colin,

   Thanks, I feel like a third grader in the company of people who actually know code... I'll see if I can stumble through this, thanks.

8. Colin Murphy
   Member
   Posted 11 months ago #
   

   If you are only starting learning coding I would recommend http://www.w3schools.com/ for learning the basics of HTML, JavaScript and CSS.

   Leave me know if you have any other issues.

Reply

You must log in to post.