In PebbleJS, can you colour menu items individually? As far as I know, you can only colour the entire menu.
An example of what I would like to do would have the first menu item green, the second blue, the third yellow and so on.
A menu is a type of Window that displays a standard Pebble menu on the screen of Pebble.
Just like any window, you can initialize a Menu by passing an object to the constructor or by calling accessors to change the properties.The properties available on a Menu are:
sections Array [] A list of all the sections to display.
backgroundColor Color white The background color of a menu item.
textColor Color black The text color of a menu item.
highlightBackgroundColor Color black The background color of a
selected menu item. highlightTextColor Color white The text color of a selected menu item.
A menu contains one or more sections.The properties available on a section are:
items Array [] A list of all the items to display.
title string ‘’ Title text of the section header.
backgroundColor Color white The background color of the section
header. textColor Color black The text color of the section header.
Each section has a title and contains zero or more items. An item must have a title. Items can also optionally have a subtitle and an icon.
So from the docs it looks like the menu only allows for entire menu coloring, however you can include multiple sections in a menu, and each section can define its own colours, although this may mean you'd have a menu made up of multiple single items each with their own title, effectively doubling the size of the menu simply to get different colours in there. It looks like you can have a section with a title and zero items, so perhaps the section itself could act as the menu item.
You'll have to play around with that.
Related
I'm trying to make it so that when the white section of the page at https://staging8.nex.io/ touches the menu items, those <a> tags turn the color #141414. Then, when you scroll past the section, they turn back to #fff as the default color. How can I achieve this?
Have a look at IntersectionObservers, and create as many of them as you have white divs.
if your site needs to support IE11, you'll need to polyfill intersectionObserver
( source )
This is the Example UI.
So, the results I want:
Accordion (expand/collapse) blue circled sections, and level 1 (##level1) to be the title and closed all the time when we scroll down or click on, it should expand and get active on whatever line we are.
And when we scroll, it should inactive state as usual, but when we come to the 2nd section, the first stay there and 2nd expands auto and that happens to that too.
Also, I want the content to be shown only for the expanded section when we go at the end, there should be previous and next section title and link. which will lead us to that, but the page should stay the same.
This is on the roadmap for implementation as part of the brand new Material for MkDocs Insiders: https://squidfunk.github.io/mkdocs-material/insiders/#prairie-fire
This problem could not be only for the WordPress cms, but also any other page.
I need assistance using the WordPress storefront theme/woocommerce via styling specific page children.
There are three categories in the navigation tab for someone to hover over where a dropdown list will occur for each tab with different pages/items related to the category being hovered over.
All the pages within each tab/category on the nav bar should have a different background.
Example: If I hover over a nav tab "shoes" a drop down list will show different several shoe brand: Nike, Adidas, Sketchers. All the pages that are on the Shoe tab should have the same background color of red.
Another nav tab might be Hats whereon after hovering a drop-down list of several hat brands show. All the pages in that hat tab should have the same background color of blue because it is of the hat tab.
I do not see any html tags in the DOM with specific classes to put css so all page elements will get the same effect.
Example:
.container .hats {
background: blue;
}
There are no elements where I can apply the styles to. if I just used .container, then all pages will get the same color.
Any help?
EDIT
My bad, I was not specific in my question.. It is not changing the nav background colors ex: but when the user clicks on a specific brand "nike" under the main tab "shoes", the page that that gets loaded into the browser will display products of nike in a red background.
I found another post which helped in changing the specific CSS.
Change CSS when the current URL contains a certain string
Using JavaScript, you are able to search for specific parts of the url.
If the URL contains the term or index you want, you can make changes the elements on the documents.
<script type="text/javascript">
$(document).ready(function () {
if (window.location.href.indexOf("hats") > -1) {
$(".site-content").css("background-color", "red");
} if (window.location.href.indexOf("shoes") > -1) {
$(".site-content").css("background-color", "green");
}});
</script>
The downside I noticed was that the page does not update the specified css immediately but a small delay is seen between the background color change.
Alternatively, you can use plain css targeting the product class in the body for each item. It will be tedious if you had a lot of pages, but the provides no delay in changing the background colors from default to the set value.
I have a .body-text div which has a bunch of content, with specific sections. As I scroll from one sub <div> in .body-text to another, I would like to apply a different color to an <a> tag in my navigation div, and similarly unapply a color to another <a>. How do I keep track of scrolling positions? Here is my pseudo real world scenario:
http://jsfiddle.net/ebbnormal/r9cf7qu4/17/
When I go from #cecil to #braxton i would like to apply color:yellow to #braxton_link and make #cecil link white.
I've been given a design to build that uses a tabbed navigation structure, which I've built thus far using jQuery UI's tabs plugin.
So far, so good. Alas, I'm trying to style the tabbed element itself such that the currently selected tab (li.ui-tabs-selected) has a white background and the two other tabs have a green background -- but, and here's the sticky part, each has a different shade of green.
Put another way:
I have three list elements, all with class .ui-state-default. The selected one is given the extra class .ui-tabs-selected and is white; the unselected ones are two shades of green, with the lighter shade always further to the left, and no two tabs the same colour (i.e., one each of white, dark green and light green), regardless of which is selected. How do I make the non-selected tabs two different colours when they both have the same classes?
Thanks!
So, what you need is this:
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs ul li').each(function(count) {
$(this)
.removeClass('tab0 tab1 tab2 tab3 tab4')
.addClass('tab' + abs(ui.index - count));
}
});
The class tab0 is for the selected tab, tab1 for the one next to it, and so on.
What this does is every time a tab is selected, remove all classes from the li and add one based on the (ui.index - count). This is 0 if ui.index = count (the selected tab is the one we are currently handling), 1 if the distance is 1, and so on.