Tagged: , , , , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 16, 2016 at 6:20 pm #649347
    MindSpark

    Hi.

    I am doing some advanced CSS where I have inserted a custom header widget. The widget displays 3 separate buttons, but I only want certain buttons visible on certain pages. Here is what I have set up:

    Custom header widget contains 3 buttons:

    <a href="#">Florida</a>
<a href="#">Kentucky</a>
<a href="#">Texas</a>

    My parent / child page structure:

    Page 1 > Florida
    – Page 1a
    – Page 1b
    – Page 1c

    Page 2 > Kentucky
    – Page 2a
    – Page 2b
    – Page 2c

    Page 3 > Texas
    – Page 3a
    – Page 3b
    – Page 3c

    What I need is to show certain buttons in the custom header widget area depending on which page the user is on. For example, if the user is on Page 1 > Florida, then they should only see the ”Florida‘ button. I can achieve this like so:

    .page .page-child .parent-pageid-14 #header-button-ky,
.page .page-child .parent-pageid-14 #header-button-tx { display: none; }

    What I would like to do instead – if possible – is to use CSS to selectively display a specific button in the header widget area based on its parent page id

    Since each of my parent pages have subordinates, how can I write the CSS so that on Page 2 > Kentucky and all of its sub-pages, the user only sees the Kentucky button? Call for the specific page id using CSS works fine, but is there a way to call pages and sub-pages in a more broad manner, sort of like using categories with posts?

    here is the dev URL: http://mindsparklabz.com/dev/dinosaur/florida/

    thanks in advance for your help!

    • This topic was modified 8 years, 6 months ago by MindSpark.
    June 20, 2016 at 4:37 am #650569
    Ismael

    Hey MindSpark,

    Thank you for using Enfold.

    We checked the site and I guess you managed to do it with the following css:

    .page-id-14 #header-button-ky, .page-id-14 #header-button-tx {
    display: none;
}

    There are other ways that you accomplish this but what you’re doing right now is enough.

    Best regards,
    Ismael

    June 21, 2016 at 10:48 pm #651767
    MindSpark

    I guess you missed the part asking about assigning something to parent pages that can be used in CSS so that all subordinate pages get the same treatment. The idea here is to NOT HAVE TO WRITE A NEW LINE OF CODE EACH TIME A NEW CHILD PAGE IS CREATED.

    Taking my example further –

    What I would like to do is assign something like a category to 3 parent pages: FLORIDA, KENTUCKY and TEXAS. Let’s say that the ID #s go like this:

    FLORIDA – 110
    KENTUCKY – 210
    TEXAS – 310.

    Then let’s say that parent page Florida has 3 sub-pages like this (uses actual page IDs):

    FLORIDA (page id 14)
    – Dino Gem Excavation (page id 153)
    – Fossil Dig (page id 156)
    – Location & Contact (page id 174)

    Is there a way to make the following CSS apply to page id 110 AND ALL OF ITS SUBORDINATE / CHILD PAGES without having to write any new CSS?

    .page-id-14 #header-button-ky, .page-id-14 #header-button-tx {
    display: none;

    The point here is to write the selective CSS once for each of the 3 parent pages, that way new sub pages can be added later without updating or writing new CSS.

    As a reminder, the URL: http://mindsparklabz.com/dev/dinosaur/florida/

    June 24, 2016 at 4:44 am #652798
    Ismael

    Hi,

    Alright. Set the display property of the buttons to none via Quick CSS field then add this in the functions.php file:

    // custom script
add_action( 'wp_footer', 'ava_custom_script' );
function ava_custom_script() { ?>
	<script type="text/javascript">
	(function($){
		function j() {
			var url = window.location.pathname;

			if (/florida/i.test(url)) {
				$('#header-button-fl').css('display', 'block');
			} else if (/kentucky/i.test(url)) {
				$('#header-button-ky').css('display', 'block');
			} else if (/texas/i.test(url)) {
				$('#header-button-tx').css('display', 'block');
			} else {
				return;
			}
		}

		j();
	})(jQuery);
	</script>
	<?php
}

    Best regards,
    Ismael

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