Home / Forums / DynamiX Support / Other customization questions

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts

  • Diego Meozzi
    Participant

    While waiting for an answer to my previous topic I opened a couple of days ago, I've come up with another series of questions on how to customize your theme:

    1. 1) If enabled, social icons now add an extra space above the title/subtitle section. Is it possible to make them appear on the same line of the title, on the right?
    2. 2) Activating comments also on pages is very nice. However, I would love to keep all comments inside an accordion, so to make those comment appear only when the accordion title is being clicked. Is there a way to do it?
    3. 3) I have noticed that text bullets (HTML code •) don't appear if placed on titles or subtitles, while on any other section (main content, sidebars, footer) they are being shown with no problem. Is it a bug or is there a way to make them appear on titles or subtitles too?

    Hope to get some help with these issues (and the ones outlined on my previous post)

    Thanks!

    Andy
    Andy
    Keymaster

    Hi Diego,

    Sorry I'm answering this in reverse.

    1) Not easily no – it was done like that due to having upto having two columns and large title would interfere. 

    2) You would have to manually add reveal code to the page.php file. This is the code for reveal: 


    <div class="revealbox blue clearfix" '. $width .'><h4 class="reveal"><span class="ui-icon"></span>Explore site map</h4><div class="reveal-content"> COMMENT CODE </div></div>

    3) Do you have cufon enabled? If so it will probably be because of this. Cufon can be quite intensive on loading if you all characters are included. You can reconfigure a font via the cufon website and include the characters sets you require. 

    I hope that helps. 


    Diego Meozzi
    Participant

    Thanks Andy for your replies:

    1) In that case, would you take in consideration the option to allow users place those Social Icons at the bottom of the article or (even better) via shortcodes?

    2) Your code worked beautifully – Thans so much!

    3) Yep – that was caused by Cufon, which was activated by default (I didn't realize it)

    I've got a few more questions for you though:

    a) Is there a way to disable borders and backgrounds on a selected table? I created one with this CSS code:

    .ratingTable td {padding:4px 0 4px 0px;}

    .ratingTable table {margin-top: 0; border: none !important;}

    But it didn't work, so I was forced to disable borders and bg from ALL tables with this code:

    .content-wrapper-inner th,.content-wrapper-inner tr,.content-wrapper-inner td,.content-wrapper-inner tfoot,.content-wrapper-inner table { border:none !important; background: none !important; }

    Any idea why the styling of a custom table does not work?

    b) The dyntabs container does look a bit less wide than the text container on a page. Is there a way to make its width 100%, because as it is now looks a bit smaller than the text put above it on a page or post

    c) It looks that there are huge problems using Google Maps inside a tab. Do you know of ANY map plugin that does work inside a tab of your theme?

    d) I noticed some strange (minor) problems while viewing a DynamX page on an iPad:

    1) When viewed in landscape mode, there is a thin vertical grey line near the middle of the right sidebar

    2) The text and separator line of the bottom footer is definitely shorter than it should be (it's about 95% – the line and text is shifted to the left by about 70-80px)

    3) The blue jquery graphic elements (the arrow near the search bar, the text size selector, the + sign of the reveal content bar) are being shown with thin blue lines

    4) The jquery Tabs show a thin grey line also below the selected tab, which breaks the readability of the tabbed box

    Thanks for your help!

     

     

    Andy
    Andy
    Keymaster

    Hi,

    a) Because of the way the initial styling is addressed you have to address it in a similar fashion but with the extra class. e.g.

     .content-wrapper-inner table.ratingTable {}

     .content-wrapper-inner table.ratingTable td {}

    b) It's probably because of the shadows – it is set to 100% but you'll find this class has padding. Just remove the padding or set to 0 in the style.css .

    .ui-tabs {

    c) It's a case of Google maps inside jQuery – I don't think there is a lot you can do about this. What's the behaviour? 

    d) I have no idea why these are caused on the safari mobile version – it's very strange, it's something I need to a take look at as it's bugged me but there is no easy fix. Especially as when you zoom in the defects start to disappear. 


    Diego Meozzi
    Participant

    Hi Andy – thanks for the replies. Here are some other notes regarding these issues:

    a) I believe the .content-wrapper-inner inheritance is related to the main container – how should I change it in case of a table to style in one of the sidebars?

    b) Done with .dyntabs {padding:0;} – thanks.

    c) It's the infamous Google Maps API v3 + jQuery UI Tabs conflict. It has been discussed over many webpages, with several possible solutions, but as you developed the tabs code a bit differently from the examples given, I'm stucked right now… For your info, the bug makes any Google Map put inside a tab (but the front one) almost unreadable, with less than 1/4 of the rendering complete (usually the upper left corner) and the map center shifted way off the canvas. You can find more info here

    Problems with Google Maps API v3 + jQuery UI Tabs

    http://stackoverflow.com/questions/1428178/problems-with-google-maps-api-v3-jquery-ui-tabs

    jQuery Tabs and Google Maps

    http://www.raymondcamden.com/index.cfm/2009/6/5/jQuery-Tabs-and-Google-Maps

    How to render Map inside jquery tabs on tab click

    http://blog.codez.in/how-to-render-map-inside-jquery-tabs-on-tab-click/jquery/2011/08/24

    I really hope you can find a solution to this probnlem!

    d) I discovered additional issues while viewing your theme with an iPad. Namely:

    1) While viewing images thrlough Lightbox, the dark background leaves a wide gap to the right. It's exactly as wide as the separator line gap detailed at point d2 on my previous post

    2) Often the drop down menus remain stucked in the "open" position, unless the page is being reloaded

    3) Often passing from one webpage to another cause the new page to appear enlarged (and it can't be resized with hand gestures)

    Thanks for your help!

     


    Diego Meozzi
    Participant

    Issues still standing:

    a) How to stylize tables when placed on sidebars

    b) How to use ANY Google Map plugin inside a jQuery tab

    c) Inconsistencies while viewiing theme on iPad

    Thanks for your help!

    Andy
    Andy
    Keymaster

    a) The class includes the sidebar as well. 

    b) I've modified to suit DynamiX tabs but you'll need to change the part in bold to the tab number you're using. Add this code to the DynamiX/footer.php at the bottom within the last <script> tag. it ends with //–> <script>. Let me know how it goes. 

    $(function(){

    $(‘.dyntabs’).tabs();

    $(‘.dyntabs’).bind(‘tabsshow’, function(event, ui) {

    if (ui.panel.id == “tabs-2″) {

    initialize();

    }

    });

    });

     

    function initialize() {

    if (GBrowserIsCompatible()) {

    var map = new GMap2(document.getElementById(“map_canvas”));

    map.setCenter(new GLatLng(37.4419, -122.1419), 13);

    map.setUIToDefault();

    }

    }

     

    c) The issue is a bug with mobile safari – the only workaround is adding the following to the header.php within the head section.

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">


    Diego Meozzi
    Participant

    a) You are right – I corrected the code and now it does work.

    b) Tried your js code, but unfortunately it does not work: only about 25% of the total area of the map is visible on the upper left corner, the centre map is heavily shifted and the marker is put outside the map boundaries. The display problems are present also when moving or zooming the map. Below is the default aspect of ANY Google Map when placed inside a DynamiX jQuery tab:

    Do you have any other possible solution for this problem?

    c) Well, I tried to add this code and these are the additional problems it causes:

    1. 1) The webpages can be fully viewed only in landscape mode. When in portrait mode, the right side of the pages is being cut and what is worse, users cannot change the size of the webpages to see them fully.
    2. 2) In protrait mode, the thin line at the bottom stops around at the same distance of the right sidebar

    The dropdown menu bug – that remains always open when activated – is always visible in iPads and iPhones…

    Andy
    Andy
    Keymaster

    Hi Diego,

    b) Was the map worse than that before? 

    c) Unfortunately I don't know what to suggest – it is a bug with mobile safari and that's the suggested fix. 


    Diego Meozzi
    Participant

    Hi Andy,

    b) It's exactly as it was before.

    BTW, I've been to told that this problem can be fixed – and here is a jQuery-driven tabbed interface example with a 100% working Google Map inside one of the tabs – you may discover how to modify your code to allow this function fully working in your theme too:

    http://wp.leapingbytes.net/?page_id=7

    c) OK – I give up on this one, and it's not a huge bug fortunately…

    Andy
    Andy
    Keymaster

    Hi Diego,

    Did you cahnge the 'tabs-2' part of the code to the tab number the map is within? That code is what they suggest – I'll try to test it later on my server as well. 


    Diego Meozzi
    Participant

    Yes of course, as I'd like to show my maps always on the 4th tab, I put this code:

    $(function(){

    $('.dyntabs').tabs();

    $('.dyntabs').bind('tabsshow', function(event, ui) {

    if (ui.panel.id == "tabs-4") {

    initialize();

    }

    });

    });

    Adding the initialization function too… Still not working though. Hope you can find the right code to get rid of this Google Map display bug.

    Andy
    Andy
    Keymaster

    What exact plugin are you using? I've just used a normal iframe (from google maps) and it works fine with that without the code fix? Also what browser are you using?


    Diego Meozzi
    Participant

    I'm using Comprehensive Google Map Plugin (http://initbinder.com/comprehensive-google-map-plugin). And I can tell you that I have tried also the following plugins:

    Flexible Map

    Google Maps – GPX Viewer

    Google Maps v3 Shortcode

    MapPress Lite

    Pronamic Google Maps

    http://wordpress.org/extend/plugins/pronamic-google-maps/

    All of them are showing the same display problem if a Google Map is placed inside a jQuery tab. So I believe it is a quite widespread bug.

    My main browsers are Safari 5.1.3, Firefox 10.0.2 and Chrome 17.0.963.56

    Hope this helps to find and squash that nasty bug…


    Diego Meozzi
    Participant

    After more than 10 days we are back to square one with that Google Map API v3 bug… Is there any chance to find a solution so to allow me to use any Google Map inside a tabbed content area?

    Thanks for your help

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.