Joomla Templates Club 406,261 posts

[heritage123 Friend heritage123Join date: June 2014Posts: 23Downloads:0Uploads:7 Thanks: 2]

#200680

I want to apply a style to menu module so that it looks like one of the template’s Typography button styles. That menu module will be embedded in an article.

I’ve been able to do this but their appears to be a margin or padding around the menu module, making its height larger than a regularly styled button. See attached, top graphic illustrates menu module height (green), regular button height red. bottom graphic simply show the menu module extended.

It appears there is a margin around the menu module extending its height. How do I make the height of the embedded menu module the same height as the button?

Here is what I’ve done:

1) Embedded a menu module into an article using the following html structure:

<div class=”row col-lg-6″ style=”padding: 20px;”>
<div class=”row example-row example-forms example-buttons”>
<h2>Dining</h2>
<div class=”col-md-6″>{loadposition fine_dining}</div>
<div class=”col-md-6″><a href=”#” class=”btn btn-block btn-default”>Info Icon Button</a>
</div>
<div class=”col-md-6″><a href=”#” class=”btn btn-block btn-default”>Info Icon Button</a>
</div>
<div class=”col-md-6″><a href=”#” class=”btn btn-block btn-default”>Info Icon Button</a>
</div>
<div class=”col-md-6″><a href=”#” class=”btn btn-block btn-default”>Info Icon Button</a>
</div>
</div>
</div>

2) Assign “btn btn-block btn-default” to the menu module’s Menu Class Suffix

3) Additionally created the following unique css class and assigned it to Menu module’s Menu Class Suffix “btn btn-block btn-default wtf”, hoping I could control the padding and margin. But this did not seem to work.

.wtf {
padding: 0;!important;
margin: 0;!important;
background-color: #b0c4de
}

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#546932

You use the wrong syntax in declaring css rule, it should be:


padding: 0 !important; <<< redundant semi-colon before !important;
margin: 0 !important;
background-color: #b0c4de ; <<< missing semi-colon at the end of this line;


and you can try to create a new css file called custom.css in this path: /templates/ja_decor/css/ and add above css rule inside it.

Hope it helps

[heritage123 Friend heritage123Join date: June 2014Posts: 23Downloads:0Uploads:7 Thanks: 2]

#547007

Thanks, perhaps sloppy CSS but with these corrections:

.wtf {
padding: 0! important;
margin: 0! important;
background-color: #FF0DFF
}

the format of the button did not necessarily change, but the relationships between buttons in the same row did as illustrated in attachment.

NOTE: I included the custom.css class .wtf only because I didn’t know of any other way to affect changes to the module. Maybe .wtf is an approach but, maybe there other suffixes that could be applied.

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#547130

I would like to help you to solve this bug but I could not suggest and find the solution for you without clue. If possible you can pm me URL of your site, admin login and FTP account, I shall help you to check it further

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#547279

I just added css style below into templates/ja_decor/css/custom.css file


.wtf {
padding: 0;!important;
margin: 0;!important;
background-color: #b0c4de ;
}


For now, you will see it’s working as fine

---

Attachments:

1. 

[heritage123 Friend heritage123Join date: June 2014Posts: 23Downloads:0Uploads:7 Thanks: 2]

#547297

With all respect the code you cite:

.wtf {
padding: 0;!important;
margin: 0;!important;
background-color: #b0c4de ;
}

has not been changed in my custom.css it still remains as:

.wtf {
padding: 0! important;
margin: 0! important;
background-color: #FF0DFF
}

so I don’t know what you did. Also the image you attached in the last post does not show the problem solved. it is the same as before. Please see the attached graphic and you will note the blue line indicating the height of the Fine Dinning button is greater than the adjacent button. The objective is to apply css to this button making the same dimensions as the adjacent buttons.

Please advise.

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#547390

The .wtf css style didn’t work to change dimensions in button. I just added the rule in custom.css file

@media (min-width: 992px){
.nav > li > .separator {
padding-top: 7px;
padding-bottom: 7px;
}
}

You will see the dimensions in button is working fine

---

Attachments:

1. 

[heritage123 Friend heritage123Join date: June 2014Posts: 23Downloads:0Uploads:7 Thanks: 2]

#547524

thank you for help

[Author]

Posts