Support » Plugin: Admin Page Framework » html content with bootstrap css

  • Resolved Joey George

    (@csine)


    I am creating a Help tab with presentable bootstrap content. When I include the bootstrap css via normal wp-enqueue-style method, it conflicts with APF styles, and content does not render p, ul, li, etc. with bootstrap styles.

    How can I override this?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author miunosoft

    (@miunosoft)

    The styles added by Admin Page Framework is not flexibly modified with the current design.

    I can suggest something but do you want to disable the entire framework styles or just a part of it?

    Part of it I guess. Only the ones that affect the main html tags – like body, p, a, li, etc.

    Plugin Author miunosoft

    (@miunosoft)

    With the given information, I cannot tell which CSS rules you want to remove. You can use Google Chrome or FireFox to inspect which CSS rules are conflicting.

    1. In your browser (Google Chrome is recommended), right-click on the area you want to inspect and select Inspect or Inspect Element (FireFox)
    2. Find and select the element you want to inspect in the Element tab.
    3. In the Style pane, you can directly modify the applied CSS rules. There, it tells which styles are taking effect.
    4. Then you can tell which one causes the conflict.

    To remove all the styles added by the framework, try the followings.

    You can use the style_common_{class name} and style_ie_common_{class name} filter hooks to modify CSS rules specific to the base factory type.
    . In your setUp() method add these lines to remove them.

    
        public function setUp() {
    
            ...
            add_filter( 'style_common_' . get_class( $this ), '__return_empty_string' );
            add_filter( 'style_ie_common_' . get_class( $this ), '__return_empty_string' );
            ...
        }
    

    However, CSS rules for the form elements are not removed yet. You can do something like this.

    
        public function setUp() {
    
            ...    
            add_action( 'admin_print_styles', array( $this, 'removeInternalFormStyles' ) );
            ...
        }
    
        public function removeInternalFormStyles() {
            $this->oProp->bShowDebugInfo = false; // probably you want this when you disable the form styles; otherwise, remove this line
            $this->oForm->setResources( 'internal_styles', array() );
            $this->oForm->setResources( 'internal_styles_ie', array() );
        }    
    
    

    These should remove the CSS rules used by the framework. If the elements you want to display are still not showing by doing this, then it might not be the framework styles that conflict with your CSS bootstrap.

    Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.