Getting rid of Button with Cog wheel from Bootstrap.css

Rowby Goren
Rowby Goren used Ask the Experts™
on
Hello

Apparently twitter bootstrap has a way of handling standard "print" and "mail" links.  It's a button with a cogwheel on it.

My client doesn't like that and just wants text links.

That is  Just Print and Mail as text links to activate the Print and Mail functions in the web page.

In my next questions I will give the links.

Thanks!

Rowby
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
BTW I may have asked this question before on EE, but I don't think so. In any case, I didn't get a solution that my client wants.

Here a link to the site.  Site

The twitter-bootstrap button is apparently controlled by div class btn-group pull-right.

How can we remove the gui for this and just show, in this case, the bare-bones Print html  text link.

Thanks

Rowby
Web UX/UI Developer
Commented:
Hi Rowby,
just remove the button completely (the entire "btn-group pull-right" div) and add the html to create a regular text link that triggers the print
<a href="/hasom-front-page-2/print" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow">Print</a>

Open in new window

Cheers,
N

Author

Commented:
Hi

I will try that.  I assume there is no easy way to keep the html and do it all via the custom.css file sheet.

Rowby
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Neil_BradleyWeb UX/UI Developer

Commented:
Via css in this case would be solving the problem the long way.
Update your html to remove the button completely and replace it with a simpler text link and the problem is solved.
N

Author

Commented:
Ok.  Let me dig into the HTML code (it's a content managent system) and try your suggestion

Sounds like the way to go!

Rowby
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Just remove

<span class="icon-cog"></span>

Author

Commented:
Hi Scott,

I guess that's in the html, not in the css???
<span class="icon-cog"></span>

Open in new window


And that will leave the "Print" text?

Rowby
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
yes, that span class is just calling up one of the icons.  See the glyphs http://getbootstrap.com/components/

Author

Commented:
Hi

As I dig through the HTML I'm finding that i cannot just remove the icon-cog.  It calls up a popup box.  I've tried every type of modification and without the icon-cog the print/email popup won't work.  

I would prefer to have no popup and embed the print and email technology.   But I'd have to dig deeper into the CMS than I want to.

So instead of the icon-cog  can I replace it with some text.   Or add some text including the i icon-cog.

Here's the PHP that controls it.... If that's any help.  I realize this is the css section of EE, but I think you might be able to see what needs adding and replacing in the php)

<?php if (!$this->print) : ?>
		<?php if ($canEdit || $params->get('show_print_icon') || $params->get('show_email_icon')) : ?>
		<div class="btn-group pull-right">
			<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <span class="icon-cog"></span> <span class="caret"></span> </a>
			<?php // Note the actions class is deprecated. Use dropdown-menu instead. ?>
			<ul class="dropdown-menu actions">
				<?php if ($params->get('show_print_icon')) : ?>
				<li class="print-icon"> <?php echo JHtml::_('icon.print_popup', $this->item, $params); ?> </li>
				<?php endif; ?>
				<?php if ($params->get('show_email_icon')) : ?>
				<li class="email-icon"> <?php echo JHtml::_('icon.email', $this->item, $params); ?> </li>
				<?php endif; ?>
				<?php if ($canEdit) : ?>
				<li class="edit-icon"> <?php echo JHtml::_('icon.edit', $this->item, $params); ?> </li>
				<?php endif; ?>
			</ul>
		</div>
		<?php endif; ?>
		<?php else : ?>
		<div class="pull-right">
		<?php echo JHtml::_('icon.print_screen', $this->item, $params); ?>
		</div>
	<?php endif; ?>

Open in new window

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Line 4 above
                  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <span class="icon-cog"></span> <span class="caret"></span> </a>

If you can't replace it manually, we can try adding some jquery to remove it.

Author

Commented:
Hi Scott,

I removed it.  However now there are no print or email icons -- because of the lack of the popup/ dropdown.    Link to page

There may be no easy solution?

<?php if ($params->get('show_title') || $params->get('show_author')) : ?>
	<div class="page-header">
		<h2>
			<?php if ($this->item->state == 0) : ?>
				<span class="label label-warning"><?php echo JText::_('JUNPUBLISHED'); ?></span>
			<?php endif; ?>
			<?php if ($params->get('show_title')) : ?>
				<?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
					<a href="<?php echo $this->item->readmore_link; ?>"> <?php echo $this->escape($this->item->title); ?></a>
				<?php else : ?>
					<?php echo $this->escape($this->item->title); ?>
				<?php endif; ?>
			<?php endif; ?>
		</h2>
	</div>
	<?php endif; ?>
	<?php if (!$this->print) : ?>
		<?php if ($canEdit || $params->get('show_print_icon') || $params->get('show_email_icon')) : ?>
		<div class="btn-group pull-right">
		
			<?php // Note the actions class is deprecated. Use dropdown-menu instead. ?>
			<ul class="dropdown-menu actions">
				<?php if ($params->get('show_print_icon')) : ?>
				<li class="print-icon"> <?php echo JHtml::_('icon.print_popup', $this->item, $params); ?> </li>
				<?php endif; ?>
				<?php if ($params->get('show_email_icon')) : ?>
				<li class="email-icon"> <?php echo JHtml::_('icon.email', $this->item, $params); ?> </li>
				<?php endif; ?>
				<?php if ($canEdit) : ?>
				<li class="edit-icon"> <?php echo JHtml::_('icon.edit', $this->item, $params); ?> </li>
				<?php endif; ?>
			</ul>
		</div>
		<?php endif; ?>
		<?php else : ?>
		<div class="pull-right">
		<?php echo JHtml::_('icon.print_screen', $this->item, $params); ?>
		</div>
	<?php endif; ?>

Open in new window


(Of course I have a backup of the php to restore it back.... :)

That is why I am now thinking as a work-around of replacing (or adding to) the cog icon with text that says something like "Click for Print" -- client feels the cog icon is not clear enough to visitors -- which is why I am trying to do this.

Rowby

Author

Commented:
Actually here may be the simplest solution.'

If instead of the cog icon there could be text that says Print and when clicked on it brings up a print dialog box to print the page.

That would be all I need.   Is that some standard css / php thingie?  Perhaps decorate it a bit as a button?

Rowby

Author

Commented:
Hi

I found a good workaround.  Here it is.

	<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <span class="icon-cog"></span> PRINT <span class="caret"></span> </a>

Open in new window

Author

Commented:
Thanks Neil and Scott for helping troubleshoot this!

Rowby
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
I don't see how that is a work around?  You still have the code, <span class="icon-cog"></span>  All you need to do is take that out.  At least you have it working.

Author

Commented:
The problem is the Icon Cog is okay.  Removing all the other stuff left out the ability for the dropdown to work revealing the print menu.

I think it's okay to show the cog as long as the word PRINT is showing.  That is what the client had concerns about.  The client felt just showing the cog would not be clear to the visitor what the cog was about.  Now it clearly shows the cog is for PRINT.   I will remove the cog if the client wants the cog icon removed.

The main thing is "it's working".

I tried just using a print command I found elsewhere on the net, but it printed the page in a weird way.  This built in Joomla "print" function just prints the page neatly.

:)
Thanks!

Rowby

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial