Customizing CSS

René_Abel

Hey there... ;-)

I try to customize your css for my joomla template. There is a short description how it should work, but I can't make it working, and I don't know what I'm doing wrong.

I don't know where to place my custom css and how to place and fill the script... which url? which css? extra css? my template css for customization? Could anybody help me please? It's just a little margin and padding to change at:

http://public.oneallcdn.com/css/api/themes/beveled_w35_h35_wc_v1.css

.plugin #providers .provider {
margin: 0 -5px;
padding: 0;
}

Thanxx for your help

Kind Regards from Germany

René

Fred_Pinel

Hallo Nachbar ;-)

Download the original CSS (beveled_w35...css) into an accessible location.
For example: templates/t3_blank/css/customoneall.css
Edit the settings for the modules to point to http(s)://YOUR SITE/templates/t3_blank/css/customonell.css.
Modify the downloaded customoneall.css to your needs.
Warning: you also need to edit the CSS for the images (or download the PNG files too on your local server).

Hope this helps.

René_Abel

Hi Kollege,

danke, dass du versuchst mir zu helfen, allerdings komme ich so nicht weiter. :-/
Zunächst muss ich sagen, dass ich Joomla! 3.5 als CMS benutze. Dort habe ich die "template.css" meines der zeitigen Templates bereits mit der benötigten Zeile angepasst.

Desweiteren habe ich meine php des Templates mit folgendem JavaScript-Code folgendermaßen angepasst. Es funktioniert aber nicht:


/* Replace #your_subdomain# by the subdomain of a Site in your OneAll account */
var oneall_subdomain = 'gabberspider'; <------- Meine Domain von oneall eingtragen

/* The library is loaded asynchronously */
var oa = document.createElement('script');
oa.type = 'text/javascript'; oa.async = true;
oa.src = '//' + oneall_subdomain + '.api.oneall.com/socialize/library.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(oa, s);
_oneall.push(['social_login', 'templates/meintemplate/css/template.css', <------------- Hier die CSS eingetragen.
'https://secure.oneallcdn.com/css/api/themes/beveled_connect_w208_h30_wc_v1.css']);
</script>

Was genau mache ich jetzt falsch? Danke nochmal für deine Hilfe

Fred_Pinel

Hi,
switching to English for future reference (officially), and because my Deutsch is bad :-)

Not sure why you need to modify the source files (but that's ok).
Maybe there is a typo in the code sample, but, the line should be:
_oneall.push(['social_login', 'set_custom_css_uri', '<?php echo $widget_settings['css_theme_uri']; ?>']);
And then, change the setting in the plugin's configuration ("Enter an URL to a CSS stylesheet to be used by Social Login:").
Or change the line above to point to the CSS directly (as in your example, but include the 'set_custom_css' part).

Regards

Claude_Schlesser

Hallo Réné,

hast Du eine URL wo ich mir Deine bisherigen Versuche ansehen kann?

Danke,

René_Abel

Ok I repeat once again what I did. First of all I downloaded the css here:
http://public.oneallcdn.com/css/api/themes/beveled_w35_h35_wc_v1.css
After that I modified the needed lines and saved the data as custom.css.
I put the costum.css into a directory of oneallsocialplugin to find back.

I'm using a modified template. In that template I modified the data "index.php" an put in the JavaScript:


/* Replace #your_subdomain# by the subdomain of a Site in your OneAll account */
var oneall_subdomain = 'gabberspider'; --- I replaced in this format

/* The library is loaded asynchronously */
var oa = document.createElement('script');
oa.type = 'text/javascript'; oa.async = true;
oa.src = '//' + oneall_subdomain + '.api.oneall.com/socialize/library.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(oa, s);
_oneall.push(['social_login', 'set_custom_css_uri', 'http://www.mywebsite.com/mod_oneallsociallogin/custom.css']); --- I replaced the url with my own where custom.css is placed.


Am I stupid or is it just too complicated?

Thanks for your help.

Kind Regards

René

Fred_Pinel

Hi,
A few things:
1. Setting a custom CSS requires a paid plan.
2. I guess you are sure that the custom.css is indeed reachable with your URL.
(You can check in your browser that the proper CSS are loaded, etc)
3. In your app.oneall.com application settings, if you selected an existing CSS, then that will get downloaded as well.
So, the rendering will be a combination of the custom.css and the app.oneall.com CSS.
Normally, your custom CSS overrides, but that depends on your rules' selectors.
To be sure, you can also set the option on app.oneall.com to point to your server's custom.css.

Hope this helps.

René_Abel

Ah ok, so you want me to pay for customizing and taking affect of two lines of my own css-file? Wow amazing... Ok... I better finish my web-developper perfect and create my own one in future.
Thank you. ;-)

Fred_Pinel

Hi,
Understand your surprise. The paid features should be clear from the documentation hopefully.