Steak House Icons Size (changed) on Header

GK User
Sat May 23, 2015 11:29 am
Hello

I was playing with Steak House Quick Start for Joomla 3 on localhost XAMPP 5.6.8 (latest version)
on windows 8.1 PRO 64BIT

The general Settings and versions are:

PHP Built On Windows NT ASUS 6.3 build 9200 (Windows 8.1 Business Edition) i586
Database Version 5.6.24
Database Collation latin1_swedish_ci
PHP Version 5.6.8
Web Server Apache/2.4.12 (Win32) OpenSSL/1.0.1l PHP/5.6.8
WebServer to PHP Interface apache2handler
Joomla! Version Joomla! 3.4.1 Stable [ Ember ] 21-March-2015 20:30 GMT
Joomla! Platform Version Joomla Platform 13.1.0 Stable [ Curiosity ] 24-Apr-2013 00:00 GMT
User Agent Mozilla/5.0 (Windows NT 6.3; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0



The default settings for Module Header (Custom HTML) are:

<h1 data-scroll-reveal="enter top over .5s after 0s">The Best Steak House is Here</h1>
<h2 data-scroll-reveal="enter bottom over .5s after .15s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper orci semper tempus.</h2>
<p><a href="#restaurant" class="btn" data-scroll-reveal="enter bottom over .5s after .25s">Discover our restaurant</a></p>
<ul class="gk-short-menu">
<li data-scroll-reveal="enter bottom over .5s after .25s"><a href="#menu"><em class="gk-icon-dinner-set-solid"></em> <span>Menu</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after .5s"><a href="#specials"><em class="gk-icon-bottle-glass-solid"></em> <span>Specials</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after .75s"><a href="index.php/gallery"><em class="gk-icon-gallery-solid"></em> <span>Gallery</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after 1s"><a href="index.php/reservation"><em class="gk-icon-calendar-solid"></em> <span>Reservation</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after 1.25s"><a href="#location"><em class="gk-icon-map-path-solid"></em> <span>Location</span></a></li>
</ul>



As an experiment, I removed the 1st icon to only show the link "MENU" with a solid white border so

I replaced :

<li data-scroll-reveal="enter bottom over .5s after .25s"><a href="#menu"><em class="gk-icon-dinner-set-solid"></em> <span>Menu</span></a></li>

with:

<li data-scroll-reveal="enter bottom over .5s after .25s"><a href="#menu"><span style="border-style: solid; border-width: thin; border-color: #ffffff; padding: 10px;">Menu</span></a></li>

Although other icons were changed in size without touching their code,
the result for the link "MENU" was as I expected and wanted:
IMG1.jpg


The Problem:

When tried to revert the situation by exactly pasting (no erros) the previously copied original code into the module (as it is on "The default settings for Module Header"), the Icons did not reverted to its original size,
as can be seen:
IMG2.jpg



After revert all by the above description
all should be like this (the original aspect)
IMG3.jpg



Even after do all this in the indicated sequence:
clean joomla cache, clean firefox cache, logout site admin, exit firefox, restart xampp, restart firefox

Can any one help me

Does any one had this kind of problem?

Lots of thanks

Miguel Garcia
User avatar
Junior Boarder

GK User
Mon May 25, 2015 3:55 pm
You need to post your site somewhere live, only then I'll be able to help you.
Also please disable tineMCE, it might interrupt with original html code.
User avatar
Moderator

GK User
Thu May 28, 2015 10:36 am
Hi


1- "Also please disable tineMCE" : I'm not using it, I'm using JCE

2-
Sorry, I forgot the link. Here it is

"http://www.webdesignportugal.net/temphost3"

thanks

Miguel Garcia
User avatar
Junior Boarder

GK User
Sun May 31, 2015 9:26 am
You need "i" elements, not "em" elements:
Code: Select all
<ul class="gk-short-menu">
<li data-scroll-reveal="enter bottom over .5s after .25s"><a href="#menu"><i class="gk-icon-dinner-set-solid"></i> <span>Menu</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after .5s"><a href="#specials"><i class="gk-icon-bottle-glass-solid"></i> <span>Specials</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after .75s"><a href="index.php/gallery"><i class="gk-icon-gallery-solid"></i> <span>Gallery</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after 1s"><a href="index.php/reservation"><i class="gk-icon-calendar-solid"></i> <span>Reservation</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after 1.25s"><a href="#location"><i class="gk-icon-map-path-solid"></i> <span>Location</span></a></li>
</ul>
User avatar
Moderator

GK User
Mon Jun 01, 2015 12:19 pm
Yes, I understand.

But... The original ones were em elements, as you can see from the code above (and not "i" ones).

Thanks

Miguel
User avatar
Junior Boarder

GK User
Mon Jun 01, 2015 4:03 pm
1. Are we talking about steakhouse or quark - steakhouse?
2. I have just checked on our demo server and in quickstart - and those elements should be "i" elements from the start.
User avatar
Moderator

GK User
Tue Jun 02, 2015 11:17 am
Hello

We are talking about SteakHouse, no doubts ( quark - steakhouse does not exist, the nearest name is quark - restaurant ).

I discovered the following differences in the visualization of the default code inside SteakHouse quickstart default Header module custom html code:

Viewed with Tiny MCE: There is neither "i" nor "em"

<h1 data-scroll-reveal="enter top over .5s after 0s">The Best Steak House is Here</h1>
<h2 data-scroll-reveal="enter bottom over .5s after .15s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper orci semper tempus.</h2>
<p><a class="btn" href="#restaurant" data-scroll-reveal="enter bottom over .5s after .25s">Discover our restaurant</a></p>
<ul class="gk-short-menu">
<li data-scroll-reveal="enter bottom over .5s after .25s"><a href="#menu"> Menu</a></li>
<li data-scroll-reveal="enter bottom over .5s after .5s"><a href="#specials"> Specials</a></li>
<li data-scroll-reveal="enter bottom over .5s after .75s"><a href="index.php/gallery"> Gallery</a></li>
<li data-scroll-reveal="enter bottom over .5s after 1s"><a href="index.php/reservation"> Reservation</a></li>
<li data-scroll-reveal="enter bottom over .5s after 1.25s"><a href="#location"> Location</a></li>
</ul>

Viewed with JCE: There is "em"

<h1 data-scroll-reveal="enter top over .5s after 0s">The Best Steak House is Here</h1>
<h2 data-scroll-reveal="enter bottom over .5s after .15s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper orci semper tempus.</h2>
<p><a href="#restaurant" class="btn" data-scroll-reveal="enter bottom over .5s after .25s">Discover our restaurant</a></p>
<ul class="gk-short-menu">
<li data-scroll-reveal="enter bottom over .5s after .25s"><a href="#menu"><em class="gk-icon-dinner-set-solid"></em> <span>Menu</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after .5s"><a href="#specials"><em class="gk-icon-bottle-glass-solid"></em> <span>Specials</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after .75s"><a href="index.php/gallery"><em class="gk-icon-gallery-solid"></em> <span>Gallery</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after 1s"><a href="index.php/reservation"><em class="gk-icon-calendar-solid"></em> <span>Reservation</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after 1.25s"><a href="#location"><em class="gk-icon-map-path-solid"></em> <span>Location</span></a></li>
</ul>


What could justify this viewing difference of the same code?

NOTE: Although having nothing to do with this post, can I ask you to please take a look at MO for J3, "Header 1 image size and replacement" post. Sorry to ask but I really need to solve this other problem.


Lots of thanks in advance,

Miguel Garcia
User avatar
Junior Boarder

GK User
Fri Jun 05, 2015 2:57 pm
The problem is with tinyMCE which modifies the code.
Please disable tinyMCE editor in global configuration (change editor to "editor - none").
You might also find some help in this article:
https://www.gavick.com/documentation/un ... d-editors/
User avatar
Moderator

GK User
Tue Jun 09, 2015 2:31 pm
Hello

I think I understood what you said in the answer and I also have been reading the suggested article.

Questions are:

1- From what I read in the article, those changes could put the website at risk, or at least most prone to it, couldn't they?

2- If yes, could this be solved by reverting those settings to their original state, after editing and save what I need in a module or article (for example).

This way I can edit what I need in a module or article, without code being changed or striped out by editors, because after saving them, nothing will be changed even if I revert the original settings.

I'm I right? Or... Does this approach of mine tells you I'm in the wrong way?


Thanks again,

Miguel Garcia
User avatar
Junior Boarder

GK User
Tue Jun 09, 2015 2:54 pm
Hi again

I tested it with editor=none and it works.

So if, even if I have JCE in use, I set editor=none in global settings before make the changes I want in a module or article which is more "code based", it will also work well .

This way I will need not to change any settings more than this, so I will not need to go to the several changes in configuration stated in the article you suggested above).

After editing what I want in a module or article, I can revert again to editor= JCE again.

I'm I right?


Thanks again,

Miguel Garcia
User avatar
Junior Boarder

GK User
Tue Jun 09, 2015 3:06 pm
Hello, one more time...

Do you know any joomla 3.x extension that can turn off the editor (Tiny MCE or even JCE) directly (without going to the global
configuration stettings)?

I mean any extension that adds a button to do this immediately when we want to do it.

thanks again

Miguel Garcia
User avatar
Junior Boarder

GK User
Tue Jun 09, 2015 3:29 pm
I found one

http://extensions.joomla.org/extensions ... tch-editor

this way I will not need to go to global settings and I can disable editor or change editor on the fly.
User avatar
Junior Boarder

GK User
Wed Jun 10, 2015 12:23 pm
You are absolutely right - changing editor to none is the easiest way. Modifying JCE configuration might cause problems but only if user doesn't know what he does and past custom html without control.
User avatar
Moderator


cron