I understand that when making a simple website it is better to only use one CSS file but I was wondering how do I do that if I want the layout of each page of my website to look slightly different?
For example, if you go a website such as nhl.com the home page has a different layout than the stats or standings page (other than the nav bar at the top).
There is no right or wrong here.
However, one way is to have some over-arching indication of what page is being shown.
In the case of nhl.com which you cite, in the body tag they have an id which indicates the current page.
For example:
<body id="homepage_index" class="lang-en_US league-nhl" data-app-ads="false">
<body id="scores_index" class="lang-en_US league-nhl" data-app-ads="false">
and so on.
Then for styling that is specific to a page you can add the id at the front of the selector.
For styling that is common to all the pages like the navbar in your case you don't put the id.
Related
I've a weird issue in my Drupal 9 website where a couple of regions (subfeatures and footer) get rendered differently in different pages with no consistent behavior.
They are loaded via the theme's default page.html.twig and should render inside the page js-layout wrapper as in below screenshot
But in some pages, it gets rendered outside the wrapper like in the below screenshot
This is simple website with no overrides on the theme level for the regions so this is quite strange
Without knowing the theme, it is difficult to give an answer. (Which theme is used, which templates (which Twig file provides the theme) and so on...
But let me try to give you a starting point:
Check all twig files of your theme
If there is a multiple for page, like: page.html.twig & page--article.html.twig. Then check the HTML structure for it
Check the region's conditions
In the page-twig templates, check if the HTML closing tags depend on the region conditions. Is there a condition that the div sometimes closes earlier?
I hope this will help you.
I'm beginner in web programing and I'have small problem with understanding of HTML5 tags. The main tag is for main content but filedset can be in this tag or main tag should be in filedset tag ?
And web site logo how tags I should set for this ? I should insert img in other div or I should set all tags from this div to img ?
https://jsfiddle.net/adriansikora344/5t0Lzs0y/
or
https://jsfiddle.net/adriansikora344/ug3adstu/
Main tag (quoted from w3c):
The content inside the element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
The fieldset tag is intended to group some form fields, so if you have a form in your web it's fine to get it wrapped by the main tag.
About the logo... This is a very open question. There is not a correct structure, I mean, depending on how you would like to organize contents or views you will need an HTML composition or another. I suggest you to try to create your page. Then, when you get stuck in some concrete problem, you can came back and create a new question with a detailed explanation of your problem and (this is important) an example of what are you tryin to accomplish your target.
I have a site that has multiple pages. The first page is just a listview with icons and links to the other pages. CSS stylesheets work fine on the first page, but when I go to one of the linked pages, my custom css stylesheet (and js for that matter), related to that page, is being ignored. If I look in the FF inspector I see that it has dropped the associated lines that tell it about my stylesheet. If I directly go to the desired page or if I hit refresh, the styles look fine, but whenever I come from a link off the first page, the styles are gone. I see no errors when loading the page. Is this a know issue? How can I force it to not ignore my stylesheets.
I am using jquery mobile 1.4.5 in addition to my own.
Looking further. It looks like hitting the link is appending the body of the 2nd page at the end of the first and not simply loading the 2nd page.
It turns out that by default links behave a little different than normal when using jQuery Mobile. The don't do a full page load, but instead only inject the part contained in a div marked with data-role="page". I did not know this.
http://demos.jquerymobile.com/1.1.1/docs/pages/page-links.html
I've recently started getting familiar with Atlassian Confluence (v. 3.3), but I'm having trouble understanding the best way to use page hierarchies within a space.
Within a space, pages can be located underneath the "Home" page, or one level higher, next to the home page. However, in the "Documentation" theme, the left sidebar page hierarchy is only shown for pages rooted below "Home". This means that the "Home" breadcrumb is always displayed when viewing pages that appear in the sidebar hierarchy.
So, what is the purpose of having pages on this top level? Should it be used specifically to hide pages from the sidebar hierarchy (like meta)?
Is it possible to have the sidebar hierarchy display for pages rooted next to Home (on this top level), instead of below it?
Is it possible to remove the Home breadcrumb?
How many of these questions are made irrelevant by later updates to the software?
The only real purpose I can think of for having a page on the same level as the home page would be to disclude it from a page-tree display starting at the home page. So if you have some pages you use for holding images, documents, testing content, et cetera then you would not want it to show up in the hierarchy viewed by regular users.
When you define a page-tree macro, or the children-display or anything similar, you can specify which page it is displaying the hierarchy from. If you want to use a page other than the home page, just specify it in the page-tree macro.
I don't believe it is possible to remove the breadcrumb, or at least I don't know how.
Software updates will maybe bring some other page-tree-esque options but won't fundamentally change anything else we're talking about here.
So, what is the purpose of having pages on this top level?
Specifically? You'd have to ask Atlassian.
Generally? The default configuration is that only pages from the specified Home page down are shown in the navbar.
Should it be used specifically to hide pages from the sidebar hierarchy (like meta)?
Yes. Any page which is used for navigation, control or configuration is stored at the top of the hierarchy. That way they don't show up in the navbar.
Using the {alias} macro will create a page in the top hierarchy.
If you use a page as input to your navbar then this page can be stored here out of user sight but still publically visible. So, if you had a page with lots of markup for a colourful and exciting navbar named SpaceNavigation then in the Documentation Theme Configuration you would have this code:
{include:SpaceNavigation|nopanel=true}
Is it possible to have the sidebar hierarchy display for pages rooted next to Home (on this top level), instead of below it?
Yes. Use the pagetree macro.
{pagetree:root=#none}
You can edit the space theme to show anything in the left navigation bar.
Browse > Space Admin > Theme > Configure theme
Untick the 'Page Tree' option at the top. Put your code to display content in the navbar in the navigation box.
If you want a pagetree somewhere in your custom navigation use the {pagetree} macro. You can set the root page to a page lower in the hierarchy. {pagetree:root=apple}
The {children} macro is also useful here.
The reporting macros can print a list of all pages in a space. You can build your own macro or import a wiki page to display as the navbar.
Is it possible to remove the Home breadcrumb?
This may need clarification. Are you looking to remove the breadcumbs or just the word 'home'.
Either way, the answer is 'JavaScript or CSS'.
If you are a space administrator you can add CSS styles to the space to disable CSS for the space from the header.
If you have the {html} macro or {style} then you can add styles and JavaScript to the wiki page.
If you are a wiki administrator, or have one on your side, then you can create a macro or plugin to put CSS or JavaScript code on the page.
Here is a code sample to find two classes on a page and after the page has loaded (document.ready) hide them.
{html}
<script type="text/javascript">
AJS.$(document).ready(function() {
AJS.$(".first").hide();
AJS.$(".second").hide();
});
</script>
{html}
This example will remove the word 'Dashboard' as it has the class of 'first'.
Go forth and write the code to find the objects that so draw your ire and vanquish them.
CSS is also an option and sometimes less messy.
Some CSS objects can be removed from the page from within the page. E.g:
{html}
<style type="text/css">
ol.breadcrumbs { visibility:none; !important; }
</style>
{html}
However, to remove objects at the top of the page you need to use javascript or put CSS in the space style sheet.
Browse > Space Admin > Stylesheet
How many of these questions are made irrelevant by later updates to the software?
It's pretty much the same. Some styles have changed. Some things have been moved around. The general look has changed.
Some of the style sheets have changed and they have said that they are looking to deprecate the Documentation Theme. However, given the community support for the Documentation Theme even if they remove it no doubt it will be available as a downloadable theme in V6.
If you are interested in looking at this yourself then you can download Confluence V5 with a trial licence or try their OnDemand free for one month.
Due to network or some other reasons, some sites do not have their css files loaded and you will see unformatted/un-layout-ed ugly page.
It happened to pages I did before also. Kind of beyond control from a developer/design point of view.
I'm thinking of something like this place at the top of the page and obvious:
/*.... header and stuff */
<body>
<h2 id="hiddennote">If you do not see this page properly, please refresh</h2>
/*.... rest of the page .... */
The external stylesheet have a definition like this:
/* other styles defined */
#hiddennote {display: none;}
Functionally I know it'll work. Any drawbacks?
Another potential drawback is that it depends on the user knowing what the page is supposed to look like. You could fix that by changing the language of the message to something like, "This page is not displaying properly! While you are free to use the content below, you may want to refresh your browser to try loading the layout and styling information." You could also include a screenshot, assuming your images are not hosted on the same troublesome network.
The obvious drawback is if the page fails to load the CSS the second time.