1

[rodeboy]

rodeboy

#8624

I have recently purchased Graphene Mobile NEO and have used the site I have put together for my daughter who is training to be a beauty therapist, to teach myself the features of NEO. The site is at http://www.beauty.org.uk.

All is going very well from my point of view, and I believe I’m getting there, but any feedback is most welcome! Three points I would like to raise in the forum please;

1) I can’t see how to change the font colour and/or the actual wording where it says “ARCHIVE FOR Beauty Blog” on the Blog page. I have the Archive title removed on the desktop version, and would probably do the same on NEO unless it is easy to change the text. Could you please advise the CSS to remove this, and point me in a direction on font colour and text changes?

2) I seem to have lost the “Switch to desktop version” wording in the footer, although I have not deliberately coded to remove it that I can see. Any ideas please?

3) NEO seems to struggle with content that is laid out in tables (yes, I know it’s dated!). I have several sites that use tables for ease of formatting a layout (not beauty.org.uk any longer) and I’m not really looking to create myself a load of extra work by changing them all. I have played about with the “enable responsive tables” and “Auto classify ..” but this still made the page out of balance with the rest. Is my assessment harsh on NEO? Should I be doing something else? I know I should give you a page to look at, but I haven’t got an example at the moment – there was a small table on one of the Beauty.org.uk posts but I have taken that out now.

Thanks as ever for your time on considering my points. The Graphene NEO enhances what is already a great set up with the full Graphene theme.

Happy new year to one and all,

Chris

[Kenneth John Odle]

Kenneth John Odle

#41642

For #1: you can always access the mobile version here:

http://www.beauty.org.uk/?am_force_theme_layout=mobile

Then use Firebug to isolate the elements you need to change and add them to Neo’s Custom CSS feature.

For #2: This control is in the Any Mobile Theme Switcher plugin’s settings, not Neo’s. (I kept forgetting that.) But I noticed yesterday that it was not showing up on the two sites I have Neo installed on. I haven’t had a chance to look into this further.

You can try the mobile theme switchcode, which you should be able to get here:

http://www.beauty.org.uk/wp-admin/options-general.php?page=any-mobile-theme-switcher%2Fplugin_interface.php&settings-updated=true

As far as I can tell, that still works.

#3: Ahem….(Sound of me getting on my soapbox)…The issue here is that tables should be reserved for tabular data, not for page layout. I have seen a lot of web pages that use tables for page layout and there is always something off with them. (I’m responsible for updating one and it’s a real nightmare.) A lot of these come from web “design” software like DreamWeaver. What a nightmare!

Quote:

Is my assessment harsh on NEO?

Well, that depends on how wonky the table is. If it’s a basic table, then Neo should handle it…adequately. But tables for layout will always be an issue. There are just too many variables.

[rodeboy]

rodeboy

#41643

Kenneth, efficient and as helpful as always. Many thanks indeed.

I’ll look into all this in the morning.

Chris

P.S. I knew I would be sent to the naughty step for having used tables!! Ha Ha!

[Kenneth John Odle]

Kenneth John Odle

#41644

Quote:

P.S. I knew I would be sent to the naughty step for having used tables!! Ha Ha!

Lol. The person who develops an app to convert tables to CSS3 and HTML5 will make a fortune.

[rodeboy]

rodeboy

#41645

Kenneth,

#1 – Thanks, I hadn’t realised this was available to me. All sorted now.

#2 – I have just changed from AMTS to AMTS Pro in view of their comments on working with W3 Total Cache, which I use. I suspect this is when I lost the option. However using your code from #1, but just changing ‘mobile’ to ‘desktop’ I have put an additional NEO Footer menu in there with a custom link inserted. The link provided on the AMTS Pro settings page, of http://www.beauty.org.uk/?=desktop, did not work for me.

I can’t see any issues with that can you? I hope that this helps in your research on what happened with your two sites.

#3 – I promise not to use tables ever again – I promise not to use tables ever again – I promise not to use tables ever again ….. etc

Chris

[rodeboy]

rodeboy

#41646

Kenneth, sorry to re-open this one, but since my severe telling off I having been working hard to remove tables from all my WP sites. Do I get a gold star?! The good news is that I am getting there!

My own site where I sell domain names from at http://www.domainline.co.uk has the domains listed in a table and I am struggling to find a suitable way to list the domains in a different manner. So I have left the tables on there for the time being. Any pointers for an alternative would be appreciated.

Giving that they are there, I have coded Graphene Mobile Neo up to work with responsive tables and as you may see it is working okay. The problem I had was that the left hand column which is fixed during the horizontal scrolling of the table was not wide enough to take the full description of some domain names. So I tried to be clever and added a column with width of only 5px hoping this would not be noticed and the table would just scroll. However it appears that the left hand column (when viewed on mobiles) has a fixed width and is ignoring my 5 px column setting. Do you know if there is a way to overcome this please Kenneth?

Many thanks for your time, it really is appreciated.

Chris

[Kenneth John Odle]

Kenneth John Odle

#41647

Quote:

Do I get a gold star?!

Yup.

Quote:

the domains listed in a table and I am struggling to find a suitable way to list the domains in a different manner

This is one of the situations where you would actually want to use tables.

You might try something like this http://p.sohei.org/jquery-plugins/columnmanager/ so that users can toggle columns on and off themselves. I haven’t played around with it, but it seems promising.

[rodeboy]

rodeboy

#41648

I fear that the coding involved in that plugin may be one step too far for me. Thanks for finding it for me though, Kenneth.

I am re-assured that the use of tables here is suitable! The pages loads/views fine on desktop versions, so if I could just amend the width of that left hand column when the site is viewed using GM Mobile NEO I think that I would have a workable solution.

To summarise I have added and coded the left hand column to be 5px, and this is not noticed on desktops. However GM Mobile NEO seems to have a fixed width left hand column and ignores my 5px settings (i.e. reducing that column width to 5px made no difference on a mobile viewed version). I would like to reduce that width as the white space is unnecessary. Is there a simple CSS code I can insert that you know of?

You can hopefully see what I mean on http://domainline.co.uk/domain-names/250-domain-names/

Trust that this is clear!

Many thanks, Chris

[Syahir Hakim]

Syahir Hakim

#41649

The simplest solution here might be to use list <ul> instead of a table. You could have three <ul> elements, each for a column. Then using Custom CSS on desktop theme, give those lists something like 33% width and float them to the left. This will make the domains appear in three columns as they currently do.

Because the additional CSS is added on the desktop theme’s Custom CSS feature, they won’t be applied for the mobile theme. Therefore visitors on mobile browsers will see the domains as a single-column list instead, which in my opinion is more appropriate for mobile view.

[rodeboy]

rodeboy

#41650

Brilliant idea Syahir! Thanks. I have implemented this with the following code and I would appreciate your confirmation that this is what you had in mind please. The only issue I seem to be having is the space at the top of the first column (on desktop view) that then knocks the alignment out. The display on mobiles, with GM NEO is spot on!

<div class=”columns”>

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

etc

</div>

with CSS of;

.columns {

-moz-column-count: 4;

-float: left;

-width: 25%;

}

Cheers, Chris