We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

Buttons size | Forum

Topic location: Forum home » Development » Themes
Elvis
Elvis Dec 11 '15
Hello,

i'm trying to make buttons bigger but with no luck untill now,is there any way to change the buttons size?


Oxwall Software
Oxwall Software Dec 15 '15
.addthis_16x16_style .at4-icon, .addthis_16x16_white_style .at4-icon,  .addthis_default_style .at4-icon, .at4-icon, .at-16x16 {
  width: 100px!important;
  height: 100px!important;
  line-height: 100px!important;
  background-size: 100px!important;
}

.addthis_toolbox .ow_social_sharing_button {
  width: 100px!important;
  height: 100px!important;
  max-width: 100px!important;
}
instead of 100px put your size
Elvis
Elvis Dec 15 '15
Hello,

thank you for the reply,i try to change the style.css and the share_buttons.html,but nothing changes,can you please tell me what files i need to change?

Oxwall Software
Oxwall Software Dec 17 '15
You should add these styles to base.css file of the theme
Jozko
Jozko Oct 1 '16
I added styles above to my macabre theme and the buttons " view all", "send", "add new", ... are still the same. Even clearing the cache (using extreme cache plugin) not helps. Any other idea?
Oxwall Software
Oxwall Software Oct 4 '16
These styles apply to the button of social sharing, it has nothing to do with the buttons you mentioned.
Jozko
Jozko Oct 6 '16

Quote from Oxwall Software These styles apply to the button of social sharing, it has nothing to do with the buttons you mentioned.

Thanks for the replay. Any idea how to change the size of the buttons I mentioned?
Kevin
Kevin Jan 2 '17
I followed the directions above for Custom CSS to change the Sharing icons -  tried 32 and 24 in place of 16:

needed to increase the width of the container. However icons remaining at 16x16 just spaced out....


Are there different icons for larger sizes?

The Forum post is edited by Kevin Jan 4 '17
Kevin
Kevin Jan 3 '17
Orig is shown in attachment 16x16_buttons


The following code change yield the second attachment...

/* Sharing Icon size orig 16x16 */

addthis_24X24_style .at4-icon, .addthis_24X24_white_style .at4-icon,  .addthis_default_style .at4-icon, .at4-icon, .at-24X24{  

width: 24px!important;  

height: 24px!important;  

line-height: 24px!important;  

background-size: !important;}


.addthis_toolbox .ow_social_sharing_button {  width: 24px!important;  height: 24px!important;  max-width: 24px!important;}


Buttons are still 16x16


Ideas?

The Forum post is edited by Kevin Jan 4 '17
Attachments:
  32x32_code.JPG (15Kb)
  16x16_buttons.JPG (9Kb)
OW-Ghost
OW-Ghost Jan 5 '17
The code was not working on my skadate site :(
Kevin
Kevin Jan 5 '17
Has anyone been able to increase the sharing button size on Oxwall site?
Kevin
Kevin Jan 5 '17
Ok the link below to addthis site looks like 32 should work...
http://www.addthis.com/...haring-button-sizes/

Changed values still no go.
OW-Ghost
OW-Ghost Jan 5 '17
i try the css code and not work on my skadate site. I do not know what i doing wrong
Darryl B Leader
Darryl B Jan 6 '17
I provided this css to Kevin. He wanted the button sizes to be 24px instead of 16px. The icons within the buttons also had to be sized as well as the container width to keep the buttons inline with the larger size.

.addthis_toolbox {
    width: 115px !important;
}
.at-icon-wrapper {
    height: 24px !important;
    width: 24px !important;
    line-height: 24px !important;
}
.at-icon {
    width: 24px !important;
    height: 24px !important;
}
The Forum post is edited by Darryl B Feb 1 '17
Kevin
Kevin Jan 7 '17
Worked great.
Thanks Darryl!
OW-Ghost
OW-Ghost Jan 7 '17
Wow million thanks Darryl. that css code really worked :-)
Kevin
Kevin Jan 7 '17
PS - If you would like larger icons you can use 32px, and 150px in place of 115px
OW-Ghost
OW-Ghost Jan 7 '17
UPDATE: it did not work fully, my "share" text was removed :(
Darryl B Leader
Darryl B Jan 7 '17
@ Marcus May be another element that should be sized in you case. Sizing the other elements may have caused them to go over your text.
OW-Ghost
OW-Ghost Jan 7 '17
Ahaaa i know now it was only on my own created pages that the text was gone and the buttons was same as on the defaut pages. it looks like the css was effected my custom pages to :/ on my deafault pages everything was looking nice and the text was included. maybe the css runs on new pages that you create to.


hmmm same problem again everything on oxwall will effect all pages, meta,css and so on...

Pages: 1 2 »