Premium WordPress Themes and Support

Home Forums General WordPress Use own css in WR-Pagebuilder

This topic contains 4 replies, has 2 voices, and was last updated by  Luc Malmendier 2 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #3237

    Luc Malmendier
    Participant
    WP Private
    Post count: 37

    Hi,

    i just tested the WR-Pagebuilder Plugin. Works all fine, but i doesnt understand how to use the advanced css classes.

    Let me explain:

    I use a accordion and add an own css class “myaccord” unter advanced Styling..

    Than i add a new “myaccord” class in my style.css from the theme. This is the class:

    .myaccord {
    background-color: #FF0000;
    }

    This works fine – The whole accordion has a red Background now 😉

    But how can i edit the Colors and Fonts of the heading area and Content area of the accordion?

    Can sobody post me a sample class?

    I know some People here use WR-Pagebuilder. Hope for some help…

    Thank you

    #3238

    Nick
    Keymaster
    WP Colonel
    Post count: 721

    What you are trying to do, cannot be done the way you want it. Don’t get me wrong, it can be done, but not with the way you are thinking. So, we will need to adjust how to approach this.

    – First of all, the custom class name you are inserting in the advanced css classes, are applied only to the accordions wrapping div, and that’s it. You want to apply a class to the header part of the accordion, which is not possible with WR Page Builder.

    – So, if it’s not possible to create a custom class for a specific object of a module (like the header of an accordion, the header part of a tab, etc…, the only way to accomplish your goal, is not to make a custom class, but to overwrite the class that controls that part of the object.

    – There are 2 ways that you can do that. The hard way – use your browsers development tools, or firebug, etc… to figure out the class that controls the object you want to manipulate, and figure out the css rules to accomplish your goals, or,

    – Use microthemer.

    I will have a video within an hour or so to show you what to do, and how to do those things. You are going to see how easy it is to do what you want – and yes, WR Page Builder is awesome, I can do things with it that Siteorigin and countless others can not even imagine it can be done!

    #3239

    Nick
    Keymaster
    WP Colonel
    Post count: 721

    Ok, the short story – just apply these CSS settings:

    /* Accordion Title */
    h4.panel-title a {
    color: #FFFFFF !important;
    background-color: #FF0000 !important;
    }

    If you want to see how I came up with these settings watch this video:

    http://www.youtube.com/watch?v=Qg48zZ0YRAI&feature=youtu.be

    To see the live site (without these settings), go to:

    http://quickerthemes.com/dallas2/page-builder-2/

    #3240

    Luc Malmendier
    Participant
    WP Private
    Post count: 37

    Hi Nick,

    thank you 😉

    Microthemer is nice. Have to Test it!

    But what you say is correct. The Pagebuilder set the class to the wrapper. But “Short Codes Ultimate” does the same, but here i can Change anything (Header, Content and so on) via “Sub Classes” of the “Main Class” in the Wrapper…But you have to know how to Name it…

    But i think with microthemer i can find some more Infos 😉

    Thanks for the link!

    #3247

    Luc Malmendier
    Participant
    WP Private
    Post count: 37

    Because i hate it when somebody has a Problem, but after he solves it he post no solution…here is it 😉

    For the heading, you can use this code :
    .myaccord .panel-title {
    … /* your CSS property goes here */
    }
    and for the content part :
    .myaccord .panel-collapse {
    … /* your CSS property goes here */
    }

    This Comes from the Plugin Author 😉

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.