How to create a button in Joomla 3.x

I have a button for users to download a file from my website.  It works.  I would like to improve it's appearance but I can't figure out the HTML.

I have attached an image of the working button and a test button showing how I would like it to look.  I've also attached a text file of the code.


Any help would be greatly appreciated.
Clive BeatonAccess DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

V4nP3rs13Commented:
<button class="btn btn-primary">Some text on a button</button>

Open in new window

0
Clive BeatonAccess DeveloperAuthor Commented:
Your solution is the HTML I included in an attached file.  I need the HTML for this button that that facilitates a download of a file rom my website.
0
Clive BeatonAccess DeveloperAuthor Commented:
V4nP3rs13,

The questoin may not have included the attached files.
Buttons.JPG
Button-Code.txt
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

Prasadh BaapaatWeb Designer & DeveloperCommented:
you will need to change OR override the CSS Style for class 'btn-primary' ....  as of now it is showing the default primary style coloring by Bootstrap CSS

I dont know which template you are using... so I am assuming you are using the free template "Protostar" which comes with joomla for sake of understanding.

here is what you have to do:

Step 1: open the CSS file used by the template

Step 2: paste the CSS I have given below (Change colors to what you want or use #000000  - hex values)

Save and close the editing - refresh your page and you will have a different color button.

NOTE: this change will affect ALL buttons where style 'btn-primary' is being used throughout the site.

CSS Style to add: (I have used white, blue and red as colors - you can change them to your requirement

.btn-primary {
  color: white;
  text-shadow: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-repeat: no-repeat;
  border-color: none;
  border-color: none;
  filter: none;
  filter: none;
  background-color: blue;
  *background-color: blue;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  color: white;
  background-color: red;
  *background-color: red;
}

Open in new window

you can ask me any further questions if you have.

thanks,
Prasadh
template-css-editing.jpg
changing-primary-button-color.jpg
0
Clive BeatonAccess DeveloperAuthor Commented:
Prasadh,

Thank you very much.  I am using the Callisto template.  btn-primary is already how I want it to look.  I want to use it for my download button.  You can see these two buttons on the home page of my (test) website at celebrantassist.com.au/web

<p>TeamViewer Version 5 (for remote assistance)<br />
<button onclick="window.open('http://celebrantassist.com.au/downloads/TeamViewer_Setup.exe')" type="URL">Download TeamViewer</button></p>

<button type="submit" class="btn btn-primary">Test button</button>

I would like the download button to be built around btn-primary.

Thanks in advance.

Clive
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
ohh... ok

you have solved the problem yourself, but did not implement it :)

You have to just add the class to the button in same way you added to test button

here below is the code... you can replace your button code with this one, and delete your test button ... your download button will look primary blue as you want.
<button type="URL" class="btn btn-primary" onclick="window.open('http://celebrantassist.com.au/downloads/TeamViewer_Setup.exe')">Download TeamViewer</button>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Prasadh BaapaatWeb Designer & DeveloperCommented:
I found 2 more problems on your test site: see attached images

1) on smaller screens the logo will go INTO the menu icon...

2) The dropdown menu text is going OUTSIDE the menu button.

to solve both these problems, open the template.css as explained earlier for changing the btn-primary code....

paste the code below , save and check.

.g-main-nav .g-standard .g-dropdown {
        width: 210px !important;
          float: left; }
@media (max-width: 767px) {
	.g-logo {
		float: right;
		margin-right: 20px;
	}
}

Open in new window


I think both your problems will be solved, if not let me know.
menu-button.jpg
menu-text.jpg
0
Clive BeatonAccess DeveloperAuthor Commented:
Perfect!  Thank you very much.  I didn't solve the problem.  I'm not good with HTML.  I couldn't get it to work.

Thanks also for pointing out the other bugs.  I'll see what I can do and let you know.  

Clive
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Joomla

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.