I have a list of categories and each category has its own label and icon on my homepage. Each category label/icon should be a unique colour.
This is easy via HTML:
<!-- ngRepeat: category in categories | orderBy:'display_priority' -->
<a ng-href="explore?category=53" ng-repeat="category in categories | orderBy:
'display_priority'" class="ui random-color item large label ng-binding ng-scope"
ng-show="hasCategory" href="explore?category=53" style="color:red";>
The UI is under development and this HTML is wiped with each UI update (regularly). Therefore, I am trying to achieve the same result via CSS.
I can change the colour of the category labels generically (i.e. make them all the same colour) with this code:
#front-page .ui.label {
color: #XYZ
}
Is it possible for me to change the colour of each label individually purely via CSS?
If the number of categories is limited then you could use a set of CSS3 nth-child pseudo classes to do this:
http://www.sitepoint.com/web-foundations/understanding-nth-child-pseudo-class-expressions/
You could also do this dynamically with JavaScript by enumerating the category DOM elements in a loop and then setting the css color of the element.
Related
Can I use id attribute with same value in many posts of blogger.
Example like:
Blogger post 1
<div class="panel-heading" id="myPost">some content</div>
Blogger post 2
<div class="panel-heading" id="myPost">some content</div>
Blogger post 3
<div class="panel-heading" id="myPost">some content</div>
And
Blogger post 6000
<div class="panel-heading" id="myPost">some content</div>
That's what I'm doing because css of myPost exist in blogger template not exist in posts of blogger.
CSS in template not in posts of blogger
<style> #myPost {background-color: red;} </style>
I am creating a dictionary blog. I don't want to change css many times in all posts of blogger. I want to change my css in blogger template. , I want to change background color of panel-heading which value of bootstrap 3. When I use class attribute 👈 this code not work of my css (myPost). When I use some content 👈 this code really work and change background color of panel-heading. Bootstrap panel-heading not have own more colours option.
You should not use an ID more than one time on a webpage. If you do, then you cannot target individual elements with that ID - only the first one will work.
Sometimes templates will insert the same ID over and over again, but that is not correct. Some of these templates have a way to unique-ify the ID, some don't.
Usually, you can use classes in much the same way that you use IDs. Classes do not need to be unique. If you are targetting an element via its class using javascript, you need to add [0] after the selector because classes return a collection instead of a string (even if there is only one name in the selection, it's still a selection/array)
To change the panel heading of all your posts:
.panel-heading{background: palegreen;}
If you wish to change each one individually, you can use something like:
.panel-heading:nth-child(2){background: palegreen;}
You can find a list of css color names here.
Hello I need to add some SEO text to one of my Webpage Menu Category.
The problem is that the ''Category'' is not a real category it is and URL Meny Type used for ''offers'' (All the products which includes a discount).
On these page I have no text nor info banner. Just products with discounts.
is there any way I could add at least a box so I can type a well structures SEO text?
Looking forward for you answwer
One way of crudely doing it, (if the page uses the category.tpl file) would be, open the category.tpl file within your theme directory, add a little smarty if statement to check the current category id? or category name, if it matches the desired page, your on.... then show a div with the required SEO text content, obviously not ideal & not dynamic!.. add style code to your css/global.css or css/category.css
to check if the page is using the category files: check the source code body tag!..
ie: body id="category" class="category category-227"
{if $category->id==YOURCATEGORY || $category->name==YOURCATEGORYNAME}
<div id="seoContent">
<p>SEO content!</p>
</div>
{else}
<!-- not required page -->
{/if}
I'm trying to recreate a similar look to the Windows 8 app view and I'm having an issue with the display. If your running Windows 8 and you're on the home page, just click the down arrow icon located at the bottom of the screen. This takes you to a list of all of the applications installed on your computer grouped alphabetically. This is essentially what I'm trying to recreate visually (only my data is not apps).
What I want:
I've created a grouped ListView (alphabetical) using the html/css/js method and what I get is close, but not exact. I get "A" followed by items that start with A.... then a new column "B" followed by B items... new column "C", etc. If there are only 2 "A" items I want "B" to show up next in the list. Not in a new column. Basically, I want to override the block formatting of the display but I can't seem to figure out how. I've played around with the DOM Explorer and there are so many classes and styles I haven't been able to figure out what needs to be changed.
What my app looks like:
Has anyone else done this? Does anyone have any suggestions I can try? Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Grocery List</title>
<link href="grocerylist.css" rel="stylesheet" />
<script src="/js/groceryData.js"></script>
<script src="grocerylist.js"></script>
</head>
<body>
<div class="grocerylist fragment">
<header class="page-header" aria-label="Header content" role="banner">
<button class="back-button" data-win-control="WinJS.UI.BackButton"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Grocery List</span>
</h1>
</header>
<section class="page-section" aria-label="Main content" role="main">
<!-- Template for the grouped headers for the list -->
<div id="headerTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div class="simpleHeaderItem">
<h1 data-win-bind="innerText: title"></h1>
</div>
</div>
<!-- Template for each item in the list -->
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div id="groceryNameTemplate">
<!-- Display the name of our food -->
<h4 data-win-bind="innerText: name"></h4>
</div>
</div>
<!-- Our list of available grocery items -->
<div id="groceryListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource : GroceryData.itemList.dataSource,
itemTemplate: select('#mediumListIconTextTemplate'),
groupDataSource: GroceryData.itemList.groups.dataSource,
groupHeaderTemplate: select('#headerTemplate'),
layout: { type : WinJS.UI.GridLayout },
itemsDraggable: true,
itemsReorderable: false }">
</div>
</section>
</div>
</body>
</html>
Code added as requested. I went through all of my CSS and 100% of it is style only (colors, fonts, etc) all placement and positioning is defined in the WinJS styles which come with ListView.
In essence, the Apps view is just a standard 2D grid layout in a ListView, laid out in vertical columns first, then horizontally.
The trick is that there are two different item types: a letter/header item and an app item. This means that your data source--which in this case can be a single WinJS.Binding.List, is a single list of the apps sorted alphabetically, with then header header/letter items inserted at the appropriate points before items that start with that letter. (Remember to use globalization-sensitive collation if you're sorting alphabetically.)
With such a list, however, you cannot rely on declarative templates for your rendering, because you need to render both types of items distinctly. For this you need to use an item rendering function instead of a template. Because the rendering function gets called for each item, it can check the type and dynamically render each one according to its data. In the Apps view, an App item would be rendered with an icon and name, whereas a header/letter would be rendered with just text. The item renderer also assigns appropriate behaviors, which in the Apps view is that app items launch the app and header items do a semantic zoom out.
A rendering function is really the approach to take whenever you have a standard layout--a GridLayout again in this case--but need per-item rendering control. (This is different from a custom layout that lets you depart from the non-standard layout algorithms, and of course a custom layout can also be combined with a rendering function.)
For all the details of rendering functions, check out chapter 7 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, specifically the sections "How Templates Work with Collection Controls" and its subsections on pages 364-376, and "Template Functions (Part 2): Optimizing Item Rendering" starting on page 414 if you want to go deeper, but probably isn't necessary for your scenario.
Custom layouts, just to note, are covered in Appendix B. Also, custom layouts only work with WinJS 2.0 on Windows 8.1; template functions work with WinJS 1.0 or 2.0 on 8.0 and 8.1 both.
Anyway, with per-item rendering via a template function, you can just create CSS as appropriate for the classes in each item structure you create, so you don't have to play games with the ListView's style hierarchy. You'll just want to make sure that your header/letter items have a suitable top margin to make the gap. Alternately, you could also have a gap item type in your data source that would render a blank space and not respond to any input. Also, you'll need to style the various selected, active, and hover states of the header/letter items to be all the same so they don't get highlighted like an app item.
The last note I'll make is that you don't need to use the GridLayout's grouping capabilities at all, because that forces the groups into new columns as you've observed. That's just its layout behavior when it has a group items source. That said, you could use a standard List for your app items and a create a group data source from it like you're doing, and then use a custom layout to handle the groups differently than the standard GridLayout. That should work as well, so it's really your choice in approach. I'd use this way if for some reason you can't get the header/letter styling to work with the template function approach, or if you're targeting Windows 8.0/WinJS 1.0 and not 8.1/2.0.
Hope that explains your options.
I have recently started to make some User Interfaces for Websites. What i am currently using something called Bootstrap, which is easy to start with and looks good. But the idea behind does not seem too efficient, since we are making our jsp code (the content) dependent on the css elements like this:
<tr class="row col-m-7">
<td class="column"> ...
<a class="btn btn-xs btn-success"> .. </a>
</td>
<td class="column"> ... </td>
</tr>
Recently the Bootstrap has introduced a newer version (v3), and i had to change many class attributes until the jsp gets a stable look. I would like to keep the code in separate layers for content and presentation like this, so i can easily switch my UI framework without loosing any content:
Content (simple html or jstl):
<tr>
<td>...
<td>...
</tr>
Presentation:
.. somehow achieving giving a good look to the table above .. (how ???)
How can i separate content and presentation layers on JSPs?
UPDATE
A new standard is being developed, called Web Components, which will enable developers to create custom html elements which hide the implementation of styling and inner html markup. For example, a modal widget could be declared by the following syntax:
<bootstrap-modal>
<h1>Hello World!</h1>
</bootstrap-modal>
Behind the scenes, the developer has specified the actual html markup used to render the widget, that implementation is tied to the custom component.
Here are a few tutorials to get you started:
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/#toc-separation
http://css-tricks.com/modular-future-web-components/
https://hacks.mozilla.org/2013/08/introducing-brick-minimal-markup-web-components-for-faster-app-development/
If all <a> elements were to look the same, then you could write one css class and all <a> elements would have the same styling:
a {
color:blue;
}
Some websites, for whatever reason, possibly even concerning the value of the href attribute; will want different colors and styling for different <a> elements. The only way to achieve that is with the class attribute which refers to a css class from a stylesheet:
a.red {
color:red;
}
<a class="red" href="red.html"/>
This means that if you want unique styling for same element names, you will always need to write code which links together the presentation element and the styling.
If I have a menu that is displayed at the top and bottom of a long HTML page and the DIV is setup with <div id="menu"><ul><li>Home</li><li>About</li></ul></div>
Can I just repeat this code at the bottom of the page? Or should the ID be a Class in this case?
I've read that ID should only be used once on the page.
Yes, an ID should only be used once. If you need both menus to pick up the same CSS settings, you can use <div class="menu"/> If many of their setting are the same, but some (such as the position) differ, you can use something like: <div id="top-menu" class="menu" /> and <div id="bottom-menu" class="menu" /> - this is quite a common usage, where the id controls the external position of an object on the page, which can often be unique, while a class controls its inner layout, which may be shared with other similar components.
W3 Schools has a good primer on class and id selectors: http://www.w3schools.com/css/css_id_class.asp
From their description:
The id Selector
The id selector is used to specify a style for a single, unique
element.
The class Selector
The class selector is used to specify a style for a group of elements.
Unlike the id selector, the class selector is most often used on
several elements.
This allows you to set a particular style for many HTML elements with
the same class.
An ID has to be unique within an element. This is what classes are for, if you need to reuse the ID name for whatever reason, change it to a class.
http://www.w3schools.com/tags/att_global_id.asp
<div class="menu"><ul><li>Home</li><li>About</li></ul></div>
IDs are designed to be exactly that - identifiers. You should have only one ID per document. If you need the same style applying to multiple elements, as you have correctly indicated, use a classname instead.
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
We can not repeat Same ID in page... Better to use class for the same...:)
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
Do IDs always have to relate to one element in CSS?
One element per page
What if that element is repeated on the page?
Then the HTML is invalid and you are depending on error recovery instead of expected behaviour.
If I have a menu that is displayed at the top and bottom of a long HTML page… Can I just repeat this code at the bottom of the page?
Not in an HTML document.
Or should the ID be a Class in this case?
Yes. A class a group of things that have something in common. An id identifies a particular thing. You have two menus that have something in common, use a class.
I've read that ID should only be used once on the page.
Correct
You can certainly use the id="" attribute as many times as you need, but the contents of the attribute should be unique. Not having a unique value is a HTML error.