Hello Troy,

You would probably just want to duplicate the folder /components/com_easysocial/themes/dark/ to another name and then alter the codes here. Alternatively, if you are just making very minor css edits, you may do so by adding these css changes into your template's css file.

I tried just copying and renaming the folder and that wasn't enough.. It totally confused the theme portion of the backend. I didn't see any .xml files to change, and the few .json I saw I'm not sure what would need to be changed on those.

Not sure what you are trying to do but if you want to duplicate the theme, you need to edit those .json files.

I thought I explained, I want to create another theme. What of those files need to be changed?

a good example is

body div#fd.es .btn-es-success, body div#fd.es .btn-es-success:focus {

color: #fff !important;

background-color: #bcd669 !important;

border-color: #97bb41 !important;

}

when I do a grepwin #bcd6669 does not appear in any file, yet its in style.min.css which is insane. Even after I've deleted all .min.css and recompiled several times.

This really *****.. I spent almost 10hrs trying to carefully go through the files and replace the blue's with decent green's only to have it be a total disaster even though the only thing I changed were the colors. It's extremely disappointing and defeating. I would've been much better just to create a override and use that.
*sigh*

Hello Troy,

Firstly, I really have no idea what you are trying to do here. You did mentioned that you want to create a new theme but to what extend ? Do you want to redesign everything from ground up or do you want to only make minor changes? If you only want to make very minor changes, you should not create an override with the less files.

Doing so, would also mean that you are an intermediate user and you know what you are doing when messing with less files. If you just want to make minor adjustments, do it in your template's css file as these changes are only minor.

You should look at the documentation first http://docs.stackideas.com/developers/themes/getting_started

the issue is, the funky green and light blue text on yellow background mixed with light blue headers does not look good @ all. Several people have told me how bad it looks. So instead of doing a few dozen overrides, I figured changing the colors in the .less would be better. My knowledge of .less is not very good, my knowledge of .css overrides if fair-moderate

update: style.less - No longer used. Replaced by manifest.
is not true. style.min.css is exactly the file thats driving me insane.

You know you could just add your own css codes without modifying the existing codes. That would save you a tad bit of time,

#fd.es .alert-message {

    background-color: #000;

}

yeah... but then again... I just added

/*

 * END OF INCLUDED CUSTOM.CSS

 *

 */

body div#fd.es .es-toolbar .navbar-inner {

	background: #2c5e3f; /* Old browsers */

	background: -moz-linear-gradient(top,  #2c5e3f 1%, #3b7053 100%); /* FF3.6+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#2c5e3f), color-stop(100%,#3b7053)); /* Chrome,Safari4+ */

	background: -webkit-linear-gradient(top,  #2c5e3f 1%,#3b7053 100%); /* Chrome10+,Safari5.1+ */

	background: -o-linear-gradient(top,  #2c5e3f 1%,#3b7053 100%); /* Opera 11.10+ */

	background: -ms-linear-gradient(top,  #2c5e3f 1%,#3b7053 100%); /* IE10+ */

	background: linear-gradient(to bottom,  #2c5e3f 1%,#3b7053 100%); /* W3C */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c5e3f', endColorstr='#3b7053',GradientType=0 ); /* IE6-9 */

}

to the custom.css file, recompiled both top and bottom and it didn't change anything, yet doing so in element inspector works perfectly.
so SOMETHING is very weird.

I don't want to change template.css cause it will be replaced on update. Naturally custom.css is where overrides belong so now what? :S

Are you trying to change the color of the toolbar? Try this instead,

body div#fd.es .es-toolbar .navbar-inner {

    background: #666;

    color: #fff !important;

    border: 1px solid #000;

}

body div#fd.es .es-toolbar .fd-navbar-search,

body div#fd.es .es-toolbar .fd-navbar-search input{

    background: #000 !important;

}



body div#fd.es .es-toolbar .navbar-inner .fd-nav li a i{

    color: #fff !important;

}

nope, I put it in custom.css and it does nothing. Not even after recompiling every button I can find to recomplie

body div#fd.es #jsn-header {

  z-index: 601;

  position: relative;

}

body div#fd.es .jfbconnect-wrapper {

  text-align: center;

}

body div#fd.es .jfbconnect-wrapper .social-login .pull-left {

  float: none !important;

  margin: 0 !important;

}

body div#fd.es .jfbconnect-wrapper .social-login .pull-left a {

  display: inline-block !important;

}

body div#fd.es .jfbconnect-wrapper .social-login .pull-left a img {

  max-width: 90px !important;

}

body div#fd.es .jfbconnect-wrapper .social-login >div {

  display: inline-block !important;

}

