hey marco,
if you don't want to digg through the big style.css file have a look at the less files, that should help you real fast to modify only the parts that you need.
you can find them at components/com_easysocial/themes/wireframe/styles

Thanks for sharing Alex By the way marco, you can actually set this in your own template's css file too if you don't want to make modifications on the original css file for EasySocial.

Yes I have created a CSS file to override defaults in easysocial. All I'm saying is I have a CSS file that's predominantly adjusting the size of everything – fonts, input fields, etc and its 150 lines long – and I've only just started. So... I'm acknowledging that you guys have a very comprehensive html/css structure, which is nice. Your components are definitely some of the best I've ever seen in 7+ years of joomla. Generally, I have to spend 2-3 days taking the crap html/css that other components have to make them useable.

Easysocial is extremely useable out of the box. And your design is very easy to modify given its extensive class structure. But, the downside is like I said, it takes 150 lines of code to capture all of the changes I made to font sizes and input fields. There may be a way moving forward to tie this all together a little bit tighter. Perhaps using LESS or mixins or some php to set some global features. For example, if you have 10+ css rules that set things to font size 11px, then you could have 1 rule to manage all of those at once.

Anyway, a minor issue again. I'm just getting to know the component, and its fantastic.

Hello Marco,

EasySocial actually uses less But we do not compile these less files on the fly because most sites would hit the memory_limit in php Hence, we normally advise customers to create their own css file overrides instead.

Marco,

I am having the same issue as you with the font size. I have a lot of older users that have been complaining that the font size is too small. Would you be willing to post your CSS that you have used to change the font size on your site. It would save a lot of us time from having to go through the EasySocial CSS pulling out all the font size CSS. Appreciate the help.

Here's some of it. I doubt this covers everything but its a start:

/* FONT OVERRIDES */

div#es-wrap {

    font-size:14px;

}

div#es-wrap .es-story {

    border-color:#3399cc;

}

div#es-wrap .es-dashboard .es-container .es-sidebar .es-nav-stacked a {

    font-size: 13px;

}

div#es-wrap .es-stream-content a {

    font-size: 14px;

}

div#es-wrap .es-stream-content {

    font-size: 13px;

}

div#es-wrap .es-field-header {

    background: none repeat scroll 0 0 #F0F7FC;

    border: 1px solid #DFF1FF;

    font-size: 14px;

    margin-bottom: 24px;

    padding: 4px;

}

div#es-wrap legend {

    color:#3399cc;

    border-color:#3399cc;

}

div#es-wrap .search-input-wrap .input-search,

div#es-wrap .search-input-wrap .btn-search {

    height:50px;

}

body div#es-wrap .es-toolbar .toolbar-user-name {

    color:#3399cc;

}

div#es-wrap .dropdown-menu li > a {

    text-shadow:none;

}

Hi,

Thanks for sharing Marco.

Thanks Marco for posting your CSS.

Indeed!

thanks Macro ,can you advise what the exact code ,Ive put this css in my template,however it was not working as it should

her is my code:

/* Load existing stylesheet */

@import url('../../../../../components/com_easysocial/themes/wireframe/styles/style.css');

@import url('../../../../../components/com_easysocial/themes/wireframe/styles/style1.css');



/* Add your own customization here */

/* FONT OVERRIDES */

div#es-wrap {

    font-size:14px;

}

div#es-wrap .es-story {

    border-color:#3399cc;

}

div#es-wrap .es-dashboard .es-container .es-sidebar .es-nav-stacked a {

    font-size: 13px;

}

div#es-wrap .es-stream-content a {

    font-size: 14px;

}

div#es-wrap .es-stream-content {

    font-size: 13px;

}

div#es-wrap .es-field-header {

    background: none repeat scroll 0 0 #F0F7FC;

    border: 1px solid #DFF1FF;

    font-size: 14px;

    margin-bottom: 24px;

    padding: 4px;

}

div#es-wrap legend {

    color:#3399cc;

    border-color:#3399cc;

}

div#es-wrap .search-input-wrap .input-search,

div#es-wrap .search-input-wrap .btn-search {

    height:50px;

}

body div#es-wrap .es-toolbar .toolbar-user-name {

    color:#3399cc;

}

div#es-wrap .dropdown-menu li > a {

    text-shadow:none;

}

Please forgive the n00b, but can someone explain how to use this? I am so sorry to be a pain in the butt. The tiny font is a real problem, so I really appreciate any help, if this ended up being a solution? Thank you in advance!

Hello Troy,

Can you post a link to the site and also what font size would you like to use?

I figured it all out, along with some help in another thread. Thank you so much (everyone!)

For those looking to alter the fonts across the board, here are all of the relevant entries I found (that mattered to me). I put these in custom.css (I'm using yootheme/warp7; for others it might be template.css); You can adjust the numbers to your preference.

body div#fd.es .es-stream-meta .es-stream-title {font-size: 20px;}

body div#fd.es .es-stream-meta .es-stream-title a {font-size:20px;}

body div#fd.es .es-streams h4 > a {font-size:20px;}

body div#fd.es .es-stream-content {font-size:15px;}

body div#fd.es {font-size:20px; }

body div#fd.es .es-dashboard .es-container .es-sidebar .fd-nav-stacked a {font-size:15px;}

body div#fd .fd-small {font-size:15px; font-weight:normal;}

body div#fd.es .es-toolbar .toolbar-user-name {font-size:15px;}

body div#fd.es .es-comments-form .es-form .mentions textarea { font-size:15px; font-weight:bold;}

body div#fd.es .es-stream-meta .es-stream-meta-footer {font-size:12px;}

body div#fd.es .es-story.is-collapsed .es-story-textfield {font-size:20px; font-weight:bold; line-height:16px; top:16px;}

input, button, select, textarea { font-size:20px; font-weight:bold;} 

label, input, button, select, textarea {font-size:20px; font-weight:bold; line-height:20px;}

body div#fd.es .es-story-textfield {font-size:15px;}

body div#fd.es .es-widget .widget-title {font-size:13px;}

body div#fd.es .es-widget .fd-nav > li > a {font-size:15px;}

body div#fd.es.view-conversations .es-content li.conversation-item .conversation-meta {font-size:15px;}

body div#fd.es .es-notifications .es-item-list > li .es-notification .es-time {font-size:15px;}

Thanks for sharing this Troy! By the way, don't you think 15px and 20px is a little too big?

@Mark, not for the old ladies who frequent my networks. LOL Actually, I like big fonts, too, but yeah, I would have gone a bit smaller, but this is what they think is helpful. I'm working hard to be inclusive to all demographics to my networks. The youngin's don't mind the big text, and the elderly can read it much easier, so everyone is happy. Now, to increase or replace the various icons that are so tiny.

What was the logic is creating a default font so small, by the way? I mean, 12 is pretty standard, but 4? 9? What's up with that?

Hello Troy,

Hm, by default EasySocial uses about 11px I believe. I don't think we are using 4px or 9px anywhere as that's extremely small

Thank's Troy Tolley

Just want to add my voice to the votes for larger font sizes either by default or by a setting backend. I guess all stackideas team must have amazing 20 20 vision but I and my users don't!

The above codes are a start but as pointed out they only cover a fraction of the layouts.

Thanks for the heads up on this.