Solved

Getting rid of Button with Cog wheel from Bootstrap.css

Posted on 2014-02-27
16
558 Views
Last Modified: 2014-03-02
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
0
Comment
Question by:Rowby Goren
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 4
  • 2
16 Comments
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39893137
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
 
LVL 5

Accepted Solution

by:
Neil_Bradley earned 250 total points
ID: 39893407
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39893429
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 39893441
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39893520
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
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39893541
Just remove

<span class="icon-cog"></span>
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39893553
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
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
ID: 39893574
yes, that span class is just calling up one of the icons.  See the glyphs http://getbootstrap.com/components/
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39896640
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
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39896648
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39896673
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39896704
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39898756
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
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39898758
Thanks Neil and Scott for helping troubleshoot this!

Rowby
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39899141
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39899184
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question