/*

 * END OF INCLUDED CUSTOM.CSS

 *

 */

 /*

body div#fd.es .es-toolbar .navbar-inner {

	background: #2c5e3f; /* Old browsers */

	background: -moz-linear-gradient(top,  #2c5e3f 1%, #3b7053 100%); /* FF3.6+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#2c5e3f), color-stop(100%,#3b7053)); /* Chrome,Safari4+ */

	background: -webkit-linear-gradient(top,  #2c5e3f 1%,#3b7053 100%); /* Chrome10+,Safari5.1+ */

	background: -o-linear-gradient(top,  #2c5e3f 1%,#3b7053 100%); /* Opera 11.10+ */

	background: -ms-linear-gradient(top,  #2c5e3f 1%,#3b7053 100%); /* IE10+ */

	background: linear-gradient(to bottom,  #2c5e3f 1%,#3b7053 100%); /* W3C */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c5e3f', endColorstr='#3b7053',GradientType=0 ); /* IE6-9 */

}

*/

body div#fd.es .es-toolbar .navbar-inner {

    background: #666;

    color: #fff !important;

    border: 1px solid #000;

}

body div#fd.es .es-toolbar .fd-navbar-search,

body div#fd.es .es-toolbar .fd-navbar-search input{

    background: #000 !important;

}



body div#fd.es .es-toolbar .navbar-inner .fd-nav li a i{

    color: #fff !important;

}

Where are you placing the custom.css file? Are you sure your Joomla template is loading up this file?

the custom.css is included in easysocial. I'm surprised you don't know that.
by default it has

body div#fd.es #jsn-header {

  z-index: 601;

  position: relative;

}

body div#fd.es .jfbconnect-wrapper {

  text-align: center;

}

body div#fd.es .jfbconnect-wrapper .social-login .pull-left {

  float: none !important;

  margin: 0 !important;

}

body div#fd.es .jfbconnect-wrapper .social-login .pull-left a {

  display: inline-block !important;

}

body div#fd.es .jfbconnect-wrapper .social-login .pull-left a img {

  max-width: 90px !important;

}

body div#fd.es .jfbconnect-wrapper .social-login >div {

  display: inline-block !important;

}

There's no custom.css that is loaded in EasySocial. I am actually a little lost here. You should add these codes into your Joomla's template css file and not EasySocial's.

you can see in this video that it is there and supposedly compiling http://www.screencast.com/t/UxdgGMEaqD3[video]http://www.screencast.com/t/UxdgGMEaqD3[/video]
The attached image of a CLEAN easy social 1.2.7 clearly shows that it infact IS included by default

If you are referring to the custom.css in EasySocial's theme, you need to insert your codes into custom.less and compile it. Please review my advise below:


1. If you are only making MINOR css edits, add your changes into your JOOMLA TEMPLATE'S CSS FILE and not EasySocial's css file.


2. If you want to make MAJOR css edits or if you want to redesign the entire section of EasySocial, you need to modify the LESS files and play around with the overrides in EasySocial.

point #2 brings us back full circle.
HOW do I create another theme??
what EXACTLY in the .json and where ever else do I need to change so it knows this is a new theme not "dark"
for example, what should element be?
is there anything besides the "name" and "element" in the .json's that need to be changed? Any Other file?

Lastly I'm having trouble with a hoover element.
if you look @ the image http://screencast.com/t/a0etsKtcp you'll see the lil favicon disappears almost completely.

Minor css tweak isn't working for me either. I placed it in template.css

I tested with a simple background color change

div.alert.alert-warning {

    background-color: red;

}

Even cleared browser cache.

Do we need to do anything special after modifying the css?

I have checked your site and it looks like you already managed to alter the styling of the toolbar and buttons as they seem to appear differently for me.

thats because I got tired of waiting and temporarily added a @import which I don't want to do as it will be overwritten on update.
You've got someone else confirming the same issue. Can we PLEASE get this done properly.
Custom.css is the de facto place to put overrides.
I want to create a duplicate template so that its safe from updates and easily reusable. I'm surprised this is this difficult.
we've discovered a bug where custom.css is NOT being read into the theme.

So, the issues that need to be covered are...

1) how EXACTLY to we make a duplicate theme with another name/element(?)

2) how can we get custom.css to work.

yes, I can use my plugin and use my own custom.css in the template, but that is NOT what I wish to do, nor should be necessary in this case.

Also you completely neglected the fact that the favicon totally disappears on hoover as I documented with the screenshot.
Your really not answering any of the questions, issues mark. Could you please have sam or someone else answer this ticket? Ty.

@peter, you need to go to the theme manager and "rebuild" the theme from the compiler menu item i think.

@troy thanks. tried your suggestion but nothing. cleared all caches as well.

I followed Mark's suggestion

1. If you are only making MINOR css edits, add your changes into your JOOMLA TEMPLATE'S CSS FILE and not EasySocial's css file.

Anyone else have better luck with minor css edits?

Troy,

I think you are confusing people here and causing a great misunderstanding of the whole idea behind the custom.css file. The custom.css file IS NOT A CUSTOM CSS FILE. That file name is simply called custom.css as we only add some custom css for instance, JFBConnect styling in this particular file.

What I meant by "minor css edits" is to add the css codes is in your template's css file. For instance, if you are using protostar, add your css codes in /templates/protostar/css/template.css .

Peter, if you are having issues adding the css codes into your template's css file, please start a new thread.

To simplify the whole process, let me just re-iterate this again on how one could customize the theme for EasySocial:

