Can someone please instruct me how to add content?
  • Hi. I just installed WP-UI and need help on how to add content. I insert a code and can view the image on my webpage, but I don't know if the content must be linked to the code or if it can be inserted. I do not see a complete image on the page where I insert the code. Thanks in advance for your help.
  • You can find all the documentation here with the sample code - http://kav.in/projects/

    If you need more specific help, be more descriptive please :)
  • Thanks Kavin. I edited the Dark Hive selection and downloaded it as a .wpui-custom css titled wpui-custom. I uploaded it to my cPanel using Filezilla and WP-UI settings found the directory. When I entered the code [wptabs style="wpui-custom"] into a page (http://skytv.tv/uk-packs) I only see the content spoiler and the slider. I am a layman at this, so please excuse my shortcomings. I learn fast.

    I am trying to set up a Tabs menu with pictures and their descriptions, plus a slider that shows image slides (WordPress TV). I read http://kav.in/projects/blog/wp-ui-tabs-accordion-sliders-demo/#more-4 but don't know how to get the images to appear in my wordpress page editor to enter content.
  • No problem my friend, feel free to ask. :)

    Getting the tabs to work is simple. There are three shortcodes
    • [wptabtitle] , which defines the title of the tab
    • [wptabcontent], this holds the content of the tab.
    • repeat the above,for as many tabs needed.
    • [wptabs] , which wraps all the above.


    Each shortcode needs to be closed with the closing shortcode, which is same as the shortcode but a slash after the first square bracket. e.g. [/wptabtitle] , [/wptabcontent[, [/wptabs].

    So the example structure would be

    [wptabs style="wpui-custom"]
    [wptabtitle]First Tab[/wptabtitle]
    [wptabcontent] Contents of the first tab - Images, videos, text and so. [/wptabcontent]
    [wptabtitle] Second Tab [/wptabtitle]
    [wptabcontent] Second tabs contents, respectively. [/wptabcontent]
    [/wptabs]


    My advice is that you finish entering the content in the editor, then place the shortcodes.
  • Thanks Kavin. Just a layman question and thanks for your patience with me. I will complete this instruction and hopefully get back to you with shortly with a positive success reply. I love this plugin and really want it to work. Thanks again for all you do.
  • You're welcome. Thanks and enjoy the plugin. Please feel free to ask for help. :)
  • I entered the following:

    [wpspoiler style="dark-hive"] This shows as a slider with no functionality.

    [wptabs style="dark-hive"] This shows as clickable content spoiler but no content.

    [wptabs]Entertainment[/wptabs]

    [wptabtitle]Entertainment[/wptabtitle] Shows all caps as grey-no function.

    [wptabcontent] No show.

    [/wptabcontent]

    On my page I see this:
    UK PACKS
    Show ContentClick to show

    Entertainment

    Entertainment
    http://skytv.tv/wp-content/uploads/2011/10/Irish-Subscriptions-Prices.png
    Second Tab
    Second tabs contents, respectively.
    [/wptabs]
  • Can't get it working. If I have just one page set up working, I can duplicate the rest. Would it be too much to ask if you could please have a look inside my WordPress? I'll email you the login details if it is okay with you.
  • Tabs , accordions can be implemented with a collection of shortcodes. So each shortcode would not work individually, but rather collectively.

    Additionally i see there are <pre> tags on the source of the post. Please edit the post in HTML editor and remove the pre tags. Also different shortcodes should be on different lines, no empty lines between them.

    I suggest you copy paste the code sample in my previous post into the HTML editor (!important). Shortcodes might not work as expected when using Visual mode editor.

    For spoilers, the content needs to be enclosed like this ->

    [wpspoiler name="Title of the spoiler" style="wpui-custom" ] This will not be
    shown until clicked [/wpspoiler]


  • Sent you a mail, check and get back to me. :)
  • Hi Kavin, I just emailed you login details. If you can log in and create a TEST page that will display I can then use the codes in other pages and posts. I need to include a slider like the one on http://skytv.tv/entertainment-pack

    Then I can get the entire UK Packs on one page and the ROI Packs on another, without sub-pages.
  • That was fast Kavin. Thanks. I need to get the slides into the content. Instead of using tabs or spoilers, how can I use the WordPress TV to show only the selected slides per package? I would like to have my tabs at the top of the page listing each pack and the content to appear under the tab with next and previous arrows. Example: The UK Entertainment Pack has 40 slides in the media library. The ROI Entertainment Pack has 43. The other packs are just 5 to 10 slides.
  • Hi again Kavin. I am able to get text into the tabs, ex:
    [wptabtitle]ENTERTAINMENT PACK [/wptabtitle]
    [wptabcontent]CONTENT 2ND TAB[/wptabcontent]

    How can I add the 40 images to the same tab? Also how can I get the menu tabs centered? Thanks again in advance.
  • Hi Jack, you can just put any content or any shortcode inside the wptabcontent. Most of the shortcodes work out of the box.


    [wptabcontent] [some_shortcode argument="value"] [/wptabcontent]


    :)
  • Hi again Kavin, Hope you had a nice weekend.
    I have another request, if I may. My theme is set to highlight links in red when I mouseover them. But when I insert links into tab content, they don't turn red on mouseover. Is there a way to edit the plugin to get the links to turn red within tabs content?
    Regards, Jack
  • Ahoy!

    Colors are inherited within the jQuery UI theme. You will need to use the custom css panel with something like

    a:hover {
    color : darkred !important;
    }


    Or you can edit the theme to re inforce the style . :)
  • These are the files in the plugin editor. Which of these files is my custom css and where exactly do I insert the new code?

    Plugin Files

    wp-ui/wp-ui.css
    wp-ui/license.txt
    wp-ui/admin/admin-options.php
    wp-ui/admin/wpUI-options.php
    wp-ui/css/admin.css
    wp-ui/css/wpui-all-dev.css
    wp-ui/css/wpui-all.css
    wp-ui/css/jquery-ui-wp-fix.css
    wp-ui/css/PIE.php
    wp-ui/css/wpui-all-ie.css
    wp-ui/css/css.php
    wp-ui/js/wp-ui.js
    wp-ui/js/jquery.easing.1.3.js
    wp-ui/js/admin.js
    wp-ui/js/wp-ui-dev.js
    wp-ui/js/thickbox.js
    wp-ui/js/fix_tb.js
    wp-ui/js/jquery-ui.min.js
    wp-ui/js/init.js
    wp-ui/js/themeswitcher.js
    wp-ui/js/jqui-admin.js
    wp-ui/js/wpui-choosestyles.php
    wp-ui/js/jquery.min.js
    wp-ui/js/wpui-choose-jquistyles.php
    wp-ui/readme.txt
    wp-ui/wp-ui.php

  • You are using a jQuery UI custom theme, right? Then you have to either edit the theme or use the custom css panel to reinforce the styles. Did you try to input the above code into Options page -> Advanced -> Custom CSS panel? :)
  • I don't know where to find the custom css panel or Options page -> Advanced ->. My MobileNews 3.0 Theme Options page does not have this option other than a header or footer insert option for Analytics or webmaster. If I can't find it, can I ask you to do it for me?
  • I finally understood you, Kavin. A bit slow in my head today. I went to Options page -> Advanced -> Custom CSS panel and entered the code. It works! Bless you and thanks again. I'm nearly done with the site, except for the new shopping cart. Thanks again my friend.
  • Thanks, Have a nice day :)
  • Hi again Kavin, One small glitch. Since adding the code using a hex number instead of the term "dark red" in the Options css, my tab text titles vanish on mouseover until I move the mouse away. That means the hover and text colour are the similar or the same. The text should turn red on mouseover with blue background for tab hover and then turn white with red background tab hover colour.

    On clicking a tab, the text remains red instead of changing to the blue colour coded in the custom file. This is also affecting my theme category menu buttons the same way. Their titles also turn red on mouseover and no text is visible after clicking the button. Can you please help me add a code to the Options css that will correct this?
  • Problem solved, Kavin. I experimented with different colours and changed the colour in the code to one that is visible with all menu titles. Thanks again.
  • Hi again Kavin, I just ran into a glitch I only noticed today.

    On my Sky HD Boxes page, http://skytv.tv/sky-hd-boxes-and-accessories
    the [/wptabs] is inserted at the end of DRX595, Accessories and Remotes.

    Remotes is the last tab on this page. But the other 2 [/wptabs] are showing as embedded text at the page botton.

    I initially inserted them, because the created tab sections would not appear as tabs on the URL page unless they were put in. I thought that solved the problem, because the page looked fine online. But today I noticed 2 [/wptabs] showing at the page bottom and I'm unable to remove it.

    I tried to colour it black, but it seems embeded and uneditable.

    Technically, the [/wptabs] should only be inserted at the end of all the created tabs. Can you advise what to do here?

  • Solved this problem, too. Recreated page from scratch step by step. Thanks again.
  • Ahhh sorry m8, got stuck at work today. :(

    BTW, you've come across the wordpress autoformatter. It is a nightmare to complex shortcodes. Generally you can dodge this by using HTML Editor to insert the shortcodes, after you are finished with the content. Also make sure the individual shortcodes are in different line, while same - opening and enclosing shortcodes remain in the same line. If the content holds another shortcode, say for example from another plugin, then just leave a space at the beginning and end. That should do it.
  • Thanks Kavin, It took me a long time to discover that the separate line for individual shortcodes was the problem. Bless you for all you do to help.
  • Hi Kavin,

    I updated the plugin today and suddenly my tabs have reverted to dark-hive instead of the custom settings. The tabs became unformatted. I like the dark-hive, but don't know the shortcode for the tabs to replace the custom shortcode.

    I tried to replace [wptabs style="wpui-custom"] with [wptabs style="dark-hive"] but it changed nothing.

    Can you be so kind and have a look at my site to see what the case is? I need to fix this urgently, because a programmer is starting to work on my shopping cart shipping tables. http://skytv.tv

    Thanks in advance brother.
    Jack
  • Hi Jack, where did you customize or edit the theme last time?
  • Hi Kavin,

    I created the custom theme at TheRoller and haven't edited it since it was first installed. The only change ever made in the plugin options was the extra script you provided when my theme menu titles were being affected and links in the tab areas were not highlighting.

    I prefer the dark-hive theme that is now over-riding my custom settings. I noticed that the tabs I originally titled appear smaller and don't fill the Menu bar width as before. I tried changing tab titles with more text to fill the gaps on the right of the menu bar and that fills the space.

    The only problem I have now is that when I click the any of the first 3 tabs on the home page or first 2 tabs on other pages, they create an extra space at the bottom of the menu bar. The latter tabs don't.

    If you go to the home page and click on either of the first 3 tabs, "Three Steps To Get SkyTV" , "Sky Flexibility" and "Amazing HD", the extra menu bar space appears. On other pages it's the first 2 tabs. I believe it is a spacing problem. Where there is only one row of tabs, the problem doesn't occur. Only with 2 rows.
  • Hi Jack, I recommend the accordions, that might be more suitable and neat looking for your purposes. And tabs with long names might look a bit odd.

    As about the custom themes, please prefix the custom theme with the prefix "jqui-" . For example you can download the custom theme with the name(CSS scope - refer to the tutorial) "jqui-jack" :D

    Additionally you can select a custom theme as default in this version. But it wont work if you use the same name as the default ones - it will try to load the default one. :)
  • Reason I need tabs is so that something of a page appears when a visitor comes to the home page. Accordions conceal content until opened.

    I'm a bit lost on how to re-download a custom theme and replace the existing one. I would like to use the jQuery dark-hive theme with its natural menu colours, as are now being displayed on my site. If you'll do it for me for a fee, I'd be most happy. What do you say, brother? Can I send you the login details?
Start a New Discussion

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter

In this Discussion