Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi all,
Vanilla are planning an update to the site on April 24th (next Wednesday). It is a major PHP8 update which is expected to boost performance across the site. The site will be down from 7pm and it is expected to take about an hour to complete. We appreciate your patience during the update.
Thanks all.

jquery mobile collapsible, wanna get rid of header "glow"...

  • 20-02-2015 10:14pm
    #1
    LordNorbury
    Closed Accounts Posts: 1,143 ✭✭✭


    Hi folks,

    Am cruising nicely along my new jquery mobile learning curve, I'm using JQM 1.4.5, I have a collapsible on my view, I can't seem to get rid of this "glow" that is on the header, I've tried the following in my CSS:

    [HTML]
    .ui-collapsible-header {outline: none;}
    .ui-accordion-header {outline: none;}

    .accordion a:focus
    { outline: none; }
    .accordion a:active
    {outline: none;}
    [/HTML]

    Have also tried

    style="-moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important;" in my collapsible DIV view and also tried forcing it to style like this using a <h3 style="-moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important;"> in my collapsible code in my view but to no avail...

    Have tried Googling the shít out of this but no luck, am hoping someone can point me in the right direction!

    EDIT: also tried: data-iconshadow="false" although I think this is for something else like a background shadow, not an outline "glow" as I am trying to get rid of.
    339569.png


Comments

  • #2
    LordNorbury
    Closed Accounts Posts: 1,143 ✭✭✭LordNorbury


    OP here, also tried rebuilding my theme using themeroller to see if I could turn off this "glow" there but it seems that you can't do that.


  • #3
    colm_c
    Registered Users Posts: 2,030 ✭✭✭colm_c


    Can't you just inspect element in Chrome / Firefox and see what the rule is and over ride it in your custom CSS?

    Bear in mind on some browsers, the 'glow' is a focused element which you can't do much about.

    Are you seeing this on real devices or just your desktop browser?


  • #4
    LordNorbury
    Closed Accounts Posts: 1,143 ✭✭✭LordNorbury


    colm_c wrote: »
    Can't you just inspect element in Chrome / Firefox and see what the rule is and over ride it in your custom CSS?

    Bear in mind on some browsers, the 'glow' is a focused element which you can't do much about.

    Are you seeing this on real devices or just your desktop browser?


    Yeah it's not visible now on my iPhone but on my desktop it is still there...


  • #5
    Talisman
    Registered Users Posts: 5,999 ✭✭✭Talisman


    The CSS rules are applied in the order which best describes the element. If two rules are the same then the second rule overrides the properties set by the first.

    A style rule in the theme CSS file such as 
    .ui-page-theme-a .ui-btn:focus {}
    would better describe the element than your rule 
    .accordion a:focus {}
    if there was an enclosing container with the class ".ui-page-theme-a". The use of such theme classes is how the theme style is applied in jQuery Mobile.

    Have you checked for such rules in the provided theme styles? You'll need to override it with your own rule.


  • #6
    LordNorbury
    Closed Accounts Posts: 1,143 ✭✭✭LordNorbury


    Talisman wrote: »
    The CSS rules are applied in the order which best describes the element. If two rules are the same then the second rule overrides the properties set by the first.

    A style rule in the theme CSS file such as 
    .ui-page-theme-a .ui-btn:focus {}
    would better describe the element than your rule 
    .accordion a:focus {}
    if there was an enclosing container with the class ".ui-page-theme-a". The use of such theme classes is how the theme style is applied in jQuery Mobile.

    Have you checked for such rules in the provided theme styles? You'll need to override it with your own rule.

    Gonna check this now, thanks for the heads up!


  • Advertisement
Advertisement