Joomla Templates Club 406,261 posts

[sharpdome Friend sharpdomeJoin date: December 2010Posts: 247Downloads:6Uploads:4 Thanks: 62 Thanked: 5 times in 1 posts]

#161095

How do I make buttons like on the bottom of the page on the JA Social demo under Button & Tags Style?

http://template.joomlart.com/ja_social/index.php?option=com_content&view=article&id=49&Itemid=54

I try to view source and can’t seem to find the code.

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#380003

<em>@sharpdome 225844 wrote:</em><blockquote>How do I make buttons like on the bottom of the page on the JA Social demo under Button & Tags Style?

http://template.joomlart.com/ja_social/index.php?option=com_content&view=article&id=49&Itemid=54

I try to view source and can’t seem to find the code.</blockquote>

These button styles can be easily embedded by using typo plugin which can be downloaded from here::

http://www.joomlart.com/forums/downloads.php?do=file&id=1318

Guide on usage::

http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Guides

[sharpdome Friend sharpdomeJoin date: December 2010Posts: 247Downloads:6Uploads:4 Thanks: 62 Thanked: 5 times in 1 posts]

#380130

That’s great, thank you!

Another question. I now have a button that I am placing in a standard Custom HTML (mod_custom) module. I don’t want the normal white JA Social white module background. I just want the button and its text. How do I disable the white background of a module in just the user1 position?

Also, how would I center the button? I’m trying to wrap it with various text-align: center tags but they are being over ridden/ignored.

Finally, how can I increase the size of the button icon/text? If I wrap the button in h1 or h2 then it becomes bigger but there is a break in the button color.

Thanks for your help!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#380180

You add the following code into the template.css file:

#ja-content-top div.ja-moduletable, #ja-content-top div.moduletable {
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
box-shadow:0 0 0;
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
}

#ja-content-top .column {
background: none!important;
border: 0!important;
}

#ja-content-top .button-img span {
font-size:130%
}


1 user says Thank You to Saguaros for this useful post

1. sharpdome

[sharpdome Friend sharpdomeJoin date: December 2010Posts: 247Downloads:6Uploads:4 Thanks: 62 Thanked: 5 times in 1 posts]

#380606

That’s a little better but didn’t totally work. 🙂

The rounded corners are gone and the text is bigger but (1) the padding is still there, (2) the white background is still there and (3) the buttons aren’t centered in the middle of the user1, user2, user 3 positions. 🙂

[sharpdome Friend sharpdomeJoin date: December 2010Posts: 247Downloads:6Uploads:4 Thanks: 62 Thanked: 5 times in 1 posts]

#380797

OK, I was able to get rid of (1) the padding and (2) the white background, but I’m still having problems with (3) centering the buttons.

How can I center the buttons inside the modules? :((

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#380880

<em>@sharpdome 226950 wrote:</em><blockquote>OK, I was able to get rid of (1) the padding and (2) the white background, but I’m still having problems with (3) centering the buttons.

How can I center the buttons inside the modules? :((</blockquote>

Can you provide a link to your site so as to give you code reference which you can update to get desired result

[sharpdome Friend sharpdomeJoin date: December 2010Posts: 247Downloads:6Uploads:4 Thanks: 62 Thanked: 5 times in 1 posts]

#380937

I just sent you a PM with a link to the development site. Thank you!

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#380946

You can wrap in code reference ::

<a href=”/index.php?option=com_jajobboard&view=jauserregister&layout=regjobseekerform&Itemid=9999″ class=”button-img but-blue”><span class=”icon icon-signup”> </span><span>Register as Teacher?</span></a>

like this::

<div style=”margin: 0 auto; width: 210px;”><a href=”/index.php?option=com_jajobboard&view=jauserregister&layout=regjobseekerform&Itemid=9999″ class=”button-img but-blue”><span class=”icon icon-signup”> </span><span>Register as Teacher?</span></a></div>

and then, adjust width value accordingly. The code can be seen with editor turned off in global configuration

1 user says Thank You to aman204 for this useful post

1. sharpdome

[Author]

Posts