New skin - problem with channel-tabs

  1. 4 years ago

    [deleted]

    30 Apr 2015

    I just finished editing my skin for my esoTalk website! It's a new beekeepers community. Here it is:
    http://www.forumapicoltura.com/
    Let me know what do you think!

    Now, the problem:

    problem-channels-tabs.png

    If you go here you can see it by yourself. Just mouseover it. Why? How could I fix this problem? Someone willing to help? Thank you a lot in advance for any reply!

    edit: only happen with Firefox! I tested also Safari and Chrome.

  2. [deleted]

    30 Apr 2015

    Hmm. It appears to be working for me in Safari and several versions of Firefox. Can you give some more information maybe?

  3. [deleted]

    30 Apr 2015

    It doesn't happen on my second computer using Firefox. Strange. Basically when I mouse-hover channels names they float around casually. Ok, just a second that I'm going to post a screencast using Screen-O-Matic!

  4. Have a question, where did you find this skin? Or did you actually make it yourself?
    It really looks nice the way the channels are on the homepage

  5. [deleted]

    1 May 2015

    I created it in one day messing up with the code. For the channels I just added the bootstrap.css file and some grid system editing the /channels/list.php file of esoTalk and then adding some CSS rules to the skin in order to make it work the way I wanted. Here is my list.php edited file if you want to check the code I actually used:

  6. @Dakoom I appreciate it but where would I begin? :)

  7. [deleted]

    1 May 2015

    @Tech you should first download Bootstrap (http://getbootstrap.com/getting-started/ ), then upload bootstrap.css or bootstrap.min.css to your server (I uploaded it on core/skin/). After that you should add the file call on core/views/default.master.php in the <head> section.

    <link rel="stylesheet" href="http://www.forumapicoltura.com/core/skin/bootstrap.css">

    I edited the Bootstrap CSS file to change the width of the .col-md-6 (so you'll have to search in the CSS file for that id and change its width to 30%). Like this:

    .col-md-6 {
        width: 30%;
    }

    Then you can try uploading my file to your core/channels/ folder and see what happens. I also modded the Bootstrap .thumbnail CSS id in order to add the background image that is changing on mouse-hover. If you view-source in my forum you can find the definitions in the code. If you have any problem let me know!

    I have to say that this modification is not a well done mod. It has bugs... if you resize the browser window you can see them. The grid is not working as great as it should. But for now I'm happy with it. :)

  8. [deleted]

    1 May 2015

    @Dakoom I edited the Bootstrap CSS file to change the width of the .col-md-6 (so you'll have to search in the CSS file for that id and change its width to 30%). Like this:

    .col-md-6 {
        width: 30%;
    }

    You really shouldn't do that, Bootstrap is based off of 12 columns so if you want three columns to appear correctly with the correct padding and sizing, just use .col-md-4 (4+4+4=12). This way you don't have to alter their css and you can be certain it works under various conditions.

    You'll also want to make sure there is a <div class="container"> around the columns to be sure the area they're sitting in is the right size.

  9. [deleted]

    1 May 2015

    @jsonnull You really shouldn't do that, Bootstrap is based off of 12 columns so if you want three columns to appear correctly with the correct padding and sizing, just use .col-md-4 (4+4+4=12). This way you don't have to alter their css and you can be certain it works under various conditions.

    You'll also want to make sure there is a <div class="container"> around the columns to be sure the area they're sitting in is the right size.

    Nooooo! LOL
    That was what I was missing! The container! Argh! I edited the CSS because I tried a lot of solutions but they were not working! None of them! Doing that way now it works. But I will need to recode it using the .col-md-4 as you suggested. Thank you a lot for your help one more time, @jsonnull !

  10. [deleted]

    1 May 2015

    @Dakoom haha, happy to help! :)

  11. [deleted]

    1 May 2015
  12. [deleted]

    1 May 2015

    @jsonnull @Dakoom haha, happy to help! :)

    Thank you man. About this problem: http://esotalk.org/forum/conversation/post/8221 do you have some ideas I could try to fix it? I also tried to clear the browser cache too. And, as said, it only occur in my second compoter' browser (Firefox).

  13. [deleted]

    1 May 2015

    @Dakoom Sorry, not right now. I've looked at it in all my browsers and I can't reproduce.

  14. [deleted]

    1 May 2015

    @jsonnull @Dakoom Sorry, not right now. I've looked at it in all my browsers and I can't reproduce.

    Ok, I will let the time pass hoping on some inspirational thing coming to me that will let me understand how to fix it (as for now I really have no idea why it is occurring and how LOL). Thank you again for your replies, @jsonnull !

  15. Ok Dakoom so now I will wait until instructed what to do next as Json is stating there is simpler or a much more stable way?

  16. [deleted]

    1 May 2015

    @Tech Ok Dakoom so now I will wait until instructed what to do next as Json is stating there is simpler or a much more stable way?

    Hi Tech, all you will need to do then is change the .col-md-6 to .col-md-4 and use <div class="container"> around the columns as said by jsonnull, I mean always in the list.php file. And obviously, don't edit the Bootstrap CSS file as I wrote previously.

  17. Edited 4 years ago by Tech

    I really like this idea I haven't yet done anything but here is an example of what I would really love someone to do plus this is Dakoom who has inspired me in this type of skin.

    box_channels.png

  18. Deleted 4 years ago by Tech
  19. [deleted]

    1 May 2015

    @Tech why would you add the total users per channel? This make no sense for me.
    About adding the forum title where you want it: this should be easy to do. Just add something like this in default.master.php or in channels/list.php:

    <div id="forum-title-centered">My Forum Title</div>

    and add some CSS to the style.css file:

    .forum-title-centered {margin-left: auto; margin-right: auto; font-weight: bold}
  20. Here is similar to what I was saying (the users are only who are browing currently this specific forum in this channel/sub channel.

    box_subchannels.png

  21. Newer ›
 

or Sign Up to reply!