1. Create a template override in your Joomla template
To override EasySocial using the conventional method of Joomla, one would need to perform the following steps:

1a. Create a new folder in /templates/JOOMLA_TEMPLATE/html/com_easysocial

1b. If you need to override the css, create a styles folder in the folder above so the resulting path would look like /templates/JOOMLA_TEMPLATE/html/com_easysocial/styles

1c. If you are an experienced designer and understand what you are dealing with (Especially LESS files), you can create a style.less file in /templates/JOOMLA_TEMPLATE/html/com_easysocial/styles/ . When you create such file, your css file would be empty by default because EasySocial would only load up this file and nothing else. Within this file, you need to perform the necessary imports from other .LESS files.


2. Create a new theme in /components/com_easysocial/themes
If you are a template developer and would want to sell themes for EasySocial, duplicate the folder /components/com_easysocial/themes/wireframe/ to another name. Call it "test" if you want. Then, edit the file /components/com_easysocial/themes/test/config/template.json and alter the attributes accordingly so that the theme would appear with the appropriate information when accessing the Themes area at the back end of EasySocial


3. Making minor css adjustments
If all you want to do is to just modify some coloring / styling of buttons etc, you SHOULD NOT NEED TO OVERRIDE ANYTHING. You just need to edit your Joomla template's css file and add your changes there.

Actually mark, its your vagueness that is confusing folks.. I'm asking a VERY SPECIFIC TECHNICAL question and getting very vague answers. So yes, when others come in and see this and don't see a solid clear answer ( like you still haven't provided ) then they are going to be confused.

I think you are confusing people here and causing a great misunderstanding of the whole idea behind the custom.css file. The custom.css file IS NOT A CUSTOM CSS FILE. That file name is simply called custom.css as we only add some custom css for instance, JFBConnect styling in this particular file.

I can't believe you actually wrote this. You just contradicted yourself and completely ignored the fact that easysocial's custom.css does not get handled properly.

simply called custom.css as we only add some custom css for instance, JFBConnect styling in this particular file

Thanks for the laugh...
I don't mean to sound condescending here, but that was just absurd. You JUST CLEARLY stated its a "custom.css' file for handling odd bits of .css, like jfb.

I'm really frustrated with you, this thread has been going on for 4 days now and you've yet to actually answer my question.
if we go back to my very first post

I really like the dark template but the colors for text really don't work for me. Nor am I crazy bout the blue background on the toolbar.

I'd like to create a duplicate of the dark template ( obviously renaming it ) and then go from there. I tried finding other templates for easy social but was unsuccessful as I don't want to change our joomla template, just easysocial.

what caveats do I need to know about ( I'm new to less ) and what exactly needs to be changed to create another "template"

is there something that explains what styles go where or do what?

Any and all help will be greatly appreciated. Hopefully I can create some green based dark style.

you'll see that #2 answer doesn't' COMPLETELY answer it!!!!..

Then, edit the file /components/com_easysocial/themes/test/config/template.json and alter the attributes accordingly so that the theme would appear with the appropriate information when accessing the Themes area at the back end of EasySocial

yep, I figured that was what was needed, which is why i asked VERY SPECIFICALLY EXACTLY WHAT NEEDS TO BE CHANGED?

{

	"name"		: "Dark",

	"element"	: "dark",

	"desc"		: "This theme is suitable for websites that uses a Joomla template which is dark. Most of the theme files on this theme are inherited from the main wireframe theme.",

	"author"	: "Stack Ideas Sdn Bhd",

	"email"		: "support@stackideas.com",

	"website"	: "http://stackideas.com",

	"created"	: "26th May 2013",

	"version"	: "1.0.1",

	"servers"	: 

	{

		"update"	: "http://stackideas.com/",

		"version"	: "http://stackideas.com"

	}

}

Here's template.json from the dark theme.
Name: .. easy enough...
element: element for what? where is it used? how is it used? what are the params to using it?
the rest is pretty much self-explanatory except for the purpose and functionality of "servers"
you state to use wireframe... is there something special about that one that dark doesn't have?

Your step one is very strange... would be far easier just to create a new theme but ok.. thats one weird way...

#3 first lets get something very straight.. the minute you change a programs default behavior YOU ARE OVERRIDING IT!!.. so please dont' say you don't need to override anything, now that we got semantics out of the way, What you instruct them to do is VERY bad practice. It's a quick way to guarantee you lose your changes on update. you should NEVER EVER put your changes in the templates.css file. You add them to a custom.css ( or whatever name you template will accept ) and put them there, HOPEFULLY, well documented.

There's alot more I could say but just what this whole thread has cost me but out of respect to those concerned I'll bite my tongue. I'll just say this couldve been so simple if just one tiny question had been answered

Hello Troy,

You are not understanding the behavior of custom.css and it HAS NEVER MEANT to be an override css file. The only CSS override file that EasySocial would look for is style.less (and compile it if necessary) or style.min.css (post compiled from LESS files) and NOT custom.css. custom.css is a core css file that is used to fix specific styling from other extensions.