WordPress.org

Ready to get started?Download WordPress

Forums

How to create tabs with icons on each tab? (33 posts)

  1. Tony
    Member
    Posted 2 years ago #

    I've been searching for hours and can't seem to find anything. Tried a bunch of plugins but still nothing.

    How can I create four tabs for content on a page with a little icon (image) next to the title on each tab?

    Help is much appreciated as always.

    -Tony

  2. Tony
    Member
    Posted 2 years ago #

    So I guess this is not possible?

  3. ravZen
    Member
    Posted 2 years ago #

    If your navbar is an image just add icons and adjust as needed. Tedious but possible

  4. Tony
    Member
    Posted 2 years ago #

    What do you mean? I'm not looking to use a navigation bar... I just want tabs (with icons on them) to seperate content on one specific page.

  5. Tony
    Member
    Posted 2 years ago #

    Can someone PLEASE tell me how to do this?

  6. Tony
    Member
    Posted 2 years ago #

    Can anyone at least point me in the right direction as to how to learn how to do this?

  7. Tony
    Member
    Posted 2 years ago #

    Is there a new way I have to ask questions in forum or something?

    If no one is going to help or point me in the right directioon then can someone at least tell me if this is or isn't possible?

    I've been searching all over the web for over a week and I can't figure out how to do this.

    Is it not possible?

  8. jason_lane
    Member
    Posted 2 years ago #

    It's definitely possible, but how easy it would be might depend on several factors.

    Firstly, are you trying to do this without modifying or adding any code to the theme or plugins? ie. Are you purely a "user" or are you capable of doing some coding yourself? If you can't find a plugin or theme that does what you want, then you're gonna have to write some code or get somebody to do it for you.

    If you want a starting point, I'd say that what you want is probably some CSS to add the icons to the tabs. This is assuming that you've at least successfully got the tabs to work. Adding icons to tabs would be very easy for most web developers (Hint: CSS background property). But then there's the added complexity of how to choose which icons go onto which tab. Are these icons going to be pretty much fixed, or do you want the icons to be selected by the user when editing the content?

    There are a lot more questions I could ask, but really what I'm saying is that in order to give you a better answer, I'd need to know a lot more detail about what exactly you want to accomplish, and what your skill level is.

    Hope this helps a little.

  9. Tony
    Member
    Posted 2 years ago #

    "Firstly, are you trying to do this without modifying or adding any code to the theme or plugins? ie. Are you purely a "user" or are you capable of doing some coding yourself?"
    -Not sure what you mean exactly but sure I'd prefer to do this without modifying or adding any code to the theme or plugins. I'm not just a user... I'm the admin and I think I'm capable of doing coding myself but it would probably take time for me to learn.

    "If you can't find a plugin or theme that does what you want, then you're gonna have to write some code or get somebody to do it for you."
    -Any suggestions on where I can find someone to do it for me? I'll pay them if I have to.

    "Adding icons to tabs would be very easy for most web developers (Hint: CSS background property). But then there's the added complexity of how to choose which icons go onto which tab. Are these icons going to be pretty much fixed, or do you want the icons to be selected by the user when editing the content?"
    -All I want is four tabs with one icon on each... First tab contains the word 'Football' and a little football icon next to it... second, third, and fourth tab contain the words 'Hockey' with puck icon, 'Baseball' with baseball icon, and 'Basketball' with basketball icon.

    Anything else you can help with? Like I said I don't mind paying someone to do this... I'm just not sure where to find the person.

  10. Hi Tony,

    What is the webpage where you are trying to do this?

  11. Tony
    Member
    Posted 2 years ago #

    http://www.theifhl.com

    Page is same as the home page of that site. I simply want four tabs with icons on each tab to separate content on home page.

  12. wprock
    Member
    Posted 2 years ago #

    Where is the four tabs on home page? I am not getting that. I saw your post at Elance.

  13. Tony
    Member
    Posted 2 years ago #

    I don't have the tabs... that's what I want help with... creating those tabs (see above).

  14. wprock
    Member
    Posted 2 years ago #

    Ok. then just need CSS changes.

  15. Okay, there are going to be a few different steps here.

    First, create a custom CSS like this:

    #my_tab_style {
       font-size: 28px;
       color: red;
       width: 300px;
       background-color: #000000;
    }

    You can play around with the values.

    Then, in your post where you want the tab to display, use something like:

    <div id="my_tab_style">THIS IS MY TAB</div>

    Once that works for you, let me know and I'll explain the rest.

  16. wprock
    Member
    Posted 2 years ago #

    Please check this link http://premiumdomainfinder.com/blog/. Sidebar have tab options. But you want to add icon for every tabs next to the title. Am I correct?

  17. Tony
    Member
    Posted 2 years ago #

    @wprock - correct. I want to add little icons to the left of each title.

    @Josh - So far so good... what's next?

  18. Tony
    Member
    Posted 2 years ago #

    @Josh - Exactly where should I place the custom CSS in the style.css theme file? I placed it at the bottom of the file and the tab is not showing up on the page. Should I place is somewhere else?

  19. Okay, are these your "tabs"? Hottest team in the IFHL:, Top 10 Goals and Top 5 Players of the first week of the IFHL season, etc??

    EDIT: I see now these aren't it. What content are you trying to divide with the tabs? Is it all on one post/page?

  20. Tony
    Member
    Posted 2 years ago #

    @Josh - Here is the page I'm using it on:
    http://theifhl.com/tabs-for-page/

    I placed the custom CSS in the content div section of the style.css file so now it seems to work.

  21. Tony
    Member
    Posted 2 years ago #

    @Josh - I added the icons to the page and some content that I want to display under each tab.

  22. Okay, looking good.

    Now, just move the div of each tab to each area where you want it to display.

  23. Tony
    Member
    Posted 2 years ago #

    @Josh - Ok I did that and it looks like maybe the HTML needs work?

  24. Maybe I misunderstood you.

    Are you trying to create tabs that appear next to one another and load separate content when clicked? Like a menu?

    Or, are you just wanting to insert some tabs, as dividers, to separate your content down the page?

  25. Tony
    Member
    Posted 2 years ago #

    Yes, I am trying to create tabs that appear next to one another and load separate content when clicked... like a menu.

  26. Well, that's a different issue. You are going to need to use either a flash or jquery to accomplish this.

    I misunderstood what you were trying to do.

    If you want to use tabs as dividers, and then use the tabs up top to "link" to the content in different parts of your page, we can do that.

    But as far as "loading" different content.... it's going to be much too advanced to cover in a forum.

  27. Tony
    Member
    Posted 2 years ago #

    Thats such a let down :( ... What do you suggest I do?

  28. jason_lane
    Member
    Posted 2 years ago #

    Tony, what I would suggest at this point is to first get the tabs working without icons. There's a fair bit involved in properly implementing tabbed content (eg. Javascript stuff). You said you've tried a bunch of plugins, and I assume you meant plugins for adding tabs to posts/pages (there are several). You should choose one that you like, and that will give you the underlying tab functionality that you want. Preferably choose one that allows you to insert custom CSS, although it's not totally necessary. Once you have the page setup with your tabbed content, you can then add the icons fairly easily with CSS (either through the plugin or as you've already done above). Assuming that the tabs have a CSS class of "tab" and if a particular tab has an ID of "tab_baseball" (hopefully the plugin allows you to specify an ID), then a simple example of CSS could look like:

    .tab {
       padding-left: 32px; // This will apply to all tabs with class of "tab"
    }
    
    #tab_baseball {
       background: url('path/to/icon.png') 0 0 no-repeat;
    }

    There are more advanced ways to do this with CSS, but that's a simple example that should work.

  29. Sorry :/

    Well, there may be a plugin which will do something similar to what you are trying to achieve.

    I would look at custom slider plugins. Here are some basic search results:

    http://wordpress.org/extend/plugins/tags/slider

    Alternatively, you could create all the content on one page, leave your icons as they are at the top, and create in-line links which "scroll" the page down to where you want a new section to begin.

  30. Tony
    Member
    Posted 2 years ago #

    @jason_lane - could you please suggest a plugin that I can try your approach with?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.