Solved

Getting rid of Button with Cog wheel from Bootstrap.css

Posted on 2014-02-27
16
495 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
  • 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
 
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 52

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 52

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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 52

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 52

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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

707 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now