1. revolion
  2. Sherlock Holmes
  3. Commercial Templates
  4. Friday, 31 August 2018
  5.  Subscribe via email
Hello Joomla51,

I have a custom module which I am using some animation on, but I do not like the stock button that Kaylee comes with so I want to create my own buttons for my modules. I tried following this, Joomla51 Article, but it did not work like I think and it is because I'm not doing the title correctly for the css code. On the site, I want a red button, a white one like in the slider and then a gray one. all buttons the same code just different colors and hover colors. Here is the code for the red one down below. To clarify I want to use the same code for all three buttons because I like the style but I need to have a different color for each button and so the red one I was going to use r2 and white for white and g2 for grey ones.


.btn r2 {
font-size: 38px;
line-height: 1.5;
font-weight: 200;
font-family: ProximaNova, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #383838;
text-decoration: none;
background-color: transparent;
padding: 5px 35px 5px 35px;
text-shadow: none;
margin: 0px;
letter-spacing: -1.5px;
height: auto;
border-width: 2px;
border-color: #383838;
border-style: solid;
}
.btn r2:hover {
font-size: 38px;
line-height: 1.5;
font-weight: 200;
font-family: ProximaNova, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #cb0602;
text-decoration: none;
background-color: transparent;
padding: 5px 35px 5px 35px;
text-shadow: none;
margin: 0px;
letter-spacing: -1.5px;
height: auto;
border-width: 2px;
border-color: #383838;
border-style: solid;
}


Once I get this figured on on the title part I can add it to the Module suffix. Am I thinking in the right direction?

Thanks,
JT
Accepted Answer Pending Moderation
0
Votes
Undo
Hi JT

Presuming I understand you correctly try using the following selector for your CSS rule..

.r2 .btn 


Firstly as you are adding the class (r2) to the containing module class field the class goes before .btn. Note this will give all buttons in the 'r2' module the 'r2' styling.

Secondly, ensure to add a dot before any class name

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.