Getting rid of Button with Cog wheel from Bootstrap.css

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
LVL 9
Rowby GorenAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rowby GorenAuthor 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
0
Neil_BradleyWeb UX/UI DeveloperCommented:
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
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rowby GorenAuthor 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
0
Determine the Perfect Price for Your 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 with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Neil_BradleyWeb UX/UI DeveloperCommented:
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
0
Rowby GorenAuthor 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
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Just remove

<span class="icon-cog"></span>
0
Rowby GorenAuthor 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
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
yes, that span class is just calling up one of the icons.  See the glyphs http://getbootstrap.com/components/
0
Rowby GorenAuthor 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

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
Rowby GorenAuthor 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
0
Rowby GorenAuthor 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
0
Rowby GorenAuthor 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

0
Rowby GorenAuthor Commented:
Thanks Neil and Scott for helping troubleshoot this!

Rowby
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
Rowby GorenAuthor 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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.