Forums

CSS for the New/Remove/Edit Buttons

peterk909 20 Nov, 2013
I'd like to display these horizontally - please can you point me at the CSS location which determines the styling of the buttons. Thanks.
peterk909 21 Nov, 2013
I've found the code that I want to style
<div id="connectivity_front_toolbar" class="btn-toolbar">
	<div id="connectivity_front_toolbar-new" class="btn-wrapper">
	<button class="btn btn-small btn-success" onclick="Joomla.submitbutton('cc_add_data')">
	<span class="icon-new icon-white"></span>
	New
	</button>
	</div>
	<div id="connectivity_front_toolbar-delete" class="btn-wrapper">
	<button class="btn btn-small" onclick="if (document.adminForm.boxchecked.value==0){alert('Please first make a 	selection from the list');}else{ Joomla.submitbutton('cc_delete_data')}">
	<span class="icon-delete"></span>
	Delete
	</button>
	</div>
	<div id="connectivity_front_toolbar-edit" class="btn-wrapper">
	<button class="btn btn-small" onclick="Joomla.submitbutton('cc_edit_data')">
	<span class="icon-edit"></span>
	Edit
	</button>
	</div>
</div>


Which .css file (see attachment) should I add custom css to ? What I need to do should avoid upsetting the Auto Listing = Yes. Thanks
GreyHead 21 Nov, 2013
Hi peterk909,

By default the buttons are displayed horizontally, so the first step is to use your browser web developer tools and see which CSS is actually being applied. You can then edit that file - or probably better and ad over-ride in ChronoConnectivity. There isn't a Load CSS box but it can be added from the WHERE box with a little Joomla! PHP.
<?php
$doc =& JFactory::getDocument();
$style = "
/* add CSS here */
";
$doc->addStyleDeclaration($style);
?>

Bob
peterk909 22 Nov, 2013
Thanks Bob, that's just what I needed to know. For some reason Protostar sets the buttons on top of each other, not vertical, so as you suggest I'm playing with Firebug to identify the CSS causing this. But I'll also test the use of custom php within Chronoconnectivity as you advise - apart from avoiding any issues by modifying the template CSS it will provide useful experience with this method of customisation.
I'll post further when I've got somewhere - or otherwise ! Thanks again.
This topic is locked and no more replies can be posted.