Home Forums Weaver Xtreme Theme Issue with CSS styling using Weaver Xtreme and Xtreme Plus plugin

This topic contains 7 replies, has 3 voices, and was last updated by  RonaldBrinkNL 9 months, 1 week ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #52798

    RonaldBrinkNL
    Participant

    Hi, hopefully somebody can help me out on the following issue on the website : kruijerhomeopathie.nl
    The problem is about the different colors used in the “dutch” pages of “Klassieke homeopathie” and “Verlies- en rouwbegeleiding”,
    and occur when choosing the news item on the latter page sidebar.

    I am using Weaver Xtreme with the Xtreme Plus pluging (both at the current level).
    Below you see the CSS rules I have placed added to the Weaver Xtreme options => Custom Options.
    The reason for these rules is to display the “rouwverwerking” pages on my website with different colors
    in the header, menu, primary sidebar and footer.

    /* CSS+ Rules */
    #content {padding-top:15px;}
    /* RB 28-07-16 color settings for homeopathie NL pages */
    /* Currently these styles are also used for US and HE pages */
    .nlhp_areasstyle #wrapper {background-color:#FAF4EA;}
    .nlhp_areasstyle #header {background-color:#FDDFBB;}

    /* RB 28-07-16 color settings for rouwverwerking NL pages */
    /* Currently these styles are also used for US and HE pages */
    .nlrv_areasstyle #wrapper {background-color:#FAF4EA;}
    .nlrv_areasstyle #header {background-color:#BCDEEA;;}
    .nlrv_areasstyle .wvrx-menu-container{background-color:#BCDEEA;}
    .nlrv_areasstyle #container {background-color:#F4F9FD;}
    .nlrv_areasstyle #content {background-image: url(“http://www.kruijerhomeopathie.nl/wp-content/uploads/2016/07/rvboom-1.jpg”);background-repeat: no-repeat;background-position: right bottom;background-color:#F4F9FD;}
    .nlrv_areasstyle #colophon {background-color:#BCDEEA} /* RB : Footer area */
    .nlrv_areasstyle #primary-widget-area {background-color:#BCDEEA} /* RB : First Side bar */
    .nlrv_areasstyle #wrapper .widget{background-color:#BCDEEA} /* RB : Individual Widgets */

    In order to make that work I have added the names of these css classes to the specific wordpress pages in the “Per Page Body Class” entry of the page.
    So far so good : the appropriate pages are indeed displayed with different colors.
    However … this mechanisme fails when dispaying wordpress Posts on the pages :
    As soon as a post is being displayed the menu, primary-side bar and footer are displayed with the standard/default colors as defined for these widgets in the Weaver Xtreme “Sidebars & Layout” and “Menus” options

    Well, I thought, this is because I am not able to specify css class names to Posts with only Weaver Xtreme, so I activated the Xtreme Plus plugin in order to make that possible.
    But, unfortunately … adding the name of a above css class to a Post does not display the widgets in different colors as defined ???

    Can anyone give me some hints on this to resolve this issue.

    Regards, Ronald Brink

    #52799

    Weaver
    Keymaster

    It is something you are doing. I assume you have a plugin or custom PHP code to add the class nlrv_areasstyle to the http://www.kruijerhomeopathie.nl/nl/verlies-en-rouwbegeleiding/ page, and in fact your custom rules are being applied there. This is its <body> tag:

    <body class=”page-template-default page page-id-27 page-parent singular not-logged-in weaverx-theme-body is-menu-desktop is-menu-default nlrv_areasstyle weaverx-page-page weaverx-sb-right”>

    On the other hand, the http://www.kruijerhomeopathie.nl/nl/klassieke-homeopathie/ page has this body tag:

    <body class=”page-template-default page page-id-18 page-parent singular not-logged-in weaverx-theme-body is-menu-desktop is-menu-default nlhp_areasstyle weaverx-page-page weaverx-sb-right”>

    Note the nlhp_areasstyle class.

    I don’t know for certain who and how these classes are being added to the <body> tag, but your rules will work only when nlrv_areastyle is there.

     

    #52801

    RonaldBrinkNL
    Participant

    Hi Weaver, I’m afraid I don’t understand your reply.
    Both classes have been defined within Weaver Xtreme options => Custom Options.
    Both pages you are referring to are referring to these classes using the“Per Page Body Class” entry of the page.
    And because of that both pages are correctly displayed with the intended colors on the widgets etc.

    The problem occurs when you click the “Praten …?” item in the primary side-bar. This then display the Post relating to this item.
    However as standard wordpress Post do not have a “Per Post Body Class” as pages do, I did install the Weaver Xtreme Plus plugin.
    With that plugin extra options are available for the Post and one of them is  “Add Classes to this post”, so I added the name of the nlrv_areastyle here, which I thought would then refer to the appropriate class. But when then the Post is displayed it apparently does not use this class.

    Probable I do misunderstand the usage of the “Add Classes to this post” option field.
    I have test to place the css rules into the first option available for Posts within the Xtreme Plus options available and this gives me
    the intended result. However now I do have to specify a bunch of rules in each and every Post instead of only refering to a class.

    #52803

    scrambler
    Moderator

    I believe the confusion comes from the fact that when you “add a class” to a post, the class is applied to the Post Container, NOT the post page body class.

    So the single post page does not get that class in its body tag, and you rules do not apply.

    To target the Single post page, use the post id class like

    .postid-220

    As an additional selector in your rules, this will make the rules also apply to the specified single post page.

    For example

    .nlhp_areasstyle #wrapper.postid-220 #wrapper {background-color:#FAF4EA;}

    #52808

    Weaver
    Keymaster

    Sorry – I thought you wanted the two pages you referenced to look the same, and tried to figure out why the were different color schemes.

    I missed that you wanted to apply the alternate color scheme to each post’s single page view – your later reference to “Praten …?” helped.

    I think Scrambler’s answer can help, but it is not necessarily an easy solution as you have to keep track of post ids.  Adding a way to add a class to body tag for the single page view might be possible, but I’m not sure if the content of a post is available when the single page view generates the <body> tag. If the content (or rather the Custom Field values), it would be possible to create a child theme or use the Weaver Xtreme actions/filters option to create a new wordpress filter to add a class for each post.

    But this is a bit too specialized top be added as a feature for Weaver Xtreme.

     

    #52814

    RonaldBrinkNL
    Participant

    Hi Weaver and scrambler,
    I leave it be then for now, because indeed with the solution Scrambler suggested, I have to keep track of postid’s which is not handy.

    #52821

    Weaver
    Keymaster

    I just had another issue involving adding a per post single view option. I think it will be possible to add a Per Post Single Page View <body> class option for posts as well. I will make another post if this turns out to be possible.

    #52825

    RonaldBrinkNL
    Participant

    Thanks, Weaver, that would be great ! Ronald

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

You must be logged in to reply to this topic.