Topic-icon styling gone.

Active Subscriptions:

None
10 years 7 months ago #37264 by trohal
styling gone. was created by trohal
after today's update ALL my custom.css styling is gone.
What in the world is going on?
/** SCLOGIN **/
	/* Horizontal layout */
#form-sclogin-remember {
	float: left;
	clear: none;
}
input#sclogin-remember{
	margin: -2px 0 0 0;
}
#form-sclogin-remember label {
	margin: 5px 0 0 3px;
}
	/* remove gap @ bottom */
.sclogin{
	overflow: visible;
	margin-bottom: -20px;
	margin-top: 3px;
	display: inline-block !important;
}
/* remove radius from right edge for
* username/pw in login module
*/
.sclogin input[type="text"], .sclogin input[type="password"]{
	border-radius: 10px 0px 0px 10px;
	margin-left: 5px;
}
/* try to get the pic to be all inline */
#scprofile-pic{
	display: inline;
	}
	
/** END SCLOGIN **/
Thats the specific styling and then this is the more generic / global... ( i THINK i got the main stuff here )
 
 /* Non-Bootstrap button */
.button , button, input[type="button"], input[type="reset"], input[type="submit"]{
 padding: 0px 4px;
 background-color: hsl(110, 35%, 18%) !important;
 background-repeat: repeat-x;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#569748", endColorstr="#233d1d");
 background-image: -khtml-gradient(linear, left top, left bottom, from(#569748), to(#233d1d));
 background-image: -moz-linear-gradient(top, #569748, #233d1d);
 background-image: -ms-linear-gradient(top, #569748, #233d1d);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #569748), color-stop(100%, #233d1d));
 background-image: -webkit-linear-gradient(top, #569748, #233d1d);
 background-image: -o-linear-gradient(top, #569748, #233d1d);
 background-image: linear-gradient(#569748, #233d1d);
 border-color: #233d1d #233d1d hsl(110, 35%, 11.5%);
 color: #fff !important;
 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.42);
 -webkit-font-smoothing: antialiased;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 border-radius: 12px;
 border: 5px solid #000000;


 }
 
.button:hover{
 font-size: .846em;
 color: #08fa10;
 padding: 0px 4px;
 background: -moz-linear-gradient(
   top,
   #6b6b6b 0%,
   #000000);
 background: -webkit-gradient(
   linear, left top, left bottom, 
   from(#6b6b6b),
   to(#000000));
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 border-radius: 12px;
 border: 5px solid #000000;
 }
 
 /*   Fancy emerald green css button 
 *  for dropdown menu's since they are dark we 
 *  want the emerald green button also ( reverse )
 */
.btn, .pager a, .btn-group > .dropdown-menu a:hover,.input-append .add-on, .input-prepend .add-on{
 background-color: hsl(116, 37%, 19%) !important;
 background-repeat: repeat-x;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4d9d48", endColorstr="#20421e");
 background-image: -khtml-gradient(linear, left top, left bottom, from(#4d9d48), to(#20421e));
 background-image: -moz-linear-gradient(top, #4d9d48, #20421e);
 background-image: -ms-linear-gradient(top, #4d9d48, #20421e);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4d9d48), color-stop(100%, #20421e));
 background-image: -webkit-linear-gradient(top, #4d9d48, #20421e);
 background-image: -o-linear-gradient(top, #4d9d48, #20421e);
 background-image: linear-gradient(#4d9d48, #20421e);
 border-color: #20421e #20421e hsl(116, 37%, 12.5%);
 color: #fff !important;
 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.42);
 -webkit-font-smoothing: antialiased;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 border-radius: 12px;
 border: 5px solid #000000;
}
 
 /* change to black raised button on hover */
.btn:hover, .pager a:hover {
 background-color: hsl(0, 0%, 9%) !important;
 background-repeat: repeat-x;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#595959", endColorstr="#161616");
 background-image: -khtml-gradient(linear, left top, left bottom, from(#595959), to(#161616));
 background-image: -moz-linear-gradient(top, #595959, #161616);
 background-image: -ms-linear-gradient(top, #595959, #161616);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #595959), color-stop(100%, #161616));
 background-image: -webkit-linear-gradient(top, #595959, #161616);
 background-image: -o-linear-gradient(top, #595959, #161616);
 background-image: linear-gradient(#595959, #161616);
 border-color: #161616 #161616 hsl(0, 0%, 2.5%);
 color: #fff !important;
 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.42);
 -webkit-font-smoothing: antialiased;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 border-radius: 12px;
 border: 5px solid #000000;
 margin-top: -5px: 
}
/* move inputbox right slightly */
.input-append .btn{
 margin-left:-5px;
 vertical-align:top;
}
AlterEgo Websitehttp://alterego-of-pwi.info
The topic has been locked.
Support Specialist
10 years 7 months ago #37278 by alzander
Replied by alzander on topic styling gone.
Where did you put that styling? It's best to keep it in your own template file or another location and not in our mod_sclogin.css or sc_bootstrap.css file as those files will be overwritten when you upgrade the extension.

This release had numerous Javascript and CSS changes meant to improve compatibility and reduce conflicts with other extensions. In general these updates have gone well, but if you run into any issues, definitely let us know.

I hope that helps explain,
Alex
The topic has been locked.
Active Subscriptions:

None
10 years 7 months ago - 10 years 7 months ago #37292 by trohal
Replied by trohal on topic styling gone.
definitely.. all my overides go into custom.css files with name like sclogin.css in the /templates/mytemplate/css/ folder. then they are called via the custom.css file with @import statements as is the designed behavior now for J!
I do that EXACTLY for this reason so this never happens... My suspicion is you've changed your element names ( which really sucks ) because regardless of what my css says, if you've changed the element names then everything is for not and I have to start over if you can't fix it. :(
you can see this in this image
File Attachment:
Last edit: 10 years 7 months ago by trohal.
The topic has been locked.
Support Specialist
10 years 7 months ago #37323 by alzander
Replied by alzander on topic styling gone.
Troy,
I see what happened. Our class names didn't change in this release. However, we did tighten up our included CSS file to *not* be so generic as it was affecting other elements on user's sites and causing problems that way. Since our CSS now focuses more on our module, it's overriding the 'generic' styles you added.

I'd recommend prefixing the styles you have above with .sourcecoast.sclogin, which should make your styles more specific, like:
.sourcecoast.sclogin .button , .sourcecoast.sclogin button, .sourcecoast.sclogin input[type="button"], .sourcecoast.sclogin input[type="reset"], .sourcecoast.sclogin input[type="submit"]{
I hope that helps. I understand it's a little more inconvenient. The changes we made were definitely necessary based on feedback from our users.

Thanks,
Alex
The topic has been locked.