WordPress.org

Ready to get started?Download WordPress

Forums

Tabby Responsive Tabs
[resolved] Accordion toggle arrow (9 posts)

  1. awilson3rd
    Member
    Posted 3 months ago #

    Hello,

    I have made some changes to the CSS so that the accordion shows by default on all screen sizes. I have also adjusted the coloring of the according. But, I cannot locate an image (or other element) that controls the up and down arrow for the accordion. Can you let me know what the css is for this.

    Thanks

    Andrew

    http://wordpress.org/plugins/tabby-responsive-tabs/

  2. cubecolour
    ɹoʇɐɹǝpoɯ
    Plugin Author

    Posted 3 months ago #

    please provide a link to your site

  3. awilson3rd
    Member
    Posted 3 months ago #

    I can't - it's developed locally.

    Thanks

    Andrew

  4. cubecolour
    ɹoʇɐɹǝpoɯ
    Plugin Author

    Posted 3 months ago #

    The two rules that govern this are:

    .responsive-tabs__heading:after {
    
    		border-top: 6px solid #444;

    and for the currently selected one:

    .responsive-tabs__heading--active:after {
    		border-bottom: 6px solid #404040;
    }
  5. awilson3rd
    Member
    Posted 3 months ago #

    Hello and thanks for the reply.

    I have used the code you mentioned to change the color of the actual accordion background but the problem I have is that I cannot see the 'up' and 'down' arrow that changes when a tab is open or closed and I cannot find a reference to it in the CSS.

    Thanks

    Andrew

  6. cubecolour
    ɹoʇɐɹǝpoɯ
    Plugin Author

    Posted 3 months ago #

    These are the rules that you need to alter to change the colours of the arrowheads. These two rules will not change the colours of the accordion background, so I am not sure what you are referring to.

    If you used the recommended method to use custom css for the tabs, you can change the colours given in these two rules to customize the arrowheads for the accordion tabs in the normal state and when active.

    As I cannot see your site I cannot give you any suggestions for what to change these values to.

    How have you implemented the custom css for the tabs? Is is by using the method described on the plugin page ie by prevent the built-in styles from loading, copying the contents of the plugin's stylesheet into your child theme or custom styles plugin and making the changes to that? or did you make the changes by some other method.

  7. awilson3rd
    Member
    Posted 3 months ago #

    Thanks Michael,

    I think I will back track and start again. All of the changes I have made were made to the actual tabby CSS and not in the theme. I didn't actually make any changes to the arrow heads so I am not sure what is wrong but will let you know once I have started again.

    Thanks for the time and for your help.

    Andrew

  8. cubecolour
    ɹoʇɐɹǝpoɯ
    Plugin Author

    Posted 3 months ago #

    You should never make changes to the code of any plugin unless you are forking the plugin into a new version with a different name. Otherwise any changes you make will be lost on the next plugin update.

    The css to draw the arrowheads in the plugin uses the top or bottom border (depending on whether it is the active tab or not) of an otherwise invisible pseudo element. This is the same technique that Chris Coyier describes at http://css-tricks.com/snippets/css/css-triangle/

  9. awilson3rd
    Member
    Posted 3 months ago #

    Thanks,

    I have managed to sort it out step by step.

    I know I shouldn't make changes to the code but I have the original and when I used inside the actual theme it broke.

    Thanks again for your time.

    Andrew

Reply

You must log in to post.

About this Plugin

About this Topic