Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Getting rid of Button with Cog wheel from Bootstrap.css

Posted on 2014-02-27
16
Medium Priority
?
603 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 1000 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 54

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 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1000 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 54

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 54

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…
Suggested Courses

885 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